[css] positioneren layers.

[Alarmnummer]

Voor mijn website ben ik bezig met wat css zaken en ik wil het volgende:



Dit is de bovenkant van een menu en daarom komt dus de titel te staan en een icon als ie open is en een andere icon als ie closed is.

Ik ben intussen al weer een hele ochtend en een deel van de middag hiermee bezig en ik kom er eerlijk gezegd niet uit.

Ik heb intussen het volgende:

code:

<div class="title">
      <div class="title-text">
             Titel.
      </div>

      <div class="title-icon">
      </div>
</div>

Ik wil verder dat het icoontje altijd aan de rechterkant blijft staan, en dat het icoontje ook volledig gecentreerd is. Verder wil ik dat de titel-tekst de rest van de ruimte opvult en dat de tekst hierin ook verticaal en horizontaal is gecentreerd.

Ik heb al een hele tijd zitten knoeien met position: absolute voor die title-tekst en title-icon. Maar onder explorer worden de elementen volledig naast het menu neer gezet (in de documentatie staat dat ze altijd relatief worden genomen tov hun container maar ie denkt daar dus anders over). Mozilla die doet het gelukkig wel goed.

Verder ben ik ook met relative aan de slag geweest, maar dan plakt ie ineens fijn alles onder elkaar.

Dus.. ik zou eerlijk gezegd bij god niet weten hoe ik dit in elkaar kan zetten. In java zet ik het in 5 minuten in elkaar.. maar dit is een ware nachtmerrie.

[edit]
Ik heb op mijn site al een werkend voorbeeld staan. Maar daarin zijn de posities hard opgegeven en is niet echt onderhoudbaar.

[ Voor 9% gewijzigd door Alarmnummer op 04-04-2004 14:41 ]

[faabman]

heb je al met floats gewerkt:? je kunt dat plaatje in ieder geval mooi een float:right meegeven...

daarnaast moet je voor I.E. rekening houden met de volgende bug
http://www.positionisever...explorer/threepxtest.html

op die site is ook een artikel te vinden waar een oplossing wordt geboden...

[Alarmnummer]

faabman schreef op 04 april 2004 @ 14:40:
heb je al met floats gewerkt:? je kunt dat plaatje in ieder geval mooi een float:right meegeven...

Hmm.. dat is idd ook een idee. Dan kan ik denk ik de binnenste 2 divs meteen al schrappen. Hoe zorg ik er voor dat alles gecentreerd is?

[BtM909]

Alarmnummer schreef op 04 april 2004 @ 14:45:
[...]

Hmm.. dat is idd ook een idee. Dan kan ik denk ik de binnenste 2 divs meteen al schrappen. Hoe zorg ik er voor dat alles gecentreerd is?

Cascading Stylesheet:

text-align: center;

[Alarmnummer]

Er gaat nu nog 1 ding niet goed:



Die icon staat op een andere regel dan die title, en dat moet dus niet.

Ik heb mijn site trouwens al weer geupdate:

http://www.alarmnummer.net

css:
http://www.alarmnummer.net/framepanel.css

en html:
http://www.alarmnummer.net/menusystem.html

En dit is de rule voor de 'hoofddiv' waarin zowel de tekst als de icon staan:

code:

.collapse-pane-title{
    text-align: center;
    vertical-align: middle;
    background: #336699;
    color: White;
    height: 30px;
    background: #6699ff;
}

[ Voor 28% gewijzigd door Alarmnummer op 04-04-2004 15:01 ]

[faabman]

je hX tag een breedte geven van 100% met een achtergrondplaatje wat rechts uitgelijnd staat...

aan de hand van dhtml kun je dan element.style.backgroundImage = 'ander_pijltje' doen...

[Alarmnummer]

Ik kom er eerlijk gezegd niet meer uit. Nadat ik een hX erom heen had gezet worden de css rules van hx toegepast en dat wil ik niet. Ik zou niet weten hoe ik dit weer kan uitzetten. Het plaatje op die plek krijgen lukt me net zo min, ik krijg een nieuwe regel.

Ik heb intussen denk ik al een kleine week gespendeerd aan het onder de knie krijgen van css, maar naarmate ik er langer mee bezig ben, naarmate ik er minder van begrijp.

Het blijft voor mij een volledige wazige brij waar je mbv trial en error maar wat probeert en iedere verandering maakt al het gene wat werkte ook weer kapot.

Ik snap niet hoe jullie ermee kunnen werken.

[Verwijderd]

Je moet hier gebruiken maken van een relative div, met daarin de icon en de tekst:

<div style="position:relative;height:18px;padding-right:16px;text-align:center;">
label
[img]"icon.gif"[/img]
</div>

dus zo ongeveer.

[X-Lars]

Zoiets? Getest in IE6 en FF.

[Verwijderd]

X-Lars schreef op 04 april 2004 @ 17:41:
Zoiets? Getest in IE6 en FF.

alleen nog type="text/css" meegeven aan je <style> element.

[faabman]

code:

<style type="text/css">
#menu_container h1{
background-image:url(); 
background-position:center right; 
background-repeat:no-repeat;
}
</style>


<script type="text/javascript">
function switchMenu(id, ctrl){
  var menu = document.getElementById(id);


  if(menu.style.display=='none'){
    menu.style.display == 'block';
    ctrl.backgroundImage = 'url:()'
  } else {
    menu.style.display == 'none'
    ctrl.backgroundImage = 'url:()'
  }
}
</script>

<div id="menu_container">
<h1 onclick="switchMenu('menuA', this);">menu</h1>
<ul id="menuA">
<li><a href="#">linkje</a></li>
</ul>
</div>

anyways, ik hoop dat de strekking een beetje overkomt

_{disclaimer: niet getest}

[Verwijderd]

Ik zat meer aan zoiets te denken.

Werkt wel redelijk in IE 6.0 SP1, Mozilla 1.7a, FireFox 0.8, Opera 7.23, Lynx 2.8.5rel.1, Links 2.1pre14 en vast nog wel meer. En zo niet, dan kan het nooit zo zijn dat het veel werk is om het aan de praat te krijgen. Ik heb geen bizarre truuckjes gebruikt geloof ik.

[ Voor 4% gewijzigd door Verwijderd op 04-04-2004 18:33 ]

[X-Lars]

Verwijderd schreef op 04 april 2004 @ 18:33:
Ik zat meer aan zoiets te denken.

[...]

o, dat deel Ik dacht een header-iets. Cheatah geeft wel een mooie oplossing, ik zou alleen niet h1 maar een lagere hx gebruiken. En kan zoiets niet :

HTML:

<ul>item1
  <li>subitem1</li>
  <li>subitem2</li>
</ul>

Dit is wel een beetje semantisch correctheid-geneuzel hoor..

[ Voor 8% gewijzigd door X-Lars op 04-04-2004 18:58 ]

[Verwijderd]

ik zou alleen niet h1 maar een lagere hx gebruiken.

eens* (H2, en dan H1 voor een algemene titel)

En kan zoiets niet :

HTML:

<ul>item1
  <li>subitem1</li>
  <li>subitem2</li>
</ul>

Sinds wanneer mag UL iets anders bevatten dan LI?

[ Voor 18% gewijzigd door Verwijderd op 04-04-2004 20:23 ]

[X-Lars]

Verwijderd schreef op 04 april 2004 @ 20:23:
[...]
Sinds wanneer mag UL iets anders bevatten dan LI?

ok, duidelijk was zomaar een idee, had niet eens ff gauw research gedaan