Positioneringsproblemen
Ik zit met een probleempje. Ik heb een ontwerp gemaakt in illustrator, maar weet niet zo goed hoe ik het om moet zetten naar HTML&CSS. De lay-out staat op www.nofaketheater.nl/website-layout.png.
Ik heb al even gekeken naar een tabel, maar dat is niet echt handig in dit geval :)
Heeft iemand tips?
Verder kan ik me behoorlijk vinden in HTML en CSS, maar deze vind ik toch wat lastiger :)
Hier op phphulp staan ook goeie css tutorailen, vooral die van Jan Koehoorn.
Dit is een klein (heel klein) beginnetje, maar zodra je problemen tegekomt, meld ze dan hier, dan helpen we je.
Ik zal ff kijken naar absolute positionering van de div's, ik denk dat dat de beste optie is
Robbert van Beek schreef op 08.01.2008 09:39:
Okee komt voor elkaar :)
Ik zal ff kijken naar absolute positionering van de div's, ik denk dat dat de beste optie is
Ik zal ff kijken naar absolute positionering van de div's, ik denk dat dat de beste optie is
Dat is denk ik wel wat jij nodig hebt, want je hebt een vaste inhoud en geen variabele toch?
Zorg wel dat je een container div hebt (die om alles heenzit) en positioneer die relative en geef hem een margin: 0px auto; mee, dan positioneer je hem tegen de bovenkant van je scherm en in het midden.
Daarna kan je de rest absoluut positioneren. Het hoeft niet, maar kan geen kwaad in jou lay-out, omdat er toch niets veranderd qua inhoud.
Mocht je nu wel een variabele inhoud hebben, dan moet je gaan werken met margins en floats, maar dat is alleen zo als je inhoud (tekst enzo) wel eens veranderd.
kan je niet met image maps werken?
http://www.w3schools.com/tags/tag_map.asp
Je hoeft echter geen afbeelding voor de hele vakjes te maken, je zou alleen voor de tekst een plaatje moeten maken. De achtergrondkleur van zo'n vakje kun je gewoon met CSS instellen. Op die manier houd je je plaatjes zo klein mogelijk en beperk je de grootte van je pagina.
Ik ben er weer eens mee bezig geweest en ik krijg (uiteraard) een andere output in IE dan in de browsers. het live "resultaat" is ondertussen te vinden op http://www.nofaketheater.com/2008.
hier een stukje van mn CSS:
Code (php)
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
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
#info {
position: absolute;
top: 0px;
left: 0px;
background-color: #ec009c;
width: 230px;
height: 90px;
background-image: url(img/info.png);
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
#foto1 {
position: absolute;
top: 0px;
left: 233px;
left: 250; !important
background-color: #ec009c;
width: 225px;
height: 170px;
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
position: absolute;
top: 0px;
left: 0px;
background-color: #ec009c;
width: 230px;
height: 90px;
background-image: url(img/info.png);
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
#foto1 {
position: absolute;
top: 0px;
left: 233px;
left: 250; !important
background-color: #ec009c;
width: 225px;
height: 170px;
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
...en de bijbehorende HTML
Code (php)
1
2
3
4
2
3
4
<div class="container">
<div id="info"></div>
<div id="foto1"></div>
</div>
<div id="info"></div>
<div id="foto1"></div>
</div>
De container is relative gepositioneerd, met een 0px auto margin. Iemand een idee hoe ik de weergaves hetzelfde kan krijgen? of zal ik het met DOM manipulatie op moeten lossen? :S
edit: zoals jullie zien heb ik de oude !important-hack geprobeerd, werkt neit meer in ie7 :(
Gewijzigd op 01/01/1970 01:00:00 door Robbert van Beek
Daarnaast wil IE6 nog wel eens lastig doen met relatief en absoluut gepositioneerde elementen. Dat heeft te maken met de hasLayout property die Microsoft verzonnen heeft. Zorg dat al je divs in ieder geval een width hebben, dat scheelt al vrij veel problemen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#foto1 {
position: absolute;
top: 0px;
left: 234px;
* left: 230;
background-color: #ec009c;
width: 225px;
height: 170px;
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
position: absolute;
top: 0px;
left: 234px;
* left: 230;
background-color: #ec009c;
width: 225px;
height: 170px;
background-position: center;
background-repeat: no-repeat;
border: 2px solid #ffffff;
}
De regel met * ervoor wordt alleen gelezen door IE... in principe "opgelost" dus.
Mocht dat nog niet werken, dan ga je met wrapper -divs werken.
edit: trouwens, had je doctype reactie even gemist omdat hij tussen mijn eigen postst in staat... sorry!
edit 2: De doctype heeft het gefixt. Sorry, ik hou me vooral bezig met Java en PHP en kan prima een website vormgeven, maar van CSS positionering, doctypes en dat soort dingen heb ik (nog) geen kaas gegeten. Interessant projectje wat dat betreft ;) thanks!
Gewijzigd op 01/01/1970 01:00:00 door Robbert van Beek