Archief - CSS: Positionering Relative / Absolute tov achtergrond

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Fireball

Legacy Member
Hallo,

Na een beetje zoeken op vorige threads vond ik ni echt iets voor mijn probleem.

Ik zou graag mijn horizontale menu laten samenlopen met een oranje balk op de achtergrond. Maar dit lukt niet goed, want FF en IE doen moeilijk
Als ik in CSS relative gebruik dan is het een probleem om mijn site verticaal juist gecentreerd te krijgen op de achtergrond
En als ik in CSS absoluut gebruik dan (logisch) krijg ik mijn site niet horizontaal gecentreerd.

Hier is mijn site: relative + css
absolute + css

Wat moet ik toevoegen bij de CSS van relative?
Thx!
j

joyraider

Legacy Member
Waarom niet het oranje balkje integreren in je menu? :)

bvb:

<div class="orange">
<div class="menu">blabla</div>
</div>


en dan:

div.orange {
width: 100%;
background-color: orange;
}
F

Fireball

Legacy Member
Ja maar ik werk met een div 'container' die alle andere divs overkoepeld om het geheel gecentreerd te krijgen
Is er een mogelijkheid om mijn probleem op te lossen in die opstelling?
Of moet ik inderdaad die oranje bar als achtergrond op mijn menu plakken en zo verder werken zonder een div 'container' ?
thx!
g

grooverider

Legacy Member
waarom gebruik je een image om tot je oranje streep te komen?
ik zou het als volgt doen:
HTML: 
<div id="top">
  <div id="header">wat er in uwe header komt</div>
</div>
<div id="menu">
  <ul id="nav">
    <li><a href="#">link1</a></li>
    <li><a href="#">link1</a></li>
    <li><a href="#">link1</a></li>
  </ul>
</div>
<div id="contentWrapper">
  <div id="content">
    <p>tekst etc</p>
  </div>
</div>

en in de css:
Code: 
* {margin: 0; padding: 0;}

#top {
  height: 150px; (maar een vb)
  background-color: #eenkleur;
}

#header {
  width: aantal px;
  height: aantal px;
  margin: 0 auto;
  border: 1px solid #000;
  border-bottom: none;
}

#menu {
  height: aantal px;
  background-color: #oranje;
}

#nav {
  height: aantal px;
  width: aantal px;
  margin: 0 auto;
  background-color: #eenkleur;
  border: 1px solid #000;
  border-top: none;
}

(dan uw li's enzo stylen)

#contenWrapper {
  background: url(image.png) repeat-x;
}

#content {
  background-color: #kleur;
}
...
F

Fireball

Legacy Member
Het is gelukt door * {margin: 0; padding: 0;} toe te voegen in mijn css.
Dan is er geen verschil meer in IE en FF wanneer de site begint bovenaan.

Oke momenteel geen probs meer, bedankt!!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan