XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Sidebar bzw. dritte Spalte als div (http://xhtmlforum.de/showthread.php?t=71846)

kalenderfamily 23.03.2015 16:38

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:

PHP-Code:

<body>
<div class="head">                                
    <div class="header">
        <div class="headerkop"><? php theme_sitetitle(); ?></div>    
        <div class="menu">
            <?php theme_menu('ul''li''active'0); ?>
        </div>
    </div>

    <div class="content">

        <?php
                 
echo '<div class="sidebar">sidebar</div> <div style="clear: both;"> </div>'
                 
?>

        <div class="submenu">
                <?php theme_menu('ul''li''active'1true); ?>
        </div>

                <?php
                 
// echo '<div class="sidebar">sidebar</div> <div style="clear: both;"> </div>'
                 
?>

        <div class="kop"><?php theme_pagetitle(); ?></div>

Über Anregungen würde ich mich freuen,

GRüße
Kalenderfamily

cloned 23.03.2015 17:07

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.

kalenderfamily 23.03.2015 18:26

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>

Hier noch css:

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

Falls der Code nicht sauber sein sollte : das template war schon so, ich ändere es nur :p

cloned 23.03.2015 18:39

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>

Und ja, der code ist sehr unsauber. divitis in perfektion. So wie man es nicht machen sollte ;)

kalenderfamily 23.03.2015 19:35

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!

K.Roland 23.03.2015 20:55

Zitat:

Zitat von kalenderfamily (Beitrag 543707)

Ich habe die sidebar jetzt ziemlich weit unten hinter das schließende div des content gesetzt.

Vor dem content DIV

Edit fiddle - JSFiddle

_________________
MfG Roland

cloned 24.03.2015 08:54

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.

kalenderfamily 24.03.2015 11:04

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

cloned 24.03.2015 11:16

Zitat:

Zitat von kalenderfamily (Beitrag 543718)
wenn das template sauber in css

+ HTML. Das ist in beiden Belangen mehr als unsauber. :D

kalenderfamily 24.03.2015 11:27

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020