21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
jao6
Profil *
ahojte,
prosim Vas, mam
css:
div.plocha1 img.imgi {float:left; }
div.plocha1 a:active, div.plocha1 a:link, div.plocha1 a:visited {border:solid 1px #ADADAD;display:block;}


a v html:
<div class="plocha1"><a href="e.html" class="plocha1"><img src="a.gif" class="imgi"> <span>text1</span><br>text2</a> </div>

Ja by som potreboval, aby ohranicenie #ADADAD obkolesovano cely obdlznik div aj v pripade, ze chybaju text1 a text2.

ak by to bolo mozne, mao by sa to dat nastavit len v css, teda bez zmeny kodu v html.

dakujem za radu
panther
Profil
jao6
jednak zápis borderu je správně 1px solid #adadad;
místo div.plocha1 a:active, div.plocha1 a:link, div.plocha1 a:visited {border:solid 1px #ADADAD;display:block;} zkus jen .plocha1 {border: 1px solid #ADADAD;display:block;} (ohraničí celý div class plocha1 rámečkem)
jao6
Profil *
ahoj, skusal som tvoj postup,ale vysledok je taky, ze pokial je .plocha1 img.imgi {float:left; } tak ak text nepresahuje obrazok, tak su okraje iba vo vyske textu a obrazok presahuje popod okraje. pokial zrusim float tak potom je sice vsetko v obdlznicku ale zase text neobteka pozadovanym sposobom obrazok.

ako by som docielil, aby bol spravne aj obdlznik aj obtekanie obrazka textom? diky
obin
Profil *
Pokud to chápu dobře, chceš rámeček, který bude mít ohraničení a v něm bude obrázek, vedle obrázku text a celé to bude klikatelné. Pak by to mělo být nějak takhle

.plocha1 {
border: 1px solid #ADADAD;
}

.plocha1 img, .plocha1 span {
float: left;
}

<div class="plocha1">
<a href="e.html" class="plocha1"><img src="a.gif" class="imgi"><span>text1</span><br>text2</a>
</div>
jao6
Profil *
ahoj obin,

ano nejak tak by to malo byt, akurat mam ten problem, ze ak je vyska obrazku vacsia ako samotny text, tak sa ten ramecek oramikuje len po vysku textu (zdola) ale obrazok presahuje cez tento ramecek nizsie. teda priblizne v polovici obrazku prechadza dolna linia ramecku.

da sa nejako ramik natiahnut tak, aby jeho dolna linia bola az pod obrazkom? dakujem
Bubák
Profil
Dá, čističem (cleaner).
jao6
Profil *
bubák, nejako neviem, co si mam pod tym vysvetlit...
Mistr
Profil
jao6
http://www.jakpsatweb.cz/css/clear.html
jao6
Profil *
priatelia, dakujem za vsetky usmernenia ale s clearom je ten problem, ze to nezobrazi obdlznik na celu sirku. :-( vyskusal som uz vsetky kombinacie, ale stale som z toho zufaly...
Str4wberry
Profil
Reakce na jao6:
Obávám se, že bez živé ukázky problému budeš zoufalý i nadále.
jao6
Profil *
zdravim, tak tu je ziva ukazka: http://pokus.szm.sk/
potreboval by som, aby to cele bolo klikatelne a zaroven aby ramik bol az pod obrazkom a bol roztiahnuty na celu sirku
Venca V
Profil
Jen zopakuji předchozí rady: stačí po obrázku vložit jeden prvek s clear:both (třeba br nebo hr, span, div...) a tvůj problém je vyřešen. Že se ti potom div neroztáhne na celou šířku je nesmysl, vyzkoušeno.
jao6
Profil *
Reakce na Venca V:
bohuzial, nejde to. asi to co myslis ty nie je presne to iste, co myslim ja. ked dam do hociktoreho elementu clear:both za obrazok, tak mi nezostane krasne text vpravo, resp. zostane, ale posunie sa napr o riadok nizsie (alebo uplne pod obrazok), no ja ho potrebujem aby bol hned vedla obrazka od prveho riadka.
skratka, v tom html kode, ktory som napisal uplne hore a ktory pouzivam, sa mi z vasich rad zatial nepodarilo dospiet k tomu, co by to malo robit.
Venca V
Profil
Takže funkční řešení po vynechání spousty zbytečností vypadá takto:
<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pokus</title>
<style>
a.plocha1 {display:block;border: 1px solid #f00;position:relative;min-height:40px;_height:40px;padding-left:40px; }  
a.plocha1 img {position:absolute;left:0;top:0;border-width:0;}
a:hover.plocha1 {border-color:#ff0;color:#adadad;}
</style>
</head>
<body>
<a class="plocha1" href="#"><img src="http://www.pillowfight.cz/img/muz.jpg" height="30" width="30">
text1<br>text2</a> 
</body>
</html>

To _height:40px je tam kvůli IE - ten sice nepodporuje vlastnost min-height, naproti tomu chybně interpretuje vlastnost height - interpretuje ji jako min-height, takže pro tento příklad ideální;-)
K shlédnutí na http://navrhy.pillowfight.cz/jao6.html
Rozměry a paddingy si jistě podle použitých obrázků zvládneš opravit sám.
jao6
Profil *
Venca V,

dakujem pekne. velmi tam pomohli tie _height a min-height

super, konecne mi to ide. :-) velmi dakujem za pomoc

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0