Merkwürdige Verschiebung nach unten

**amateur2000** · 27.05.2009 22:28

Hallo zusammen!
Dies ist also mein erstes Thema hier. Also das Problem wird vielleicht deutlich, wenn man sich das angehängte jpg ansieht.
Ich möchte unter dem Headerbereich direkt das Menü und den Inhaltsbereich haben. Das klappte auch so lange, bis ich die beiden Fahnen eingebaut habe. Kann jemand spontan den Fehler erkennen? Ich noch ziemlich am Anfang, was CSS betrifft und kann mir jetzt einfach nicht erklären, wie ich das lösen soll.
Ich hab den Bereich, der die Probleme macht mal schwarz eingerahmt...

Hier vielleicht mal den Code meiner index.php

PHP-Code:


<!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" xml:lang="de" lang="de"> 



    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Gest&uuml;t Ganschow</title>

        <link href="styles.css" rel="stylesheet" type="text/css" media="all" />

    </head>



    <body>

    <div id="gesamt">

        <div id="head_navi">

            <span id="head_fahne">

                <a href="#"><img src="grafik/de.jpg"></a> 

                <a href="#"><img src="grafik/en.jpg"></a>

            </span>

            <span id="tech">

                <ul>

                    <a href="#"><li style="border:none">Impressum</li></a>

                    <a href="#"><li>Kontakt</li></a>

                    <a href="#"><li>Preise & Leistungen</li></a>

                    <a href="#"><li>Stutenparade</li></a>

                    <a href="#"><li>Home</li></a>

                <ul>

            </span>

        </div>

        <br style="clear:both;">

        <div id="links">

            <div id="auge">

                <img src="grafik/auge.jpg" />

            </div>

            

            <ul class="menu">

                <li><a href="#">News</a></li>

                <li><a href="#">Das Gest&uuml;t</a></li>

                <li><a href="#">Deckhengste</a></li>

                <li><a href="#">Verkaufspferde</a></li>

                <li><a href="#">Touristik</a></li>

                <li><a href="#">Veranstaltungen</a></li>

                <li><a href="#">Impressionen</a></li>

                <li><a href="#">Links</a></li>

            </ul>

        </div>

        <div id="main">

            test main

        </div>

        <div id="rechts">

            test rechts

        </div>

        <br style="clear:both" />

        

        <div id="footer">

            &copy; 2009 Gest&uuml;t Ganschow - Alle Rechte vorbehalten

        </div>

    </div>

    </body>



</html>

und hier die css:

Code:

/*--------------------------- CSS RESET ------------------------------------------
--------------------------------------------------------------------------------------*/
*{
padding:0;
margin:0;
font-size:100%;
font-weight:normal;}

ul,ol{
list-style:none;}

b,strong {
font-weight:bold;}

img,a img {
border:none;}

/*--------------------------- SCHRIFT / GRÖSSE--------------------------------
--------------------------------------------------------------------------------------*/
body {
font-family:arial;
font-size:76%;
color:#000000;
background-color:#FFFFFF;
line-height:1.5em;
text-align:left;
background-image:url('grafik/background.jpg');
background-repeat:repeat-x;}

a:link,a:visited {
color:#000000;
text-decoration:none;}

a:hover{
color:#FF0000;
text-decoration:underline;}

#gesamt {
margin:0px auto;
background-image:url('grafik/banner.jpg');
background-repeat:no-repeat;
width:1024px;
height:768px;
border:solid 1px #ffffff;}

#links {
background:#ffffcc;
width:193px;
min-height:500px;
height:500px;
height:auto;
margin-top:2px;
float:left;
display:inline;}

#auge {
width:193px;
height:82px;}

.menu li{
border-top:solid 1px #94bf94;
border-bottom:solid 1px #94bf94;
border-left:solid 8px #94bf94;
border-right:solid 1px #94bf94;
height:31px;
width:184px;

margin-bottom:2px;
margin-top:0px;}

.menu a {
background-image:url('grafik/button_normal.jpg');
font-family:arial;
color:#94bf94;
text-decoration:none;
font-size:14px;
font-weight:bold;
display:block;
padding-left:30px;
padding-top:6px;
height:25px;}

.menu a:hover{
background-image:url('grafik/button_hover.jpg');}

#main {
margin-top:2px;
width:633px;
float:left;}

#tech  ul li{
float:right;
margin-right:10px;
display:inline;
font-weight:bold;
border-right:solid 1px #000000;
padding-right:6px;}

#rechts {
background:#ffffcc;
margin-top:2px;
width:193px;
float:right;
min-height:500px;
height:500px;
height:auto;}

#head_navi {
height:20px;
margin-top:140px;
border:solid 1px #000000;}

#head_fahne {
float:left;
margin-left:10px;}

#footer {
background-image:url('grafik/footer.jpg');
width:1024px;
height:23px;
margin-top:6px;
padding-top:7px;
text-align:center;}

Ich hoffe, ihr könnt mir helfen...

Grüße
Frank

**jayjay** · 27.05.2009 23:35

nabend, kurz reingeschaut, ungetestet, was soll

HTML-Code:

<br style="clear:both;">

bewirken?
und

HTML-Code:

                <ul>
                    <a href="#"><li style="border:none">Impressum</li></a>
                    <a href="#"><li>Kontakt</li></a>
                    <a href="#"><li>Preise & Leistungen</li></a>
                    <a href="#"><li>Stutenparade</li></a>
                    <a href="#"><li>Home</li></a>
                <ul>

würde ich

HTML-Code:

                <ul>
                    <li style="border:none"><a href="#">Impressum</a></li>
                    <li><a href="#">Kontakt</a></li>
                    <li><a href="#">Preise & Leistungen</a></li>
                    <li><a href="#">Stutenparade</a></li>
                    <li><a href="#">Home</a></li>
                <ul>

so schreiben, zuerst liste, innen die links.
wenn du die seite hochladen kannst dann kannst du dir viel arbeit sparen und nur denn link posten, das reicht meistens

vielleicht noch

HTML-Code:

#head_fahne img {
 padding:0;
 margin:0;
}

**amateur2000** · 28.05.2009 21:33

Danke für die schnelle Antwort. Leider hat mich dein Tip noch nicht voran gebracht.

<br style="clear:both"> bewirkt, dass der Footerbereich sich unter dem Menü ausrichtet. Wenn ich es weglasse, rutscht der Footer auf Höhe des Auges (siehe Entwurf)

Ich habe das Ganze mal hochgeladen, damit ihr direkt sehen könnt, wo das Problem liegt.

http://www.bocr.de/ganschow/

**janeck** · 29.05.2009 09:04

Also meiner Meinung nach liegt es am folgenden CSS-Code
und zwar an der Zeile die rot markiert ist. Wenn du das auf null setzt ist die Spalte weg, allerdings ist dann die Navi nicht mehr formatiert.

Code:

body {styles.css (Linie 20)
color:#000000;
font-family:arial;
font-size:76%;
line-height:1.5;
text-align:left;

MFG Janeck

**th2409** · 29.05.2009 09:12

Kern Deines Problems ist das <br ...>. Denn trotz des angehängten CSS-Styles bleibt es ein Zeilenumbruch(!), und genau den stellt der Browser dar! Im Übrigen machst Du das auch mehrfach im Dokument.
Das Problem kam also nicht unbedingt mit dem Einfügen der Fähnchen, sondern mit dem Einfügen des <br>. Das notwendige clearen solltest Du anders lösen, besipielsweise, indem Du den nachfolgenden "richtigen" Elementen ein clear: mitgibst. Im Zweifelsfalle würde ich um alles nachfolgende ein Div legen.
Es gibt allerdings auch andere Methoden, beispielsweise :after, auch wenn man dann für die "alten" Browser IE noch ein bisschen tricksen musst.

Ansonsten steckt noch einiges Ungereimtes im Quelltext:

Es wird <ul> (Blockelement) in einem <span> (Inline-Element) verwendet - ist offiziell nicht sauber. Nimm ein Div, sofern nötig.
<img> wird nicht geschlossen, da kommt u.U. etwas in der Browser-Darstellung durcheinander. Es muss folgerndermaßen aussehen : <img ... />
Deine <ul> sind falsch aufgebaut. Ein <ul> muss <li> als einzelne Listenpunkte beinhalten, erst diese bekommen inhaltlich Text/ Links. Bei Dir sieht es anderherum aus : ul a li , das ist verkehrt. Also : ul li a draus machen!

**amateur2000** · 01.06.2009 19:39

Vielen Dank für die Antworten! Ich habe die clear-Anweisungen jetzt den jeweils folgenden div's zugeordnet und schon hat sich das Problem erledigt.

Vielen Dank für eure Unterstützung!!!!!!!!!!!!

Grüße
Frank

zur Startseite vom TP

Thema: Merkwürdige Verschiebung nach unten

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Merkwürdige Verschiebung nach unten

Ähnliche Themen

div nach unten ausrichten

Google auf dem Weg nach unten?

vo noben nach unten

onload-pop-up klappt nach dem öffnen gleich nach unten

Bild Nach Unten ....

Aktive Benutzer

Aktive Benutzer