CSS - Box-Layout

Jan_K

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;
  }

Alles anzeigen

Mein HTML:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://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>

Alles anzeigen

URL: http://www.oliverkray.com/tests/test.html

Vielen Dank schonmal im Vorraus!

Edit: Sorry, hatte den umschließenden div-bereich vergessen

No0ob

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

Jan_K

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

Thonixx

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

http://www.gidf.de

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

Jan_K

Vielen Dank

No0ob

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

sejuma

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://www.w3.org/TR/html4/loose.dtd">

Nähere Infos zum DT siehe http://de.selfhtml.org/html/allgemein…htm#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:0 5px 0 0; border-color:#2b6196; border-style:solid;

Besser:

Code

border-right: 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.

Jan_K

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?

sejuma

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

Zitat

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

Alles anzeigen

Jan_K

das problem welches du damit ansprichst (#navigation) wollte ich mit deinem vorschlag in diesem thread lösen: https://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.

Tags