[CSS] Background-repeat: repeat-y; ? - Softwareontwikkeling

zondag 11 februari 2007 20:28

Acties:

Topicstarter

Ik ben een site aan het bouwen en voor die site wil ik graag een achtergrond inbouwen. Niet een plaatje en dat laten herhalen, maar meerdere afbeeldingen op elkaar om zo een achtergrond te krijgen. Hieronder even een soort van schets wat ik ook heb. (De kleuren die ik hier in het voorbeeld gebruik zijn in de echte layout gewoon afbeeldingen)

Wat ik dus graag zou willen is dat de zwarte balk aan de rechterkant doorloopt naarmate de tekst langer wordt. Nu ben ik al uren hiermee aan de gang, maar het wil maar niet lukken.

Nu dacht ik dat dit zou moeten met "background-repeat: repeat-y; en height: 100%" maar dit wil dus maar niet lukken

Iemand enig idee? $_/-\o_$

HTML:

<html>
<head>
<title>test<title>

<style type="text/css">

body {
  background-color: #336699;
}

#grijsplaatje {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 178px;
  height: 155px;
  background-color: #efefef;
  background-position: right;   
  z-index: 1;
}

#zwartelijnwelkelangermoetworden {
  background-color: #000;
  background-repeat: repeat-y;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 178px;
  height: 100%;
  min-height: 100%;
}

#content {
  position: absolute;
  width: 500px;
  left: 10px;
  border: 1px solid #000;
}
</style>

</head>

<body>
<div id="grijsplaatje"></div>
<div id="zwartelijnwelkelangermoetworden"></div>
<div id="content">
nteger tempor eros et pede. Ut rutrum. Sed orci massa, hendrerit ut, cursus sit amet, laoreet nec, elit. Quisque malesuada, lectus et placerat tempus, ipsum metus eleifend sapien, sed ultrices orci orci sed diam. Vestibulum at erat id tortor cursus porttitor. Donec nisl mi, vestibulum non, consequat sed, ullamcorper tincidunt, ante. Etiam nisl diam, rhoncus non, elementum ac, porta eget, eros. Curabitur vulputate lorem ultricies magna malesuada scelerisque. Duis vel eros. Nam euismod.

Sed eros. Proin at nunc at nunc fringilla placerat. Curabitur consequat massa ut dui. Donec nulla. Phasellus faucibus eros. Ut pharetra fringilla diam. Duis congue, lectus vel elementum interdum, risus nulla bibendum leo, sit amet sagittis tellus nulla fringilla leo. Phasellus odio nulla, faucibus dictum, hendrerit id, ornare vitae, nisl. In hac habitasse platea dictumst. Sed rutrum tortor placerat lectus. Mauris consequat dignissim diam. Pellentesque quis justo. Proin aliquet, elit vitae convallis scelerisque, risus enim ultricies enim, sit amet tristique augue nunc ut ante. Duis egestas tincidunt eros. Praesent ligula. Praesent pretium lobortis urna. Cras euismod. Quisque ac tortor.

Nulla dictum rutrum est. Duis et orci. Integer luctus nonummy velit. Mauris iaculis, pede in malesuada placerat, orci nisi viverra libero, non tincidunt dui lorem semper nibh. Donec vulputate. In aliquam felis interdum turpis. Nullam malesuada mi ac tortor. Praesent ornare dui sit amet nulla. Praesent rhoncus. Ut malesuada, augue congue tincidunt sagittis, augue libero pulvinar nulla, nec dictum ante quam in felis. Duis sollicitudin. In ultricies, felis sit amet fermentum laoreet, tortor risus lobortis risus, id consectetuer leo diam a orci. Morbi et magna. Suspendisse potenti. Donec convallis varius lectus. Mauris nisl nunc, lobortis vitae, sollicitudin id, tempus at, metus. Sed vitae felis. Quisque tellus sem, lobortis et, condimentum nec, vehicula id, ipsum.

Nullam vitae orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras quis turpis. Fusce dui. Suspendisse venenatis adipiscing nisi. Donec dui leo, fermentum id, convallis a, blandit vel, risus. Aliquam erat volutpat. Nullam pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed turpis eros, tincidunt ac, fermentum at, porta vel, orci. Integer sit amet orci sed eros aliquet egestas. In hac habitasse platea dictumst. Donec scelerisque congue leo. In eu felis nec libero lobortis tempus. Nunc pede. Phasellus dui. Phasellus libero ligula, venenatis et, malesuada in, tristique suscipit, mi. Aenean lobortis ultricies dui. Sed lacus mauris, faucibus sed, suscipit in, bibendum et, nisi.

Praesent cursus vulputate mi. Sed in augue. Nam et nisi. Ut sem sapien, tristique quis, scelerisque et, vestibulum eu, orci. Proin sed elit. Maecenas ullamcorper odio quis lectus. Mauris pharetra, odio in pellentesque dictum, tellus sapien feugiat libero, eget condimentum enim tortor nec dui. Curabitur imperdiet convallis dolor. Vestibulum mattis, sapien et rutrum elementum, ante est condimentum ante, eget aliquet ipsum lacus vitae odio. Morbi eu odio. Aenean ante mi, imperdiet vel, faucibus id, facilisis non, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla facilisis leo at ipsum. Fusce euismod, eros et malesuada pellentesque, enim risus porttitor tortor, a pellentesque est velit eget urna. Nullam vitae sem eget ligula ullamcorper posuere. Nunc sagittis libero quis quam adipiscing ultrices. Vivamus ac sapien.

Cras porta molestie tellus. Sed pellentesque pellentesque dui. Curabitur augue libero, ultricies nec, porttitor vel, egestas nec, quam. Nam adipiscing. Cras elementum dolor sit amet magna. Donec urna sapien, aliquam at, sodales ac, vestibulum in, velit. Proin ut urna a nunc pulvinar tincidunt. Nulla magna. Nunc id justo vitae urna bibendum varius. Maecenas id odio eget est pulvinar rhoncus. Etiam faucibus. Sed quis velit in nunc tempor ornare. Phasellus consequat tellus. Mauris hendrerit, magna eu condimentum gravida, dui dui pharetra nibh, in ultricies orci mi ac velit. Quisque rhoncus massa eget dui.

Nam id lacus non elit consequat rhoncus. Suspendisse fermentum. Aenean urna turpis, vehicula in, ullamcorper nec, rhoncus sed, erat. Vivamus pede tellus, euismod eu, aliquam in, consectetuer et, libero. Maecenas egestas, orci tincidunt interdum fringilla, velit lorem condimentum elit, non rutrum diam orci mattis eros. Vivamus tortor. Pellentesque arcu dui, sodales eget, consectetuer non, porttitor eu, justo. Proin at ante. Quisque dictum, erat eu dignissim adipiscing, nibh mauris hendrerit mi, eget porttitor magna lacus sed lectus. Etiam ultricies laoreet sapien. In semper fringilla dolor. Nam vel massa sed sem mollis adipiscing. Maecenas sapien velit, viverra vel, semper vitae, elementum nec, est.

Nunc eget massa a eros ultricies fermentum. Nam at nulla. Suspendisse potenti. Sed a sapien adipiscing odio adipiscing dignissim. In hac habitasse platea dictumst. Nam pulvinar libero sed ligula. Quisque dignissim suscipit odio. Sed id purus. Curabitur pellentesque sapien a nibh. Phasellus lectus sem, aliquam ac, bibendum ut, tempor et, nisi. Aliquam erat volutpat. Quisque nibh. Integer tempor, lectus non molestie tristique, nisl sapien dapibus lacus, sit amet pellentesque ipsum lorem ut mi. Morbi interdum arcu quis ipsum. Nunc ultricies congue tellus.

Mauris cursus malesuada libero. Integer turpis. Etiam cursus malesuada purus. Aenean mi est, vehicula at, volutpat at, fermentum et, orci. Maecenas hendrerit pharetra felis. Nulla cursus condimentum lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lobortis imperdiet sapien. Sed bibendum. Integer justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque euismod auctor ante. Vivamus bibendum leo et odio. Nam feugiat dictum ligula. Curabitur at tellus a quam posuere mattis. Sed cursus quam mattis nulla. Suspendisse dui. Praesent varius hendrerit nisi. Donec placerat rhoncus risus.
</div>
</body>
</html>

zondag 11 februari 2007 21:57

Acties:

Verwijderd

Je moet de body tag de zwarte achtergrond geven en niet de div "zwartelijnwelkelangermoetworden" (leuke naam trouwens

).

Even wat uitleg: Als je een element 100% hoog maakt wordt dit element net zo hoog als het browserscherm. Bij een lange content, zoals bij jou het geval is, is de hoogte dus meer als 100%. Het element met de 100% raakt dus niet meer de onderkant als je naar beneden scrolt.

[ Voor 12% gewijzigd door Verwijderd op 11-02-2007 21:59 . Reden: extra uitleg ]

maandag 12 februari 2007 10:20

Acties:

n1ck

Topicstarter

Verwijderd schreef op zondag 11 februari 2007 @ 21:57:
Je moet de body tag de zwarte achtergrond geven en niet de div "zwartelijnwelkelangermoetworden" (leuke naam trouwens ).

Even wat uitleg: Als je een element 100% hoog maakt wordt dit element net zo hoog als het browserscherm. Bij een lange content, zoals bij jou het geval is, is de hoogte dus meer als 100%. Het element met de 100% raakt dus niet meer de onderkant als je naar beneden scrolt.

Dit is helaas volgens mij niet helemaal wat ik bedoel. Voor de verduidelijking zal ik even een afbeelding bijvoegen. Hopelijk dat jullie een beetje begrijpen wat ik bedoel...

Afbeeldingslocatie: http://img226.imageshack.us/img226/7720/voorbeeldwi4.png

Afbeeldingslocatie: http://img226.imageshack.us/img226/7720/voorbeeldwi4.png

Onderstaande code is alweer wat ouder en gebruik ik niet meer, maar misschien om duidelijk te maken wat ik precies bedoel post ik het maar even...

Het plaatje links:

Cascading Stylesheet:

background: url("background/bg.jpg");
margin: 0px;
padding: 0px;
height: 100%;

Plaatje rechtsboven:

Cascading Stylesheet:

position: absolute;
right: 0px;
top: 0px;
width: 178px;
height: 155px;
background-image: url("background/bg_ball.jpg");
background-position: right;     
background-repeat: repeat-y;

Plaatje wat langer moet worden zodra de content langer wordt:

Cascading Stylesheet:

position: absolute;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
min-height: 100%;
background-image: url("background/bg_line.jpg");
background-position: right;     
background-repeat: repeat-y;

maandag 12 februari 2007 10:32

Acties:

Amorphis

Een element height: 100% en min-height: 100% geven is een beetje onzinnig. Om het plaatje door te laten lopen zet de height op auto. Voor IE6 zul je dan nog iets moeten verzinnen omdat deze geen min-height kent. Het makkelijkst is:

Cascading Stylesheet:

1
2
3

height: auto !important;
height: 100%;
min-height: 100%;

Een echt mooie oplossing is dit niet.

maandag 12 februari 2007 10:38

Acties:

Verwijderd

//verdikkie is iemand me voor. Ik type te langzaam

Bah ik heb zowiezo niet echt goed gelezen

wacht misschien is mijn oplossing toch niet zo slecht

Wat je kan doen:
De body de background bg_line.jpg geven deze rechts uitlijnen.
Vervolgens maak je een div waarin de content van de site komt te staan. Deze maak je min-height: 100%; (Voor IE 6 gebruik je height: 100%, dit kan je doen met conditional comments of een truckje)

IE 6 truckje

Cascading Stylesheet:

div#container
{
min-height: 100%;
height: auto !important; /*IE 6 snapt dit niet*/
height: 100%; /*IE6 krijgt deze waarde, andere goede browsers kiezen de !important*/
background: url("background/bg.jpg"); 
}

Bij deze oplossing ga ik er wel vanuit dat de content altijd langer is dan de rechterkant (als daar niks in komt te staan is er niks aan de hand)

Een andere oplossing zou zijn de lijn en de gewone background samenvoegen tot een groot plaatje. Deze moet je dan breder maken als de groots mogelijke resolutie (1600 ofzo) en vervolgens rechts uitlijnen met repeat-y

[ Voor 8% gewijzigd door Verwijderd op 12-02-2007 11:00 ]

maandag 12 februari 2007 12:34

Acties:

n1ck

Topicstarter

Bedankt voor jullie reacties!
Helaas heb ik ze nog niet kunnen proberen omdat ik op mijn stage zit.

Ik zal de url geven naar de website, zodat jullie kunnen zien wat ik nou uiteindelijk bedoel. Deze is ook degene waarmee ik gisteren zolang aan de gang geweest ben. Uiteindelijk wil ik dat in de korte versie dat de footer helemaal tegen de onderkant van het scherm zit. Dit gaat door de container niet relatief te positioneren maar absolute. Als ik dat doe, dan klopt het niet meer als ik een langere tekst doorvoer. Dan houdt de lijn op een gegeven moment op. Daarom had ik dus eerst die voorbeelden die hierboven staan gemaakt...

Ik heb even tijdelijk om te laten zien twee versies, één met lange content en één met korte content.

http://www.n1ck.nl/tvm/kort/
http://www.n1ck.nl/tvm/lang/

In principe is de lange versie helemaal goed en bij de korte versie gaat het fout.

Misschien dat mensen die hierboven antwoord gaven nog ideeën hebben of ze willen wijzigen nadat ze dit zien...