Avatar billede jullehansen Nybegynder
12. februar 2006 - 12:00 Der er 14 kommentarer og
1 løsning

Kan ikke få opdelt siden ordentlig med div's

Hej
Har kigget lidt rundt på eksperten og fundet spørgsmål og svar på diverse div spørgsmål. Jeg synes dog stadig jeg er noget forvirret, for ikke at sige lost. Jeg har følgende layout http://www.hgc.dk/test.php
Som man kan se mangler min container-div at følge med indholdet. Jeg så roenving havde givet et svar på problemerne opstod når man har en div der ligger bagved, og at det så er en fordel at bruge tabeller. Er det også det i mit tilfælde eller kan den kringles hvis man er lidt mere snu end mig?.

her er style sheet til container og indhold

#indhold  {
    margin: 3px 155px 5px;
    min-width: 500px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
    height: auto;

.nyhedheader {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #333333;
}
.nyhed {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #990000;
    padding-top: 5px;
    margin-right: 20px;
    margin-bottom: 5px;
    margin-left: 20px;
}
h3 {
    font-size: 12px;
    color: #990000;
    margin-left: 20px;
    font-weight: normal;
    margin-bottom: 0px;
}
.dato {
    font-size: 9px;
    color: #999999;
}
#news {
    margin: 3px;
    padding: 2px;
    float: left;
    width: 40%;
    border: 1px solid #990000;
    position: relative;
    top: 100px;
    height: auto;
}
#indhold2 {
    float: left;
    width: 58%;
    height: auto;
}
#footer {
    float: left;
    width: 100%;
}
Avatar billede johan.o Nybegynder
12. februar 2006 - 18:40 #1
Jeg syntes umiddelbart at dit layout egner sig rigtigt godt til en tabel. F.eks. denne opbygning :

<tabel>
<tr>
<td colspan="3">Banner</td>
</tr><tr>
<td>LeftCol</td>
<td>Indhold</td>
<td>RightCol</td>
</tr><tr>
<td colspan="3">Footer</td>
</tr>
</table>

Men dermed ikke sagt at du ikke kan bruge <div>'s inde i tabellen, det kan du jo sagtens :)

Mvh. Johan
Avatar billede notes2c Nybegynder
12. februar 2006 - 23:37 #2
Det er fordi du benytter position: reletiv på #news, prøv istedet følgende.

#news {
    margin: 3px;
    margin-top: 100px;
    padding: 2px;
    float: left;
    width: 40%;
    border: 1px solid #990000;
    height: auto;
}

Og så kan du justere afstanden til toppen på margin-top.
Avatar billede notes2c Nybegynder
12. februar 2006 - 23:38 #3
PS: har kun testet det i FF
Avatar billede jullehansen Nybegynder
14. februar 2006 - 23:01 #4
notes2c

Jeg har prøvet at ændre i style sheetet, men lige fedt. Som du kan se er det min bagved liggende div der ikke følger med og giver en hvid baggrund til de andre. Jeg oplever også at det i bunden af siden ser ordentlig ud med min footer. Når jeg ser den i Safari går news-div'en ned over footeren. :o/
Avatar billede jullehansen Nybegynder
14. februar 2006 - 23:04 #5
Hov, der manglede lige noget - det er når jeg ser layoutet i Dreamweaver der er OK med footeren. :o)
Avatar billede notes2c Nybegynder
14. februar 2006 - 23:47 #6
Prøv lige at fjern position: absolute fra body, og indsæt <div style="clear: both;"></div> som det element i blokkende #indhold, #indhold2 og #news.

Herefter skulle det bare være at rette positionen ind på højre og venstre side....
Avatar billede notes2c Nybegynder
14. februar 2006 - 23:48 #7
som det element i blokkende=som det sidste element i blokkende
Avatar billede notes2c Nybegynder
14. februar 2006 - 23:51 #8
Det blev vis mere forvirrende eller hvad. Hvad jeg mener er:

<div id="indhold">
...
<div id="indhold2">
...
<div style="clear: both;"></div>
</div>
<div id="news">
...
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>

Håber det illustrere det lidt bedre....
Avatar billede notes2c Nybegynder
14. februar 2006 - 23:58 #9
Generelt er det meget svært at få position: absolute og float til at spille sammen, da de jo er modsætninger (ikke at det ikke kan lade sig gøre, men man skal have styr på sine elementer). Og min erfaring siger mig at man mange gange får uheldige følge virkninger...
Avatar billede jullehansen Nybegynder
15. februar 2006 - 00:04 #10
Det ser OK ud, men de 2 yderste kolonner er "skubbet" ud. Hvad er det egentlig de div'er gør?
Avatar billede notes2c Nybegynder
15. februar 2006 - 00:09 #11
Ændre din left og right til:

#leftcol {
...
    left:5px;
...
  }
  #rightcol {
...
    right: 7px;
...
  }

Så burde de falde på plads...
Avatar billede jullehansen Nybegynder
15. februar 2006 - 00:32 #12
Super fedt, tusind tak for hjælpen. :o))
Avatar billede notes2c Nybegynder
15. februar 2006 - 00:37 #13
Det var så lidt....
Avatar billede jullehansen Nybegynder
17. februar 2006 - 17:32 #14
Notes2c >

Jeg har fået testet siden i Explorer og der ser jeg at min højre kolonne mangler. Hvad har lige skubbet den ud??
:o/
Avatar billede notes2c Nybegynder
20. februar 2006 - 09:15 #15
Tja... Det ser ikke godt ud... Regner med at få tid til at kigge på det i aften...
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