Bild positionieren
Hallo Community,
ich möchte gerne ein Bild am rechten unteren Rand meines Containers positioneren, hab aber kleine probleme :D .
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite » sdde</title>
</head>
<body>
<div id="m_rahmen">
<div id="l_rahmen">
<a href="<?php echo $p_echo . '/'; ?>">
<h1 id="banner_ngif">sdde</h1>
</a>
<h2>Startseite</h2>
<br>
<div id="d1">
Willkommen auf sdde!<br>
Wähle einen Unterpunkt in der Navigationsleiste aus, um über entsprechende Themen zu lesen.<br><br>
Euer<br>
sdde-Team
<img style="position: absolute; right: 50px; heigth: 200px; width: 220px; valign: right; border: 1px solid;" src="IMG_7640.JPG">
</div>
</div>
</div>
</body>
</html>
CSS-Code:
Code:
div#d1 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 70px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d2 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d3 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d4 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d5 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d6 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d7 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d8 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#d9 {
background-color: #37ABFF;
border: 1px solid #000000;
padding: 5px 5px;
position: relative;
margin: 10px 25px 10px 25px;
width: 850px;
min-height: 120px;
max-width: 900px;
}
div#m_rahmen {
margin: auto;
z-index: auto;
width: 1200px;
height: 1810px;
}
div#l_rahmen {
padding-top: 5px;
position: absolute;
width: 900px;
height: 1790px;
border: 1px solid #000000;
background-color: #0092FF;
margin-left: 200px;
}
div#l_rahmen a {
color: #D8D8D8;
}
div#l_rahmen a:visited {
color: #D8D8D8;
}
div#l_rahmen a:hover {
color: #FFFFFF;
}
Ich hab schon beim img probiert, mit "position: absolute", aber dann geht der Rand von - in dem Fall - <div id="d1"> ned mit ganz runter.
Hätte jemand ne Lösung?
MfG
MasterN
|