pozicioniranje naslova, paragrafa i slike unutar bloka

pozicioniranje naslova, paragrafa i slike unutar bloka 30.12.2010. u 21:18 · pre 193 meseca #1

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.

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 31.12.2010. u 01:04 · pre 193 meseca #2

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š.

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 03.01.2011. u 17:51 · pre 193 meseca #3

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.

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 03.01.2011. u 18:14 · pre 193 meseca #4

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.

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 03.01.2011. u 20:26 · pre 193 meseca #5

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>

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 03.01.2011. u 21:26 · pre 192 meseca #6

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.

Re: pozicioniranje naslova, paragrafa i slike unutar bloka 03.01.2011. u 21:54 · pre 192 meseca #7

Odlicno, radi. Bas ti hvala. Ovo sa stavljanjem linka u header je pomoglo.

Forum kao aplikacija na telefonu

Srodne teme