Toon posts:

[CSS] 2 rijen, 2 kolommen

Pagina: 1
Acties:

zaterdag 12 maart 2005 15:14

Acties:
  • pretorian_nl
  • Registratie: Augustus 2002
  • Laatst online: 29-04 10:46

pretorian_nl

Topicstarter
Ik ben net begonnen met CSS en wil mijn homepage design ermee maken. Ik krijg alleen een deel van mijn kolommen niet goed geplaatst. De bovenste twee rijen heb ik al (main en top, ofwel het deel met het plaatje en de banner), maar de onderste kolommen willen maar niet goed positioneren. Wie heeft een tip wat ik fout doe en hoe het wel zou kunnen?
Het gaat om dit design, waarbij dus de vlakken met "WATVOR..." en die met "RSS" niet goed positioneren. Plz help een CSS noob.

Dit is het Design (is een plaatje):
Afbeeldingslocatie: http://www.mgvellinga.nl/voorbeeld.jpg

Dit is de code die ik heb:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

#body {
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    color: #000000;
    background-color: #FFFFCC;
}
#top {
    width: 610px; 
    margin-top: 5px;
    margin-right: auto;
    margin-left: auto;  
    margin-top: auto;
    background-color: #FFFFFF;
}
#main {
    width: 610px;
    border-left:2px solid #663300; 
    border-right:2px solid #663300;
    border-bottom:2px solid #663300;
    border-top:2px solid #663300;
    color: #000000;
    background-color: #FFFFFF;
    margin-top: inherit;
    margin-right: auto;
    margin-left: auto; 
}
#leftcontent {
    margin-right: 5px; 
    margin-top: 5px;
    width:371px;
    float:left;
    border-left:2px solid #663300; 
    border-right:2px solid #663300;
    border-bottom:2px solid #663300;
    border-top:2px solid #663300; 
    background-color:#00FF00; 
    }
#rightcontent {
   margin-top: 5px;
   margin-bottom:5px;
   border-left:2px solid #663300; 
   border-right:2px solid #663300;
   border-bottom:2px solid #663300;
   border-top:2px solid #663300;
   float:left;
   width:230px; 
   background:#eee;
  }


En dit is het resultaat dat ik krijg:
Afbeeldingslocatie: http://www.mgvellinga.nl/resultaat.gif
Kortom de rechterkant lijnt niet goed uit.

[ Voor 30% gewijzigd door pretorian_nl op 12-03-2005 15:36 ]

Digital Media Junkie

zaterdag 12 maart 2005 15:15

Acties:

Verwijderd

Heb je een linkje? Of iig je markup... ik zie trouwens niet wat er mis is met die kolommen... kortom: meer informatie

[ Voor 51% gewijzigd door Verwijderd op 12-03-2005 15:16 ]

zaterdag 12 maart 2005 16:13

Acties:
  • pretorian_nl
  • Registratie: Augustus 2002
  • Laatst online: 29-04 10:46

pretorian_nl

Topicstarter
Volgens mij heb ik hem. Kan misschien wel wat netter, maar hij klopt eindelijk. Heb het opgelost door extra dividers eromheen te plaatsen.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

#body {
    font-family: Arial;
    font-size: 11px;
    font-style: normal;
    color: #000000;
    background-color: #FFFFCC;
}

#top {
    width: 610px; 
    margin-top: 5px;
    margin-right: auto;
    margin-left: auto;  
    margin-top: auto;
    background-color: #FFFFFF;
}

#middle {
width: 610px;
margin-top: 5px;
margin-right: auto;
margin-left: auto; 
}
#main {
    width: 606px;
    border-left:2px solid #663300; 
    border-right:2px solid #663300;
    border-bottom:2px solid #663300;
    border-top:2px solid #663300;
    color: #000000;
    background-color: #FFFFFF;
    }

#bottom {
    width: 610px;
    margin-top: 5px;
    margin-right: auto;
    margin-left: auto; 
}

#leftcontent {
    width:371px;
    float: left;
    border-left:2px solid #663300; 
    border-right:2px solid #663300;
    border-bottom:2px solid #663300;
    border-top:2px solid #663300; 
    background-color:#00FF00; 
}
    
#rightcontent {
   position: static;
   margin-right: opx;
   border-left:2px solid #663300; 
   border-right:2px solid #663300;
   border-bottom:2px solid #663300;
   border-top:2px solid #663300;
   float: left;
   margin-left:5px;
   width:226px;
   background:#eee;
 }

Digital Media Junkie

Reageer