[css] Twee positioneringsvragen

zaterdag 20 februari 2010 18:39

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Zie de onderstaande html / css. Deze creeert bovenaan de pagina een fixed "toolbar" waarop later administratieve functies komen. De toolbar loopt schermbreed, maar ik wil de commando's / dropdownmenu's centreren op de pagina in een 800 pixels brede div.

Twee vragen hierbij:

de menuutjes worden wel degelijk goed gewrapped in de center_box div, maar waarom wordt deze niet gecentreerd? Ik heb toch duidelijk margin: 0 auto staan? Ik heb in div#toolbar ook al text-align:center toegevoegd, maar dat maakte ook niets uit. Heeft iemand een ander idee?
div "toolbar-page" wordt in de html gedefinieerd boven / voor div "toolbar-user". Ik verwachtte dan ook dat "toolbar-user" / "Admin uitloggen" uiterst rechts zou komen te staan. Deze twee divs zijn echter omgedraaid. Waarom is dat? Een oplossing is natuurlijk om de divs om te draaien, maar dan snap ik het nog steeds niet! Ik hoop dat iemand mij kan uitleggen wat er hier fout gaat

HTML:

<html>
<head>
<title>toolbar test</title>
<style>
div.center_box {
  width: 800px;
  margin: 0 auto;   
  position: relative;
}

#toolbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: #000;
}

#toolbar, 
#toolbar * {
  margin: 0;
  padding: 0;
  color: #fff;
}

#toolbar li {
  list-style-type: none;
  float: left;
  position: relative;
  margin: 5px;
  white-space: nowrap;
}

#toolbar ul ul {
  visibility: hidden;
  position: absolute;
  background: #ccc;
}

#toolbar a.active,
#toolbar ul li:hover {
  background: #ccc;
}

#toolbar ul li:hover ul {
  visibility: visible;
  z-index: 100;
}

#toolbar div.toolbar-menu {
  position: relative;
}

#toolbar-menu {
  float: left;
}

#toolbar-page,
#toolbar-user {
  float: right;
}
</style>
</head>
<body>

<div id="toolbar">
  <div class="center_box">
    <div class="toolbar-menu">
      <ul id="toolbar-menu">
        <li class="leaf"><a href="">Home</a></li>
        <li class="leaf"><a href="admin/content" class="">Content</a>
          <ul>
            <li class="leaf"><a href="admin/content/form" class="">Formulieren</a></li>
          </ul>
        </li>
        <li class="collapsed"><a href="admin/system/help" class="">Help</a></li>
      </ul>
      <ul id="toolbar-page">
        <li>Deze pagina
          <ul>
            <li><a href="admin/content/page/edit/1?r=">deze pagina aanpassen</a></li>
          </ul>
        </li>
      </ul>
      <ul id="toolbar-user">
        <li><a href="user/logout">Admin uitloggen</a></li>
      </ul>
    </div>
  </div>
  <div class="toolbar-shadow"></div>
</div>

</body>
</html>

zaterdag 20 februari 2010 20:10

Acties:

0 Henk 'm!

Passenger

Verwijderd schreef op zaterdag 20 februari 2010 @ 18:39:
• de menuutjes worden wel degelijk goed gewrapped in de center_box div, maar waarom wordt deze niet gecentreerd? Ik heb toch duidelijk margin: 0 auto staan? Ik heb in div#toolbar ook al text-align:center toegevoegd, maar dat maakte ook niets uit. Heeft iemand een ander idee?

Je schiet jezelf in de voet met:

Cascading Stylesheet:

#toolbar,  
#toolbar * { 
  margin: 0; 
  padding: 0; 
  color: #fff; 
}

Hier override je dus alle voorgaande marges van je div, dus ook die '0 auto'.

• div "toolbar-page" wordt in de html gedefinieerd boven / voor div "toolbar-user". Ik verwachtte dan ook dat "toolbar-user" / "Admin uitloggen" uiterst rechts zou komen te staan. Deze twee divs zijn echter omgedraaid. Waarom is dat? Een oplossing is natuurlijk om de divs om te draaien, maar dan snap ik het nog steeds niet!

Items met float:left worden naar links verplaatst, daaropvolgende content verschijnt rechts. Bij float:right gebeurt dat precies andersom, items worden dus rechts geplaatst en de daaropvolgende content links. Je kunt het oplossen door een container met float:right te maken met daarin de items die je rechts wilt hebben. Binnen die container pas je weer float:left toe op alle elementen om alles weer netjes naast elkaar te krijgen.

zaterdag 20 februari 2010 20:26

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

He bedankt, man! Dat tweede wist ik niet, over het eerste (met * schiet ik mezelf in m'n voet) heb ik dus niet genoeg nagedacht...nu je het zegt...logisch

Onderwerpen