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

Aufteilung klappt nicht

U

umixut85

Neues Mitglied
Hallo @all,
dies ist mein erster Beitrag, bzw. Frage darum bitte ich um Nachsicht. Bin noch Anfänger! :?
Der Titel ist auch nicht wirklich aussagekräftig darum versuche ich es hier zu erklären.
Ich versuche eine HP zu erstellen welche Grundlegend aus 3 Teilen besteht, einem "Header", einen "Mittelteil" und einen "Unteren Teil".
Der mittlere Teil ist dabei in 2 sozusagen Spalten geteilt wobei Links das "Menü", sprich die Links sind und rechts der "Content".
Die HP soll zentriert sein und 1000 Pixel breit sein. Das funktioniert. Nur leider wird der Rahmen vom ersten <div> Tag nicht über alle Elemente erweitert, ich muss dazu eine fixe Größe
(in meinem Fall height: 650px;) angeben damit der Rahmen über den ganzen Bereich gezogen wird, sollte das nicht automatisch (height: auto;) erfolgen.
So wie es jetzt ist, ist es ja leider nicht dynamisch.
Ich bin über jeden Rat, Verbesserungen im Code und Hilfe SEHR DANKBAR!
LG
Gery

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="STYLESHEET" type="text/css" href="css/EH.css">
    <title>Elektro Hammer</title>
</head>


<body style="text-align: center; background:url(Source/Backgrounds/BG.jpg);">


    <!--  Container  -->
    <div class="rahmen" style="width: 1000px; height: 650px; margin: 0px auto; text-align: left; background-color:#FF0000;">
    
        <!--  Kopf  -->
        <div id="header">
            <a href="index.html"><img src="Source/ElektroHammer.png" style="height: 110px; margin-top: 10px;" alt="Elektro Hammer"></a>
            <img src="Source/Sonne.png" style="float: right; height: 110px; margin-top: 10px; margin-right: 10px;" alt="Sonne">
        </div>
           
            <!--  Mittelteil  -->
            <!--  Trennlinie  -->
            <div style="padding-top: 40px; margin-top: 10px; border-top: 2px #AAAAAA solid;">
                        
                <!--  Menü  -->
                <div id="menu" style="float: left; width: 250px; margin-left: 20px;">
                    
                    <a class="menu" href="HTMLS/STOERUNGSDIENST.html" target="_top">ST&Ouml;RUNGSDIENST</a>
                    
                    <a class="menu" style="margin-top: 20px;" href="HTMLS/ELEKTROINSTALLATIONEN.html" target="_top">ELEKTROINSTALLATIONEN,<br>ERWEITERUNGEN, NEUINST.</a>
                    
                    <a class="menu" style="margin-top: 20px;" href="HTMLS/SCHALTKAESTEN.html" target="_top">SCHALTK&Auml;STEN<br>Z&Auml;HLERK&Auml;STEN</a>
                    
                    <a class="menu" style="margin-top: 20px;" href="HTMLS/ELEKTROSPRECHANLAGEN.html" target="_top">ELEKTROSPRECHANLAGEN</a>
                    
                    <a class="menu" style="margin-top: 20px;" href="HTMLS/HAUSANSCHLUESSE.html" target="_top">HAUSANSCHL&Uuml;SSE<br>BAUSTROM</a>
                    
                    <a class="menu" style="margin-top: 20px;" href="HTMLS/BLITZSCHUTZ.html" target="_top">BLITZSCHUTZ</a>
    
                </div>
                    
                
                <!--  Inhalt Rechts  -->
                <div id="content" class="text" style="float: right; width: 650px; margin: 0px auto; margin-left: 20px; margin-right: 20px;">
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, Dies ist ein Text, 
                    Dies ist ein Text, Dies ist ein Text, Dies ist ein
                </div>


                <!--  Unterer Bereich  -->
                <!--  Trennlinie  -->
                <div style="float: left; width: 1000px; border-top: 2px #AAAAAA solid; margin-top: 50px; height: 75px;">
                
                    <!--  Impressum  -->
                    <a class="menu" style="margin-top: 20px; margin-left: 20px; width: 250px;" href="HTMLS/IMPRESSUM.html" target="_top">IMPRESSUM</a>
                
                    <!--  1. Vertikale Linie  -->
                    <div style="position:relative; top: -47px; left: 320px; height: 76px; border-left: 2px #AAAAAA solid;">
                    </div>
                    
                    <!--  AGBS  -->
                    <a class="menu" style="position: relative; left: 350px; top: -122px; margin-top: 20px; margin-left: 20px; width: 250px;" href="HTMLS/AGBS.html" target="_top">AGB'S</a>
            
                </div> 


            </div>
    </div>
</body>
</html>
 
Werbung:
Danke erstmal für deine Antwort.
Ich habe jetzt, bevor ich den Header <div> schließe ein "<div style="clear: both;"></div>" eingebaut, und das gleiche bevor ich den Mittelteil <div> schließe.
Der Rahmen wird jetzt über den Mittelteil gestreckt aber der Fuß ist immer noch außerhalb.
LG
Gery

PS: Weißt du eine bessere Art und Weise die beiden Links unten besser zu positionieren als mit position:relative; und dann mit negativem top Wert?

EDIT: Also das mit dem clearen des floatens hab ich jetzt verstanden, und es funktioniert auch ohne fixe Größenangabe. Hast du noch eine Idee wegen der Anordnung der unteren Elemente oder geht das nur so?!
 
Zuletzt bearbeitet:
Werbung:
Na ja, die sich kreuzenden borders bilden in diesem Fall ein "grafisches Gestaltungselement".
Im Prinzip spricht nichts gegen relative Positionierung und negative Abstände.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben