Avatar billede eksplayer Nybegynder
23. november 2005 - 18:05 Der er 17 kommentarer og
2 løsninger

Layoutproblemer med CSS

Jeg er igang med et layout til en hjemmeside, hvor der skal være en 4px bred margin mellem alle elementerne på siden. Men det skaber lidt problemer for mig.

Forslag 1 (brug af margin):
http://www.nielsen78.dk/css1/
Problem:
- I explorer hopper de fire midterste  indholdselemnter rundt - men den yderste kant er fin.
- I Firefox er den yderste kan væk i top og bund men de fire indholdselementer i midten er fine.
Se css1 her: http://www.nielsen78.dk/css1/style.html

Forslag 2 (brug af absolut position):
http://www.nielsen78.dk/css1/
Problem:
- Her ser alle elementerne fine ud i både Explorer og Firefox, MEN containeren er sat til en fast højde, hvilket gør det svært med meget/lidt indhold.
Se css2 her: http://www.nielsen78.dk/css2/style.html


Er der nogen der har et forslag til hvordan jeg løser problemet?
Avatar billede eksplayer Nybegynder
23. november 2005 - 18:06 #1
Det gik lidt hurtigt :)

Forslag 2 findes selvfølgelig her:
http://www.nielsen78.dk/css2/
Avatar billede johan.o Nybegynder
23. november 2005 - 20:50 #2
Jeg ved godt at det er et spørgsmål om 'religion' men en tabel løser de problemer du nævner :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

body {
margin: 0px;
padding: 0px;
background-color: #000000;
}

table {
width: 700px;
margin: 0px auto;
background-color: #F4F4F4;
border-collapse: separate;
border-spacing: 4px;
}

td {
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #F4F4F4;
padding: 2px;
background-color: #999999;
}

</style>
</head>

<body>

<table cellspacing="4"><tr>
<td colspan="2" style="height: 100px;">Header</td>
</tr><tr>
<td colspan="2" style="height: 20px;">Menu</td>
</tr><tr>
<td style="width: 500px; height: 200px;">Picture</td>
<td>Right</td>
</tr><tr>
<td>Content</td>
<td>Submenu</td>
</tr><tr>
<td colspan="2">Footer</td>
</tr></table>

</body>
</html>

Så er det jo op til dig hvad du 'tror' på :)

Mvh. Johan
Avatar billede eksplayer Nybegynder
24. november 2005 - 09:19 #3
Tak - du rammer præcis det layout jeg er ude efter - men jeg er ved at skifte 'religion' så jeg er ikke så meget for løsningen med tabeller ;)

Så hvis der er andre der har et bud på en css-løsning er jeg MEGET interesseret...
Avatar billede johan.o Nybegynder
24. november 2005 - 10:25 #4
Jeg sidder på arbejdet så det er ikke muligt for mig at se dette i andet end IE-old :), så prøv selv at se hvordan det ser ud i FF osv og meld tilbage.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

body {
margin: 0px ;
padding: 0px;
background-color: #000000;
}

#container {
margin: 0px auto;
width: 708px;
background-color: #F4F4F4;
border: 2px solid #F4F4F4;
}

#header{
height:100px;
background-color: #999999;
border: 2px solid #F4F4F4;
}

#menu{
height:20px;
margin: 0px;
background-color: #999999;
border: 2px solid #F4F4F4;
}

#wrap{
width: 708px;
position: relative;
}

#picture {
float: left;
width:500px;
height:200px;
margin: 0px;
background-color:#999999;
border: 2px solid #F4F4F4;
}

#right {
float: left;
width:200px;
height:200px;
margin: 0px;
background-color: #999999;
border: 2px solid #F4F4F4;
}

#wrap2{
width: 708px;
position: relative;
}

#content {
float: left;
width:500px;
margin:0px;
background-color: #999999;
border: 2px solid #F4F4F4;
}

#submenu {
float: left;
width:200px;
margin:0px;
background-color: #999999;
border: 2px solid #F4F4F4;
}

#footer{
margin:0px;
background-color:#999999;
border: 2px solid #F4F4F4;
}

p {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#F4F4F4; padding:2px; margin:0;}


</style>

</head>

<body>

<div id="container">
<div id="header"><p>Header</p></div>
<div id="menu"><p>Menu</p></div>
<div id="wrap">
  <div id="picture"><p>Picture</p></div>
  <div id="right"><p>Right</p></div>
</div>
<div id="wrap2">
  <div id="content"><p>Content</p></div>
  <div id="submenu"><p>Submenu</p></div>
</div>
<div id="footer"><p>Footer</p></div>
</div>

</body>
</html>

Mvh. Johan
Avatar billede eksplayer Nybegynder
24. november 2005 - 19:32 #5
Kanon at du har kigget mere på det :)

Men lige når man tror at ens problemer er løst, så dukker der nye op. Jeg havde glemt, at 'content' og 'submenu' altid skal have samme størrelse (visuelt). Derfor har jeg været ved at ændre lidt på din løsning og inddraget et baggrundsbillede i 'wrap2'.

Det virker perfekt i Explorer men så går det til gengæld helt galt i Firefox. Her går teksten hen over 'footer' og 'content' resizer ikke i forhold til indholdet :(

http://www.nielsen78.dk/css3

Så jeg prøver igen: nogen forslag til hvordan det kommer til at virke i Firefox?
Avatar billede johan.o Nybegynder
24. november 2005 - 22:03 #6
He he, ja men jeg kan blot sige at du opnår præcis den effekt du efterlyser med tabel løsningen. Jeg ved godt at det gør ondt :) og at det bare ikke er ligeså 'blæret' med en tabel som med en røvfuld af div's :) men jeg ville nok bide i det sure æble og erkende at det er jo lige præcis her en tabel 'spiller bonus' :)

Div højde der er afhængig af en anden div's højde er bare 'ikke til', du kan 'knække' og 'brække' men du opnår sikkert aldrig x-browser funktionalitet uden at det bliver meget uoverskueligt og kompliceret - sorry :)

Mvh. Johan
Avatar billede notes2c Nybegynder
25. november 2005 - 07:26 #7
Du mangler lige at sætte disse for FF:

#content {
background-color: #999; /* <=Indsæt */
float: left;
width:500px;
margin:0px 4px 0px 0px;
}

#submenu {
background-color: #999; /* <=Indsæt */
float:left;
width:200px;
margin: 0px;
}
#footer{
clear: both; /* <=Indsæt */
margin:0px;
background-color:#999999;
border: 2px solid #F4F4F4;
}
Avatar billede eksplayer Nybegynder
25. november 2005 - 12:05 #8
notes2c: "clear:both;" i footer virker perfekt for FF - Tak. Men at sætte baggrundsfarve på 'content' og 'submenu' løser ikke det problem jeg omtaler længere oppe, med at de to elementer altid skal være lige høje selvom de ikke har det samme indhold. Der kommer godt nok farve i men kun så længe der er indhold - var det til at forstå??

Jeg har selv prøvet at løse problemet ved at bruge et baggrundsbillede i 'wrap2' da den jo altid vil have samme højde som 'content' eller 'submenu' alt efter hvilken der har mest indhold. Men det bliver desværre ikke vist mere når jeg sætter clear:both;
Avatar billede eksplayer Nybegynder
25. november 2005 - 12:11 #9
Uden: background-color: #999; /* <=Indsæt */
http://www.nielsen78.dk/css5

Med: background-color: #999; /* <=Indsæt */
http://www.nielsen78.dk/css6
Avatar billede notes2c Nybegynder
25. november 2005 - 12:34 #10
eksplayer: Ved godt at baggrundsfarven ikke løser problemet med lige højde, men satte jeg dem ikke i min test variant så blev hele baggrunden hvid. Så det var bare for en sikkerheds skyld.... Det med lige højde kan du ikke løse med mindre du bruger en tabel eller sætter den via javascript. Desværre... Det eneste du kan gøre med den nuværende løsning er at bytte rundt forgrund og baggrunds farven. Så ser man ikke fejlen ved første øjekast, men næppe den løsning du foretrækker....

Men vil anbefale dig at benytte tabel løsningen (religion eller ej) hvis den skal bruges på forskellige browsere....

Valget er dit...
Avatar billede eksplayer Nybegynder
25. november 2005 - 13:28 #11
For min skyld behøver 'content' og 'submenu' ikke have samme fysiske størrelse - bare det ser ud som de har det rent visuelt. Derfor har jeg prøvet med et baggrundsbillede i wrapperen, hvilket burde løse problemet - men jeg kan bare ikke få det frem i Firefox - burde det ikke være muligt???
Avatar billede notes2c Nybegynder
25. november 2005 - 13:55 #12
Tror det ikke, desværre....

Er desværre nødt til at gå, kan først følge op mandag

God weekend!
Avatar billede eksplayer Nybegynder
25. november 2005 - 16:46 #13
Tror næsten at den er ved at være der...problemet lige nu er, at rammen ovenfor 'content' og 'submenu' er 6px mens kanten nedenfor kun er 2px - de skulle begge være 4px.

Det virker i Explorer, og ovenstående problem gør sig gældende i både Firefox og Opera.

HTML: http://www.nielsen78.dk/css7

CSS: http://www.nielsen78.dk/css7/style.htm
Avatar billede johan.o Nybegynder
25. november 2005 - 17:21 #14
Jeg tror at hvis du sætter borderTop på footer til 0px og borderBottom på content og submenu til 4px så er FF iorden, men tilgengæld er det noget rod i IE.

Det skyldtes den måde de to tegner din footer. IE starter den UNDER content og submenu, men FF 'inkluderer' de to i footer. Det er 'float' prop'en der er skyld i denne forskellige rendering.....

Mvh. Johan
Avatar billede eksplayer Nybegynder
25. november 2005 - 17:44 #15
Så er den der, der skulle bare leges lidt med border-top og border-bottom :)

johan.o og notes2c smid et svar så deler jeg pointene ud.

De endelige resultat: http://www.nielsen78.dk/css8

Det virker i Explorer, Firefox og Opera - det eneste minus er at der går lidt tid før baggrundsbilledet dukker op i 'content' og 'submenu', men tror det er ok da der er en lys baggrund bagved så man altid kan læse teksten.

Mange tak for hjælpen :)
Avatar billede johan.o Nybegynder
25. november 2005 - 18:10 #16
He he, hvor der er en vilje der er en vej :)

Mvh. Johan
Avatar billede notes2c Nybegynder
28. november 2005 - 10:53 #17
fint :-)
Avatar billede eksplayer Nybegynder
28. november 2005 - 11:44 #18
Endnu engang tak for hjælpen :)
Avatar billede johan.o Nybegynder
28. november 2005 - 12:28 #19
Tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester