[CSS] Problemen bij ontwerpen basisstructuur website

[Verwijderd]

Na een aantal dagen proberen om zelf een oplossing te vinden voor het onderstaande probleem, moet ik toch wat hulp aanvragen via dit forum. Hopelijk kan iemand mij hier assisteren bij het oplossen van mijn CSS probleem. Om het probleem duidelijk in kaart te brengen heb ik soort schema getekend van hetgeen ik wil bereiken. Voorheen gebruikte in bij ontwerpen nog vaak tabellen om structuur te brengen in een site, ik heb inmiddels begrepen dat dit taboe is , vandaar dat ik de overstap wil maken naar een ontwerp gebaseerd op CSS. Iets wat mij tot nu toe niet bepaald eenvoudig af gaat.

Ik heb de volgende opzet voor een website van mij. Ik krijg de meeste eenvoudig dingen zelf nog wel voor elkaar alleen ik loopt echt vast op het positioneren van bepaalde 'blokken' en nog wat problemen met achtergronden. Zie hieronder de structuur zoals ik die wil hebben.


Dit moet het uiteindelijk worden.


Nu ben ik zojuist nog even wezen proberen en ik ben inmiddels tot hier gekomen.

http://www.clanhost.nl/mannekino/test/

Er zijn voorlopig nog twee problemen. Het eerste probleem is dat er in Firefox een lege ruimte wordt gecreëerd boven en onder aan de 'container' DIV. Het tweede probleem is het naast elkaar krijgen van de drie DIV's binnen in de 'container -> main' DIV. Deze worden nu zegmaar als een trap onder elkaar gezet.

PS. Let niet op dat design, dat heb ik snel in elkaar gezet om er structuur in te krijgen.

[tjmv]

Ongewenste lege ruimtes zijn meestal te wijten aan een verkeerde margin (en soms padding). Probeer eens je margin-top en -bottom op 0 te zetten, kijken wat er gebeurd.

En dat menu in de bovenkant, daar kan je ook gewoon een lijst voor gebruiken. Er zijn meerdere manieren om zoiets te doen, zelf vind ik de inline-lijst het handigst. Dus gewoon display: inline.

offtopic:
Ik zie niet zo snel wat er verder moet gebeuren?

edit:

Het tweede probleem is het naast elkaar krijgen van de drie DIV's binnen in de 'container -> main' DIV. Deze worden nu zegmaar als een trap onder elkaar gezet.

Waarschijnlijk wil je dus een float hebben, zodat het naast elkaar komt? float:left of float:right dus. Als je hier geen ervaring mee hebt, probeer het maar eens. Dat heb je zo door.

[ Voor 30% gewijzigd door tjmv op 09-09-2006 22:13 ]

[user109731]

Verwijderd schreef op zaterdag 09 september 2006 @ 22:04:
Er zijn voorlopig nog twee problemen. Het eerste probleem is dat er in Firefox een lege ruimte wordt gecreëerd boven en onder aan de 'container' DIV.

Doe eens een margin:0; op je ul?

Het tweede probleem is het naast elkaar krijgen van de drie DIV's binnen in de 'container -> main' DIV. Deze worden nu zegmaar als een trap onder elkaar gezet.

Je moet geen position:relative; gebruiken om divs naast elkaar te zetten. Dat is ook veel te veel werk. Die top en left properties op je #menu en #content kun je weghalen, en position:relative kun je vervangen door float:left. Dan moet je nog wel zorgen dat je float 'gecleared' word (zodatie niet over de footer heen loopt), bijvoorbeeld door overflow:auto in te stellen op je container.

[Verwijderd]

Ik heb de tips proberen op te volgen, het plaatsen van de DIV's lijkt nu te lukken. Echter, is nu opeens mijn achtergrond verdwen in de layer 'main'. Dit was dat plaatje links ondering het scherm. Ik heb de nieuwe versie ook online gezet.

http://www.clanhost.nl/mannekino/test/

http://www.clanhost.nl/mannekino/test2/

[Tepel]

Ja dat krijg je met floats, zodra iets float breekt het uit de parent container tenzij die ook float. en dat betekent dus dat die weer uit zn parent breekt tenzij etc etc. Ben zelf even aan het prutsen, ik zal je op de hoogte houden van mn voortgang.

[Verwijderd]

Ok, ja een kameraad van mij zei dat ik beter geen floats kon gebruiken omdat je dan hier last van krijgt. Hij deed alles zelf met die 'position: relative' / 'position: absolute' dingen. Ik begrijp die semantiek van CSS nog niet echt goed. Wat ik wel weet is dat deze structuur in tabellen binnen 5 minuutjes er had gestaan. En dan had de broncode er volledig acceptabel uitgezien. Maar ja, onlangs ook al lichtelijk afgestraft door conculega voor de broncode van onze huidige site, dat er gebruik wordt gemaakt van tabellen . Dus vandaar de overstap aangezien we toch bezig zijn met het maken van een nieuwe grafische lay-out.

Alvast bedankt voor jullie inzet.

[LionOne]

Net ook even zitten testen.
Wanneer je #Main ook een 'float:left;' geeft lijkt die weer in orde.

/edit
lol, dat het met tabellen in 5min lukt komt vooral omdat je dat gewend bent.
Geloof me, als je hier aan gewend bent, gaat het net zo snel.
Moet alleen even omschakelen, that's al.

[ Voor 50% gewijzigd door LionOne op 10-09-2006 01:20 ]

[Fuzzillogic]

De margin-top van je ul drukt je menu-div naar beneden. Zet de margin-top van de ul eens op 0.

En ja, als je eenmaal ervaren bent met CSS dan maakt je daarmee sneller sites dan met tabellen Table-based sites kunnen echt niet meer tegenwoordig imo.

[Tepel]

Hurray, tepel heeft het ook voor elkaar. Alleen zonder die extra float die jij gebruikt. Dat gebeuren waardoor de handel naar beneden sprong snap ik nog niet helemaal, maar hij doet het iig niet meer
het had iets met margins te maken voor zover ik mn debugging begreep.
In ieder geval!
-- edit -> GoT
http://0x7f.nl/GoT/mannekino/Test.htm

ipv dat #main gaat floaten heeft mijn #content een margin-left. Ik heb wel #box naar boven moeten verplaatsen omdat ie anders niet wou maar dat lijkt me geen probleem.
Anyway, beide methodes kunnen. CSS is nog niet perfect maar je kan er aardig wat mee, zolang je maar niet teveel in 1x wil

[Verwijderd]

Ik ga overmorgen weer verder met de lay-out, zal nog even laten weten of het helemaal is gelukt. Afgelopen twee dagen geen tijd gehad helaas i.v.m. drukte qua werk en studie. Nogmaals bedankt voor de inzet.