|
|||
Sidebar bzw. dritte Spalte als div
Hallo an alle,
ich bearbeite gerade ein Template und habe dabei ein Problem. Ich würde gerne neben das content div ein sidebar div setzen. Dies hat soweit auch geklappt. Folgendes Problem habe ich: sobald sich das sidebar div in der Höhe vergrößert, rutscht alles ab "Startseite" ebenfalls nach unten. Habe schon Einiges ausprobiert, leider erfolglos. Hat jemand einen Tipp für mich? CSS code: Code:
.sidebar { /* comments not in use commented out in theme.php !! */ width: 150px; background-color: black; margin-left: 720px; } PHP-Code:
GRüße Kalenderfamily |
Sponsored Links |
|
|||
der php code ist nicht wirklich hilfreich, html code ist da schon besser. Wo ist zB Startseite bei deinem Code zu finden?
Auch 750px margin schauen sehr falsch aus, das sollte wohl besser gefloated werden. Ohne HTML code (und etwas mehr css?) kann man da aber schwer mehr dazu sagen. |
Sponsored Links |
|
|||
Guten Abend Cloned, vielen Dank für deine Antwort. Ich habe vergessen, die url anzugeben: bildung-individuell.de
720px habe ich angegeben, um die sidebar nach rechts zu rücken. Die Startseite wird bei "kop" ausgegeben. HTML-Code:
<body> <div class="head"> <div class="header"> <div class="headerkop"><? php theme_sitetitle(); ?></div> <div class="menu"> <ul><li><a href="/?file=bildung" title="Bildung">Bildung</a></li><li><a href="/?file=soziales" title="Soziales">Soziales</a></li><li><a href="/?file=integration" title="Integration">Integration</a></li><li><a href="/?file=test" title="Sport">Sport</a></li></ul> </div> </div> <div class="content"> <div class="sidebar">sidebar</div> <div style="clear: both;"> </div> <div class="submenu"> </div> <div class="kop">Startseite</div> <div class="txt"> <div class="module_blog">*</div> <div class="module_blog">*</div> Code:
body { /* body ist der gesamte bildschirm */ background-color: #E3E3E3; font-family: Trebuchet MS; color: #000000; margin: 50px; } .head { /* comments das hier ist der content body.... background-color: red; */ border-radius: 18px; margin-top: 50px; width: 900px; /* original 750 !! */ background-color: white; position: relative; left: 50%; margin-left: -475px; /* -(width/2) */ /* original -375 */ } .header { /* comments reserviert f�r das bild oder text background-color: green; /* kommentar */ */ margin-bottom: 50px; /* original 10 , hier ist das menu !!!*/ margin-left: 2%; width: 720px; height: 256px; background-image: url(./header.png); background-repeat:no-repeat; } .menu { /* comments background-color: yellow; /* kommentar */ top: 225px; war original mit margin-top ausgetauscht */ font-size: 15px; position: absolute; margin-top: -100px; margin-left: 50px; margin-bottom: 10px; width: 600px; height: 70px; } .content { /* comments unter menu... margin-bottom: 100px; background-color: #F2F2F2; background-color: #FFCC99; background-color: #FFFFFF; */ border-radius: 5px; width: 720px; background-color: red; margin-top: 0px; margin-left: 2%; } .sidebar { /* comments not in use commented out in theme.php !! */ width: 150px; background-color: black; margin-left: 720px; } .footer { /* background-color: #F2F2F2; */ border-top: 1px solid #D1D1D1; margin-top: 30px; margin-left: 20px; margin-right: 20px; padding-top: 15px; padding-bottom: 15px; font-size: 12px; text-align: right; color: red; background-color: white; } Geändert von kalenderfamily (23.03.2015 um 18:31 Uhr) |
|
|||
Wenn du es neben deinem content haben willst, dann platziere es doch auch im HTML danach und lass es dann neben dem content floaten.
Das mal als kurze Antwort, kannst du damit was anfangen? Code:
</div> <--- das ist das letzte div vom Content <div id="sidebar"> </div> |
|
|||
Ja, das verstehe ich: innerhalb des content sind 2 oder sogar 3 divs.
Ich habe die sidebar jetzt ziemlich weit unten hinter das schließende div des content gesetzt. Das Ergebnis war, dass das schwarze div nun unter dem footer hing...komische Sache, werde es später nochmal versuchen! |
|
|||
Zitat:
Edit fiddle - JSFiddle _________________ MfG Roland |
|
|||
Wenn es thematisch wichtiger ist, dann kommt es vor das content div. Ist es weniger wichtig (wie ich bei einer sidebar ausgehe) dann kommt es nach dem content-div.
Im ersten Fall wird die sidebar mit float:right (wie du korrekt gezeigt hast, Roland) rechts gefloatet, im zweiten Fall werden beide container mit float:left ausgerichtet. Oder man verwendet flexbox, falls alte Browser nicht mehr unterstützt werden sollen. |
|
|||
Guten MOrgen und euch beiden vielen Dank!
Letztlich musste ich es ausprobieren... Habe das Gefühl, wenn das template sauber in css wäre, dann wäre es einfacher .. Viele Grüße Kalenderfamily |
|
|||
Ok, ich glaube, ich habe jetzt richtigen Murks gemacht, aber es verhält sich genau so, wie ich es wollte
Ich habe die sidebar nun auf Höhe des Menüs eingeschoben.. Viele Grüße Kalenderfamily |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
DIV Box (Sidebar) in bereits fertiges Design einfügen? | Daniel386 | CSS | 10 | 21.06.2011 23:58 |
Probleme DIV Höhe, Anordnung | kran | CSS | 4 | 07.11.2010 11:23 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |
Div Wight Auto???? | temp11 | CSS | 8 | 30.06.2009 13:34 |