Hallo, ich bin hier ganz neu und benötige etwas Hilfe.
Ich möchte eine HTML Vorlage mit dazugehörigem CSS erstellen.
Es soll folgendermaßen aussehen:
links ein kleines Image 160px X 200px dann die Beschreibung die auch noch einen Link enthält und rechts davon auf gleicher Höhe wie das erste Bild ein zweites Bild mit ebenfalls 160px x 200 px. Das ganze ist für ein FCE innerhalb von Typo3
mein Ansatz:
Ich möchte eine HTML Vorlage mit dazugehörigem CSS erstellen.
Es soll folgendermaßen aussehen:
links ein kleines Image 160px X 200px dann die Beschreibung die auch noch einen Link enthält und rechts davon auf gleicher Höhe wie das erste Bild ein zweites Bild mit ebenfalls 160px x 200 px. Das ganze ist für ein FCE innerhalb von Typo3
mein Ansatz:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="fzth_styles.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<body>
<div id="linkdisplaypic">
<div id="linkpic1">pic</div>
<div id="linkDescrpic">
<div class="DescrHeaderpic">Description Header</div>
<div class="DescriptionTextpic">Text</div>
<div class="linkLinkpic"><a href="#">Link</a></div>
</div>
<div id="linkpic2">pic</div>
</div>
</body>
</html>
</body>
</html>
Code:
#linkdisplaypic{
height:180px;
width:700px;
background-image: url(images/bgbr.jpg);
background-repeat: no-repeat;
padding: 15px 15px 0 15px;
}
#linkpic1{
float: left;
height: 160px;
width: 200px;
text-align: center;
}
#linkDescrpic{
float: left;
width: 400px;
height:180px;
overflow:hidden;
padding-left: 5px;
}
#linkLinkpic a:link{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #962455;
font-weight: bold;
text-decoration: none;
}
#linkLinkpic a:hover{
text-decoration: underline;
}
#linkpic2{
float: right;
height: 160px;
width: 200px;
text-align: right;
}
