nicht angemeldet
Probleme beim Positionieren!
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
-
Hallo DerDon!
Leider blicke ichnicht ganz durch beim positionieren mit position: absolute und relative.
Code: [...]Erstml ein Lesetip: CSS -> CSS-Eigenschaften -> Positionierung und Anzeige von Elementen -> position (Positionsart) (http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position)
Ich blicke da auch nicht ganz durch, was aber wohl mehr daran liegt, daß ich nach den ersten paar Zeilen "aufgegeben" habe.
Stell das ganze doch irgendwo online, damit man sich das erstmal richtig anschauen kann.
So viel Code zu posten ist nicht sehr sinnvoll, da sich das kaum einer durchlesen wird.
Also, für die Zuknuft merken:
Datei online stellen, und ggf. _konkrete Problemstellen_ ins Posting schreiben, aber nicht einfach alles reinkopieren.Und übrigens: Ich hab in Deinem Code nirgends position: gesehen, und in der oben verlinkten Selfhtml-Seite steht:
"absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit."MfG
Götz--
Losung und Lehrtext für Samstag, 29. November 2003
Herr, du hilfst Menschen und Tieren. (Psalm 36,7)
Jesus spricht: Seht die Vögel unter dem Himmel an: sie säen nicht, sie ernten nicht, sie sammeln nicht in die Scheunen; und euer himmlischer Vater ernährt sie doch. (Matthäus 6,26)
(http://www.losungen.de/heute.php3)