Problemer med placere banner og loginform.

Det kræver hvis lidt uddybning, eller har du siden liggende så vi kan se den?

Nej ikke helt. Float er ikke ligesom tekst justering eller align. Det kan kun være left, right, none eller inherit. Du skal mere tænke på det som at du har nogle magneter som enten sætter sig mod højre eller mod venstre.

Så din html er rigtig, men din CSS vil være:

 #banner  {
     margin: 20px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #reklame {
     margin: 40px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #loginform  {
     margin: 60px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }

Dog har jeg her optimeret din CSS og HTML:

 <div id="banner" class="box">Banner</div>
 <div id="reklame" class="box">Reklame</div>
 <div id="loginForm" class="box">LoginForm</div>
 <div class="clear"></div>

CSS:

 .box {
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #banner {margin: 20px 150px;}
 #reklame {margin: 40px 150px;}
 #loginForm {margin: 60px 150px;}

Det er fordi div's er såkaldte block elementer, hvilket betyder at de vises efter hinanden på nye linjer. Du kan enten bruge floats eller inline-block. Men så skal du huske at du nok skal definere width og height på dine elementer.

Du kan bruge css enten:

 #banner, #loginForm {float:left;}

Men så skal du huske at bruge følgende på et element efter:

 .clear{clear:left;}

Så skal din html se ca. sådan her ud:

 <div id="banner">
     ...
 </div>
 <div id="loginForm">
     ...
 </div>
 <div class="clear"></div>

Ellers kan du bruge inline-block sådan her:

 #banner, #loginForm {
     display:-moz-inline-stack; /*Target FF*/
     display:inline-block; /*Target Compatible browsers*/
     zoom:1; /*IE*/
     *display:inline; /*IE*/
 }

Det er fordi div's er såkaldte block elementer, hvilket betyder at de vises efter hinanden på nye linjer. Du kan enten bruge floats eller inline-block. Men så skal du huske at du nok skal definere width og height på dine elementer.

Du kan bruge css enten:

CSS kode 

 #banner, #loginForm {float:left;}

Men så skal du huske at bruge følgende på et element efter:

CSS kode 

 .clear{clear:left;}

Så skal din html se ca. sådan her ud:

HTML kode 

 <div id="banner">
     ...
 </div>
 <div id="loginForm">
     ...
 </div>
 <div class="clear"></div>

Ellers kan du bruge inline-block sådan her:

CSS kode 

 #banner, #loginForm {
     display:-moz-inline-stack; /*Target FF*/
     display:inline-block; /*Target Compatible browsers*/
     zoom:1; /*IE*[code]

Kode 

/
*display:inline; /*IE*/
}
[/code]

Tak for dit svar!

Dvs. at jeg kan gøre sådan her?

#banner  {margin: 20px 150px ;float:left;background:#CECEF6;height:109px;border:1px solid silver;}
#reklame {margin: 40px 150px;float:center;background:#CECEF6;height:109px;border:1px solid silver;}
#loginform  {margin: 60px 150px;float:right;background:#CECEF6;height:109px;border:1px solid silver;}

Form:

<div id="banner"> banner </div>
<div id="reklame"> reklame</div>
<div id="loginform"> loginform</div>
<div class="clear"></div>

Nej ikke helt. Float er ikke ligesom tekst justering eller align. Det kan kun være left, right, none eller inherit. Du skal mere tænke på det som at du har nogle magneter som enten sætter sig mod højre eller mod venstre.

Så din html er rigtig, men din CSS vil være:

CSS kode 

 #banner  {
     margin: 20px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #reklame {
     margin: 40px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #loginform  {
     margin: 60px 150px;
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }

Dog har jeg her optimeret din CSS og HTML:

HTML kode 

 <div id="banner" class="box">Banner</div>
 <div id="reklame" class="box">Reklame</div>
 <div id="loginForm" class="box">LoginForm</div>
 <div class="clear"></div>

CSS:

CSS kode 

 .box {
     float:left;
     background:#CECEF6;
     height:109px;
     border:1px solid silver;
 }
 #banner {margin: 20px 150px;}
 #reklame {margin: 40px 150px;}
 #loginForm {margin: 60px 150px;}

Okay Nu har jeg leget lidt med det, og kan ikke rigtigt få det til at fungere som jeg vil

 #banner {margin: 2% 50% 0% 26% ;}
 #reklame {margin:  0% 75% 0% 50%;}
 #loginForm {margin: 0% 0% 0% 75%;}

Nu har jeg sat det i %. Problemet er at divsne ikke holder bredten og ikke er ved siden af hinanden. Jeg kan ikke rigtigt få det til det

evt. har lagt det herind

http://ja-ki.at/

Det ser fint ud hvis du spørger mig. Dog har du et element der hedder indhold, og du glemmer at clear'e.

Jeg forstår heller ikke hvorfor du blander div og tables. Tabeller bruges (skematisk) kun til at vise data. Du bør bruge CSS som jeg viste oven for i stedet.

Det ser fint ud hvis du spørger mig. Dog har du et element der hedder indhold, og du glemmer at clear'e.

Jeg forstår heller ikke hvorfor du blander div og tables. Tabeller bruges (skematisk) kun til at vise data. Du bør bruge CSS som jeg viste oven for i stedet.

Tak for hjælpen. Har fået det til at virke