Just nu i M3-nätverket
Gå till innehåll

bilder på rad med css?


Djiodis

Rekommendera Poster

hej,

håller på och lär mig om css. Men begriper inte riktigt allt.

Har en massa små bilder som jag skulle vilja rada upp på ett snyggt sätt. Ungefär tre-fyra bilder per rad. hur gör jag enklast detta?

I css alltså! Inte en tabell..

 

hjälp mig..

 

 

Länk till kommentar
Dela på andra webbplatser

Css:

HTML, BODY { height: 100%;
margin: 0;
padding: 0; }

/* bilddivsspecifikation */
div.float {
 float: left;
 padding: 10px 10px 10px 10px ;
 margin-left:15px;
 margin-bottom:15px;
 min-height: 100px;
 width: 120px;
 background-color: #f5f5f5;
 text-align: center;}

/* bildtext */
div.float p {
  margin: 0;
  padding-top: 10px ;
  font-family: verdana;
  font-size: 8.5pt;
  color: #555;
  }

/*om  man vill ha ram runt bilderna*/
div.float IMG {
 text-align: center;
  border: 1px solid #555;
  }
div.float p a { color: #333; text-decoration: none;}
div.float p a:hover { color: #000; text-decoration: underline; }

div.container {
 width: 800px; /*hur bred innehållsdiven med alla bilddivvar skall vara*/
 height: 100%;
 /*border: 2px dashed #000000;*/
 background-color: #FFFFFF;
 margin: 0 ;
 padding: 0 ;

 }

div.spacer {  
 clear: both;
 margin: 0 ;
 padding: 0 ;
 }

 

HTML:

<div class="container">
Mina bilder

<div class="spacer">  </div>



<div class="float">
<img src="h02_00A.JPG" alt="No image text" /></A><br />
<p>Bildtext</p>
 </div>

<div class="float">
<img src="h02_00A.JPG" alt="No image text" /></A><br />
<p>Bildtext</p>
 </div>
<div class="float">
<img src="h02_00A.JPG" alt="No image text" /></A><br />
<p>Bildtext</p>
 </div>
<div class="float">
<img src="h02_00A.JPG" alt="No image text" /></A><br />
<p>Bildtext</p>
 </div>

<!-- och hur många divvar med bilder du vill -->

</div>

 

 

Edit: det fungerade inte med 2 log

[inlägget ändrat 2006-10-19 21:51:56 av Jonas_Bo]

Länk till kommentar
Dela på andra webbplatser

superbra! Tack!!

 

har fått ett nytt problem dock..

 

Har menyn gjord som en lista med länkar till vänster på sidan. När jag sedan också vill göra en ny lista i mitten på sidan så slutar en del av länkarna i menyn att fungera. Det förvandlas alltså till vanlig text. Detta händer i IE men inte i Firefox. Vad beror detta på??

 

Har testat och utan stilmall är det inga problem. Om jag skriver texten med stilmallar men utan att göra den i lista så är dte inte heller några problem. Vad ska jag göra?

 

Länk till kommentar
Dela på andra webbplatser

Upptäckte precis en ny sak.. att om jag sätter en massa text först och sedan listan så fungerar länkarna i min meny igen.

 

Länk till kommentar
Dela på andra webbplatser

Antagligen har du kodat fel. Därför slutar länkarna att fungera, eller så kan det vara ett "osynligt" objekt över menyn.

 

 

Kollla igenom din kod så hittar du felet.

 

Länk till kommentar
Dela på andra webbplatser

Hej!

 

Tack så mycket för svaret!

Nu har jag kollat igrenom koden och kommit fram till att det är en inställning i css som orsakar felet.

 

jag har innehållet betecknat som id="content"

och i css så har jag

#content

{margin-top:-470px;}

 

Detta eftersom min sida först består av en stor bakgrundsbild och sedan en mindre bild som upprepar sig efter hur lång sidan är. JAg vill att texten ska börja högst upp på den första bakgrundsbilden men sedan fortsätta på den upprepade bakgrunden längre ner.

Om jag ställer in margin-top:0px så fungerar mina menylänkar som de ska (men då sitter all text förstås jättelångt ner..) Men om jag har denna inställning så kan jag inte ha länkar i #content.

 

Vad kan jag göra åt detta???

Vore jättesnällt om jag fick hjälp..

 

 

Länk till kommentar
Dela på andra webbplatser

Fixat!!

 

Uptäckte att jag hade utökat paddingen så mycket att den täckte in menyn och det var detta som orsakade problemet. WEftersom Firefox och IE mäter padding och marginaler olika så visade sig problemet bara i IE. Men fixat nu ialla fall :-D

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...