Autor Zpráva
virgo86
Profil
Zdravím,
mám problém s pozicovaním náhledu fotografii. Bude někdo z Vás tak hodný a pomůže mi?

náhledy:
<a href="/fotoga.php?img=vyrobky/kolo.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_kolo.jpg" alt="ocel" title="ocel" /></a>
                <p class="text">ocel
                </p>
            
                <a href="/fotoga.php?img=vyrobky/kolo2.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_kolo2.jpg" alt="ocel" title="ocel" /></a>
                <p class="text">ocel
                </p>
             
                <a href="/fotoga.php?img=vyrobky/mosaz.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_mosaz.jpg" alt="mosaz" title="mosaz" /></a>
                <p class="text">mosaz
                </p>
             
                <a href="/fotoga.php?img=vyrobky/natrubek.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_natrubek.jpg" alt="nátrubek" title="nátrubek" /></a>
                <p class="text">nátrubek
                </p>
             
          
                <a href="/fotoga.php?img=vyrobky/natrubek2.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_natrubek2.jpg" alt="nátrubek" title="nátrubek" /></a>
                <p class="text">nátrubek
                </p>
             
                <a href="/fotoga.php?img=vyrobky/ocel.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_ocel.jpg" alt="ocel" title="ocel" /></a>
                <p class="text">ocel
                </p>
             
                <a href="/fotoga.php?img=vyrobky/ocel2.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_ocel2.jpg" alt="ocel" title="ocel" /></a>
                <p class="text">ocel
                </p>
           
                <a href="/fotoga.php?img=vyrobky/plast.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_plast.jpg" alt="plast, měď" title="plast, měď" /></a>
                <p class="text">plast, měď
                </p>
              
                <a href="/fotoga.php?img=vyrobky/priruba.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_priruba.jpg" alt="příruba" title="příruba" /></a>
                <p class="text">příruba
                </p>
              
                <a href="/fotoga.php?img=vyrobky/pritruba2.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_pritruba2.jpg" alt="obrázek" title="obrázek" /></a>
                    <p class="text">řemenice
                </p>
                <a href="/fotoga.php?img=vyrobky/remenice.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_remenice.jpg" alt="řemenice" title="řemenice" /></a>
                <p class="text">řemenice
                </p>
              
                <a href="/fotoga.php?img=vyrobky/vlozka.jpg&amp;dalsi=12&language=">
                  <img  src="vyrobky/tn_vlozka.jpg" alt="vložka" title="vložka" /></a>
                <p class="text">vložka
                </p>

Celkem 12 náhledů a já potřebuje aby se mi zobrazily 4náhledy na řádek tudíž 3řádky. ke každému náhledu je popisek.
využívám doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Mám to programované v php ale prostě mě ty kaskadové styly dělaj problémy spíše grafika vůbec:(
Tedy stačí mi jen pozicovaní, barvy atd. si doplním. náhledy jsou velikost 100x75px jestli to potřebujete.
díky moc.
WMPopi
Profil
Každý prvek v galerii bych obalil divem (protože k náhledu je i popis), nastavil bych mu width:100px a float:left, případně i margin-right (pro vytvoření mezery mezi náhledy), pak se ti budou rovnat jeden vedle druhýho. Za každým čtvrtým bych vypsal <br style="clear:both" /> - zrušíš obtékání.
xmark
Profil
virgo86:
aby se mi zobrazily 4náhledy na řádek tudíž 3řádky

Takže potřebuješ tabulku. Proč se snažíš o řešení bez ní?
WMPopi
Profil
xmark:
Takže potřebuješ tabulku.
Anebo tabulka, zapomněl jsem napsat.
panther
Profil
xmark:
Takže potřebuješ tabulku. Proč se snažíš o řešení bez ní?
fotogalerie se dá udělat i bez ní, seznamem s floatovanými položkami, přičemž některé z nich mají levý clear.
virgo86
Profil
css
.nahled {
      width:120px;
      float:left;
      margin-right: 5px;
      margin-bottom: 5px; 
      margin-top: 5px;
      margin-left: 20px;
      background-color:rgb(183,183,183);
      height:100px;
      text-align:center;
      left:50px;
      padding: 10px 0px 0px 0px;
      border: 1px solid black;
}
   .nahled img{
       
    border: 1px solid black;
}
.text {
    margin: 0; 
    text-align:center;
    font-size: 12px;
    font-family: verdana;
}

html
<div class="nahled">
<a href="fotoga.php?img=vyrobky/natrubek.jpg&amp;dalsi=12&language=">
<img src="vyrobky/tn_natrubek.jpg" alt="nátrubek" title="nátrubek" /></a>
<p class="text">nátrubek</p>
</div>

díky panové. Akorat aby to byly 4 nahledy na řádku mi nejak pomocí <br style="clear:both" /> nešlo ale doladil jsem to šiřkou divu.
panther
Profil
virgo86:
<style="clear:both" />
tohle je co?
virgo86
Profil
panther:
[#2] WMPopi

Za každým čtvrtým bych vypsal <br style="clear:both" /> - zrušíš obtékání.
tohle mi to spíše rozhodilo. ještě jsem zapoměl řicí že nahledy jsou jeste cele v divu pro obsah ale to myslím nemá vliv.
virgo86
Profil
panther:
hele napsal jsem to špatně má tam být ještě br

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: