19 berichten aan het bekijken - 1 tot 19 (van in totaal 19)
  • Q:
    Bijdrager
    Jellobie

    Verticale background strook

    Hey

    Ik ben een portfolio website aan het ontwikkelen en zou graag voor de navigatie balk een strook hebben langs de linker zijde van het scherm. (zie afbeelding).

    Hoe zorg ik ervoor dat de background image (het grijze gedeelte) steeds van de top van het scherm tot de bottom reikt?

    Bijdrager
    stavos

    Bekend met CSS?

    <br />
    body<br />
    {<br />
    background-image:url('paper.gif');<br />
    background-repeat:repeat-y;<br />
    }<br />
     

    Bron

    Hiermee kun je de achtergrond afbeelding ook verkleinen tot een paar pixels hoog.

    Bijdrager
    Jellobie

    Ja, ik ben bekend met CSS. Dit is mijn code nu

    <br />
    #content{<br />
    	width: 300px;<br />
    	background: url(../img/content.png) repeat;<br />
    	margin-left: 2%;<br />
    	height: auto;<br />
    }<br />
     

    Met deze code lukt het me echter niet om de kolom volledig in het grijs te hebben. Enkel het gebruikte gedeelte is grijs.

    Bijdrager
    stavos

    Je beperkt de achtergrond voor #content (een div denk ik?). Je moet de opmaak van je achtergrond daar uit halen en voor de gehele pagina instellen (hele body dus).

    Bijdrager
    Dr. Maddox

    Zet deze in het html bestand eens tussen de ‘style’ tags

    <br />
    <!--<br />
    body {<br />
    	background-image: url(http://www.onemorething.nl/uploads/community/bfa0816d4a7a75f40ad6d9d2481132a28eaaa1b9_0.png);<br />
    	background-repeat: repeat-y;<br />
    }<br />
    --></p>
    <p>

    Wel even netjes je eigen url/achtergrond afbeelding aanpassen natuurlijk!

    Bijdrager
    mtooster

    Dit kan makkelijk zonder afbeelding hoor!

    Ik zal eens even kijken of ik wat in elkaar kan knutselen….

    Bijdrager
    Dr. Maddox

    Ik gok dat je op meer code uitkomt dan de bovenstaande code.;)

    Bijdrager
    Jellobie

    Oké, ik zie dat er enige verwarring is. De afbeelding is slecht een voorbeeld van hoe ik de pagina er wil laten uitzien, niet de background image zelf. Het groene gedeelte de is background van de body. Het grijze van de navigatie balk.

    Bijdrager
    Dr. Maddox

    Zet de height dan eens op 100% in plaats van ‘auto’

    Bijdrager
    Jellobie

    Maakt niks uit. Dat geeft hetzelfde resultaat.

    Bijdrager
    Dr. Maddox

    Gebruik je een wrapper? En zo ja, staat deze op een vaste waarde of heb je daar de hoogte ook op auto staan?

    Bijdrager
    Jellobie

    Neen, ik heb geen wrapper.

    Heb zelf nog wat zitten proberen en met deze code lukt het voorlopig:

    <br />
    	width: 300px;<br />
    	background: url(../img/content.png) repeat;<br />
    	margin: 0 0 0 2%;<br />
    	position: absolute;<br />
    	top: 0;<br />
    	bottom: 0;<br />
     

    Bedankt allemaal;)

    Bijdrager
    mtooster
    <br />
    <!DOCTYPE html><br />
    <html><br />
    <head><br />
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8"><br />
    	<title>layout test</title><br />
    	<style type="text/css" media="screen"><br />
    		html, body, div {<br />
    			margin: 0;<br />
    			padding: 0;<br />
    		}</p>
    <p>		html {<br />
    			height: 100%;<br />
    		}</p>
    <p>		body {<br />
    			min-height: 100%;<br />
    			position: relative;<br />
    			background-color: #7AFF10;<br />
    		}</p>
    <p>		#menu {<br />
    			background-color: #333;<br />
    			color: #FFF;<br />
    			width: 250px;<br />
    			margin: 0 10px 0 40px;<br />
    			height: 100%;<br />
    			position: absolute;<br />
    		}</p>
    <p>		#content {<br />
    			height: 100%;<br />
    			margin-left: 300px;<br />
    		}</p>
    <p>	</style><br />
    </head><br />
    <body><br />
    	<div id="menu"></p>
    <ul>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    <li><a href="/">link</a></li>
    </ul>
    <p>  	</div><br />
      	<div id="content"><br />
    			content hier<br />
    	</div><br />
    </body><br />
    </html><br />
     

    WTF…. waar zijn m’n tabs gebleven?

    Bijdrager
    Dr. Maddox

    Code plaatsen op OMT is helaas nog niet optimaal.

    Bijdrager
    stavos

    Misschien als html bestand dan ergens uploaden? Ben wel benieuwd naar het resultaat..

    Bijdrager
    Dr. Maddox

    Ik ook. En anders zou het zonde zijn van de moeite mtooster!:)

    Bijdrager
    mtooster

    sorry… ik had even wat andere bezigheden:
    http://dl.dropbox.com/u/9348800/OMT-uploads/grijze-balk.html

    edit:
    Voor de volledigheid ook nog 1 met veel content….
    http://dl.dropbox.com/u/9348800/OMT-uploads/grijze-balk_overflow.html

    ennehm…. sorry voor de afschuwelijke groene kleur:grin:

    Bijdrager
    stavos

    Lol. Dat is een iets ander kleurtje..:lol: Maar het scheelt wel een afbeelding.

    Bijdrager
    mtooster

    Ik heb toch maar even de kleur aangepast….
    (lang leve de standaard colorpicker van OsX, alleen dat is al een reden om nooit meer naar windows terug te willen!)

    http://dl.dropbox.com/u/9348800/OMT-uploads/grijze-balk.html
    http://dl.dropbox.com/u/9348800/OMT-uploads/grijze-balk_overflow.html

19 berichten aan het bekijken - 1 tot 19 (van in totaal 19)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.