Tabell fel. Blir flera stycken.

4 svar · 563 visningar · startad av SGuncel 2 mars 2010

SGuncelMedlem sedan jan. 2007217 inlägg

Frågan2 mars 2010 04:35#1

Hej!

Det är så att jag försöker få mina tabeller exakt som på bilden nedan:
http://img188.imageshack.us/i/namnls2.png/

men istället blir det som på bilden nedan:
http://img38.imageshack.us/i/namnlsc.png/
Kapa bilden i mitten annars skulle den bli ganska lång.

Så här ser min lilla små kod:

<div id="content">
 <div class="post">
  <h2 class="title2">Galleri » Senaste uppladade bilder</h2>
                
   <div class="entry">
    <p>
     <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
       <%
        Set ObjRS = ObjConn.Execute("Select * from tblTable where ID order by photoUploaded DESC")
							
         If ObjRS.EOF Then
          Response.Write "<li"">Finns inga bilder!</li>"
         Else
         Do until ObjRS.Eof
          Response.Write "<td align=""left""><img src=""../"& ObjRS("fldName") &""" style=""width:130px;height:97px;"" alt="""" class=""image_border"" /></td>"& vbcrlf
								
         ObjRS.Movenext
         Loop
	
         ObjRS.Close : Set ObjRS = Nothing
         End If
        %>                                              
      </tr>
     </table>
    </p>
   </div>

  </div>
</div>

Vad är felet jag gör?

voigtann1Medlem sedan juni 20019 519 inlägg

2 mars 2010 06:56#2

läs hur en tabell byggs upp, du måste ha en <td> inne i en <tr> inte en <li> som du har om det inte finns några bilder, sen om du vill göra en radbrytning så få du infoga en stängd </tr> och öppnar den igen, men mitt tips är att gå ifrån tabeller och bara köra li listor och CSS för att göra radbrytningarna.

SGuncelMedlem sedan jan. 2007217 inlägg

2 mars 2010 07:51#3

Har ändrat och hör med div:ar nu.
Nu står dom i rad igen men nu är det neråt.

Men med listor man få 3 bilder i rad sen nytt radbrytning och 3 bilder i rad och etc?

css koden:

.Thumb { float:left;  width: 136px; height: 102px; }

noshorninMedlem sedan aug. 2008815 inlägg

2 mars 2010 08:22#4

Om du vill använda </tr><tr> för radbyte kan du skriva:

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<%
Set ObjRS = ObjConn.Execute("Select * from tblTable where ID order by photoUploaded DESC")
							
If ObjRS.EOF Then
Response.Write "<td>Finns inga bilder!</td>"
Else

varI = 0
Do until ObjRS.Eof
Response.Write "<td align='left'><img src='../"& ObjRS("fldName") &"' style='width:130px;height:97px;' alt='' class='image_border' /></td>"

if varI mod 3 = 0 then 
Response.write("</tr><tr>")
End if 

varI = varI + 1
								
ObjRS.Movenext
Loop
	
ObjRS.Close : Set ObjRS = Nothing
End If
%>       
</tr>
</table>

Hur du gör med listor vet jag inte riktigt!

rhdfMedlem sedan okt. 2007446 inlägg

2 mars 2010 14:42#5

Använd div:ar som du sätter float:left på, precis som du gjort
dessa omsluter du med en "lagom" bred div
typ såhär

<div id="Images">
   <div class="Thumb"><img src= .... /></div>
   <div class="Thumb"><img src= .... /></div>
   <div class="Thumb"><img src= .... /></div>
   <div class="Thumb"><img src= .... /></div>
   <div class="Thumb"><img src= .... /></div>
</div>

och sen Css

#images{width:500px;}
.Thumb {
float:left; 
width: 136px;
height: 102px;
margin: 5px;
 }

tricket är alltså att man låter bilderna flyta till vänster om varandra, efter 3 bilder så kommer den 4:e inte att få plats och således hamna på "raden" under. För att få mer luft mellan bilderna så är det bara att öka på margin