Ergebnis 1 bis 3 von 3

Thema: Richtige Anordnung von Divs mithilfe von float

  1. #1
    HTML Newbie
    Registriert seit
    28.05.2012
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Richtige Anordnung von Divs mithilfe von float

    Hi Leute,
    Bei der Programmierung meiner Homepage ist mir folgendes Problem begegnet:
    Wie ihr seht kommt zuerst oben ein Header - dann mini-news -darauf folgt eine linke Seite welche mithilfe von "float" an den Main Teil "geklebt" werden soll - nach der Maindiv folgt die rechte Seite welche auch mit float an der Richtigen Stelle positioniert werden soll ... allerdings ist diese wie ihr seht nicht an der richtigen Stelle

    Mein Code {HTML & CSS}
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <!-- Wrapteil -->
    <div id="Wrap">
    
    <!-- Topteil -->
    <div id="Top">
    </div>
    <!-- Topteil -->
    
    <!-- mini-newsteil -->
    <div id="Mini-news">
    </div>
    <!-- mini-newsteil -->
    
    <!-- side1teil -->
    <div id="Side1">
    </div>
    <!-- side1teil -->
    
    <!-- mainteil -->
    <div id="Main">
    </div>
    <!-- mainteil -->
    
    <!-- side2teil -->
    <div id="Side2">
    </div>
    <!-- side2teil -->
    
    <!-- footerteil -->
    <div id="Footer">
    </div>
    <!-- footerteil -->
    
    
    </div>
    <!-- Wrapteil -->
    </body>
    </html>
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #Wrap {
        background:#420;
    }
    
    #Top {
        width:100%;
        height:250px;    
        border: 4px solid #888;
        background:#f00;
    }
    
    #Mini-news {
        width:100%;
        height:50px;
        border: 4px solid #888;
        background:#4cc;
    }
    
    #Side1 {
        width:25%;
        height:400px;
        border: 4px solid #888;
        background:#808;
        float:left;
    }
    
    #Main {
        width:50%;
        height:400px;
        border: 4px solid #888;
        background:#fff;
        float:left;
    }
    
    #Side2 {
        width:25%;
        height:400px;
        border: 4px solid #888;
        background:#c00;
        float:right;
    }
    
    #Footer {
        width:100%;
        height:100px;
        border: 4px solid #888;
        background:#f80;
        float:none;/* postion fixirt;
        position:fixed;
        bottom:0px; */
    }
    könntet ihr mir bitte einen Lösungsvorschlag sagen
    Danke im Voraus & Grüße vonn John_Thym
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Richtige Anordnung von Divs mithilfe von float

    Ich sehe in deiner CSS überhaupt keine Positionsangaben :s
    Ein Link wäre vielleicht ganz gut ..

    CSS für 2 nebenstehende Elemente:
    Code:
    #main {
    margin-left: auto;
    margin-right:auto;
    margin-top: 100px;
    width: 1000px;
    float: center;
    }
    
    #element1 {
    margin-left: 0px;
    width: 500px;
    height: 200px;
    float: left;
    margin-top: 0px;
    }
    
    #element2 {
    margin-right: 0px;
    width: 500px;
    height: 200px;
    margin-top: 0px;
    float: right;
    }
    Wenn sich ein Element unter das andere Stellt überprüfe deine HTML-Datei. Die Elemente müssen auch dort so platziert werden, dass sie die richtigen Positionierungen erhalten ..
    Alternativ mit top:-200px; arbeiten (zieht das element 200px hoch)


  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Richtige Anordnung von Divs mithilfe von float

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #Wrap {
        background:#a33;
    }
    
    #Top {
        width:100%;
        height:250px;    
      
        background:#f00;
    }
    
    #Mini-news {
        width:100%;
        height:50px;
       
        background:#4cc;
    }
    
    #Side1 {
        width:25%;
        height:400px;
      
        background:#808;
        float:left;
    }
    
    #Main {
        width:50%;
        height:400px;
       
        background:#ff0;
        float:left;
    }
    
    #Side2 {
        width:25%;
        height:400px;
       
        background:#c00;
        float:right;
    }
    
    #Footer {
        width:100%;
        height:100px;
       
        background:#f80;
     clear:both;
      
    }
    
    .rahmen {
     border:4px solid #aaa;
    }
    </style>
    </head>
    
    <body>
    <!-- Wrapteil -->
    <div id="Wrap">
    
    <!-- Topteil -->
    <div id="Top">top
    </div>
    <!-- Topteil -->
    
    <!-- mini-newsteil -->
    <div id="Mini-news">mini
    </div>
    <!-- mini-newsteil -->
    Lass einfach alle Border weg. Wen du unbedingt Border willst, dann definiere noch innere Divs.

Ähnliche Themen

  1. Bitte um Mithilfe bei Diplomarbeit
    Von Unregistriert im Forum Off Topic und Quasselbox
    Antworten: 6
    Letzter Beitrag: 15.07.2010, 17:52
  2. I-explorer richtige anordnung im Firefox alles verfuscht
    Von holzverleih im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 20.02.2008, 19:15
  3. Floating Away..... brauche sowas wie float für divs.....
    Von Peter im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.10.2006, 20:30
  4. Anordnung von divs abhängig von Fenstergröße?
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.07.2006, 18:24
  5. Anordnung
    Von !ron m@n im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 12.08.2005, 01:36

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •