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
  #21 (permalink)  
Alt 25.03.2015, 11:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.090
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Inwiefern ist es weniger Arbeit div class="footer" zu schreiben als einfach nur footer?
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 26.03.2015, 11:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Guten Morgen, glatt vergessen! Danke!
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 26.03.2015, 11:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.090
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Wow so werden also Antworten gelesen. Naja dann weiß ich wenigstens wo ich besser nicht mehr helfe ^^
Mit Zitat antworten
  #24 (permalink)  
Alt 29.03.2015, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Ich habe das sehr wohl gelesen, nur einfach bei der Umsetzung vergessen! Musste mich auch ersteinmal wieder gehörig einlesen (hml 5 tags) und das gedanklich Durchgekaute dann auch adäquat umsetzen, ich denke aber, dass es mir gelungen ist ich meine nun ein klares theme mit klarer Struktur zu haben; dennoch bleibt ein Problem den Abständen. Ich habe das submenu und den content nun links gefloatet und die sidebar '<aside>' rechts. Müsste ich den Abstand nicht mit padding-left bzw right wegbekommen ? Ich hätte gerne, dass die sidebar bündig mit header abschließt.

Über Anregungen würde ich mich freuen!

Viele Grüße Kalenderfamily

PHP-Code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>    <?php theme_meta(); ?>    </head>

<?php include __dir__.'/count.php'?>

<body> 

<div class="wrapper">
                               
    <header> <? php theme_sitetitle(); ?> BILD </header>  
   
    <nav> <?php theme_menu('ul''li''active'0); ?> </nav> 

    <section><?php theme_pagetitle(); ?></section>

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

    <div class="content">

        <div class="txt">
            <?php theme_content(); ?>
            <?php theme_area('main'); ?>
        
                </div>
    </div>
        
<aside> <?php include $_SERVER['DOCUMENT_ROOT'].'/data/settings/pages/99.sidebar.php'; echo $content?> </aside>

    <footer>
            <?php theme_area('footer'); ?>

    </footer>

            
</body>

</div>

</html>
Code:
.wrapper {  

       /* 

       body ist der gesamte bildschirm

        */
	
	background-color: black;
	font-family: Trebuchet MS;
	color: #000000;
	margin: 50px;
}

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

        */
	display:block;
	width: 900px;
	height: 256px;
	background-color:red;
	background-image: url(./header.png); background-repeat:no-repeat;


}


nav {

      	/* comments 

        background-color: yellow; /* kommentar */
	top: 225px;  war original mit margin-top ausgetauscht
	position: absolute;
	margin-top: -100px;
	margin-left: 50px;
 	margin-bottom: 10px;
	width: 600px;
        height: 70px;
        */

	font-size: 15px;
	background-color:yellow;


}



nav a:link {
       /* comments

       nur f�r textlinks, f�r links im kreis nicht relevant!!

        */


}

nav a:visited {
      	/* comments 
	nur f�r textlinks, f�r links im kreis nicht relevant!!
        */

    	vertical-align: middle;



}

nav a:active {

      	/* comments 
	nur f�r textlinks, f�r links im kreis nicht relevant!!
        */

	vertical-align: middle;
     
}

nav a:hover {

      	/* comments 
	nur f�r textlinks, f�r links im kreis nicht relevant!!
        */
	
	text-decoration: none;
        background-color: blue;
        -moz-border-radius: 100px; 
        -webkit-border-radius: 100px;
        border-radius: 300px; 
	vertical-align: middle;
}

nav ul {

      	/* comments 
	background-color: gray;
        */

    
    list-style: none;
    margin: 0; 
    padding: 0;
    text-align: center;
}

nav ul li { 

	      	/* comments 
	background-color: black;
        */
    
    display: inline-block;
    width: 100px;
    line-height: 5.6;
    margin-left: 10px;	
}

nav ul li a {

      	/* comments 
	w�rde f�r alle listenelemente gelten!!
	background-color: red;
        color: yellow;
        */
    
    border-radius: 50%;
    display: block;
    font-size: 1.1em;
    text-decoration: none;    
}

nav ul li:nth-child(1) a { background-color: blue; color: white;}
nav ul li:nth-child(2) a { background-color: green; color: white;}
nav ul li:nth-child(3) a{ background-color: orange; color: white;}
nav ul li:nth-child(4) a { background-color: red; color: white;}
nav ul li:nth-child(5) a { background-color: blue; color: white;}
nav ul li:nth-child(6) a { background-color: green; color: white;}
nav ul li:nth-child(7) a{ background-color: orange; color: white;}
nav ul li:nth-child(8) a { background-color: red; color: white;}




nav ul li:nth-child(1) a:hover{ background-color: orange; }
nav ul li:nth-child(2) a:hover{ background-color: red; }
nav ul li:nth-child(3) a:hover{ background-color: blue; }
nav ul li:nth-child(4) a:hover{ background-color: green; }
nav ul li:nth-child(5) a:hover{ background-color: orange; }
nav ul li:nth-child(6) a:hover{ background-color: red; }
nav ul li:nth-child(7) a:hover{ background-color: blue; }
nav ul li:nth-child(8) a:hover{ background-color: green; }


.submenu {

      	/* comments 
	margin-left: 0px;
	margin-top: 45px;
	margin-right: 20px;


        */
	float: left;
	background-color: brown;
	font-size: 11pt;
	width: 180px;
}

.submenu ul {
	line-height: 1.2em;
	list-style: none outside none;
}




.submenu li {
	
	border-bottom: 1px solid #D1D1D1;
	padding: 5px 0;
}


/*
.submenu li:before { content: "• "; color: red;}
.submenu li#active a {color: black; font-weight:bold;}
*/



.submenu a { text-decoration: none;}



.submenu ul li:nth-child(1) a { color: blue;}
.submenu ul li:nth-child(2) a { color: green;}
.submenu ul li:nth-child(3) a { color: orange;}
.submenu ul li:nth-child(4) a { color: red;}
.submenu ul li:nth-child(5) a { color: blue;}

.submenu ul li:nth-child(1) a:hover{ color: blue; font-weight:bold;}
.submenu ul li:nth-child(2) a:hover{ color: green; font-weight:bold;}
.submenu ul li:nth-child(3) a:hover{ color: orange; font-weight:bold;}
.submenu ul li:nth-child(4) a:hover{ color: red; font-weight:bold;}
.submenu ul li:nth-child(5) a:hover{ color: blue; font-weight:bold;}

.submenu ul li:nth-child(1) a:active{ color: blue; font-weight:bold;}
.submenu ul li:nth-child(2) a:active{ color: green; font-weight:bold;}
.submenu ul li:nth-child(3) a:active{ color: orange; font-weight:bold;}
.submenu ul li:nth-child(4) a:active{ color: red; font-weight:bold;}
.submenu ul li:nth-child(5) a:active{ color: blue; font-weight:bold;}


.content {

      	/* comments 
       
	unter menu...
    	margin-bottom: 100px;
	background-color: #F2F2F2;
	background-color: #FFCC99;
	background-color: #FFFFFF;
	border-radius: 5px;
	width: 720px;
        */
	width: 750px;
    	float: left;
	background-color: white;
	margin-top: 0px;
	margin-left: 2%;

}


aside {

      	/* comments 
       
  not in use commented out in theme.php !!
	margin-left: 680px;

        http://bildung-individuell.de/?file=test
        */
	float:right;
	width: 150px;
	background-color: lightgreen;
	padding-top: 0px;
	margin-left: 5px;
       	
}


footer {

        /*
        background-color: #F2F2F2;
	margin-top: 30px;
	margin-left: 35px;
	margin-right: 20px;
        padding-top: 15px;
	padding-bottom: 15px;

        */

	
	border-top: 1px solid #D1D1D1;
	clear:both;
	font-size: 12px;
	text-align: left;
	color: red;
  	background-color: green;
        }
Mit Zitat antworten
  #25 (permalink)  
Alt 29.03.2015, 12:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Das ist noch nicht das fertige theme...ich arbeite noch an Verbesserungen!
Mit Zitat antworten
  #26 (permalink)  
Alt 29.03.2015, 13:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.075
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

irgendwie hat cloned bereits geschrieben

Zitat:
der php code ist nicht wirklich hilfreich
Gruss

MrMurphy
Mit Zitat antworten
  #27 (permalink)  
Alt 29.03.2015, 13:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy,

hier der html code:

HTML-Code:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="pluck 4.7.3" />
<title>Bildung - bildung-individuell - pädagogischer Dienstleister im Rhein Neckar Kreis Heidelberg Mannheim</title>
<link href="/data/themes/ex/style.css" rel="stylesheet" type="text/css" />
	</head>


<body> 

<div class="wrapper">
                               
	<header> <? php theme_sitetitle(); ?> BILD </header>  
   
	<nav> <ul><li class="active" id="active"><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> </nav> 

	<section>Bildung</section>

	<div class="submenu">  <ul><li><a href="/?file=bildung/paedagogische-betreuung" title="Pädagogische Betreuung">Pädagogische Betreuung</a></li><li><a href="/?file=bildung/fruehkindliche-foerderung" title="Frühkindliche Förderung">Frühkindliche Förderung</a></li><li><a href="/?file=bildung/hausaufgabenbetreuung" title="Hausaufgaben betreuung">Hausaufgaben betreuung</a></li><li><a href="/?file=bildung/nachhilfe" title="Nachhilfe">Nachhilfe</a></li><li><a href="/?file=bildung/tagesbetreuung" title="Tagesbetreuung">Tagesbetreuung</a></li></ul>    </div>
    

	<div class="content">

		<div class="txt">
			<p>*</p>
<p>*</p>
<p>Ob Feuerbach, Humboldt oder Schiller, ob Schopenhauer oder J.F. Kennedy:</p>
<p>Die Frage nach dem Wesen von Bildung, nach den bildenden Inhalten, nach Zweck und Sinn waren und sind zu jeder Zeit aktuell.*</p>
<p>Dabei soll Bildung unserer Meinung nach als Entwicklungsprozess des Menschen verstanden werden, der ihn zum Einen dazu befähigt, ein mündiges wie kritisches, selbstbestimmtes Gesellschaftsmitglied zu werden, zum anderen dazu, ein ganzheitliches Persönlichkeitsprofil zu entwickeln.</p>
<p>Bildung ist somit eine Schlüsselkompetenz, die sich auf eine individuelle und gleichzeitig gesellschaftliche Ebene beziehen muss und eine wechselseitige Wirkung entfaltet, um globale Schlüsselprobleme (vgl. Klafki (2007): Neue Studien zur Bildungstheorie und Didaktik, Weinheim, S. 56ff.) lösen zu können.</p>
<p>Bildung muss unserem Verständnis nach zunächst individuell sein, die Qualität dieser individuellen Bildung entscheidet schließlich darüber, wie sich das individuelle Handeln im gesellschaftlichen Kontext , im Sinne der epochalen Schlüsselprobleme entfaltet.*</p>					
            	</div>
	</div>
		
<aside> <p><span style="font-size: x-small;">Bildung Individuell</span><br /><span style="font-size: x-small;">Frau Yvonne Hohm</span><br /><span style="font-size: x-small;">Albert-Fritz-Str. 64</span><br /><span style="font-size: x-small;">69124 Heidelberg</span><br /><br /> <a title="Kontaktformular" href="?file=impressum" target="_self">Kontaktformular</a></p> </aside>

	<footer>
			        <a href="http://bildung-individuell.de/?file=startseite">Startseite</a> 
	<a href="http://bildung-individuell.de/?file=impressum">Impressum</a> 
	<a href="http://bildung-individuell.de/ev">Verein</a> 
	
	</footer>


			<!--

			//    >> <a href="/login.php">admin</a>
			//	 <a href="http://www.kalenderfamily.de/email">@</a>
			//       <br />powered by <a href="http://www.pluck-   cms.org">Impressum</a>    
                           
			-->

			
</body>

</div>

</html>
Mit Zitat antworten
  #28 (permalink)  
Alt 29.03.2015, 16:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.075
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

warum ist der HTML-Quelltext jetzt plötzlich in XHTML?

Dein ganzer Quelltext ist leider schlampig geschrieben. Das erschwert die Problembehebung ungemein.

Deine Problembeschreibung ist zudem leider sehr verwaschen.

Zitat:
Ich hätte gerne, dass die sidebar bündig mit header abschließt.
Horizontal?

Vertikal?

Zwischen der header und dem, was ich in deinem Quelltext als Sidebar interpretiere, befindet sich ein section-Element mit schwarzer Schrift auf schwarzem Hintergrund. Deshalb können die nicht aneinander anschließen.

Gruss

MrMurphy

Edith: Noch eine Nachfrage: Hast du dir die Seite mal bei unterschiedlichen Fenstergrößen und Zoomfaktoren (Strg+Mausrad) angeschaut? Soll die sich dann so verhalten, wie sie sich zur Zeit verhält?

Geändert von MrMurphy (29.03.2015 um 16:39 Uhr)
Mit Zitat antworten
  #29 (permalink)  
Alt 29.03.2015, 22:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Guten Abend MrMurphy, danke für deine Antwort.

Leider weiß ich nicht genau, welchen schlampigen HTML Code du meinst. Ich habe den HTMl Code jetzt einfach mal formatiert und Unnötiges rausgeschmissen, vielleicht vereinfacht dies das Ganze?

HTML-Code:
<!DOCTYPE html>

<head>	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="pluck 4.7.3" />
<title>xxxxxxxxx</title>
<link href="/data/themes/ex/style.css" rel="stylesheet" type="text/css" />
	</head>


<body> 

<div class="wrapper">
                               
	<header> <? php theme_sitetitle(); ?> BILD </header>  
   
	<nav> <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="In
	</nav> 

	<section>Sport</section>

	<div class="submenu">  <ul><li><a href="/?file=test/submenu" title="Freizeiten">Freizeiten</a></li><li><a href="/?file=test/fussballturnier" title="Fußballturnier">Fußballturnier
	</div>
    
	<div class="content">

		<div class="txt">
			<p>*</p>
		<p>*</p>
		<p>"Der erzogene Mensch ist nicht das Werk von Erziehern, sondern das Ergebnis seiner eigenen Anstrengungen.“ (Scherler, K. (1997). 
		Die Instrumentalisierungsdebatte in der Sportpädagogik.*<br />Sportpädagogik, 21(2), 5-11.)</p>					
            	</div>
	</div>
		
	<aside> <p><span style="font-size: x-small;">Bildung Individuell</span><br /><span style="font-size: x-small;">Frau Yvonne Hohm</span><br /><span style="font-size: x-small;">Albert-
	</aside>

	<footer>	<a href="http://bildung-individuell.de/?file=startseite">Startseite</a> </footer>

			
</body>

</div>

</html>
Die Textfarbe bei Section habe ich geändert.

Im Prinzip soll das aside element horizontal bündig mit dem content div und dieses wiederum mit dem submenu div bündig horizontal abschließen. Hinsichtlich des section elements sind alle ja vertikal bündig.

Der Submenu div und der content div haben float left, das aside element float right. Im Footer ist clear both.

Ich verstehe auch nicht, wieso das nav element horizontal nicht bündig ist...

Über Anregungen bin ich dankbar,

Grüße
Kalenderfamily

P.s.: Was die Größe und zoom etc. angeht, so habe ich dazu heute Mittag etwas gelesen (min height, width etc.). Dieses "Problem" berabeite ich im Anschluss, falls du das ansprichst?

Geändert von kalenderfamily (29.03.2015 um 23:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 30.03.2015, 00:34
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
Leider weiß ich nicht genau, welchen schlampigen HTML Code du meinst.
Hi,
Ist leider so auch fehlerhafter HTML-Code.

Und keine responsive Darstellung erkennbar.

_____________
MfG Roland

Vorlage für HTML-Seiten zum Testen.

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
  <title>… Titel der Webseite … </title> 
	<meta charset="UTF-8">
  
<style type="text/css">
/* CSS für die Darstellung */
</style>

</head>
<body> 

<h1>HTML für die Struktur</h1>
			
</body>
</html>

Geändert von K.Roland (30.03.2015 um 01:08 Uhr) Grund: Nachtrag
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 09:20 Uhr.