2016-08-08 15 views
0

Ich versuche meine erste Website zu bauen und habe ein Problem! Die linken und rechten Kästchen - "leftSidebar" und "rightSidebar" - sollen neben dem mittleren Inhalt sein (links und rechts davon), aber sie gehen nur durch den Körper und sind es nicht in der Body Box (mit Grenzen getestet). Was mache ich falsch? Ich möchte die linke und rechte Seitenleiste neben dem mittleren Inhalt haben!CSS - Boxen in Box

Außerdem kreuzen sie die Bodybox so weit nach unten, dass - wenn ich runterscrolle - mein Hintergrund aufhört und ein weißer Hintergrund erscheint! Vielleicht kannst du es mit einem Hintergrund von dir selbst testen?

Bitte helfen Sie mir so bald wie möglich, goin Cray bereits

Dank

body { 
 
\t background-image: url(wp1.jpg); 
 
\t background-size: 100%; 
 
    background-repeat: no-repeat; 
 
\t color: white; 
 
} 
 

 
.body { 
 
\t width: 70%; 
 
\t border: 1px solid white; 
 
\t margin: 5% auto; 
 
\t clear: both; 
 
\t 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
} 
 

 
nav ul li { 
 
\t list-style-type: none; 
 
} 
 

 
.navHeader nav ul li { 
 
\t float: left; 
 
\t display: inline; 
 
\t margin: 0 auto; 
 
} 
 

 
.navHeader nav { 
 
\t border-radius: 5px; 
 
\t border: 1px dashed white; 
 
\t height: 50px; 
 
} 
 

 
.navHeader { 
 
\t background-color: black; 
 
} 
 

 
.leftSidebar { 
 
\t float: left; 
 
\t border: 1px white solid; 
 
\t border-radius: 2px; 
 
\t margin: 2% 0 2% 2%; 
 
\t width: 20%; 
 
\t 
 
} 
 

 
.rightSidebar { 
 
\t float: right; 
 
\t border: 1px white solid; 
 
\t border-radius: 2px; 
 
\t margin: 2% 0 2% 2%; 
 
\t width: 20%; 
 
} 
 

 
.allContent { 
 
\t background-color: black; 
 
\t width: 60%; 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
}
\t <body class="body"> 
 
\t 
 
\t <header class="navHeader"> 
 
\t \t <nav><ul> 
 
\t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t <li><a href="#">News</a></li> 
 
\t \t \t <li><a href="#">Programming</a></li> 
 
\t \t \t <li><a href="#">Downloads</a></li> 
 
\t \t \t <li><a href="#">Contact</a></li> 
 
\t \t </nav></ul> 
 
\t </header> \t 
 
\t 
 
\t 
 
\t \t <aside class="leftSidebar"> 
 
\t \t \t <content> 
 
\t \t \t \t <h3> Sidebar Left Title </h3> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t \t \t \t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
\t \t \t </content> 
 
\t \t </aside> 
 
\t \t 
 
\t \t \t \t 
 
\t 
 
\t \t 
 
\t \t <aside class="rightSidebar"> 
 
\t \t \t <content> 
 
\t \t \t \t <h3> Sidebar Right Title </h3> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t \t \t \t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
\t \t \t </content> 
 
\t \t </aside> 
 
\t \t 
 
\t <div class="allContent"> 
 
\t 
 
\t \t <article class="middleContent"> 
 
\t \t \t <content> 
 
\t \t \t \t <h2> This Is A Post </h2> 
 
\t \t \t 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t \t \t \t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t \t \t \t \t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
\t \t \t </content> 
 
\t \t </article> 
 

 
\t \t 
 
\t \t <footer class="footerdown"> 
 
\t \t \t <p>Copyright &copy; <a href="#" title="black papiyon">blackpapiyon.com</a></p> 
 
\t \t </footer> 
 
\t 
 
\t </div> 
 
\t 
 
\t 
 
\t </body> 
 
</html> \t

+0

Entschuldigung, ich bin mir nicht sicher, was du meinst, vielleicht könntest du ein Bild von dem, wie du willst, posten? – joshhunt

+0

Schau, ich versuche einen mittleren Inhalt zu haben ("Klasse middleContent") und links davon versuche ich, meine linke Seitenleiste zu platzieren, und rechts davon versuche ich eine zu setzen rechte Sidebar. Alle diese sind in meinem Körper ofc ... Die rechte Seitenleiste ist unter dem Körper lol, und die linke Seitenleiste ist innerhalb des Körpers, sondern überquert die untere Grenze von ... einfach in Ihrem Editor einfügen und Sie werden Wissen Sie, was ich meine, falls Sie es nicht verstanden haben – kendrickLamar

Antwort

1

Sie haben eine Reihe von Fragen, die Sie in Ihrem Code ansprechen müssen. Erstens ist es unklug, Ihrer <body> eine explizite Breite zu geben, es sei denn, Sie wissen wirklich, was Sie tun. Lassen Sie die Browser einfach ihr Ding machen und verwenden Sie stattdessen einen Wrapper <div>.

Zweitens, wenn Float-basierte Layouts ausgeführt werden, sollten alle Ihre Spalten wahrscheinlich floated werden und wahrscheinlich in die gleiche Richtung. Eine nicht gefloatete Box wird fließende Elemente umlaufen. Das heißt, wenn Sie nur einigermaßen moderne Browser anstreben, wäre ein Flexbox-basiertes Layout besser.

Drittens wird das Tag <content> innerhalb von Shadow DOM verwendet und ist kein Standard-HTML-Tag. Ferner it’s been deprecated. Verwenden Sie stattdessen eine <div>.

Ich weiß nicht, dass dies Ihr Problem genau lösen wird, aber es bringt Sie zumindest auf den richtigen Weg.