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
  #31 (permalink)  
Alt 31.03.2015, 22:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.03.2015
Beiträge: 22
kalenderfamily befindet sich auf einem aufstrebenden Ast
Standard

Guten Abend und vielen Dank an alle für die Denkanstöße, die Hilfe und den bereitgestellten Code!

Mit Eurer Hilfe konnte ich das Layout derart gestalten, wie ich es mir vorgestellt habe.

Das Problem mit der sidebar besteht nicht mehr. Nachdem ich diese wie alle anderen Elemente (submenu, content) links gefloatet hatte, war das Problem beseitigt. Als ich die sidebar danach rechts floatete, war das Verhalten gleich...Hauptsache es funktioniert!

Die Responsive Darstellung ist natürlich die Königsdisziplin, vielleicht werde ich mir das näher ansehen.


Eine abschließende Frage habe ich noch: ich habe gelesen, man solle Angaben in px und % nicht mixen. Kann ich denn den Bereichen submenu, content, aside prozentuale Werte zuweisen, die sich ihren prozentualen Anteil von einem übergeordneten Pixelwert ziehen? Oder ist es besser, alles in Pixel zu belassen?

Nochmals vielen Dank und Grüße
Kalenderfamily

Geändert von kalenderfamily (31.03.2015 um 22:26 Uhr) Grund: Nachfrage
Mit Zitat antworten
Sponsored Links
  #32 (permalink)  
Alt 05.04.2015, 20:54
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
Die Responsive Darstellung ist natürlich die Königsdisziplin, vielleicht werde ich mir das näher ansehen.
Startseite - bildung-individuell - pädagogischer Dienstleister im Rhein Neckar Kreis Heidelberg Mannheim
Hallo kalenderfamily

Ja. Versuch das mal umzusetzen.
Die HTML Fehler hast du immer noch nicht behoben.

So in etwa würde ich es mal versuchen mit dem Spalten wechsel mit und ohne Submenü.
Ohne Spalten wechsel, wäre es einfacher.

Falls du noch da sein Soltest siehe Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"> 
   <meta name="keywords" content="Schlagwort"> 
   <meta name="description" content="Beschreibung zum Inhalt / Unterseite">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Titel der Webseite</title>
  
<style type="text/css">
* { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
   display: block; 
}
html {
  font-size: 100%;
}
body {
   background-color: #fff; 
   border: 1px solid black;
   border-radius: 18px;
   color: black;
   font-family: Verdana, sans-serif;
   margin: 10px auto;
   max-width: 900px; 
}
header { 
   background-image: url(http://www.bildung-individuell.de/data/themes/ex/header.png);
   background-repeat: no-repeat;
   background-position: center top;
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
   font-family: Trebuchet MS;
}
header nav {
   padding-top: 125px;
}
header nav ul {
   text-align: center;
   padding: 0 10px;
}
header nav ul li { 
   border-radius: 50%;
   display: inline-block;
   list-style: outside none none;
   width: 100px;
   line-height: 5.6;
   margin-bottom: 7px;
}
header nav ul li:nth-child(1) { 
   background-color: blue;
}
header nav ul li:nth-child(2) { 
   background-color: green;
}
header nav ul li:nth-child(3) { 
   background-color: orange;
}
header nav ul li:nth-child(4) { 
   background-color: red;
}
header nav ul li a {
   border-radius: 50%;
   color: #fff;
   display: block;
   font-size: 1.1em;
   text-decoration: none;    
}
header nav ul li a:hover {
   background-color: lime;
   color: #000;  
}
/* main */
main { 
   padding: 0 0 0 40px;     
}
main:after {
   display: block;
   content: "";
   clear: both;      
}
section#content {      
   display: table;
   float: left;
   width: 78%;
   padding: 10px 20px 10px 0;
}
section#content h1 {  
   display: table-caption;
   padding-left: 5%;  
}
#content nav {
   display: table-cell;
   vertical-align: top;
}
#content nav ul {
   width: 170px;
   margin-right: 10px;
   padding: 10px 5px;
}
#content nav ul li {  
   border-bottom: 1px solid #d1d1d1;
   list-style: outside none none;
   padding: 5px 0;
}
#content nav ul li a {
   text-decoration: none;
   color: blue; 
}
article {
   display: table-cell;
   vertical-align: top;
   width: auto;
   padding: 10px 5px;  
}
article h2 {  
}
aside {
   background-color: #ccc;
   width: 150px;
   padding: 10px 5px;
   float: right;
}
aside h3 {
}
aside address {
   font-family: Trebuchet MS;
   line-height: 1.5;
   padding: 10px 0;
}
/* footer */
footer {
   padding: 2%; 
}
/* media */
@media screen and (max-width: 900px) {
section#content {
   float: none;
   width: 95%;   
}
aside { 
   float: none;
   margin: 10px 0; 
}
}
@media screen and (max-width: 800px) {
main { 
   padding: 0 20px;     
}
section#content,
section#content h1,
article, 
#content nav {   
   display: block;
   vertical-align: baseline;
   width: auto;
}
article { 
   margin: 10px 0;
}
}
</style>

</head>
<body>

<header> <!-- dein Logo Bild zu groß: 750 x 125 -->
 <nav>
  <ul>
    <li><a href="#">Bildung</a></li>
    <li><a href="#">Soziales</a></li>
    <li><a href="#">Integration</a></li>
    <li><a href="#">Sport</a></li>  
  </ul>
 </nav>
</header>

<main>
<section id="content">
<h1>Bildung</h1>
<nav> 
<!-- im wechsel mit und ohne submenü einfach mal ul auskommentieren hier -->
 <ul>
   <li><a href="#">Pädagogische Betreuung</a></li>
   <li><a href="#">Frühkindliche Förderung</a></li>
  </ul> 
</nav>

<article>
<h2>Überarbeitung</h2>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum. Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac. Lacus pede nonummy a wisi facilisis enim lorem parturient wisi nascetur. Auctor et ultrices ligula sed interdum.</p>
</article>
</section>

<aside>
<h3>Kontakt ...</h3>
<address>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt hendrerit neque Aenean ac.</p>
</address>
</aside>

</main>

<footer>
<p><strong>Footer</strong> Lorem ipsum</p>
</footer>

</body>
</html>
______________
MfG Roland
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:11 Uhr.