zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sidebar bzw. dritte Spalte als div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.03.2015, 16:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.03.2015, 17:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.03.2015, 18:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von kalenderfamily (23.03.2015 um 18:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.03.2015, 18:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 23.03.2015, 19:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 23.03.2015, 20:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von kalenderfamily Beitrag anzeigen

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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.03.2015, 08:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.03.2015, 11:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 24.03.2015, 11:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von kalenderfamily Beitrag anzeigen
wenn das template sauber in css
+ HTML. Das ist in beiden Belangen mehr als unsauber.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.03.2015, 11:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:56 Uhr.