[ fresh.bm @ 30.12.2010. 20:18 ] @
Kako napraviti da u jednom bloku bude naslov iznad slike a da neki paragraf bude poravnat sa desne strane slike?

Ako za sliku stavim display:block, postignem da mi naslov dodje iznad slike, ali mi onda tekst bude ispod.
Ako stavim za sliku float:left, onda su mi i naslov i paragraf poravnati sa desne strane.
Meni treba kombinacija ova dva slucaja ali ne mogu nikako da postignem zeljeni ucinak.
[ DzemaludinPerajic @ 31.12.2010. 00:04 ] @
Ako je u pitanju ista kombinacija naslova, slike i teksta kao u prethodnoj temi koju si otvorio "pomoć oko formatira okvira za sliku i tekst" trebao bi samo da staviš u html strani prvo naslov pa sliku pa tekst:

Code:

<div class="block">
  <h1>Vazne vesti</h1>
  <img src="cvet.jpg" alt="Cvet" width="" height="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>


pa onda da dodaš za sliku

Code:

img {
float: left;
}


Tako će naslov biti iznad svega a slika i tekst u istoj ravni. Nadam se da sam skontao sta želiš da postigneš.
[ fresh.bm @ 03.01.2011. 16:51 ] @
Pokusao sam ovako kako si mi rekao, ali nece da mi radi kako treba. Dobro si shvatio sta zelim postici.
Da nije problem mozda u visini i sirini slike, posto sam podesio da mi bude odredjena. Imam vecu sliku nego sto sam planirao da mi bude u tom okviru.
Kad stavim float:left, pomjeri mi se i naslov desno od slike. A ako to iskljucim, naslov mi bude iznad slike ali tekst se pomjeri ispod slike. Ne mogu nikako da nastimam da mi bude onako kako sam zamislio.
[ plague @ 03.01.2011. 17:14 ] @
Upravo sam na brzaka iskucao:

Code:

<div class="block">
  <h1>Vazne vesti</h1>
  <img style="float:left" src="cvet.jpg" alt="Cvet" width="150" height="150" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>


Sve radi kako treba. Naslov iznad, ispod njega levo slika, desno paragraf.
Napisi ostatak CSS-a koji imas, verovatno nesto drugo sto si stavio uzrokuje nezeljeno ponasanje.
[ fresh.bm @ 03.01.2011. 19:26 ] @
Evo sta mi je podeseno za css:

Code:


.obicne_vijesti {                                                       /* ovo mi je blok */
font-family:Arial,Verdana,Sans-serif;
width:510px;
height:125px;
margin:20px;
padding:10px;
overflow:hidden;
}

.obicne_vijesti:hover{
  /* IE only */
filter:alpha(opacity=80);
  /* CSS3 standard */
opacity:0.8;
}

.obicne_vijesti a{                                                  /* naslov mi je link */
color:black;
text-decoration:none;
}

.obicne_vijesti a:hover {
color:#FF0033;
}

.obicne_vijesti img {                          /* ovo je slika */
display:block;
float:left;
width:125px;
height:125px;
margin:0px 10px 10px 0px;
}

.paragraf {
margin:10px;
font-family:"Times New Roman", Times, serif;
text-align:justify;
}



ovo je html

Code:


<div id="obicne_vijesti1" class="obicne_vijesti">
    <a href="#">Vijest 1</a><img src="img/bnike1.png" alt="vijesti"></img>
    <p class="paragraf"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu eros nisi. 
        Maecenas sagittis quam a ligula sollicitudin vel bibendum leo faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
    </div>

[ plague @ 03.01.2011. 20:26 ] @
Izbaci display:block za img, ne treba ti. Samo ubaci link Vijest1 u paragraf ili u neki header i sve ce sljakati kako treba.
P.S. Proverio sam samo za FFv3.6 i IE6.
[ fresh.bm @ 03.01.2011. 20:54 ] @
Odlicno, radi. Bas ti hvala. Ovo sa stavljanjem linka u header je pomoglo.