[es] - Preklapanje zaobljenih elemenata

noviKorisnik
Dejan Katašić
Novi Sad

Član broj: 13216
Poruke: 4533
*.dialup.neobee.net.

Sajt: www.novikorisnik.net

+5 Profil

Preklapanje zaobljenih elemenata

^{15.04.2004. u 12:56 - pre 243 meseci}

Želim da u svim browserima dobijem output kao na slici levo (IE 6, ono desno je Mozilla 1.1).
Nemam sada vremena za detaljnija objašnjenja, može kasnije... Evo source

Code:
<html>
<head>
<title>title</title>
<style>
#nadnaslov_okvir {margin-left: 18px;}
//#nadnaslov, .nadnaslov_popuna {background-color: #c03;}
#naslov_okvir {margin-top: -6px;}
//#naslov, .naslov_popuna {background-color: #999;}
#nadnaslov, #naslov {padding: 0 18px;}
.nadnaslov_popuna, .naslov_popuna {margin: 0 6px; height: 6px;}
</style>
<script>
function postavi_okvir (nodeId)
{
var elem = document.getElementById (nodeId);
elem.parentNode.style.width = elem.offsetWidth;
}
</script>
</head>
<body onload="postavi_okvir ('nadnaslov'); postavi_okvir ('naslov');">
<div id="nadnaslov_okvir">
<img src="c03_gore_levo.gif" align="left"
height="6" width="6" hspace="0" vspace="0" border="0" />
<img src="c03_gore_desno.gif" align="right"
height="6" width="6" hspace="0" vspace="0" border="0" />
<div class="nadnaslov_popuna"><img src="prazno.gif" /></div>
<span id="nadnaslov">nadnaslov</span><br style="clear: both;" />
<img src="c03_dole_levo.gif" align="left"
height="6" width="6" hspace="0" vspace="0" border="0" />
<img src="c03_dole_desno.gif" align="right"
height="6" width="6" hspace="0" vspace="0" border="0" />
<div class="nadnaslov_popuna"><img src="prazno.gif" /></div>
</div>
<div id="naslov_okvir">
<img src="999_gore_levo.gif" align="left"
height="6" width="6" hspace="0" vspace="0" border="0" />
<img src="999_gore_desno.gif" align="right"
height="6" width="6" hspace="0" vspace="0" border="0" />
<div class="naslov_popuna"><img src="prazno.gif" /></div>
<span id="naslov">naslov</span><br style="clear: both;" />
<img src="999_dole_levo.gif" align="left"
height="6" width="6" hspace="0" vspace="0" border="0" />
<img src="999_dole_desno.gif" align="right"
height="6" width="6" hspace="0" vspace="0" border="0" />
<div class="naslov_popuna"><img src="prazno.gif" /></div>
</div>
</body>
</html>

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Prikačeni fajlovi

naslovi.gif - 1.04k

Odgovor na temu

Goran Aničić
Goran Aničić
Novi Sad

Član broj: 7404
Poruke: 414
*.173.eunet.yu

Sajt: www.personalmag.rs/blog/o..

Profil

Re: Preklapanje zaobljenih elemenata

^{15.04.2004. u 14:59 - pre 243 meseci}

Evo pomoći:
CSS Design: Creating Custom Corners & Borders

CSS Design: Creating Custom Corners & Borders 2

ICT magazin
IT, Mobile, Gaming online magazin
------------------------------
Blog
Svakodnevnica Blog Auto blog
------------------------------

Kompjuterski e-zine
Personal magazine

Odgovor na temu

-zombie-
Tomica Jovanovic
freelance programmer
ni.ac.yu

Član broj: 4128
Poruke: 3448
*.beotel.net

Sajt: localhost

+5 Profil

Re: Preklapanje zaobljenih elemenata

^{15.04.2004. u 18:40 - pre 243 meseci}

dodaj float: left u #naslov_okvir.

i mene mrzi da detaljnije objašnjavam rešenje..

blogče :: unescaped beta^{^» ^{go-paste extenzija} ^» ^{reč dana: backup} ^» ^{bočne koalicije}}

Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

Član broj: 13216
Poruke: 4533
*.dialup.neobee.net.

Sajt: www.novikorisnik.net

+5 Profil

Re: Preklapanje zaobljenih elemenata

^{15.04.2004. u 23:02 - pre 243 meseci}

#naslov_okvir {position: relative; top: -6px;}

Hvala Gorane za alistapart - načitao sam se do potrebnog detalja ali u potpunosti zadovoljava.

Dodavanje float: left u objavljenu postavku ispravno pozicionira ugaonu sličicu ali mi izbija donja leva sličica iz #nadnaslov_okvir kada otkomentiram one dve definicije za pozadine (hoću reći - sličica se vidi a ne bi trebalo). Drugi razlog što mi ovo ne odgovara je što sličan fazon treba da nastavim i nakon elementa naslova.

BoxUp
interesantna logička igra
Monty Hall paradoks - interaktivni demo

Odgovor na temu