Rahmen bei 3 spaltigen CSS Layout geht nicht.

MaxCady · 4. Juli 2014

Hallo.

Ich habe ein 3 spaltiges Box Layout mit Header und Footer geschrieben.
Es funktioniert, doch wenn ich die Bereiche mit einem Rahmen versehen
will, dann geht das Layout nicht mehr.

Ich will beim Header oben, unten, links und rechts einen Rahmen, bei der
linken Spalte links und rechts einen Rahmen, bei der rechten Spalte
links und rechts einen Rahmen, und beim Footer oben, unten, links und
rechts einen Rahmen.

Seit einiger Zeit geht das mit den Rahmen bei mir nicht mehr, davor hat` s geklappt.

Hier mal der CSS Code :

CSS

body {







    font-family: Verdana, Arial, Helvetica, sans-serif;







    font-size: 14px;







    color:#000000







}
















p {







    padding: 10px;







}
















#wrapper {







    margin: 0 auto;







    width: 1000px;







}
















#header {







    float: left;







    height: 150px;







    width: 1000px;







    border-top: 2px solid;







    border-bottom: 2px solid;







    border-left: 2px solid;







    border-right: 2px solid;







    background-image: url(header.jpg);







}
















#content {







    float: left;







    background: #FFFFFF;







    width: 600px;







}
















#leftcolumn {







    background: #33CCFF;







    width: 200px;







    float: left;







   border-left: 2px solid;







    border-right: 2px solid;







}
















#rightcolumn {







    background: #CC33FF;







    width: 200px;







    float: left;







   border-left: 2px solid;







    border-right: 2px solid;







}
















#footer {







    height: 50px;







    width: 1000px;







    background: #33FF66;







   border-top: 2px solid;







    border-bottom: 2px solid;







    border-left: 2px solid;







    border-right: 2px solid;







    clear: both;







}

Alles anzeigen

Bitte helft mir! Besten Dank.

The Scout · 4. Juli 2014

Hey,
zum ersten: Gratulation! Du hast es als einer der ersten Neulinge egschafft, direkt die Formatierungs-BBs für Code zu nutzen
Aber wofür sind diese endlosen Leerzeilen gedacht??? ?)

Zum zweiten: ein CSS border braucht grundsätzlich DREI Angaben: Dicke, Art und Farbe. Du hast nur zwei, Dicke und Art, die Farbe fehlt, deswegen wird der Befehl ignoriert.
Zudem gibt es bei border auch eine Kurzschreibweise. Wenn du überall Rahmen haben willst, reicht einfach ein

CSS

#header {
    border: 2px solid black;
}

Zum dritten: In HTML 5 (was zu nutzen empfohlen wird), gibt es neue Tags für die Inhaltsaufteilung, uA

HTML

<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>




<!-- --
  -- Allgemein kann man empfehlen, die Grundstruktur des HTML <body>
  -- folgendermaßen aufzubauen:
  -->
<body>
  <header>
    <!-- Der Kofbereich deiner Seite, der normalerweise gleich bleibt -->
  </header>




  <nav>
    <!-- Eine Navigation, können einfach aneinandergereihte Links, oder auch eine Liste sein -->
  </nav>




  <section>
    <!-- Der Hauptbereich, der durch weitere <section>s oder <article>s aufgegliedert wird -->
  </section>




  <footer>
    <!-- Der Fußbereich, für Links zum Impressum und Co zu empfehlen, bleibt meist auch gleich -->
  </footer>
</html>

Alles anzeigen

MaxCady · 4. Juli 2014

Erstmals besten Dank für die Hilfe.

Leider funktioniert das Layout immer noch nicht. Hier ein Screenshot wie das Layout bei mir falsch dargestellt wird:

[Blockierte Grafik: http://oi61.tinypic.com/2cfuvf4.jpg]

The Scout · 4. Juli 2014

Probier mal

CSS

#rightcolumn {
    float: right;
}

MaxCady · 4. Juli 2014

Besten Dank! Hab ich gemacht. Nun erscheint das Layout so :

[Blockierte Grafik: http://oi62.tinypic.com/f9duea.jpg]

The Scout · 4. Juli 2014

Dein Problem: Der Rahmen zählt extra. Dh. du hast 1000px Platz, du nimmst aber 2 * 200px + 600px (Inhalt) + 4 * 2px (Rahmen) = 1008px. Das geht nicht, da wird umgebrochen.
Dafür gibt es aber bei CSS 3 den background-clip, funktioniert ab IE 9 und überall sonst:

CSS

#rightcolumn {
    background-clip: content-box; /* Mehr Info: http://www.w3schools.com/cssref/css3_pr_background-clip.asp (en) */
    /* Anderes CSS ... */
}

Übrigens hier: Ein Beispiel
HTML 5 Struktur des body, und Farbaufteilung, damit du weißt, wie es geht. Allerdings ohne Rahmen. Viel Spaß!

MaxCady · 4. Juli 2014

Besten Dank! Man muss den Rand mitberechnen. Hat geklappt.

wolf · 4. Juli 2014

Naja.. :x
Um beim Box-Modell zu pfuschen gibt es in css3 eine sehr schöne Möglichkeit anzugeben ob
a) Paddings
b) Paddings und Borders
nicht zur Breitenangabe des Elements dazu gerechnet werden sondern in diese einberechnet.

Beispiel: http://jsfiddle.net/TSSY2/1/

CSS

#element1, #element2, #element3{
    padding: 10px;
    border: 4px solid red;
    margin: 10px auto;
    width: 20px;
}
#element1{
    background: blue;
  /* Padding und Border zur Box dazu rechnen */
}
#element2{
    background: yellow;
  /* Padding mit einberechnen, Border dazu Zählen */ 
     -webkit-box-sizing: padding-box;
     -moz-box-sizing: 	padding-box;
     box-sizing: 	padding-box;
}
#element3{
    background: green;
  /* Padding und Border mit einberechnen: */ 
     -webkit-box-sizing: border-box;
     -moz-box-sizing: 	border-box;
     box-sizing: 	border-box;
}

Alles anzeigen

Rahmen bei 3 spaltigen CSS Layout geht nicht.

Jetzt mitmachen!

Teilen