Relative vs Absolute positioning gondjaim
Helló!
A problémám a következő: Több helyen összesikerült futnom azzal, hogy van egy olyan DIV, UL, vagy hasonló elem aminek a szülőnodehoz kéne igazodnia méretekben (elsősorban a szélességben), de átfedések miatt kellene az absolute positioning.
Egészen konkrétan van egy a <select>-et kiváltó listám. amiben van egy <ul>, ami értelemszerűen felette kell lennie a következő elemeknek, és nem szabad, hogy megnyújtsa az őt tartalmazó divet. Viszont akkor az a probléma adódik, hogy a lista elemeket csak az ablakhoz tudom méretezni százalékosan, vagy pixeleznem kell. Így pedig nem tudom az őt tartalmazó spam szélességéhez igazítani.
A combobox így néz ki, de Javascripttel generálom valójában, ami minden selectet lecserél ilyenre.A form pedig így néz ki:és akkor a css:
■ A problémám a következő: Több helyen összesikerült futnom azzal, hogy van egy olyan DIV, UL, vagy hasonló elem aminek a szülőnodehoz kéne igazodnia méretekben (elsősorban a szélességben), de átfedések miatt kellene az absolute positioning.
Egészen konkrétan van egy a <select>-et kiváltó listám. amiben van egy <ul>, ami értelemszerűen felette kell lennie a következő elemeknek, és nem szabad, hogy megnyújtsa az őt tartalmazó divet. Viszont akkor az a probléma adódik, hogy a lista elemeket csak az ablakhoz tudom méretezni százalékosan, vagy pixeleznem kell. Így pedig nem tudom az őt tartalmazó spam szélességéhez igazítani.
A combobox így néz ki, de Javascripttel generálom valójában, ami minden selectet lecserél ilyenre.
<span class="combobox">
<div class="selection"></div>
<ul class="dropdown"> <!-- Ez egy onclick vezérelten kap egy "dropdown_open" classt -->
<li>choice 1</li>
<li>choice 1</li>
<li>choice 1</li>
</ul>
</span>
<form class="basic">
<fieldset>
<legend>Section 1</legend>
<div>
<label for="mychoice">Choose one:</label>
<select name="mychoice" id="mychoice">
<option>choice 1</option>
<option>choice 2</option>
<option>choice 3</option>
</select>
</div>
</fieldset>
</form>
span.combobox {
float: left;
width: 60%;
padding: 0px 10px;
}
div.selection {
border: 1px solid #000000;
cursor: pointer;
background: #F00000;
height: 1.65em;
}
ul.dropdown {
display: none;
height: 1.65em;
}
ul.dropdown_open {
margin: 0;
padding: 0;
/* Ide kellene jönnie valami varázslatnak, hogy a width: 100% működjön */
list-style: none;
display: block;
position: absolute;
top: auto;
left: auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #A00000;
}
ul.dropdown_open li {
cursor: pointer;
/* Ide kellene jönnie valami varázslatnak, hogy a width: 100% működjön */
display: block;
position: relative;
}
ul.dropdown_open li:hover {
background: #F00000;
}
Spanba nem rakunk UL-t
Relative vs absolute
Nem vagy túl szószátyár...
Szóval még megoldásra vár a problémám...
csak inline
HML és CSS különböző
Ha van egy szabváynos HTML-ed azt utána már CSS-ből formázhatod ahogy akarod. Például egy DIV-et, vagy LI elemet is lehetne display:table-cell; segítségével tábláztatos megjelenítésre kényszeríteni, csak ezt sajnos ez elvi lehetőség, mert gyakorlatban IE nem támogatja.
Div és span pedig pont ezért van kettő. Részletesebben: DIV és SPAN
DHTML: a megoldás
Igen: a divet állitsad inline-ra.
Az, hogy te egy elemnek más megjelenítést akarsz, azt a CSS alkalmazásával oldod meg.
A HTML-ben egy blokk típusú általános vagy megfelelő jelölő hiányában mással el nem nevezhető eelemet DIV-vel KELL jelöni, egy sortípusó elemet pedig SPAN-nal. Ha egy általános elemben más blokk típusó elemet teszel akkor ez a befoglaló elem CSAK és KIZÁROLAG DIV lehet. Ezt nem te döntheted el, ezt a HTML szabvány írja elő!