Kodning - Css

Diverse d. 09. juni. 2012, skrevet af MATHI.B96

Vist: 788 gange.

Erfaren rotte
Tilføjet:
09-06-2012 22:17:35
Svar/Indlæg:
92/14

Heysa alle sammen.

Jeg har en hjemmeside, hvori jeg gerne vil lave en side, hvor der er 4 billeder på, og til hvert af billederne skal der være en tekst - altså kategori tekst.

1,2,3,4 eksempelvis men udfra hvert billede.

Pointen er, at i midt Adobe Dreamveawer, kan jeg ikke få det til at virke.

Jeg skal vel lave en "ramme" altså en div box.
og inde i den skal der være endnu en div box, for hvert af de fire billeder, og inde i hver af de fire div boxe, skal der være en div box for selve billedteksten.

Eller er jeg helt forkert på den?

Mvh.

Mathi

Verdenshersker

Passiv Hwt crew
Tilføjet:
09-06-2012 23:25:20
Svar/Indlæg:
3636/386

Brug Crimson Editor - der kan du goere det. Det er gratis og til Windows. Bruger du Mac OSX, saa tag TextMate

Cocio21

Moderator
Tilføjet:
09-06-2012 23:30:03
Svar/Indlæg:
4983/48

<div class="***">

</div>

Bruges for eks til at opstille det givne element med CSS via en class, det henter dog ikke noget billed/tekst frem, men flytter/retter blot på indholdet 🙂

Du kan se et komplet eks her :

http://w3schools.com/css/css_i...

Sweet_Dane

Superbruger
Tilføjet:
09-06-2012 23:40:34
Svar/Indlæg:
138/1

<div id="pic-wrap">
<div id="pic-1"></div>
<div id="pic-2"></div>
<div id="pic-3"></div>
<div id="pic-4"></div>
</div>

css:
brug float til at sætte div's op side om side.
width på pic-1 - pic-4 halvdelen af pic-wrap.
derefter bare smid billedet ind i div'en. + en tekst

done.

MATHI.B96

Erfaren rotte
Tilføjet:
10-06-2012 10:33:44
Svar/Indlæg:
92/14

Tak Sweet_Dane :)

Så den skal se sådan her ud: F.eks.
<div id="pic-wrap">
<div id="pic-1"><p>dsadsada</p><img src="PRØVE!/forside.png" width="1683" height="417" /></div>
<div id="pic-2"><p>dsadsada</p><img src="PRØVE!/forside.png" width="1683" height="417" /></div>
<div id="pic-3"><p>dsadsada</p><img src="PRØVE!/forside.png" width="1683" height="417" /></div>
<div id="pic-4"><p>dsadsada</p><img src="PRØVE!/forside.png" width="1683" height="417" /></div>
</div>

MATHI.B96

Erfaren rotte
Tilføjet:
10-06-2012 11:31:17
Svar/Indlæg:
92/14

Koden endte med, at se således ud

<div id="pic-wrap">
<div id="pic-box1">
<div id="pic1">
<p>Iso-sign</p><img src="img/img-scroller/prøvepic.jpg" width="300" height="150" /></div>
<div id="pic2">
<p>Zi-light</p><img src="img/img-scroller/prøvepic.jpg" width="300" height="150" /></div>
</div>
<div id="pic-box2">
<div id="pic3">
<p>Steel-line</p><img src="img/img-scroller/prøvepic.jpg" width="300" height="150" /></div>
<div id="pic4">
<p>Zi-sign</p><img src="img/img-scroller/prøvepic.jpg" width="300" height="150" /></div>
</div>
</div>

og css:
/*PRØVE!*/
#pic-wrap{
width:1024px;
height:552px;
float:left;
}
/*Billed 1 & 2*/
#pic-box1{
width:512px;
float:left;

}

#pic1{
margin-top:65px;
margin-left:90px;
}

#pic1 p{
color:#FFFFFF;
margin-bottom:0px;
font: 20px Gill Sans, Arial, Helvetica, sans-serif;
}

#pic1 p:hover{
color:#FF0000;
text-decoration:underline;
}

#pic2{
margin-top:100px;
margin-left:90px;
}

#pic2 p{
color:#FFFFFF;
margin-bottom:0px;
font: 20px Gill Sans, Arial, Helvetica, sans-serif;
}

#pic2 p:hover{
color:#FF0000;
text-decoration:underline;
}

/*Billed 3 & 4*/
#pic-box2{
width:512px;
float:left;
}

#pic3{
margin-top:65px;
margin-left:90px;
}

#pic3 p{
color:#FFFFFF;
margin-bottom:0px;
font: 20px Gill Sans, Arial, Helvetica, sans-serif;
}

#pic3 p:hover{
color:#FF0000;
text-decoration:underline;
}

#pic4{
margin-top:100px;
margin-left:90px;
}

#pic4 p{
color:#FFFFFF;
margin-bottom:0px;
font: 20px Gill Sans, Arial, Helvetica, sans-serif;
}

#pic4 p:hover{
color:#FF0000;
text-decoration:underline;
}

Sweet_Dane

Superbruger
Tilføjet:
10-06-2012 14:48:41
Svar/Indlæg:
138/1

super :)
Bare husk når du bruger float, så skal der være en tom div under din sidste float div, med

<div class="clear"></div>

, og css

.clear {clear:both}

ellers kan resten af din side blive et helvede at arbejde med.

god arbejdslyst ;)

MATHI.B96

Erfaren rotte
Tilføjet:
10-06-2012 17:37:58
Svar/Indlæg:
92/14

Så det du siger er, at hver gang jeg floater noget skal der være en "clear" ? :)

Har dog så lige et andet problem :)

Hvis vi nu kigger på denne side (hvor det er sat op)
http://mathiasbrask.dk/test2/P...

Så har jeg sat den til at blive rød, når man "hoverer/hover"
Det jeg også gerne vil er, at når jeg "rør ved billedet" bliver teksten ovenover rødt? Er det muligt, at linke de 2 "sammen"?

Sweet_Dane

Superbruger
Tilføjet:
10-06-2012 18:09:48
Svar/Indlæg:
138/1

så skal det laves i javascript.

MATHI.B96

Erfaren rotte
Tilføjet:
10-06-2012 21:50:11
Svar/Indlæg:
92/14

Ja ok, jeg ser på det - men du/i skal have tak for hjælpen.

:)