Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Balk die zich aanpast aan resolutie.

None
9 antwoorden
  • Ik ben nieuw in webdesign, dus waarschijnlijk een hele makkelijke vraag voor ouwe rotten.
    Ik werk voornamelijk met Dreamweaver 8. Ik wil bovenin beeld een balk maken die op elke resolutie over de gehele breedte van het scherm te zien is. Nu heb ik twee dingen geprobeerd:

    1. Ik heb een layer gemaakt en die ingekleurd. Die layer kan ik een aantal pixels breed maken, maar ik wil dus die die breedte zich automatisch aanpast aan de resolutie van de kijker.

    2. Ik heb een klein gifje gemaakt in photoshop van 1x50 pixels afmeting. Dit plaatje moet dan naar rechts uitgerekt worden. Nu kan dit in de html code zelf, maar ik wil dat dit zich weer aanpast aan de resolutie van de kijker. Of moet ik een repeat functie gebruiken.

    Nou, ik hoop dat ik het duidelijk heb uitgelegd. Alvast bedankt.
  • Je zou de resolutie van een gebruiker kunnen vaststellen met een script (JavaScript, PHP), en afhankelijk daarvan een pagina laten openen.

    Nadeel is wel, dat je dan voor iedere resolutie een aparte pagina moet maken.
  • in geval van een achtergrond op de body :

    [code:1:f4ac1c6dd7]
    body{
    background: black url(url-naar-je/plaatje.gif) repeat-y top left;
    }
    [/code:1:f4ac1c6dd7]

    Nu zal er een streep te zien zijn over het scherm, deze code dien je in je head/stylesheet te plaatsen (<style type="text/css">[hier-je-code-voor-head]</styke> of direct in de stylesheet plakken.
  • Het gaat helaas niet om een achtergrond. Want die repeat functie kun je wel instellen in dreamweaver. Het gaat echt om een balk.
  • Ja maar dan kan je die achtergrond toch in die balk maken? Je maakt gewoon een balk van 100% breed (width: 100%; jawel) en geeft jouw gifje op als achtergrond voor die balk zoals s.Mighty heeft voor gedaan. Je zet verder gewoon geen content in die balk en dan moet het werken.

    Eh… zoiets:[code:1:57d9582b82]div#balk {
    width:100%;
    height: 50px;
    background-image: url(url-naar-je/plaatje.gif);
    }[/code:1:57d9582b82]En dan dit:[code:1:57d9582b82]<div id="balk"></div>[/code:1:57d9582b82]Background-repeat lijkt mij zelfs in deze overbodig, daar het blok waarin de background voor moet komen op deze manier al is begrensd.

    Eventueel nog dit:[code:1:57d9582b82]body {
    padding: 0px;
    margin: 0px;
    }[/code:1:57d9582b82]Succes!
  • werkt in dit geval de width: 100% wel? heb daar ook wel eens mee zitten klooien, wil lang niet altijd. Maar het is altijd te proberen.
  • Waarom zou het niet werken? Werkt prima.
    Maar ik zie nu dat het niet eens nodig is. Aangezien <div> een block level element is neemt het sowieso de hele beschikbare breedte in beslag. Het geeft dus ook zonder de width het gewenste resultaat (omdat ik de margin en de padding van de body op 0 heb gezet). Dit is dus genoeg:[code:1:316d3ba30f]div#balk {
    height: 50px;
    background-image: url(url-naar-je/plaatje.gif);
    }[/code:1:316d3ba30f]
  • OK het wordt al duidelijker. Alleen weet ik niet waar ik die div zou moeten plakken in de code.

    Ik heb nu het volgende:

    [i:4dd875f061]<style type="text/css">
    <!–
    body {
    background-color: #00FF99;
    background-image: url(wit_13_03.png);
    background-repeat: repeat-x;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    –>
    </style></head>[/i:4dd875f061]

    Dus ik heb nu bovenin een balk die bij elke resolutie correct doorloopt in het scherm. Perfect Maar nu hetvolgende. Ik wil links ook zo'n balk links die naar beneden doorloopt. Ik had zelf een layer of weer een gif in gedachten.
  • En die zou ik nou juist in de body doen![code:1:b127f1cbf1]<head>
    <style type="text/css">
    body {
    background-color: #0f9;
    background-image: url(verticalebalk.png);
    background-repeat: repeat-y; /* of wat jij wilt natuurlijk */
    margin: 0;
    padding: 0;
    }
    #topbalk {
    background-image: url(wit_13_03.png);
    background-repeat: repeat-x;
    height: 50px;
    }
    </style>
    </head>
    <body>
    <div id="topbalk"></div>
    <p>
    Al hier uw content
    </p>
    </body>[/code:1:b127f1cbf1]Dààr moet het dus… Gewoon bovenaan in je HTML code. Je wilde je balk toch bovenaan? Zodoende.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.