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ő!