[CSS] absolute position en toch laten flowen?

dinsdag 31 augustus 2010 14:25

Acties:

0 Henk 'm!

C8H10N4O2 powered

Topicstarter

Ik ben een bestaande website aan het aanpassen en ik wil deze wat netter maken. Momenteel bestaat deze uit een header, left en een right menu en footer met daartussin de content. Echter knalt de footer (een lange balk) op sommige pagina's in de menu...Liefst zou ik dan het menu een vaste afstand zou hebben tot en de content en het menu.
Omdat het een bestaande site is zit er al heel veel css aan vast, wat het bewerken ook wat lastiger maakt helaas.
Soms zit er heel weinig tekst op een pagina waardoor het menu langer is dan tekst, waardoor een vaste distance top niet altijd handig is.
Relevante code
*is niet relevant*

[ Voor 84% gewijzigd door MueR op 31-08-2010 15:40 . Reden: Code weg ]

dinsdag 31 augustus 2010 15:41

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je "relevante" code is niet relevant. Strip daar eerst maar eens alle overbodige meuk uit en zorg dat je alleen datgene plaatst wat echt op het probleem van toepassing is.

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 31 augustus 2010 16:02

Acties:

0 Henk 'm!

Mr_gadget

C8H10N4O2 powered

Topicstarter

Nog een poging, de vorige code was redelijk gestript. Had helaas de gestripte versie niet ergens opgeslagen dus het moest weer helemaal overnieuw nu

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB"  >

<head>
  
<!-- The header starts here -->
<div id="Header">
 
</div>
<!-- The header ends here -->


<!-- The left hand menu starts here -->

  <div id="leftMenu">
    <h1 class="leftHeading">Topic menu</h1>
     
  </div>
<!-- The left hand menu ends here -->


    <p><a name="content"></a></p>
    

<!-- The right hand menu starts here -->
  <div id="rightMenu">
  
  </div>
<!-- The right hand menu ends here -->
    
<!-- The central content starts here -->
  <div id="middlebox">
<!-- Edit content within here -->

    <!-- Stop editing central content here -->
  </div>
<!-- The central content ends here -->

<!-- The footer starts here -->
<div class="Footer">
  
</div>
<!-- The footer ends here -->


</body>
</html>

Cascading Stylesheet:

div#leftMenu { position: absolute; left: 0px; width: 13em; margin-top: 29px; padding: 5px 5px 5px 0; }

#middlebox { width: 60%; margin: 0em 0em 1em 13.5em; padding: 0px 0px 10px; color: black; background-color: white; }
* html #middlebox { width: 75%; margin: 0em 0em 1em 13.5em; padding: 0px 0px 10px; color: black; background-color: white; }

.Footer {
      position: static;
      clear: both;
      bottom: 0em;
      width: 100%;
      height: 2em;
      line-height: 2em;
      margin: 0px;
      padding: 0px;
      border-top: 1px solid maroon; border-bottom: 0px solid maroon;
      text-align: center;
      color: black;
      background-color: white;
}

Ik moet dus iets hebben wat de Footer op afstand houd van #leftmenu en de #middlebox. Ik heb er al een clear: both bij gezet en geexperimenteerd met top en left.

dinsdag 31 augustus 2010 16:03

Acties:

0 Henk 'm!

amahusu

taking over the world!

nevermind

[ Voor 95% gewijzigd door amahusu op 31-08-2010 16:04 ]

Always Outnumbered, Never Outgunned // Some people feel the rain, others just get wet

dinsdag 31 augustus 2010 17:20

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Misschien is een online test-case handig, waarin je met <divs> wel de structuur aangeeft. Nu zijn het wat <divs> met helemaal geen opmaak meer. Hebben ze bijv. allemaal een vaste breedte of percentueel? Hebben sommige een background (met patroon) of één kleur?

Sowieso zorgt "position: absolute;" er voor dat de <div> uit de flow gehaald wordt, waardoor hij zich niets meer aantrekt van de overige elementen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

dinsdag 31 augustus 2010 18:35

Acties:

0 Henk 'm!

Mr_gadget

C8H10N4O2 powered

Topicstarter

De footer en de middelbox hebben een relatieve grootte zoals te zien is in de css. Het menu een vaste. Ze hebben verschillende kleuren.

Het liefst zou de footer gewoon onder de content en het menu moeten flowen maar dan kan volgens mij niet met static positioning?

dinsdag 31 augustus 2010 19:37

Acties:

0 Henk 'm!

mcDavid

Denk dat je de content een margin-bottom moet geven die even hoog is als je footer.

Als dat niet doet wat je wilt moet je echt proberen het wat duidelijker uit te leggen want dan snap ik er geen zak van.

dinsdag 31 augustus 2010 23:10

Acties:

0 Henk 'm!

Verwijderd

Mr_gadget schreef op dinsdag 31 augustus 2010 @ 18:35:
Het liefst zou de footer gewoon onder de content en het menu moeten flowen maar dan kan volgens mij niet met static positioning?

Nee, het kan juist met static positioning

(static is namelijk de normale vorm van positioneren, naast relative en absolute)

Leesvoer: http://www.brainjar.com/css/positioning/

woensdag 1 september 2010 00:35

Acties:

0 Henk 'm!

Mr_gadget

C8H10N4O2 powered

Topicstarter

Ter verduidelijking

Afbeeldingslocatie: http://mezziluogo.nl/foto/normaal2.png

Afbeeldingslocatie: http://mezziluogo.nl/foto/normaal.png

[ Voor 10% gewijzigd door Mr_gadget op 01-09-2010 00:35 ]

woensdag 1 september 2010 08:47

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Dat komt dus omdat #leftMenu nu een position: absolute; heeft, en hoger is dan #rightMenu. De footer blijft dus onder #rightMenu hangen, maar negeerd #leftMenu.

Je zou eens kunnen kijken naar http://blog.html.it/layoutgala/ voor wat voorbeelden van hoe je het kan oplossen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 1 september 2010 09:34

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

De echte vraag is dan ook waarom je een simpele layout als deze met absolute positioning doet.

Anyone who gets in between me and my morning coffee should be insecure.

woensdag 1 september 2010 18:33

Acties:

0 Henk 'm!

dB90

Dit is inderdaad prima op te lossen met floats, meer leesvoer: http://css-tricks.com/all-about-floats/

Webberry Webdevelopment

Onderwerpen