/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Et hav af CSS bugs i et meget enkelt layou~
Fra : Brian


Dato : 27-11-07 19:21

Containeren som indeholder header, left, content, right og footer
er sat til 760 pixels!

Left er 180 pixels bred og Right ligeså. Content har derfor 400
pixels (180 + 180 + 400 = 760) at gøre godt med men nej..?

Jeg er tilsyneladende nødsaget til at fjerne 10 pixels fra
Content så den nu kun er 390 pixels bred? Hvor blev de sidste 10
pixels lige af..?

Desuden er der den yderste højre Border som tilsyneladende ligger
2 pixels mod venstre og altså overlapper sig selv, selvom den er
sat til 180 pixels så det hænger sammen matematisk.

Forsøger jeg at lægge 2 pixels til enten Content eller Right
ødelægger det igen layoutet?

Der er endnu et problem med Borders på Left og Right. De følger
ikke med ned som de gør det i Content selvom både Left, Content
og Right er sat med en height:auto; ???

Det er jo meningen at indholdet i Content automatisk skal flytte
Footer nedad jo mere tekst der fyldes i og derfor kan jeg
naturligves ikke sætte Left og Right borders til en bestemt værdi
men er nødsaget til at sætte den til AUTO, men det virker ikke?

-Det er sgu da egentlig en underlig detalje at der kun er en
Border i Left og Right ud for teksten? Hvorfor følger den ikke
med hele vejen ned når det ikke er teksten men selve felterne
Left og Right som angives med en border???

Håber nogen kan hjælpe inden jeg ryger på den lukkede...

Da jeg ikke må referere til den aktuelle side må jeg jo fylde ud
her forneden:

CSS:
body {
   padding:0;
   margin:0;
}

/* Links */

   a {color: #DB7093;}
   a:visited {color:#DB7093;}
   a:hover {color: #564b47;}
   a:active { color:#000000;}

/* Tekst */

h1, h2, h3, p {
   margin-top:10px;
   margin-left:10px;
   margin-right:10px;
   margin-bottom:10px;
   font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}

h1 {
   font-size: 20px;
}

h2 {
   font-size:16px;
   font-weight:normal;
}

p {
   font-size:11px;
   font-weight:normal;
}

/* Container */

#container {
   width: 760px;
   margin-bottom: 10px;
   margin: 0 auto;
   background-color: #EBD3E0;
}

/* Header */

#header {
   border:1px solid #000000;
   background-repeat:no-repeat;
   background-image:url("../images/banner.jpg");
   width:760px;
   height:121px;
}

#header img {padding:10px 0px;}

/* Content */

#content {
   height:auto;
   width:390px;
   background-color: #ffffff;
   border-left:1px solid #000000;
   border-right:1px solid #000000;
}

/* Left */

#left {
   height:auto;
   width:180px;
   float:left;
   border-left:1px solid #000000;
}

/* Right */

#right {
   height:auto;
   width:180px;
   float:right;
   border-right:1px solid #000000;
}

/* Footer */

#footer {
   clear: both;
   width:760px;
   height:21px;
   border:1px solid #000000;
   background-color: #ededed;
   text-align:center;
}

HTML:
<!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></title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen"
href="css/layout.css" />

</head>
<body>

<div id="container">
   <div id="header"><p>HEADER</p>
   </div>
   <div id="left"><p>LEFT</p>
   </div>
   <div id="right"><p>RIGHT</p>
   </div>   
   <div id="content"><p>CONTENT</p>
   <h1>CSS g&#248;r mig VANVITTIG!!!</h1>
   <p>Containeren som indeholder header, left, content, right og
footer er sat til 760 pixels!</p>
   <p>Left er 180 pixels bred og Right liges&#229;. Content har
derfor 400 pixels (180 + 180 + 400 = 760) at g&#248;re godt med
men nej..?</p>
   <p>Jeg er tilsyneladende n&#248;dsaget til at fjerne 10 pixels
fra Content s&#229; den nu kun er 390 pixels bred? Hvor blev de
sidste 10 pixels lige af..?</p>
   <p>Desuden er der den yderste h&#248;jre Border som
tilsyneladende ligger 2 pixels mod venstre og alts&#229;
overlapper sig selv, selvom den er sat til 180 pixels s&#229; det
h&#230;nger sammen matematisk.</p>
   <p>Fors&#248;ger jeg at l&#230;gge 2 pixels til enten Content
eller Right &#248;del&#230;gger det igen layoutet?</p>
   <p>Der er endnu et problem med Borders p&#229; Left og Right. De
f&#248;lger ikke med ned som de g&#248;r det i Content selvom
b&#229;de Left, Content og Right er sat med en
<strong>height:auto;</strong> ???</p>
   <p>Det er jo meningen at indholdet i Content automatisk skal
flytte Footer nedad jo mere tekst der fyldes i og derfor kan jeg
naturligves ikke s&#230;tte Left og Right borders til en bestemt
v&#230;rdi men er n&#248;dsaget til at s&#230;tte den til AUTO,
men det virker ikke?</p>
   <p>-Det er sgu da egentlig en underlig detalje at der kun er en
Border i Left og Right ud for teksten? Hvorfor f&#248;lger den
ikke med hele vejen ned n&#229;r det ikke er teksten men selve
felterne Left og Right som angives med en border???</p>
   <p>H&#229;ber nogen kan hj&#230;lpe inden jeg ryger p&#229; den
lukkede...</p>
   </div>
   <div id="footer"><p>FOOTER</p>
   </div>
</div>

</body>
</html>


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger (27-11-2007)
Kommentar
Fra : Birger


Dato : 27-11-07 19:35

"Brian" <alieninlife@live.dk> skrev i en meddelelse
news:474c6004$0$90269$14726298@news.sunsite.dk...
> Containeren som indeholder header, left, content, right og footer
> er sat til 760 pixels!
>
> Left er 180 pixels bred og Right ligeså. Content har derfor 400
> pixels (180 + 180 + 400 = 760) at gøre godt med men nej..?
>

Og ca 14 sider mere...
Tror ikke rigtigt nogen har lyst til at gå igennem dine koder, hvis man ikke
kan se dem i funktion.

Et hint kan måske være, at height og width angives _uden_ padding, border og
margin.

Personligt ville jeg undgå at bruge navne som left og right - der er for
mange andre der hedder sådan, og i sammenhængen er man nødt til at sidde og
holde styr på hvad det er for en slags "left" vi lige har fat i...

Browsere før IE7 regner undertiden forkert (følger ikke standarderne). De
øvrige nutidige browsere regner (for det meste) rigtigt.
Så hvis "resultaterne" ikke passer, er det mest sandsynlige din måde at
opfatte tingene på, der ikke passer med "standarderne".

Hvis du er så utilfreds med CSS, så lad være at bruge det... ;>)

Birger



Allan Vebel (28-11-2007)
Kommentar
Fra : Allan Vebel


Dato : 28-11-07 01:14

Brian skrev:

> Hvor blev de sidste 10 pixels lige af..?

Margin og padding har også indflydelse.

Kom med et link, så man kan se hvad det drejer sig
om - se også http://html-faq.dk/help

--
Allan Vebel
http://html-faq.dk



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste