XHTML - CSS: relatief gepositioneerde <div>

[-GSF-JohnDoe]

...wilde eigenlijk een duidelijkere topic titel maken maar die was te lang

ik heb een probleem met een website die ik aan het maken ben voor mijn guild in WoW. Deze site probeer ik volledig in XHTML 1.0 en CSS 2.0 te maken, volgens de W3C regels, en dus alleen maar <div>s voor de layout. Dit is de eerste keer dat ik echt met <div>s werk en het is nog allemaal een beetje vreemd.

Nu gaat dit aardig todat ik bij mij footer aankom. Dit is 1 <div> met de CSS

code:

#bottom                {background: #000000; 
                height: 36px; width: 100%; 
                background-image: url(../images/bottom.gif); 
                position: relative; bottom: 0px;}

met het idee dat deze dus de volledige breedte van mijn webpage beslaat, 35 pixels hoog is en helemaal onderaan mijn website zit. Nu werkt dit.... bijna.

Hij zit namelijk niet _onderaan_ zoals je kan zien hier: http://www.tarquinaslegion.net/site/index2.php
Hij zit gewoon net onder de laatste text. Als ik de position 'absolute' maak zit hij weer wel mooi onderaan de pagina (http://www.tarquinaslegion.net/site/index.php), maar als je deze pagina dan resized en een stuk kleiner maakt ( bijv. 800 hoog) schuift mijn footer weer over mijn sidebars heen =/

Ook plaatst hij zichzelf vol over mijn form op http://www.tarquinaslegion.net/site/application.php?do=apply (dit is dus met position: absolute).

Als ik absolute gebruik zit het verkeerd op pagina's met veel content, en als ik relative gebruik zit het verkeerd op pagina's met weinig content. Wat ik nu dus wil is dat hij minimaal net onder mijn sidebars zit, maar dat als er meer content dat hij dan zelf lager schuift.

Is dit zoiezo mogelijk? Is er uberhaubt een oplossing voor dit probleem, of schiet het W3C met hun xhtml en css hier tekort en moet ik toch een table gebruiken?

[CrashOne]

Je kan beter tabellen gebruiken als ik het zo zie. Met alleen divs is het net zo'n zooi.

[simon]

CrashOne schreef op zaterdag 21 mei 2005 @ 17:10:
Je kan beter tabellen gebruiken als ik het zo zie. Met alleen divs is het net zo'n zooi.

Dat is de meest idiote opmerking op xhtml/semantiek gebied die ik tot nu toe heb gehoord.

Een div met bottom: 0px en position: relative wil niet, wel als ie absolute is

Je zou overigens dat artikel over smurfentaal binnen xhtml moeten lezen en het juiste gebruik van je elementen. Dus geen div soup maken.

[ Voor 17% gewijzigd door simon op 21-05-2005 17:17 ]

[CrashOne]

Meest idiote opmerking? Heb je uberhaupt wel in zn source gekeken, die is gewoon weg erger dan met een tabel, alleen maar niks zegende divs en spans.

[simon]

CrashOne schreef op zaterdag 21 mei 2005 @ 17:19:
Meest idiote opmerking? Heb je uberhaupt wel in zn source gekeken, die is gewoon weg erger dan met een tabel, alleen maar niks zegende divs en spans.

Als je tegen iemand zegt dat het eten van soep met een vork stom is ga je toch ook niet zeggen "probeer 't dan met een mes"..

Duw 'm nou in de goede weg, niet meteen terug. Dat is niet handig, zo leer je nooit wat.

[Verwijderd]

code:

<span class="title">News</span>

<br />
<div class="description">
    <span class="headline">Welcome to Tarquinas Legion</span><br /><br />
    Welcome to the website of Tarquinas Legion, a <a href="http://www.worldofwarcraft.com" class="gold">World of Warcraft</a> guild, originally formed by Star Wars Galaxies players from the Tarquinas server. We are a very active guild, both PvP and PvE wise. We partner wih a few other guilds for Onyxia and Molten Core, but do everything else in-house. We emphasise fun gameplay and helping eachother; the social aspect of the game is important to us.<br /><br />    
    Interested in joining TL? We're always looking for more skilled and friendly players. If you want to join, go <a href="application.php?PHPSESSID=112888762bdfb313ff5c3a75d2b9fe60" class="gold">here</a> to send in your application!<br /><br />
    If you wish to contact TL about possible partnerships, guild-mergers, information or even a complaint about one of our members (we take this very seriously), contact one of our officers: Soar (alts: Roas), Krugar (Kru, Caust) or Grylum (Healum).<br />

</div>
<br />

Dit is inderdaad niet erg mooi. Waarom niet iets als dit?

code:

<h2>News</h2>
<div class="description">
  <h3>Welcome to Tarquinas Legion</h3>
  <p>Hoop tekst hier...</p>
</div>

Overigens kan wat jij wilt volgens mij niet. Waarom gooi je de footer niet gewoon helemaal onderaan zodat deze mee verschuift naar mate de content langer/korter wordt.

De waardes left, top, bottom, right bij position:absolute zijn van het scherm, niet van de pagina. Dus bottom: 0px is gewoon de onderkant van het scherm, NIET van de pagina.

Edit: Ehm nu bedenk ik me ineens iets. Heb je al aan position: fixed; gedacht? Volgens mij moet het zo werken:

code:

#footer {
  background: url(../images/bottom.gif) #000;
  position: fixed;
  height: 36px;
  width: 100%;
  bottom: 0;
}

[ Voor 27% gewijzigd door Verwijderd op 21-05-2005 17:36 . Reden: ineens kreeg ik een ingeving!! :D ]

[Alex)]

Waarom werk je in je menu met heel veel <div onmouseover ...>?
Je hebt toch meer aan:

HTML:

<div id="hoofdmenu">
<ul>
  <li><a href="link1">link1</a></li>
  <li><a href="link2">link2</a></li>
  <li><a href="link3">link3</a></li>
  <li><a href="link4">link4</a></li>
</ul></div>

CSS:

Cascading Stylesheet:

#hoofdmenu ul {
 padding:0;
 margin:0;
}
#hoofdmenu ul li {
  list-style-type: none;
}
#hoofdmenu ul li a {
  background-color:#[kleurcode]
}
#hoofdmenu ul li a:hover {
  background-color:#[kleurcode2]
}

[CrashOne]

Position fixed werkt niet in IE, dus dat kan je beter niet doen.

[Sappie]

Kijk bijvoorbeeld hier eens naar: http://steve.pugh.net/test/test57.html

Verder tja.. o.a. de semantiek in je html is zoals anderen reeds zeiden niet om over naar huis te schrijven... daar zou ik ook nog eens goed naar kijken als je het écht goed wilt doen

[-GSF-JohnDoe]

Sappie schreef op zaterdag 21 mei 2005 @ 18:36:
Kijk bijvoorbeeld hier eens naar: http://steve.pugh.net/test/test57.html

Verder tja.. o.a. de semantiek in je html is zoals anderen reeds zeiden niet om over naar huis te schrijven... daar zou ik ook nog eens goed naar kijken als je het écht goed wilt doen

woei, nu werkt het wel

mja, ik wilde gewoon eens zien of ik een website zonder tables kon maken, en die geaccepteerd werd door de w3c validator. Maar ik denk niet dat ik die moeite nog een keer ga doen. De w3c regels zijn in sommige gevallen gewoon onhandig.

[simon]

nee, het feit dat je er niet aan gewent bent zorgt ervoor dat jij ze als onhandig ervaart. Want zo onhandig zijn ze niet. Ze zijn er met een reden

[flashin]

De w3c regels zijn handig hoor, hoe de browser(s) ze interpreteerd is wat anders

[Verwijderd]

mja, ik wilde gewoon eens zien of ik een website zonder tables kon maken, en die geaccepteerd werd door de w3c validator. Maar ik denk niet dat ik die moeite nog een keer ga doen. De w3c regels zijn in sommige gevallen gewoon onhandig.

Ta. Als dat je enige doel is heb je nog wel wat stappen te gaan. Nu al opgeven kan natuurlijk ook. Vergemoeilijkt alleen nieuwe vragen: http://diveintomark.org/a...5/05/why_we_wont_help_you

[Verwijderd]

Alex schreef op zaterdag 21 mei 2005 @ 17:37:
[..]

Je vergeet zowaar 95% van de internet bevolking..

[CrashOne]

Waarom? Dit werkt zelfs in IE, de hover zit nl gewoon op een a.

[Verwijderd]

CrashOne schreef op zondag 22 mei 2005 @ 09:25:
Waarom? Dit werkt zelfs in IE, de hover zit nl gewoon op een a.

Oeps. ik was weer te snel met zeiken.. ik dacht dat de hover op een li zat

[Alex)]

Ik snapte je al niet, maar ik dacht: "ik vraag maar niks, heb deze fout al eens gemaakt..." (iets dat ik later ineens wel snapte, komt nogal dom over )