DIV Problem

[M.Fänger]

Nabend

Ich bin gerade dabei, meiner Seite ein neues Design zu verpassen. Ich möchte alles per DIV Layer machen, das klappt auch sehr gut, bis auf ein kleines Problem. Zu sehen dort -> http://gfxcenter.para-scripts.de/index2.php

Wie man sieht, beginnt der Content unterhalb der Navigation, was mich sehr stört.

Den Quelltext der Seite könnt ihr ja meinem Link entnehmen.

Hier mal meine CSS Datei...

|===============================================================|

body {
 background:#e6e6e6;
 font-family:Verdana,Arial,Tahoma;
 font-size:10px;
}
#content {
 background:url(../images/bg.gif);
 background-repeat:repeat-y;
 margin-bottom:20px;
 margin-left:20px;
 width:620px;
}
#header {
 background-image:url(../header/header_1.jpg);
 width:620px;
 height:80px;
}
#navigation {
 margin-left:10px;
 margin-top:10px;
}
#content_text {
 top:0px;
 margin-left:200px;
 margin-right:18px;
}

|===============================================================|

Ich hoffe, mir kann einer helfen... :-)

MFG

[Vinzenz]

Hallo M.Fänger

Ich bin gerade dabei, meiner Seite ein neues Design zu verpassen. Ich möchte alles per DIV Layer machen, das klappt auch sehr gut, bis auf ein kleines Problem. Zu sehen dort -> http://gfxcenter.para-scripts.de/index2.php

Wie man sieht, beginnt der Content unterhalb der Navigation, was mich sehr stört.

Ich kann das nicht sehen,

Mozilla 1.5 und Opera 7.20 unter Windows XP

Der Content befindet sich neben der funktionslosen Navigation.

Freundliche Grüsse,

Vinzenz

[M.Fänger]

Der Content befindet sich neben der funktionslosen Navigation.

Sorry, so meinte ich das nicht. Ich meinte, der Content liegt zwar daneben, aber von der Höhe her gesehen liegt er drunter, weisst was ich meine?

Tschuldigung, hatte mich falsch ausgedrückt.

[Andy]

Nabend

|===============================================================|

body {
 background:#e6e6e6;
 font-family:Verdana,Arial,Tahoma;
 font-size:10px;
}
#content {
 background:url(../images/bg.gif);
 background-repeat:repeat-y;
 margin-bottom:20px;
 margin-left:20px;

Warum margin? mach doch einfach left:, bottom:,usw.

width:620px;
}
#header {
 background-image:url(../header/header_1.jpg);
 width:620px;
 height:80px;
}
#navigation {
 margin-left:10px;
 margin-top:10px;

s.o.

}
#content_text {
 top:0px;
 margin-left:200px;
 margin-right:18px;

s.o.
in diesem Fall macht es sogar etwas aus!

}

|===============================================================|

Probier mal die letzten zwei Punkte so:
#navigation {
   position: absolute;
 left:35px;
 top:110px;
}
#content_text {
   position: absolute;
 top:110px;
 left:220px;
 right:18px;
}
Andy

[M.Fänger]

Danke Andy, aber das habe ich auch schon probiert.

Dann wiederholt sich das BG Bild im Content DIV aber nicht mehr...

[wahsaga]

hi,

Warum margin? mach doch einfach left:, bottom:,usw.

nein, besser nicht.

Probier mal die letzten zwei Punkte so:
#navigation {
   position: absolute;

nein, absolute positionierung ist nicht der heilige gral.
also rate bitte nicht dazu, nur weil du mit float nicht umzugehen weisst.

gruss,
wahsaga

[nag]

Hallo,

#navigation

width:150px;
float:left;

sollte helfen.
Beschäftige dich mit "float"
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

Hier findest du Beispiele:
http://css.fractatulum.net/beispiele.htm
Scrolle runter bis "Layout/Seitenaufteilung mit Hilfe von CSS und <div>"

Für dein Menu eignet sich eine formatierte Liste. Beispiele unter
http://css.maxdesign.com.au/listamatic/index.htm

mfg NAG

[M.Fänger]

Habe ich auch schon probiert, NUR wenn der Text kürzer als die Navi wird, wiederholt sich das BG Bild nicht mehr, weil das Float es zu einem Block Element macht.

[nag]

Hallo,

Habe ich auch schon probiert, NUR wenn der Text kürzer als die Navi wird, wiederholt sich das BG Bild nicht mehr, weil das Float es zu einem Block Element macht.

schön, was du schon alles probiert hast, worauf du in deiner fragestellung aber nicht hinweist. da du schon so viel weißt liegt dein problem in der logik ;) wobei es dir an kreativität nicht fehlen dürfte (ich habe gerade deine alte hp angesehn)

mein vorschlag:

http://www.stud.uni-giessen.de/~su6690/selfhtml/

mfg NAG

[M.Fänger]

Danke dir!

Habs hinbekommen ;D

Und zu meiner alten page: danke, aber wie man sieht, war/ist das ziemlich mieser code und das soll mit dem neuen Design anders werden ;)

MFG

Fänger

[nag]

nachtrag:

http://www.stud.uni-giessen.de/~su6690/selfhtml/

Dieser Link existiert nur unbestimmte Zeit.
Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
 <title>title</title>

<style type="text/css">
body {
 background:#e6e6e6;
}

#header {
 width:600px;
 height:80px;
 background-color:#555;
 border:1px solid black;
}
#container {
 width:600px;
 border:1px solid black;
 border-top:0 none;
 background-color:#abd;
 }
#menu {
 width:150px;
 float:left;
 margin:0;
 padding:0;
 }
#content {
 margin-left:170px;
 background-color:#fff;
 border-left:5px solid red;
 }

.clear {clear:left;}

</style>

</head>

<body>

<div id="header"></div>
<div id="container">

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">Guestbook</a></li>
 <li><a href="#">Other</a></li>
 </ul>

<div id="content">
 V I E L   T E X T ..........
 </div>

<div class="clear"></div>
</div>

</body>
</html>

mfg NAG