Just nu i M3-nätverket
Jump to content

bilder på rad med css?


Djiodis

Recommended Posts

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

 

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...