Ergebnis 1 bis 4 von 4

Thema: HTML-Layout mittels CSS

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

    Standard HTML-Layout mittels CSS

    Hallo bin gerade dabei meine Homepage mittels HTML und CSS zu erstellen.

    Leider wills nicht so wie ich udn hoffe jetzt mal das ihr mir helfen könnt.

    Hier erst mal der bisherige Code

    HTML-Datei
    HTML-Code:
        <body>
            <div id="wrapper">
                <div id="header_top">
                      Ich bin ein Header_Top Text.
                </div>
                <div id="header_buttom">
                    <ul id="Navigation">
                        <li><a href="seite_1.htm">Beispiel 1</a></li>
                        <li><a href="seite_2.htm">Beispiel 2</a></li>
                        <li><a href="seite_3.htm">Beispiel 3</a></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div id="content_wrapper">
                   <div id="content_left">
                         Ich bin ein content_left Text.
                   </div>
                   <div id="content_right">
                         Ich bin ein content_right Text.
                   </div>
                </div>
                <div class="clear"></div>
                <div id="footer_top">
                         Ich bin ein footer_top Text.
                </div>
                <div id="footer_bottom">
                         Ich bin ein footer_bottom Text.
                </div>
            </div>
        </body>
    CSS-Datei
    Code:
    html {
        margin:0;
             padding:0;
    }
    
    body {
        margin:0;
        padding:0;
        font-size:62.5%;/* schriftgroesse relative machen, um spaeter mit em zu arbeiten    */
        background-color:#fff;
        font-family:verdana, arial, sans-serif;
        text-align:center;   /* vertikal zentrieren im IE6 */
             background-image: url(green-balken.jpg);
             background-repeat: repeat-x;
    }
    
    #wrapper {
        width:900px;
        margin:0 auto; /* vertikal zentrieren */
        text-align:left;  /* text wieder links positionieren */
        background-color:#fff;
    }
    
    #header_top {
       width:900px;
       height:200px;
       float:left;
       background-color:#303030;
       font-size:1.2em;
       padding:.5em;
    }
    
    #header_buttom {
       width:900px;
       height:50px;
       float:left;
       background-color:#474747;
       font-size:1.2em;
       padding:.5em;
    }
    
    
    #content_wrapper {
       width:900px;
       float:left;
       background-image: url(content.jpg);
    }
    
    #content_left {
       width:200px;
       height:400px;
       float:left;
       background-color:#8e8e8e;
       font-size:1.2em;
       color:#000;
       padding:.5em;
    }
    
    #content_right {
       width:700px;
       height:400px;
       float:right;
       background-color:#787878;
       font-size:1.2em;
       color:#000;
       padding:.5em;
    }
    
    #footer_top {
       width:900px;
       height:50px;
       float:left;
       background-color:#adadad;
       font-size:1.2em;
       color:#fff;
       padding:.5em;
    }
    
    #footer_bottom {
       width:900px;
       height:100px;
       float:left;
       background-color:#cccccc;
       font-size:1.2em;
       color:#fff;
       padding:.5em;
    }
    
    
    div.clear {
       clear:both;
    }
    Problem
    Der Linke und rechte Inhaltsbereich werden nicht nebeneinander angezeigt. Liegt irgendwie an dem Padding, wenn ichs raus nehme steht aber alles am Rand. Wie muss ich das Ändern. Hoffe ihr könnt mir helfen

    Die Hintergrundfarben sind nur zur unterscheidung der verschiedenen Bereiche. Aber habe das gefühl das trotzdem noch viele Anwendungen in der CSS-Datei doppelt sind, wäre gut wenn ihr mir sagen könntet wie ich das ganze verkürzen kann bzw. was sollt ich gänzlich ändern. Ist wie gesagt meine erste Homepage und bin noch am lernen

    Danke schon mal

    Schulli
    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
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard AW: HTML-Layout mittels CSS

    Hallo und herzlich Willkommen im Forum!

    In der Regel hilft es wenn man das umgebende DIV nicht exakt auf die größe der inneren DIVs stellt.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    14.05.2009
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML-Layout mittels CSS

    Danke wie meinst das genau. Die Größe von dem Wrapper einfach vergrößern funktioniert nicht

    Seh irgend wie garnicht mehr durch.
    Kann ich von den Anweisungen nicht irgend wie was zusammen fassen?
    Wie sieht es denn mit den Divs aus, kann ich die so lassen oder hab ich da einen denkfehler drinne?.

    Danke schonmal für die Hilfe

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML-Layout mittels CSS

    Dein #wrapper und #content_wrapper sind jeweils 900px breit.
    Darin befinden sich #content_left mit 200px und #content_right mit 700px Breite, macht zusammen ebenfalls 900px.

    Nun musst du bedenken, dass sich nach dem CSS-Boxmodell die eigentliche Breite noch um padding-, border- und margin-Werte verbreitert.
    Tatsächlich ist dein #content_left keine 200px breit, sondern insgesamt
    200px + 0.5em padding-left + 0.5em padding-right.
    Das macht insgesamt 200px + 1em =~ 216px.

    Gleiches gilt für #content_right, der dann ~ 716px ist.

    216 + 716 = 932px und das passt dann folglich nicht mehr in deinen #wrapper bzw. #content_wrapper.

    Abhilfemöglichkeiten:
    Zunächst würde ich zum einheitlichen Rechnen den Paddingwert auf px setzen, also statt 0.5em nimm z.B. 8px.

    Nun kannst du entweder die gesamtbreite des #wrapper und #content_wrapper um jeweils 32px auf 932px erweitern oder die width-Werte von #content_left um 16px auf 184px sowie von #conten_right von 700px auf 684px verringern.
    Beide Möglichkeiten sollten dann klappen.

    Der #content_wrapper wird nur dann benötigt, wenn er eine Hintergrundgrafik haben soll. Ansonsten ist er überflüssig.

    Viel Erfolg!
    Geändert von sejuma (15.05.2009 um 08:21 Uhr)

Ähnliche Themen

  1. Formulareingaben in neue HTML Datei schreiben lassen mittels PHP
    Von haillo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 28.11.2008, 19:56
  2. Antworten: 5
    Letzter Beitrag: 09.07.2006, 13:01
  3. Umfrage mittels HTML?
    Von Minifutzi im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.05.2006, 18:33
  4. Buttons mittels HTML?
    Von Ivanman im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 21.09.2005, 11:44
  5. HTML Diashow in bestehendes HTML-Layout einfügen?
    Von Music_Finder im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 09.08.2005, 16:53

Stichworte

Berechtigungen

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