Ergebnis 1 bis 10 von 10

Thema: CSS - Box-Layout

  1. #1
    Azubi(ne)
    Registriert seit
    20.06.2008
    Ort
    Paderborn
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS - Box-Layout

    Hi allerseits,

    ich habe mich in letzter zeit fast nur mit php und mysql beschäftigt, und bin nun leider in css alles andere als fit. Momentan habe ich Probleme ein Layout so hinzukriegen wie ich es mir vorstelle.
    Ich denke eigentlich, dass mein Vorhaben nicht besonders kompliziert ist, aber irgendwie kriege ich es nicht hin.
    Falls sich ein CSS-Kenner meiner Annehmen würde wäre ich sehr dankbar. (Auch schon für hilfreiche Links, selfhtml hat mich leider nicht weitergebracht, vielleicht check ich es aber auch einfach noch nicht richtig).

    Mein CCS:
    Code:
      body {
        background-color: #101030;
        font-size: 100.01%;
        font-family: Arial,sans-serif;
        margin: 0; padding: 1em 0;
        text-align: center;
      }
      
      #seite {
        text-align: left;
        margin: 0 auto;
        width: 960px;
      }
     
      div#tbanner {
       background-image:url(bg_lightblue.jpg);
       width:160px; height:90px;
       float:left;
       padding-top:25px; margin:0;
      }
      div#spr {
       background-image:url(bg_lightblue.jpg);
       width:75px; height:105px;
       float:right;
       padding-top:10px; margin:0;
      } 
      div#wbanner {
       background-image:url(bg_lightblue.jpg);
       height:105px;
       padding-top:10px;
      }
    
      div#topnavi {
       clear:both;
       width:960px;
       background-color:#2b6196;
       padding:10px 0 10px 0;
      }
      
      div#navigation {
       background-image:url(bg_lightblue.jpg);
        float: left; width: 135px;
        margin: 0; padding: 10px;
       border-left:5px #2b6196 solid;
      }
      div#inhalt {
        background-color:#ffffff;
        margin-left: 160px;
        padding: 20px;
       border-right:5px #2b6196 solid;
      }
      
      div#bottomnavi {
       clear:both;
       width:960px;
       background-color:#2b6196;
       padding:5px 0 5px 0;
      }
    Mein HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http&#58;//www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="layout.css" type="text/css">
    </head>
    <body>
    <div id='seite'>
      <div id='tbanner'>
      </div>
      <div id='spr'>
      </div>
      <div id='wbanner'>
      </div>
      <div id='topnavi'>
      </div>
      <div id='navigation'>
      </div>
      <div id='inhalt'>
      </div>
      <div id='bottomnavi'>
      </div>
    </div>
    </body>
    </html>
    URL: http://www.oliverkray.com/tests/test.html

    Vielen Dank schonmal im Vorraus!

    Edit: Sorry, hatte den umschließenden div-bereich vergessen
    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
    Kaiserliche Hoheit Avatar von No0ob
    Registriert seit
    02.01.2006
    Ort
    Nähe Frankfurt
    Beiträge
    1.500
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wow, wo ist RMB wenn man ihn braucht.
    Hier wäre der Glaskugel-Spruch passend.

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    20.06.2008
    Ort
    Paderborn
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Vielen Dank für diesen hilfreichen Beitrag.
    So ganz habe ich den Tipp aber leider noch nicht verstanden. :-/

  4. #4
    Thonixx
    Gast

    Standard

    Was müssen WIR denn helfen?? Hast du schon mal was davon gehört?:

    www.gidf.de

    und check mal da:
    www.css4you.de
    oder
    www.html-seminar.de

  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    20.06.2008
    Ort
    Paderborn
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Vielen Dank

  6. #6
    Kaiserliche Hoheit Avatar von No0ob
    Registriert seit
    02.01.2006
    Ort
    Nähe Frankfurt
    Beiträge
    1.500
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du hast uns keine Fehlerbeschreibung geliefert. Woher sollen wir wissen, was an deinem Layout falsch sein soll

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

    Standard

    Ohne jetzt bereits ins Problemdetail zu gehen:
    Zunächst solltest du einige grundsätzliche Dinge beachten:

    Deiner Seite Fehlt ein Standarddoctype. Das hat zur Folge, dass der IE das CSS-Boxmodell nicht richtig darstellen kann und es in diesem Browser bereits allein deshalb zu unterschiedlichen Darstellungen kommt. Der Doctype gibt sozusagen an, in welcher "Sprache" die Seite erstellt wurde. Da gibt es gewisse Abweichungen.
    Schreibe deshalb mal das in die allererste Zeile des Quelltextes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http&#58;//www.w3.org/TR/html4/loose.dtd">
    Nähere Infos zum DT siehe http://de.selfhtml.org/html/allgemei...tm#dokumenttyp

    Der zweite Fehler liegt darin, dass du zwischen jedem Div einen Zeilenumbruch eingefügt hast.
    Lass also mal überall die "
    " weg.

    Nun zu einigen Details:

    Du verwendest unterschiedliche Bezeichnungen:
    Im CSS-Teil schreibst du "Seite" groß, im HTML-Teil klein.
    Verwende am besten durchgehend Kleinschrift. Den vorangestellten div musst du nicht erwähnen, spart Quellcode.
    Also statt bisher "div#Seite" besser "#seite"

    Im body zentrierst du die Schrift, um sie auf #Seite wieder auf linksbündig zu stellen. Beide Angaben sind unnötig, in beiden Elementen kannst du die text-align-Angabe weglassen.

    Solche Sachen lassen sich wesentlich vereinfachen:
    Statt bisher
    Code:
       border-width&#58;0 5px 0 0; border-color&#58;#2b6196; border-style&#58;solid;
    Besser:
    Code:
    border-right&#58; 5px solid #2b6196;
    Wenn das alles bereinigt ist, solltest du nochmal prüfen, ob die Summe der inneren Div's unter Berücksichtigung von Rahmen, padding und margin so groß ist wie die Breite von #seite. Ansonsten passen sie da nicht rein.

    Versuche mal, diese Punkte abzuarbeiten und dann sollte es schon besser aussehen.

  8. #8
    Azubi(ne)
    Themenstarter

    Registriert seit
    20.06.2008
    Ort
    Paderborn
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Vielen Dank Sejuma!
    Ich bin die Punkte durchgegangen und jetzt sieht es wirklich schon besser aus, in allen browsern ausser dem ie schon so wie es soll. Code im eröffnungspost ist auf den aktuellen stand editiert.
    Der ie haut mir zwischen die oberen 3 boxen noch einen kleinen abstand den ich mir nicht ganz erklären kann. Falls da jemand eine Erklärung weiß wäre ich sehr dankbar. Ansonsten lässt sich das ja auch durch setzen des gleichen hintergrunds für das umschließende div anpassen.

    @No0ob: arx, tatsache, das hatte ich vergessen.... sorry, ich hatte gestern schon zu lange dran gesessen und irgendwie nicht dran gedacht, dass für andere natürlich nicht selbstverständlich ist wo das Problem liegt.

    @Firefox: Nochmals vielen Danke für deine nette Hilfsbereitschaft. Ich wollte schon immer gerne mal einen freund haben --> gidf.de
    Aber einmal posten hätte doch auch gereicht, meinst du nicht?

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

    Standard

    Versuch's mal damit (nur im FF getestet):

    div#navigation {
    background-image:url(bg_lightblue.jpg);
    float: left; width: 135px;
    height: 20px;
    margin: 0; padding: 10px;
    border-left:5px #2b6196 solid;
    }

  10. #10
    Azubi(ne)
    Themenstarter

    Registriert seit
    20.06.2008
    Ort
    Paderborn
    Beiträge
    81
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    das problem welches du damit ansprichst (#navigation) wollte ich mit deinem vorschlag in diesem thread lösen: http://www.forum-hilfe.de/viewtopic.php?t=41333
    was ich meinte waren die 3 div-bereiche nebeneinander ganz oben, also #tbanner, #wbanner, #spr.
    da war im internet explorer jeweils eine lücken von ca. 3 px
    das habe ich aber gelöst indem ich einfach für #seite "background-image:url(bg_lightblue.jpg);" gesetzt habe.
    #seite wird dann nach #topnavi geschlossen und für #navigation, #inhalt und #bottomnavi ein neuer container geöffnet wo ich faux columns nutze.

Ähnliche Themen

  1. Layout
    Von NurIch im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 09.08.2007, 16:40
  2. CSS: Div Layout
    Von eriza im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.08.2007, 12:35
  3. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  4. Layout
    Von Help_me-lol im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.01.2005, 00:29
  5. Layout
    Von McMetzger im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 15.08.2004, 23:17

Stichworte

Berechtigungen

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