• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout Problem!

I

isogangsta

Neues Mitglied
Hi Leute!
Ich habe ein Problem.
Meine rechte Navigation ist unter dem Content.
Ich habe mit float:right;´versucht es nach rechts zu bekommen.
Was auch geklappt hat.
Nur dass es rechts unten ist.
Kann mir einer sagen wie ich es nach oben bekomme?

Hier das Problem genauer
problem.png

Hier der HTML-Code
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Language" content="de" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style.css" type="text/css" />
<title>I-KEY</title>
</head>
<body>
<div class="container">
<div class="content">
<!-- NAVBAR -->
<div class="top_bar"></div>
<div class="banner"></div>
<div class="bottom_bar"></div>
<div class="content_top"></div>
<!-- NAVBAREND -->
<!-- NAVLEFT -->
<div class="content_side" align="center">
<div class="content_side_box_top"></div>
<div class="content_side_box_mid">TEXT1</div>
<div class="content_side_box_bottom"></div>
<div class="content_side_spacer"></div>
<div class="content_side_box_top"></div>
<div class="content_side_box2_mid">TEXT2</div>
<div class="content_side_box_bottom"></div>
<div class="content_side_spacer"></div>
</div>
<!-- NAVLEFTEND -->
<!-- CONTENT -->
<div class="content_main" align="center">
<div class="content_box_top"></div>
<div class="content_box_mid">
&copy; Copyright by IKEY
</div>
<div class="content_box_bottom"></div>
</div>
<!-- CONTENTEND -->
<!-- NAVRIGHT -->
<div class="content_side2" align="center">
<div class="content_side_box_top2"></div>
<div class="content_side_box_mid2">TEXT3</div>
<div class="content_side_box_bottom2"></div>
<div class="content_side_spacer"></div>
<div class="content_side_box_top2"></div>
<div class="content_side_box2_mid2">TEXT4</div>
<div class="content_side_box_bottom2"></div>
<div class="content_side_spacer"></div>
</div>
<!-- NAVRIGHTEND -->
<div class="content_bottom"></div>
</div>
</div>
</body>
</html>

und hier der CSS-Code
HTML: 
body, div { padding: 0; margin: 0;}
body, select, input, textarea
{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
body
{
 background-color: #000000;
        background-image: url("http://www.html.de/images/background.jpg");
}
a
{
 color: #000000;
 font-weight: bold;
 text-decoration: underline;
}
.container
{
 width: 900px;
 margin: auto;
}
.top_bar
{
 height: 37px;
 background-image: url(images/index_01.png);
}
.banner
{
 height: 125px;
 background-image: url(images/index_02.png);
}
.bottom_bar
{
 height: 31px;
 background-image: url(images/index_03.png);
}
.content_top
{
 height: 6px;
 background-image: url(images/index_04.png);
}
.content
{
 width: 900px;
 margin: auto;
 background-image: url(images/index_14.png);
 background-repeat: repeat-xy;
}
.content_side
{
 float: left;
 width: 237px;
 background-image: url(images/index_05.png);
 background-repeat: repeat-y;
}
.content_side_box_top
{
 width: 223px;
 height: 30px;
 background-image: url(images/index_06.png);
}
.content_side_box_mid
{
 width: 219px;
 background-image: url(images/index_07.png);
 background-repeat: repeat-y;
 text-align: left;
 padding-left: 3px;
 padding-right: 1px;
}
.content_side_box2_mid
{
 width: 219px;
 background-image: url(images/index_07.png);
 background-repeat: repeat-y;
 text-align: left;
 padding-left: 3px;
 padding-right: 1px;
}
.content_side_box_bottom
{
 width: 223px;
 height: 4px;
 background-image: url(images/index_08.png);
}
.content_side2
{
 float: right;
 width: 237px;
 background-image: url(images/index_05.png);
 background-repeat: repeat-y;
}
.content_side_box_top2
{
 width: 223px;
 height: 30px;
 background-image: url(images/index_06.png);
}
.content_side_box_mid2
{
 width: 219px;
 background-image: url(images/index_07.png);
 background-repeat: repeat-y;
 text-align: left;
 padding-left: 3px;
 padding-right: 1px;
}
.content_side_box2_mid2
{
 width: 219px;
 background-image: url(images/index_07.png);
 background-repeat: repeat-y;
 text-align: left;
 padding-left: 3px;
 padding-right: 1px;
}
.content_side_box_bottom2
{
 width: 223px;
 height: 4px;
 background-image: url(images/index_08.png);
}
.content_side_spacer
{
 height: 7px;
}
.content_main
{
 float: left;
 width: 663px;
 background-image: url(images/index_09.png);
 background-repeat: repeat-y;
}
.content_box_top
{
 width: 649px;
 height: 31px;
 background-image: url(images/index_10.png);
        background-repeat: no-repeat;
}
.content_box_mid
{
 width: 644px;
 background-image: url(images/index_11.png);
 background-repeat: repeat-y;
 text-align: left;
 padding-left: 3px;
 padding-right: 2px;
}
.content_box_bottom
{
 width: 649px;
 height: 7px;
 background-image: url(images/index_12.png);
        background-repeat: no-repeat;
}
.content_bottom
{
 width: 900px;
 height: 6px;
 background-image: url(images/index_13.png);
 clear: both;
}
 
Zuletzt bearbeitet:
Das ist kein Link zur Seite, sondern ein Link zu einem Archiv. Das will keiner.

1. Bitte benutze statt [*HTML] lieber [*code], ersteres macht die Ausgabe unlesbar. Aber das konntest Du nicht wissen.

Ohne den Code gelesen zu haben (aufgrund 1.) kann ich sagen: Das Element, das gefloatet wird, muss im HTML-Code zuerst kommen. Wahrscheinlich stimmt bei Dir einfach diese Reihenfolge nicht. Dann passiert nämlich genau das, was Du beschrieben hast.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben