[CSS] Achtergrond niet over gehele hoogte in FF, wel in IE - Softwareontwikkeling

woensdag 12 april 2006 10:50

Acties:

Greenthumb1982

Topicstarter

Oke, ik heb na lang zoeken eindelijk voor elkaar gekregen om een website op te maken compleet met DIV tags en CSS, de website is gemaakt in XHTML.
Echter, nu heb ik een probleem, ik heb namelijk aan de zijkanten van het venster een balk van 170px breed die van boven naar onder moet lopen.
De linkse is geen probleem, deze heb ik namelijk als achtergrond van de <body> gezet.
Echter de rechtse balk doet in IE keurig wat ik wil:

Screenshot IE

Maar in FireFox en Opera niet:

Screenshot FireFox

Mijn HTML-code ziet er als volgt uit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>



<div id="container">

<div id="content">

<div id="header">

<h1>Header</h1>

</div>

<div id="navbar">

<ul><li><a href="index.php" >Menu item</a></li><li><a href="information.php">Menu item</a></li><li><a href="currentprojects.php">Menu item</a></li></ul>

</div>

<div id="main-text">

<p>&nbsp </p>

<p>content</p>

<p>content</p>

</div>

<div id="footer">

<p>|<a href="index.php" >Footer item</a>||<a href="information.php">Footer item</a>||<a href="currentprojects.php">Footer item</a>|</p>

</div>

</div>

</div>

</body>

</html>

Mijn CSS-code is als volgt:

Cascading Stylesheet:

body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
margin: 0em;
padding: 0em;
height: 100%;
background-image: url(images/nav_col_base.jpg);
background-color: #21b5ff;
background-repeat: repeat-y;
}

#header {
position: relative;
font-variant: small-caps;
text-align: center;
border-bottom: 1px #000000 solid;
margin-left: 170px;
margin-right: 180px;
padding: 10px;
}

#content {
position: relative;
background-image: url(images/empty.gif);
background-repeat: no-repeat;}

#container{
background-image: url(images/more_col_base.jpg);
background-position: right;
background-repeat: repeat-y;
height: 100%;
}

#navbar {
position: relative;
width: 170px;
padding-top: 20px;
}

#main-text {
position: relative;
left: 170px;
padding-top: 15px;
padding-left: 40px;
padding-bottom: 15px;
padding-right: 40px;
margin-right: 350px;
margin-top: -160px;
}

#footer {
text-align: center;
border-top: 1px #000000 solid;
position: relative;
margin-left: 170px;
margin-right: 180px;
border-bottom: 1px #000000 solid;
}

De nav_col_base.jpg en more_col_base.jpg zijn de kolommen, en de empty.gif is een lege afbeelding van 1x1px, die is nodig omdat anders de border onder de header weg valt.

Ik heb al gekeken naar faux-colomns, maar dat is volgens mij niet de oplossing hier, of ik krijg het niet juist geïmplementeerd.
Dus heeft iemand hier een idee, want na veel zoeken ben ik er nog niet achter.

woensdag 12 april 2006 10:53

Acties:

SandaX

Nicht Ärgern nur wundern

Je zou denk ik eens moeten kijken naar het min-height element, deze wordt gebruikt door fifo om de hoogte in te stellen (zoals het hoort). Je zou ook de css van mn site door kunnen spitten (in mn sig) hier heb ik vrijwel dezelfde situatie als jij als ik het goed bekijk.

woensdag 12 april 2006 11:00

Acties:

JHS

Splitting the thaum.

Je zou anders ook 's kijken naar faux columns

[ Voor 47% gewijzigd door JHS op 12-04-2006 11:01 ]

DM!

woensdag 12 april 2006 11:00

Acties:

Greenthumb1982

Topicstarter

SandaX schreef op woensdag 12 april 2006 @ 10:53:
Je zou denk ik eens moeten kijken naar het min-height element, deze wordt gebruikt door fifo om de hoogte in te stellen (zoals het hoort). Je zou ook de css van mn site door kunnen spitten (in mn sig) hier heb ik vrijwel dezelfde situatie als jij als ik het goed bekijk.

Ook als ik de min-height gebruik werkt het niet.

De code is dan als volgt:

Cascading Stylesheet:

#container{
min-height: 100%;
background-image: url(images/more_col_base.jpg);
background-position: right;
background-repeat: repeat-y;
}

*#container{
height: 100%;
}

Ook gebruik jij voor de zijkanten dezelfde achtergrond image, bij mij is het aan links en recht 2 verschillende afbeeldingen.

woensdag 12 april 2006 11:03

Acties:

Greenthumb1982

Topicstarter

JHS schreef op woensdag 12 april 2006 @ 11:00:
Je zou anders ook 's kijken naar faux columns .

Ik ben ook al bezig geweest om de footer onderaan te plaatsen, echter ook dit kreeg ik niet voor elkaar.
Maar hoe zou je dit dan voorstellen?
Oke, ik heb de footer onderaan in IE als ik de code van de footer in het volgende verander:

Cascading Stylesheet:

#footer { 
text-align: center; 
border-top: 1px #000000 solid; 
position: absolute; 
border-bottom: 1px #000000 solid;
bottom: 0px;
left: -130px;
right: 180px;}

Echter het probleem blijft dan hetzelfde in FF, en nu komt ook de footer niet juist uit:

Screenshot IE

Screenshot FF

En faux columns is volgens mij geen oplossing, aangezien de breedte van de content (en header en footer) mee moet aanpassen afhankelijk van de resolutie.

[ Voor 38% gewijzigd door Greenthumb1982 op 12-04-2006 11:25 ]

donderdag 13 april 2006 07:43

Acties:

Greenthumb1982

Topicstarter

Na met min-height, height, absolute positioning, relative positioning en floats bezig te zijn geweest ben ik nog steeds niet verder gekomen.
Ik FireFox en Opera blijf ik het probleem houden dat de footer gelijk onder de content geplaatst wordt, en dat de rechter kolom in de achtergrond maar een klein stukje doorloopt.
In Internet Explorer wordt de footer wel netjes onderaan de pagina gezet afhankelijk van de resolutie en loopt de rechterkolom ook mooi door.
Faux colums is geen oplossing, aangezien er dan met een vaste breedte moet worden gewerkt, en de bedoeling is juist dat de breedte van de content wordt aangepast aan de resolutie, terwijl de kollommen altijd op dezelfde breedte blijven.
Dus is er nog iemand die een idee heeft?

donderdag 13 april 2006 11:20

Acties:

Rowanov

Kop eens wat anders...

Dat is onzin. Ik werk met faux-collumns op een site met schaalbare layout. Het hangt alleen totaal van je beoogde design af of het makkelijk of moeilijk is. Mischien is het een idee om je beoogde design hier even neer te gooien.

donderdag 13 april 2006 11:25

Acties:

Greenthumb1982

Topicstarter

Het beoogde ontwerp is zoals het er in IE uit komt te zien, dus als volgt:

Screenshot

Zou je me kunnen doorverwijzen naar waar jij faux colums in een layout hebt gebruikt die meeschaald met de resolutie, want zover ik begrijp is faux colums niets anders dan een achtergrond met de kolommen die je wilt er op die met repeat-y wordt herhaald.
En zover ik weet is er geen mogelijkheid om je background-image mee te laten schalen met de resolutie van de browser.

donderdag 13 april 2006 15:53

Acties:

Boelie-Boelie

Heb je verder gezocht dan het eerste zoekresultaat voor faux columns?

Cogito ergo dubito

donderdag 13 april 2006 16:02

Acties:

Rowanov

Kop eens wat anders...

Splits hem in links en rechts; neem de body en zet daar het linker deel op top-left, repeat-y en de blauwe kleur als achtergrond er bij (voor waar het plaatje niet komt). Container op 100% hoogte en breedte er in; zelfde verhaal, maar dan zonder de blauwe achtergrond kleur en top-right ipv. top-left. Dat zou het zo oplossen.

donderdag 13 april 2006 20:05

Acties:

Greenthumb1982

Topicstarter

Dubbel

[ Voor 126% gewijzigd door André op 13-04-2006 20:27 ]

donderdag 13 april 2006 20:07

Acties:

Greenthumb1982

Topicstarter

Oke, na lang zoeken, veel vloeken en tieren

en wat haren op mn hoofd minder heb ik eindelijk de oplossing gevonden.
Uiteraard zal ik deze met jullie delen.
De code die uiteindelijk werkte is als volgt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<div id="container">

<div id="header">

<h1>Header</h1>

</div>

<div id="navbar">

<ul><li><a href="index.php" >Menu item</a></li><li><a href="information.php">Menu item</a></li><li><a href="currentprojects.php">Menu item</a></li></ul>

</div>

<div id="main-text">

<p>content content content content content content content content content content content content content content content content content contentcontent content content content content content content content content content content content content content content content content content </p>

<p>content</p>

<p>  </p>

</div>

</div>

<div id="footer">

<p>|<a href="index.php" >Footer item</a>||<a href="information.php">Footer item</a>||<a href="currentprojects.php">Footer item</a>|</p>

<p>  </p>

</div>

</body>

</html>

En de css-code, dit is uiteraard waar het om gaat:

Cascading Stylesheet:

html{
background-image: url(images/more_col_base.jpg); 
background-position: right; 
background-repeat: repeat-y; 
height: 100%;
}

body { 
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size: 1em; 
color: #333333; 
margin: 0em; 
padding: 0em; 
height: 100%;
background-image: url(images/nav_col_base.jpg);
background-repeat: repeat-y;
} 

#container{
background-image: url(images/nav_col_base.jpg);
background-repeat: repeat-y;}

#header { 
position: relative; 
font-variant: small-caps; 
text-align: center; 
border-bottom: 1px #000000 solid; 
margin-left: 170px; 
margin-right: 170px; 
padding: 10px;
} 

#navbar { 
position: absolute; 
width: 170px; 
padding-top: 20px;
} 

#main-text { 
position: relative; 
left: 170px; 
padding-top: 15px;
padding-left: 40px; 
padding-right: 40px; 
margin-right: 340px; 
} 

#footer { 
text-align: center; 
width: 100%;
position: absolute;
bottom: 0em;
}

Zoals te zien is zet ik in de html als achtergrond de rechter kolom, en in de body de linkerkolom.
Hierna zet ik ze beide op een height van 100%, en dit werkt

.
Ik heb het getest in de laatste versies van Internet Explorer, FireFox en Opera.
Hiermee moet ik dus 95% van de internetters kunnen bereiken, en de overige browsers zal ik later nog testen.
Mocht iemand nog op- of aanmerkingen hebben laat het me dan weten.
En iedereen bedankt voor de hulp en steun.

[ Voor 16% gewijzigd door Greenthumb1982 op 13-04-2006 20:14 ]

donderdag 13 april 2006 20:24

Acties:

Rowanov

Kop eens wat anders...

Nog een paar kleine handigheidjes dan:

Geef je code indents (tabs) om het leesbaar te houden; regels er tussen maken de code minder compact en dit vind ik persoonlijk niet prettig lezen.
Gebruik shorthand-tags voor css properties;

Cascading Stylesheet:

/* dit: */
background-image: url(images/nav_col_base.jpg);
background-repeat: repeat-y;

/* kan ook als: */
background: url(images/nav_col_base.jpg) repeat-y;

/* en dit */
padding-top: 15px;
padding-left: 40px; 
padding-right: 40px; 

/* kan als dit: */
padding: 15px 40px auto 40px; /* volgorde: top, right, bottom, left */

Is wel erg mierenneukerig, maar kan misschien van pas komen

donderdag 13 april 2006 20:27

Acties:

JHS

Splitting the thaum.

Je gebruikt nu enige loze divs, bijvoorbeeld rond de ul van je navigatie. Je kan net zo goed een ul met een id selecteren en er wat mee doen, als een div die om die ul heen staat:

HTML:

<div id="nav">
  <ul>
    <li>Bla
  </ul>
</div>

<!-- versus -->

<ul id="nav">
  <li>Bla
</ul>

Cascading Stylesheet:

1
2
3

div#nav { display: none; } 
/* Versus */
ul#nav { display: none; }

Die div heeft in deze dus geen enkele meerwaarde, en zou alleen gebruikt moeten worden voor het groeperen van andere zaken

. Dit geld op het moment ook in enige mate voor je footer

DM!

donderdag 13 april 2006 20:30

Acties:

Greenthumb1982

Topicstarter

De code die hier staat is alleen een dummy code, in de code van mijn website is wel alles in gebruik.
Echter wel een opmerking nog, de footer wordt op het moment nog verkeerd geplaatst, namelijk op de plaats waar op het moment dat het venster geopend wordt daar waar de onderkant van het venster is, ook al is dit midden door de content heen.
Hier zal ik morgen nog naar kijken en de oplossing nog hier plaatsen.

donderdag 13 april 2006 20:43

Acties:

Rickets

Finger and a shift

JHS schreef op donderdag 13 april 2006 @ 20:27:
Die div heeft in deze dus geen enkele meerwaarde, en zou alleen gebruikt moeten worden voor het groeperen van andere zaken . Dit geld op het moment ook in enige mate voor je footer

Daar ben ik het niet mee eens. Een DIV die een navigatie bevat heeft wel degelijk meerwaarde; het kan dienen als een kapstok waaraan je extra styles kan hangen, en als die DIV al in je document staat, ben je een stuk flexibeler vind ik. Zeker met meerdere styles per document, om maar een voorbeeld te noemen. Hoewel een MAP element natuurlijk het summum is.

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

donderdag 13 april 2006 20:53

Acties:

JHS

Splitting the thaum.

Rickets: Maar waarom niet gewoon de ul stylen

DM!

donderdag 13 april 2006 20:59

Acties:

Rickets

Finger and a shift

JHS schreef op donderdag 13 april 2006 @ 20:53:
Rickets: Maar waarom niet gewoon de ul stylen .

Ik zeg niet dat je de UL niet moet stylen. Ik zeg alleen dat de DIV meerwaarde kan hebben, in tegenstelling tot jouw bewering dat deze geen meerwaarde heeft. Ik kom af en toe situaties tegen waarbij ik zowel de DIV als de UL een style moet geven, en dan ben ik blij dat ze er allebei staan.
Ik zou ze dus laten staan (desnoods style je het met div#nav ul).

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

donderdag 13 april 2006 21:17

Acties:

JHS

Splitting the thaum.

Semantisch gezien wil je die div toch echt zo veel mogelijk vermijden, gezien het feit dat je semantisch gezien loze informatie toevoegd. En voor die, in mijn ervaring, zeer sporadische keren dat het wél nodig is zet ik 'em er alsnog bij

DM!

vrijdag 14 april 2006 12:24

Acties:

Greenthumb1982

Topicstarter

JHS schreef op donderdag 13 april 2006 @ 21:17:
Semantisch gezien wil je die div toch echt zo veel mogelijk vermijden, gezien het feit dat je semantisch gezien loze informatie toevoegd. En voor die, in mijn ervaring, zeer sporadische keren dat het wél nodig is zet ik 'em er alsnog bij .

Oke, ik heb het nu zoals ik wil.
De footer staat niet onderaan de pagina, maar onder de tekst.
Ik heb inderdaad een zooi overbodige div's eruit gehaald zoals je al zei.
Maar het belangrijkste is dat ik nu een layout heb met 2 vaste kolommen aan de zijkant en een middenkolom die zich aanpast aan de breedte van het scherm.
Als je de broncode nog wilt zien, kijk dan hier.
Mocht iemand er nog op- of aanmerkingen over hebben hoor ik die uiteraard graag.

vrijdag 14 april 2006 13:27

Acties:

Lexus!

Ik zou zoiezo proberen de images wat kleiner van formaat te maken. Naar mijn mening zijn ze groter dan ze hoeven te zijn.
Bovendien is het zonde dat je plaatjes gebruik voor je menu. Elk woord dat je in een plaatje stopt is niet te vinden door google. Misschien handiger om een achtergrondje te laden, en een <ul> netjes te positioneren?

Pagina: 1

Reageer