Ergebnis 1 bis 5 von 5

Thema: CSS Spaltenlayout zwei Spalten gleiche Länge mit float

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

    Standard CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    Hallo!

    Ich brauche jetzt mal eure Hilfe, weil ich einfach nicht weiterkomme.
    Ich versuche gerade, eine Seitenlayout aus css-Boxen zu bauen, da ich gehört habe, dass Tabellen eher nicht mehr benutzt werden sollen. (habe früher immer mit Tabellen gearbeitet, aber wollte mich mal an Boxen probieren)

    Es geht jetzt darum, dass die Inhaltsbox aus zwei Boxen besteht. Wenn die eine länger ist als die andere, soll die zweite trotzdem mitwachsen.

    Ich halte mich an dieses Beispiel:

    http://aktuell.de.selfhtml.org/weblo...chsel-zu-float
    Beispiel 4:
    http://aktuell.de.selfhtml.org/weblo...beispiel4.html

    Nun ist es in meiner Umsetzung so, dass wenn ich an der Stelle:

    HTML-Code:
    #container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }[code lang=css]
    den border komplett entferne, das mitwachsen nicht mehr funktioniert.
    Das verstehe ich nicht. Das heißt ja wohl, dass irgendwo in meinem code ein Fehler sein muss.

    Außerdem wachsen beide Spalten nicht mit, wenn die linke länger wird, sondern nur, wenn die rechte länger wird. Das ist in dem Beispiel aus selfhtml nicht so.

    Ich weiß, dass ich, wenn ich zwei Hintergrundfarben habe, der Haupt-Container-Box (#container) ein Hintergrundbild geben muss, ich habe jetzt aber erstmal nur eine Farbe drin, weil ich erstmal noch an dem Code selbst rumprobiere, das Bild kommt dann später.

    Ich glaube ich habe das mit float und den positons noch nicht so richtig verstanden, das ist mir aber erstmal egal, solange ihr mir helft meinen code zum laufen zu bringen
    ich muss auch nicht unbedingt float verwenden, hauptsache, die sache funktioniert!

    Was mache ich bloß falsch? Bitte helft mir!!!

    Viele Grüße
    Josefine

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test</title>
    <style type="text/css">
    body {
    font-family: verdana, arial; color:#000000; font-size: 10pt; color:black; background-color: #bfd1e8; }
    #container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }
    .grossblau {
            color:#003059; font-size: 20pt;
    }
    #seiten {
            top: 25px;
            left: 0px;
            height: 240px;
            width: 100%;
            background: #7798bc;
            position: absolute;
            border: 2px;
            border-style: solid;
            border-color: #bfd1e8;
    }
    #oben {        
                    top: 20px;
                    height: 240px;
                    width: 876px;
                    background-image: url(bilder/startseite.jpg);
                    position: absolute;
                    border: 5px;
                    border-style: solid;
                    border-color: #bfd1e8;
                    text-align: top;
                    color: #003059;
                    }
    #kopfunten
    {
            margin-top: 160px;
            height: 10px;
            width: 866px;
            padding: 5px;
            font-size:11pt;
            text-align: center;
            word-spacing: 1.4em;
    }
    #links {margin-top:250px; width: 200px; padding: 5px; float:left; }
    #rechts {margin-top:250px; width: 667px; padding: 5px; margin-left:205px; background-color:white;}
    p { margin:0; }
    
    
    
    
    
    </style>
    </head>
    <body>
    
    <div id="seiten"></div>
    <div id="container">
    
    <div id="oben">
    
    <div class="grossblau">www.test.de<br></div>
    Test Test Test Test
    
    <div id="kopfunten">
    
    <a href="index.html">Test</a> <a href="seiten/wohnunga.html">Test</a> <a href="seiten/wohnungb.html">Test</a> <a href="seiten/reihenhaus.html">Test</a> <a href="seiten/umgebung.html">Test</a> <ahref="seiten/mietwagen.html">Test</a> <a href="seiten/kontakt.html">Test</a> <a href="seiten/impressum.html">Test</a>
    
    </div>
    
    </div>
    
    <div id="links">
    
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
    
    </div>
    
    <div id="rechts">
    
    <div class="rechts">
    <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    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
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    Das ist ein altbekanntes Problem in CSS

    Hier hast du einen ziemlich guten Artikel von einem unserer Mitglieder:
    http://ohne-css.gehts-gar.net/0005.php
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    11.12.2011
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    Hallo Dodo,


    danke für die schnelle Antwort.
    ich weiß, dass es ein altbekanntes Problem ist, habe auch schon viel gegooglet und deinen Artikel habe ich ebenfalls schon gelesen (vielleicht nicht aufmerksam genug?).
    Ich verstehe das so, dass man zwei Boxen in eine Hauptbox tut, die eine Hintergrundfarbe/bild hat, die dann ja logischerweise immer größer wird, sobald der Inhalt größer wird.


    Das will bei mir aber einfach nicht funktionieren (((


    Falls jemand mal Lust hat, möge er sich ja mal meinen Code angucken.


    Ansonsten versuch ich den Artikel noch mal aufmerksam zu lesen und meinen Fehler zu finden.
    Nur manchmal macht man ja immer den gleichen Fehler und übersieht ihn dann ganz einfach, deswegen wollte ich so gerne individuelle Hilfe von euch haben


  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    Wenn Du mal auf absolute Positionierung verzichtest UND dir den Artikel nochmal durchliest, solltest Du zum Ziel kommen

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    11.12.2011
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    hey hey,

    alles klar, habs jetzt hinbekommen.
    Habe meinen Fehler aber nicht gefunden, weil ich noch mal komplett neu begonnen habe und den Code aus dem Artikel verwendet habe.

    Danke!

Ähnliche Themen

  1. Dreispalten-Layout (zwei Spalten sind zu kurz)
    Von anagramm im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.12.2010, 22:45
  2. Zwei Buttons zwei funktionen
    Von Gimminy im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 03.08.2010, 10:49
  3. Beide Divs sollen die gleiche Länge haben
    Von Shyne im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 31.12.2007, 13:46
  4. 2 spalten mit float & footer
    Von phore im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 14.03.2006, 17:04
  5. mehrere Spalten - gleiche werte von der Amzeige ausschließen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 19.01.2005, 13:29

Stichworte

Berechtigungen

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