Muskampen 2025: Segraren korad!
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[HTML/CSS] Text under bilder

1
Skriv svar
Permalänk
Medlem
●

[HTML/CSS] Text under bilder

HTML-KOD:

<div class="bilder">
<a href="http://web.kullagymnasiet.se/Albin/" target="_blank" title="Albins site">
<img src="Albin.jpg" class="o_img"/>
</a>
<a href="Biography.html" target="main" title="About Kevin von Hansen" >
<img src="kevin_bw.jpg" class="p_img";/>
</a>
<a href="http://www.hurr-durr.com" target="_blank" title="Info about Harald">
<img src="Harald.jpg" class="o_img" width="157px" height="185px;"/>
</a>
</div>

CSS-KOD:

.bilder {
	margin: 0 auto; 
	text-align: center;
	
	
}

   .o_img {
   border-radius: 10px 10px 10px 10px;
	moz-box-shadow: 0 0 6px #fff;
  -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
          transition: all 0.6s ease;
		  overflow:hidden;
		  margin-left:2%;
		  margin-right:2%;
}
 
.o_img:hover {
  -webkit-transform: rotate(-15deg);
     -moz-transform: rotate(-15deg);
       -o-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
		  }
 .p_img {
   border-radius: 10px 10px 10px 10px;
	moz-box-shadow: 0 0 6px #fff;
  -webkit-transition: all 0.6s ease;
     -moz-transition: all 0.6s ease;
       -o-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
          transition: all 0.6s ease;
		 
	
}
 
.p_img:hover {
  -webkit-transform: rotate(15deg);
     -moz-transform: rotate(15deg);
       -o-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
		  }

Tjena, Jag har problem med att skriva texter under dessa 3 bilder!

Under bilden kevin_bw.jpg Vill jag att det ska stå "Kevin Hansen", och under "Kevin Hansen" ska det stå "producer/dj".
Under bilden Albin.jpg vill jag att det ska stå "Albin Andersson", och under "Albin Andersson" ska det stå "Art-director"
Under bilden Harald.jpg vill jag att det ska stå "Harald Ericsson", och under "Harald Ericsson" ska det stå "manager"

Redigera
Citera flera Citera
Permalänk
Medlem
●

Enklast möjliga:

<div class="bilder">
<a href="http://web.kullagymnasiet.se/Albin/" target="_blank" title="Albins site">
<img src="Albin.jpg" class="o_img"/><br />
Albin Andersson<br />
Art-director
</a>
<a href="Biography.html" target="main" title="About Kevin von Hansen" >
<img src="kevin_bw.jpg" class="p_img";/><br />
Kevin Hansen<br />
producer/dj
</a>
<a href="http://www.hurr-durr.com" target="_blank" title="Info about Harald">
<img src="Harald.jpg" class="o_img" width="157px" height="185px;"/><br>
Harald Ericsson<br />
manager
</a>
</div>

Visa signatur

/Joakim

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tjena, det där funkar inte om du vill ha all centrerat bredvid varandra.

Redigera
Citera flera Citera
Permalänk
Medlem
●

För varje bild kan du skapa en egen spalt-class.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="bilder">
<div class="spalt">
<a href="http://web.kullagymnasiet.se/Albin/" target="_blank" title="Albins site">
<img src="Albin.jpg" class="o_img"/><br />
Albin Andersson<br />
Art-director
</a>
</div>
<div class="spalt">
<a href="Biography.html" target="main" title="About Kevin von Hansen" >
<img src="kevin_bw.jpg" class="p_img";/><br />
Kevin Hansen<br />
producer/dj
</a>
</div>
<div class="spalt">
<a href="http://www.hurr-durr.com" target="_blank" title="Info about Harald">
<img src="Harald.jpg" class="o_img" width="157px" height="185px;"/><br>
Harald Ericsson<br />
manager
</a>
</div>
</div>
</body>
</html>

I CSS:en ger du spalt-classen attributet display:inline-block; och en önskad width.

CSS:

.bilder {
margin: 0 auto;
text-align: center;
}

.spalt {
width:20%;
display:inline-block;
}

.o_img {
border-radius: 10px 10px 10px 10px;
moz-box-shadow: 0 0 6px #fff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
transition: all 0.6s ease;
overflow:hidden;
margin-left:2%;
margin-right:2%;
}

.o_img:hover {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.p_img {
border-radius: 10px 10px 10px 10px;
moz-box-shadow: 0 0 6px #fff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
transition: all 0.6s ease;

}

.p_img:hover {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}

Om du vill ha bilderna på rad med en textrad under så är detta ett lätt sätt att lösa det på.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av f0xen:

Tjena, det där funkar inte om du vill ha all centrerat bredvid varandra.

Gå till inlägget

Nej, det kan du lösa på lite olika sätt. T.ex. med tabeller. Eller med <div>:ar. Eller på annat sätt.
Ta en titt på exempelvis den utmärkta sajten

http://www.w3schools.com/

så kan du lära dig hur du enkelt gör det själv så slipper du vara beroende av att andra gör det åt dig på ett sätt som du tycker är fel.

Visa signatur

/Joakim

Redigera
Citera flera Citera
1
Skriv svar