[CSS] background color en achtergrondplaatje vullen niet uit - Softwareontwikkeling

vrijdag 2 november 2007 18:10

Acties:

Verwijderd

Topicstarter

Ik zit al de hele dag met een CSS probleem te klooien.

De background-color en de background url vullen niet volledig uit. Ze repeteren tot de onderkant van mijn scherm, maar als ik dan aan de scrollbalk trek om de rest van de pagina te zien, dan heeft de tekst geen achtergrondkleur meer en de zijkanten geen achtergrondplaatje.

Het gebeurt dus als er meer inhoud op de pagina staat dan er in het scherm past en je moet scrollen. Dat stuk ontbreekt dan. Als je eerst je venster klein zet en daarna wat groter trekt, dan begint ie het wel een beetje uit te vullen. Echt raar, ik denk dat het een bekend probleem is maar ik zit al de hele dag te prutsen ermee. Ook op de search kan ik het nbet vinden. Ik zal hieronder de code plakken.

Weet iemand wat ik kan doen om dit probleem op te lossen? Probleem is dat de achtergronden links en rechts verschillend moeten zijn. Ik kan dus niet 1 achtergrond maken en er een gecentreerde tabel overheen leggen...

vrijdag 2 november 2007 18:12

Acties:

Verwijderd

Topicstarter

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>

<style type="text/css">

body
{
    margin: 0; 
    padding: 0;
    height:100%;
    background: #ccc;
}

div#container
{
    background-color: #eee;
    height:100%;
    position: absolute;
    width: 100%;
}
    
div#left
{
    position: absolute;
  background-color: #ccc;
    width: 50%;     
    height:100%;
    left: 0px;
    background: url(bg_left.jpg);
}
    
div#middle
{
    position: absolute;
  background-color: #199a7b;            
    left: 50%;
  margin-left: -475px;
  width: 950px;
    height: 100%;
    z-index: 1;
}
    
div#right
{
    position: absolute;
  background-color: #ccc;
  width: 50%;       
    height:100%;    
  right: 0px;
  background: url(bg_right.jpg);
  overflow: hidden;
}
    
</style>

</head>

<body>
    

<div id="container">
    
    <div id="left"></div>

    <div id="middle">
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pulvinar ligula consequat augue. Pellentesque ac arcu nec diam tempor egestas. Fusce cursus ante vitae tortor. Suspendisse nonummy, mauris vel vestibulum sagittis, ante tortor vestibulum magna, eu eleifend risus elit vel velit. Praesent vestibulum. Nunc eu quam. Integer elementum felis vel elit. Nunc dictum sagittis dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tellus felis, accumsan sit amet, semper vitae, volutpat eu, mi. 

        Nullam eros. Praesent tincidunt mollis libero. Pellentesque interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sagittis, felis at cursus pulvinar, eros quam sagittis sapien, vitae viverra orci sem quis arcu. Nullam ac odio ac neque pellentesque nonummy. Vivamus pulvinar leo quis massa. Maecenas mollis, mauris sit amet feugiat laoreet, ipsum massa lobortis arcu, vel pellentesque turpis turpis at est. Vestibulum tristique arcu vitae ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean adipiscing lacus id arcu. Integer congue. 

        In non sapien. Proin ut sem vitae ante gravida gravida. Mauris ipsum neque, consequat vitae, venenatis et, hendrerit congue, nisi. Nulla sit amet neque. Integer non mi. Integer convallis, dui nec tincidunt pellentesque, purus tortor commodo ligula, in consequat tellus arcu tincidunt enim. Aenean malesuada justo ut tortor. Duis dapibus lectus nec tellus. Nulla nonummy turpis ac tortor. Quisque sodales orci quis sapien. Morbi quam justo, adipiscing id, vulputate ac, ultricies eu, dui. Etiam euismod consectetuer nisl. Nunc tincidunt. Aenean eros. Duis ullamcorper lobortis dui. 
        
  </div>
    
    <div id="right"></div>

</div>


</body>
</html>

vrijdag 2 november 2007 18:14

Acties:

KRG

En als je nog expliciet een background-repeat meegeeft in de CSS?

vrijdag 2 november 2007 18:51

Acties:

Verwijderd

Topicstarter

Nee, helaas, dat werkt ook niet.

Maar in kleine vensters laat hij niet eens het hele plaatje zien, raar...

vrijdag 2 november 2007 18:57

Acties:

Borizz

Zoek eens op 'faux columns' of '3 columns layout' hier op GoT of op Tweakers, probleem is al zovaak aan bod gekomen hier.. Wat heb je zelf al geprobeerd om het op te lossen (behalve een beetje lopen klooien)?

If I can't fix it, it ain't broken.

vrijdag 2 november 2007 19:12

Acties:

Zillion01

Obey your screen!

Als er geen content in de linker en rechter div komt, waar het op lijkt gezien je de middle div een width mee geeft van 950px zou ik die 2 divs eruit slopen en een bovenliggende container of de body-tag een background image geven met repeat-y die bijv. 2000px breed is en 50px hoog (afhankelijk van de hoogte van deafbeeldingen die in die background images staan) waarbij aan de linker kant de background images staan van #left en rechts die van #right. De #middle zet je dan neer met position relative en margin auto om hem in het midden te krijgen.

vrijdag 2 november 2007 23:11

Acties:

Verwijderd

Topicstarter

@Borizz: een beetje lopen klooien is zacht uitgedrukt. Ik heb er inmiddels 12 uur inzitten. Teveel om hier op te noemen. 3 colums layout was gisterochtend inderdaad hoe mijn zoektocht op Google begon. Faux columns gebruik ik voor een andere site, maar werkt hier niet lekker om onderstaande reden.

@Zillion01: Zal niet gaan (naast het feit dat het dan een erg zwaar plaatje zal worden). Want dan heb ik geen controle over wat links en rechts precies te zien is naast het middenstuk bij verschillende schermgrootte's.

Ik ben bang dat het is zoals Crisp zegt: "Met andere woorden: je hebt je een design in de maag laten splitsen door iemand die geen weet heeft van technische mogelijk- en moeilijkheden op het gebied van webdesign?"

zaterdag 3 november 2007 00:47

Acties:

Verwijderd

Topicstarter

Zillion01 schreef op vrijdag 02 november 2007 @ 19:12:
Als er geen content in de linker en rechter div komt, waar het op lijkt gezien je de middle div een width mee geeft van 950px zou ik die 2 divs eruit slopen en een bovenliggende container of de body-tag een background image geven met repeat-y die bijv. 2000px breed is en 50px hoog (afhankelijk van de hoogte van deafbeeldingen die in die background images staan) waarbij aan de linker kant de background images staan van #left en rechts die van #right. De #middle zet je dan neer met position relative en margin auto om hem in het midden te krijgen.

Heb het toch maar op jouw manier gedaan.

Fuck CSS met 3 columns! Ik kan het me niet veroorloven om daar nog langer tijd mee weg te gooien. Lijkt wel een bug in de CSS background property overigens (want raar dat ie maar totaan het zichtbarescherm uitvult en niet onder de scroll, en wel als je dan later aan je venster trekt)...

Heb nu 1 achtergrondplaat gemaakt van 340x1200 (grootte 350kb) die repeteert zodat altijd wel een beetje goed uitkomt links en rechts bij verschillende schermgrootte's. Nieuwe code is:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>

<style type="text/css">

body
{
    margin: 0; 
    padding: 0;
    height:100%;
    background: #ccc;
    background: url(bg-beton.jpg);
}

div#middle
{
    position: absolute;
  background-color: #199a7b;            
    left: 50%;
  margin-left: -475px;
  width: 950px;
    height: 100%;
    z-index: 1;
}
    
</style>

</head>

<body>

    <div id="middle">
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc pulvinar ligula consequat augue. Pellentesque ac arcu nec diam tempor egestas. Fusce cursus ante vitae tortor. Suspendisse nonummy, mauris vel vestibulum sagittis, ante tortor vestibulum magna, eu eleifend risus elit vel velit. Praesent vestibulum. Nunc eu quam. Integer elementum felis vel elit. Nunc dictum sagittis dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tellus felis, accumsan sit amet, semper vitae, volutpat eu, mi. 

        Nullam eros. Praesent tincidunt mollis libero. Pellentesque interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sagittis, felis at cursus pulvinar, eros quam sagittis sapien, vitae viverra orci sem quis arcu. Nullam ac odio ac neque pellentesque nonummy. Vivamus pulvinar leo quis massa. Maecenas mollis, mauris sit amet feugiat laoreet, ipsum massa lobortis arcu, vel pellentesque turpis turpis at est. Vestibulum tristique arcu vitae ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean adipiscing lacus id arcu. Integer congue. 

        In non sapien. Proin ut sem vitae ante gravida gravida. Mauris ipsum neque, consequat vitae, venenatis et, hendrerit congue, nisi. Nulla sit amet neque. Integer non mi. Integer convallis, dui nec tincidunt pellentesque, purus tortor commodo ligula, in consequat tellus arcu tincidunt enim. Aenean malesuada justo ut tortor. Duis dapibus lectus nec tellus. Nulla nonummy turpis ac tortor. Quisque sodales orci quis sapien. Morbi quam justo, adipiscing id, vulputate ac, ultricies eu, dui. Etiam euismod consectetuer nisl. Nunc tincidunt. Aenean eros. Duis ullamcorper lobortis dui. 
        
  </div>
    
</body>
</html>

zaterdag 3 november 2007 01:43

Acties:

Borizz

Je kan ook 2 verschillende achtergronden gebruiken door 1 achtergrond op het html element te zetten en 1 achtergrond op het body element. Zo heb ik een soortgelijk probleem opgelost.

If I can't fix it, it ain't broken.

zaterdag 3 november 2007 15:30

Acties:

Verwijderd

Topicstarter

Borizz schreef op zaterdag 03 november 2007 @ 01:43:
Je kan ook 2 verschillende achtergronden gebruiken door 1 achtergrond op het html element te zetten en 1 achtergrond op het body element. Zo heb ik een soortgelijk probleem opgelost.

Aha, da's een goeie tip. Zal ik bij de volgende site aan denken! Thanks.

Pagina: 1

Reageer