ugrás a tartalomhoz

Vertical image

Bodi · 2011. Szep. 7. (Sze), 14.07
Üdv!

A mellékelt képen szeretném illusztrálni mi a célom.



A megvalósításában szeretném kérni a segítségeteket.
<?php if (MAX_IMAGE_NUM>0){?>
		<div id="kepek">
			<?php 
			foreach($tetelImages as $image){
				echo '<p href="'.$image[0].'" title="" id="fancy"['.$idtetel.']">
				 		<img class="thumbs" src="'.$image[1].'" title="" alt="" />';
			}
			?>
			<div class="leiras"><?php echo $tetelDesc;?></p></div>
<div class="ures"></div>
			</div>
	    <?php }?>
3 képet tölthetnek fel a felhasználók és ezt szeretném rendezni függőleges formában.Odáig rendben is van a dolog,hogy a képeket függőlegesen elhelyezem.De akkor a szöveg nem stimmel.

Egy másik szisztéma:<a> </a>
<?php if (MAX_IMAGE_NUM>0){?>
		<div id="kepek">
			<?php 
			foreach($tetelImages as $image){
				echo '<p href="'.$image[0].'" title="" id="fancy"['.$idtetel.']">
				 		<img class="thumbs" src="'.$image[1].'" title="" alt="" />';
			}
			?>
			<div class="leiras"><?php echo $tetelDesc;?></p></div>
<div class="ures"></div>
			</div>
	    <?php }?>
A szöveg stim, de a képek vízszintesen helyezkednek el.

Köszi mindenkinek előre is a választ.
‹ Egy elem írása JavaScript tömbbe Javascript tömb átadása másik tömbnek ›
 ■
1

CSS

Karvaly84 · 2011. Szep. 7. (Sze), 14.42
A képeket ki úsztatod balra float: left;, a leírásnak meg adsz egy bal margót ami akkora mint a képek szélessége margin-left: 320px; pl.
2

Egyik megoldás, hogy a

Hidvégi Gábor · 2011. Szep. 7. (Sze), 14.42
Egyik megoldás, hogy a #kepek-et olyan szélesre veszed, mint maguk a képek, és adsz neki egy float: left; -et, valamint csinálsz még egy divet, annak is adsz egy float: left; -et, és ebbe pakolod a <div class="leiras">-t. A két div után pedig kell egy <div style="clear: both;"></div>.

A képeknek meg légyszi adj meg szélességet és magasságot, vagy a css-ben vagy a html-ben, mert így elegánsabb.
3

Kipróbáltam

Bodi · 2011. Szep. 7. (Sze), 15.46
Ezeket kapom vissza.



Az általatok javasolt megoldások
4

A kódnak ilyesminek kéne

Hidvégi Gábor · 2011. Szep. 7. (Sze), 15.50
A kódnak ilyesminek kéne lennie:
<div id="kepek">
  <img src="...">
  <img src="...">
</div>
<div id="leiras_tarto">
  <div class="leiras">leírás</div>
</div>
<div class="clearboth">

#kepek {
  float: left;
  width: 120px;
}
#leiras_tarto {
  float: left;
  width: 600px;
}
.clearboth {
  clear: both;
}
5

Köszi

Bodi · 2011. Szep. 7. (Sze), 16.23
Gábor köszi!

csinálsz még egy divet, annak is adsz egy float: left; -et, és ebbe pakolod a <div class="leiras">-t


A megoldás

<div id="leiras_tarto">
<div class="leiras">leírás</div>
</div>
<div class="clearboth">
6

Az a p href egyébként elég

LeGaS · 2011. Szep. 7. (Sze), 17.01
Az a p href egyébként elég érdekesen mutat. Plusz le is kéne zárni. Inkább így:

                echo '<a href="'.$image[0].'" title="" id="fancy"['.$idtetel.']">  
                        <img class="thumbs" src="'.$image[1].'" title="" alt="" />
                        </a>';
7

Be van az zárva, csak pár

Hidvégi Gábor · 2011. Szep. 7. (Sze), 17.32
Be van az zárva, csak pár sorral lejjebb : )
8

a href

Bodi · 2011. Szep. 7. (Sze), 17.52
echo '<a href="'.$image[0].'" title="" id="fancy"['.$idtetel.']">              <img class="thumbs" src="'.$image[1].'" title="" alt="" />            </a>';]
A +div miatt ez maradt.