nicht angemeldet
Benötige Hilfe bei CSS, bin absoluter Neuling.
Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.
- Die drei (id="indalt_xx") sollten alle von oben denn gleichen Abstand haben 25px und nicht versetzt sein.
- Der Text sollte nach 200px ein Zeilenumbruch machen macht er aber nicht. Die Breite von der (id="text_xx") ist 200px.
mfg Thomas
inhalt.css
#inhalt {
width: 1280px;
background-color: #ffffff;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#inhalt_1 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 132px;
}
#inhalt_2 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 515px;
}
#inhalt_3 {
width: 250px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 898px;
}
#bild_1 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#bild_2 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#bild_3 {
width: 200px;
background-color: #ffffff;
height: 125px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
background-image: url(bild_3.jpg);
background-repeat: no-repeat;
background-position: center;
}
#text_1 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
#text_2 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
#text_3 {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
padding-left: 10px;
background-color: #ffffff;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
width: 200px;
padding-right: 10px;
}
index.html
<!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" />
<link href="inhalt.css" rel="stylesheet" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="inhalt">
<div id="inhalt_1">
<div id="bild_1"></div>
<div id="text_1">
TestTextTestTextTestTextTestText
</div>
</div>
<div id="inhalt_2">
<div id="bild_2"></div>
<div id="text_2">
TestTextTestTextTestTextTestTextTestText
</div>
</div>
<div id="inhalt_3">
<div id="bild_3"></div>
<div id="text_3">
TestTextTestTextTestText
</div>
</div>
</div>
</body>
</html>
Matthias Scharwies
marctrix
Gunnar Bittersmann
JürgenB