nicht angemeldet
Hallo!
Leider blicke ichnicht ganz durch beim positionieren mit position: absolute und relative.
ich versuche im div-container #content bilder unterzubringen. diese will ich in einzelnen div containern positionieren. leider blicke ich nicht durch welchen ausgangspunkt die absolute positionierung nimmt.
wäre echt cool wenn mir jemand ein beispielcontainer in den div container #content einfügen könnte. sagen wir mal width:200px; height:200px; top: 150px; left 100px;
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<html>
<head>
<title> Testseite </title>
<style type="text/css">
<!--
body {
background-color: #00ADD8;
font-family: "Comic Sans MS", Verdana;
font-size: 18px;
}
#headno1 {
background-color: Fuchsia;
width: 760px;
height: 150px;
margin: 1px auto 10px auto;
}
#head {
background-color: #FFFFF0;
width: 760px;
height: 35px;
margin: 0px auto 0px auto;
border: 1px solid #000000;
}
#main {
width:760px;
margin:0px auto;
text-align:left;
background-color: #FFFACD;
border: 1px solid #000000;
border-right: none
}
#left {;
width: 128px;
float:left;
}
#content {
text-align: center;
background-color: #FFFACD;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin-left: 128px;
}
.menutitle{
font-size: 16px;
font-weight: normal;
text-align: center;
margin: 2px;
}
.menucontainer {
border: 1px solid #000;
background-color: Aqua;
margin: 10px;
margin-bottom: 7px;
width: 106px
}
a.menu {
width: 100px;
display: block;
margin-left: 10px;
margin-top: 7px;
border: 1px solid #000;
padding: 3px;
text-align: center;
font-weight: bold;
color:#eeeeee;
background-color: Gray;
text-decoration: none;
}
.headlines {
font-family: "Comic Sans MS", Verdana;
font-size: 27px;
font-weight: normal;
}
.bigcontent {
text-align: center;
font-size: 25px;
color: #3537FF;
padding-bottom: 20px;
padding-top: 10px;
}
.version {
font-size: 11px;
text-align: left;
} -->
</style>
</head>
<body>
<div id="head">
Impressum
</div> <!-- ENDE DIV HEAD -->
<div id="main">
<div id="left">
<div class="menucontainer">
<p class="menutitle">MENU</p>
</div> <!-- ENDE DIV MENUCONTAINER -->
<a class="menu" href="#">Home</a>
<a class="menu" href="#">Pictures</a>
<a class="menu" href="#">Kontakt</a>
<a class="menu" href="#">Links</a>
<a class="menu" href="#">Impressum</a>
</div> <!-- ENDE DIV LEFT -->
<div id="content">
hallo
<!-- <p class="version">
Diese Website wurde für eine Auflösung von 800 x 600 optimiert.<BR> -->
</div> <!-- ENDE DIV CONTENT -->
</div> <!-- EMDE DIV MAIN -->
</body>
</html>
danke