[css/html] 2 Div's naast elkaar, eentje vaste breedte

[Verwijderd]

Goedeavond,

Dit is altijd mijn reden geweest waarom ik niet graag met DIV's werkte en ik altijd gruweklijk chagrijnig werd.. Ik heb de volgende html code:

HTML:

<div class="wizard_window_window">
   <div class="wizard_window_title">
      <div class="wizard_window_title_text">Title (of langere naam)</div>
      <div class="wizard_window_title_close">X</div>
   </div>
   <div class="wizard_window_reflection"></div>
   <div class="wizard_window_body"></div>
</div>

Met bijbehorende stylesheet:

Cascading Stylesheet:

.wizard_window
{    
    width: 500px;   
    background: white;    
    border: solid 1px #d9d9d9;  
}


.wizard_window_title
{
    background: url('../../../Images/Components/title.png') repeat-x;    
    margin: 5px 5px 0px 5px;    
    height: 21px;    
    color: White;
    font-size: 10pt;  
    
    
}

.wizard_window_title_text
{
    margin: 3px 5px 0px 5px;

    overflow: hidden;   <--------------------- Ik heb dit geprobeerd

    height: 18px;
    float: left;
}

.wizard_window_title_close
{
    margin: 3px 5px 0px 5px;
    float: right;
    cursor: pointer;
}

.wizard_window_reflection
{
    background: url('../../../Images/Components/title_reflection.png') repeat-x;    
    margin: 0px 5px 0px 5px;    
    height: 21px;    
}

.wizard_window_body
{
    background: white;    
    margin: 4px 7px 5px 7px;
}

Het probleem hierbij is, is dat als de title te lang wordt, het kruisje verdwijnt! Als ik de overflow weghaal, gaat het gewoon verder op een volgende regel. Ik heb hier echt altijd last van, ik probeer altijd te googelen.. heb op tweakers gezocht, maar om 1 of andere reden werkt het nooit. Niet in FF, niet in IE en ook niet in Opera... Geklooi met width en height lukt ook niet..

Plaatje:



Wat doe ik verkeerd?

[bredend]

Cascading Stylesheet:

.wizard_window_title_close
{
position: fixed;    
right: 5px;
top: 5px;
margin: 3px 5px 0px 5px;
    float: right;
    cursor: pointer;
} 

Wat doet dat?

En .wizard_window_title_text een width meegeven kan ook geen kwaad denk ik.

[ Voor 18% gewijzigd door bredend op 11-11-2006 22:05 ]

[Verwijderd]

bredend schreef op zaterdag 11 november 2006 @ 22:02:

Cascading Stylesheet:

.wizard_window_title_close
{
position: fixed;    
right: 5px;
top: 5px;
margin: 3px 5px 0px 5px;
    float: right;
    cursor: pointer;
} 

Wat doet dat?

En .wizard_window_title_text een width meegeven kan ook geen kwaad denk ik.

Dan komt ie rechtsboven in de pagina te staan... ver buiten het schermpje Hmm.. Ik had ooit wel iets gevonden of nesten in een relatieve Div, waarbij dit misschien wel gaat werken.. maar dan krijg ik weer ranzige code

En dat van het width meegeven.. nu is het een vaste breedte, maar het kan ook een breedte zijn die bepaald is door de breedte van de browser, aantal columns en dergelijke.. Dan kan ik .wizard_window_title_text toch geen breedte meegeven? Ja.. Auto, wat dus niet werkt..

[ Voor 18% gewijzigd door Verwijderd op 11-11-2006 22:08 ]

[Verwijderd]

Je hebt gewoon geluk dat ik nog reageer op je topic, terwijl je hem met zo'n negatieve opmerking opent.

Ik vind het echt onbegrijpelijk dat je niet je eigen gebrek aan kennis en inzicht de schuld geeft, maar een of andere techniek waarove je weleens iets gehoord hebt. Waarom werk je met div's. Leg dat eens uit. Zijn div's beter dan tabellen?

Verder: als je het dan toch zo doet, geef je div.wizard_window_title_text een grotere marge aan de rechterkant, positioneer div.wizard_window_title relatief en
div.wizard_window_title_close absoluut en rechtsboven. Zo simpel is dat nou. En je HTML en CSS slaan nergens op.

[Verwijderd]

Ik geef JUIST mijn gebrek aan kennis de schuld, ik weet dat ik iets verkeerd doe en ik word er chagrijnig van dat ik niet weet WAT ik verkeerd doe, daarom zoek ik hulp, om mijn kennis te vergroten

Verwijderd schreef op zaterdag 11 november 2006 @ 22:10:
Verder: als je het dan toch zo doet, geef je div.wizard_window_title_text een grotere marge aan de rechterkant, positioneer div.wizard_window_title relatief en
div.wizard_window_title_close absoluut en rechtsboven. Zo simpel is dat nou. En je HTML en CSS slaan nergens op.

Okay, het werkt nu... Ik snap nu waarom je de rechter margin moet vergroten en de close div dan rechtsboven kan positioneren. Thanks

Mag ik dan alsjeblieft nog wel weten waarom mijn HTML en CSS nergens op slaan?

[bredend]

ipv fixed bedoelde ik inderdaad absoluut.

8 div-jes met allemaal een verschillende class. Met een table zou je minder code hoeven te gebruiken.
Ik zou zeggen, maak van de titel en reflection een <h> en hang daaronder een <p>
Als je die samen met het x-divje in een wizard_window div zet is het veel mooier al.

CSS is vooral veel klooien totdat je de juiste methode gevonden hebt...

[ Voor 10% gewijzigd door bredend op 11-11-2006 23:49 ]

[Verwijderd]

Nou, waarom is je HTML complexer dan iets als:

HTML:

<div class="window">
   <h2>Title (of langere naam)</h2>
   <button onclick="melp();" value="X" title="Venster sluiten">
</div>

Of maak van die div een fieldset en van de h2 een legend ofzo. Ligt eraan waar het precies voor is,