Toon posts:

[CSS][HTML] header,3column, footer.

Pagina: 1
Acties:

woensdag 29 september 2004 13:26

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
Na luttele uren gezocht te hebben op het forum en zoekmachines, blijf ik toch maar zitten met een probleem.

Ik zoek een html/css structuur met een header, dan 3 kolommen (links, midden, rechts) en een footer.

Nu is dit natuurlijk niet zo moeilijk, echter zijn er wat beperkingen bij mijn probleem.
Een cms vult de pagina's met content en per paragraaftekst, kan ook een image worden opgegeven. Deze image moet zowel links als rechts uitgelijnd kunnen worden. Maw: float.

Als ik nu een 3column layout opzet met floats, komt het probleem naar boven in (vooral meen ik) IE. Als ik daar bijvoorbeeld 2 paragrafen met in iedere paragraaf een gefloate image zet, zal ik onderaan iedere paragraaf een clear:right of left moeten doen. Echter doet IE niet alleen binnen zijn eigen container clearen, maar over het hele document. Maw: problemen in sitestructuur.
Ik heb dit overigens wel weer weten te omzeilen, maar echt crossbrowser lukt het niet.

Wie heeft dus de gouden tip voor me waarin de 3 column layout wordt gemaakt met positions, zodat ik floats in de paragrafen kan gebruiken? Via hacks kan ik een en ander zelf wel omschrijven. (Probeer altijd voor IE5MAC, IE5, IE5.5, IE6, FF en opera te coden)
In dit geval komt de footer altijd onder de 3 kolommen terecht.

Een tip in de goede richting zou geweldig zijn!

[ Voor 6% gewijzigd door Vinzzz243 op 29-09-2004 13:27 ]

woensdag 29 september 2004 13:33

Acties:
  • PhysicsRules
  • Registratie: Februari 2002
  • Laatst online: 22-12-2025

PhysicsRules

Dux: Linux voor Eenden

Zelf heb ik ook weken lopen kloten met vergelijkbare problemen. Het komt er op neer als je alle te vinden litteratuur op het web bestudeert, dat een pagina in drie kolommen met HTML/CSS altijd veel restricties meebrengt. CSS is er simpelweg niet voor gemaakt, want CSS gaat uit van een doorlopende tekst. Floats, die gebruikt worden om met CSS een drie-kolommen structuur aan te brengen zijn eigenlijk voor plaatjes bedoeld.

Het makkelijkste is het nog als je met vaste kolombreedtes werkt, want dan kun je veel met position doen. Anders is mijn advies, hoe tragisch ook: maak je hoofdstructuur met tabellen. Die zijn er ook niet voor bedoeld, maar het is veel makkelijker te implementeren, mits je niet een pagina hebt met 1000'en cellen (laadtijd problemen).

edit:

Waarom heb je eigenlijk die clear:right nodig? Met display:block ervoor zorgen dat paragrafen automatisch op een nieuwe regel beginnen. Standaard is <p> ook zo gedefiniëerd.

[ Voor 13% gewijzigd door PhysicsRules op 29-09-2004 13:42 . Reden: typo's ]

woensdag 29 september 2004 13:39

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

code:
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

<html>
<head>
<title>test</title>
<style type="text/css">

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #000000;
  overflow: auto;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -375px;
  width: 750px;
  border: 1px solid #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#innercontainer {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100%;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#main {
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#right {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100%;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

</style>
<body>
<div style="position:relative">
  <div id="content">
    <div id="header">header</div>
    <div id="innercontainer">
      <div id="left">left</div>
      <div id="main">main<br /><br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
        content hier<br />
      </div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</div>
</body>
</html>


;)

[ Voor 17% gewijzigd door André op 29-09-2004 15:11 ]

woensdag 29 september 2004 13:41

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
een vaste breedte is niet erg (ligt natuurlijk per design anders). Die oplossing van andre ga ik bekijken, waren wat haken en ogen aan, in opera...

Met een tabel oplossing is principe kwestie voor mij, en wens ik absoluut niet te doen :)

woensdag 29 september 2004 15:24

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Zo dan:

code:
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<html>
<head>
<title>test</title>
<style type="text/css">

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #000000;
  overflow: auto;
}

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#content {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -375px;
  width: 750px;
  border: 1px solid #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#innercontainer {
  position: relative;
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

#left {
  float: left;
  width: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#main {
  float: left;
  width: 546px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#right {
  float: right ;
  width: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

#footer {
  position: absolute;
  width: 100%;
  height: 100px;
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 10px;
}

</style>
<body>
<div style="position:relative">
  <div id="content">
    <div id="header">header</div>
    <div id="innercontainer">
      <div id="left">left</div>
      <div id="main">main<br /><br />
      </div>
      <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
  </div>
</div>
</body>
</html>


Alleen getest in IE.

woensdag 29 september 2004 16:27

Acties:
  • IschaGast
  • Registratie: Juli 2001
  • Laatst online: 25-11-2025

IschaGast

misschien is dit iets voor je:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.complexspiral.com/publications/containing-floats/

woensdag 29 september 2004 16:36

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
IschaGast schreef op 29 september 2004 @ 16:27:
misschien is dit iets voor je:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.complexspiral.com/publications/containing-floats/
nofi, maar heb je mn topic gelezen? Het is juist de bedoeling GEEN floats als kolomstructuur te gebruiken, zodat ik de floats kan 'reserveren' voor de content.

woensdag 29 september 2004 16:45

Acties:
  • IschaGast
  • Registratie: Juli 2001
  • Laatst online: 25-11-2025

IschaGast

Waarom zou je onder iedere paragraaf clear: ... moeten doen?
Dat is wat ik niet helemaal begrijp want bijvoorbeeld deze pagina maakt ook gebruik van een images in een paragraaf en van float en geen problemen.

http://simplebits.com/

woensdag 29 september 2004 16:50

Acties:
  • MBV
  • Registratie: Februari 2002
  • Laatst online: 22-05 21:28

MBV

andre, die laatste werkt niet in FF. De footer komt door left heen, en lijk net zo groot als innercontainer. Niet zo raar, met absolute positionering, zonder "bottom: 0px;" in de sectie footer :)

edit:
voor mijn stage heb ik hier zo onwijs mee moeten klooien om te zorgen dat de breedte variabel is... Zo gaat het vrij makkelijk

[ Voor 29% gewijzigd door MBV op 29-09-2004 16:52 ]

woensdag 29 september 2004 17:18

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
IschaGast schreef op 29 september 2004 @ 16:45:
Waarom zou je onder iedere paragraaf clear: ... moeten doen?
Dat is wat ik niet helemaal begrijp want bijvoorbeeld deze pagina maakt ook gebruik van een images in een paragraaf en van float en geen problemen.

http://simplebits.com/
Als ik geen clear geef en de tekst is kleiner dan de image, krijg je precies wat ze uitleggen in je 2e linkje... een volgende paragraaf moet onder de vorige komen (1 paragraaf is dus tekst + image) vandaar de clear.

Die pagina jou (eerste link) kan het ook niet, die hebben gewoon genoeg contect, zodat de gefloate image ALTIJD text om zich heen heeft...als je namelijk text weghaald, gaat t 'verrot' uitzien :)
MBV schreef op 29 september 2004 @ 16:50:
edit:
voor mijn stage heb ik hier zo onwijs mee moeten klooien om te zorgen dat de breedte variabel is... Zo gaat het vrij makkelijk
die laatste zin snap ik niet, heb je t opgelost? zoja, hulp! :)

[ Voor 34% gewijzigd door Vinzzz243 op 29-09-2004 21:09 ]

woensdag 29 september 2004 23:08

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
PhysicsRules schreef op 29 september 2004 @ 13:33:
edit:

Waarom heb je eigenlijk die clear:right nodig? Met display:block ervoor zorgen dat paragrafen automatisch op een nieuwe regel beginnen. Standaard is <p> ook zo gedefiniëerd.
en wat als de content kleiner is dan de image??
Ik heb volgens mij een oplossing gevonden die ik beetje universeler ga aanpassen, als t echt de oplossing is, post ik hem hier.

donderdag 30 september 2004 00:56

Acties:
  • Vinzzz243
  • Registratie: Februari 2001
  • Laatst online: 22-01-2025

Vinzzz243

Topicstarter
excuses voor de 'kick'. Ik ben er uitgekomen.
url: http://www.vinzzz.nl/columns

Getest in:
Safari 1.2.3
IE5.2 mac
IE5 win
IE5.5 win
IE6 win
Opera 7.54
Opera 6
Netscape 7.1
Firefox 0.9.3


Bugs:
- Scrollbar in opera 6
- IE6 comment bug (op te lossen door 3px marge)
- niet getest in linux browser
- gaat fout in ie voor mac door de floats

Wanneer iemand hier op- of aanmerkingen voor heeft, hoor ik dat natuurlijk graag.

[ Voor 30% gewijzigd door Vinzzz243 op 30-09-2004 14:38 ]

donderdag 30 september 2004 14:51

Acties:
  • x0r
  • Registratie: Juli 2002
  • Laatst online: 20-05 12:32

x0r

dus ik

op zich mooie oplossing, alleen jammer dat het niet werkt in ie5/mac, iemand een oplossing, zou heeeel fijn zijn

ben namelijk hier zelf ook al een tijdje mee bezig

There can be only one.... en ik dan ??

Pagina: 1
Reageer