Problem beim Erstellen eines dreispaltigen Layouts

Suchende · #1 (**permalink**) 11.09.2015, 18:37

Erbitte Hilfe beim folgendem Problem:

Beim Erstellen eines dreispaltigen Layouts für meine Webseite stoße ich an meine Grenze. Habe unzählige Tutorials angesehen und die angebotenen Lösungen versucht. Es klappt einfach nicht.
Zweispaltig ist es kein Problem. Habe in 'main' den 'kopfbereich' und die horizontale 'navi'-Leiste sowie die geplanten drei Spalten 'seitenleiste', 'content' und 'aside' gepackt.

Problem: Der 'content' reagiert nicht auf die beiden Spalten, die rechts und links platziert werden sollen.

Der css validator gibt mir keine Fehlermeldung.
Bin mir unsicher, ob die Angaben im 'head'-Bereich nicht passen.

Hier die html-datei:
<!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" xml:lang="de" lang="de">

<head>
<title> Schöpfer deiner Welt, Buch direkt bei der Autorin Elisabeth Siegmayer kaufen, Leitfaden für ein erfülltes Leben</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="description" content="Schöpfer deiner Welt, Buchveröffentlichung von Autorin Elisabeth Siegmayer. Gedanken erschaffen Realität. Erfülltes Leben durch bewusstes Nutzen der eigenen Schöpferkraft. Buch direkt von der Autorin kaufen. Shop, Info, Bestellung."/>
<meta name="keywords" content="Gedanken erschaffen Realität, Kraft der Gedanken, eigene Schöpferkraft nutzen, Autorin Elisabeth Siegmayer, Leitfaden für ein erfülltes Leben, Buchbestellung, Schöpfungsgeschichte, Buchbestellung, Shop, Buch kaufen, Wünsche werden wahr, Quantensprung, Mental, Matrix, Ideen umsetzen,"/>
<meta name="author" content="Elisabeth"/>
<meta name="editor" content="html-editor phase 5"/>


<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="main">

<div id="kopfbereich">

<br/> <p class="ueberschrifthome"> <font face="Segoe Print"> <br/> <br/>
Schöpfer deiner Welt</font></p>
</div>

<div id="navi">
<ul>
<li>     </li>
<li class="abstand" ><a href="home-buchvorstellung-schoepfer-deiner-welt.htm" title="Home" alt="Home">Blog</a></li>
<li>     </li>
<li><a href="home-buchvorstellung-schoepfer-deiner-welt.htm" title="Home" alt="Home">Home</a></li>
<li><a href="buch-bestellen-kaufen.htm" title="Buch kaufen" alt="Buchbestellung">Buch kaufen</a></li>
<li><a href="lesung-leserstimmen-leseprobe.htm" title="Leseprobe, Leserstimmen, Lesung" alt="Leseprobe, Leserstimmen, Lesung">Lesung</a></li>
<li><a href="kontakt-anfrage-zu-schoepfer-deiner-welt.htm" title="Kontakt, Anfrage" alt="Kontakt, Anfrage">Kontakt</a></li>
<li><a href="ueber-die-autorin-elisabeth-siegmayer.htm" title="Über Elisabeth Siegmayer" alt="Über Elisabeth Siegmayer">Autorin</a></li>
</ul>
</div>

<div id="content">
<p>
<a href="buch-bestellen-kaufen.htm"> <img class="nachlinks" src="images/Buchcover.jpg" alt="Buch bestellen" title="zur Buchbestellung" width="241" height="331"/>
<h4> Zur Buchbestellung </h4>
</a>
</p>

</div>

<div id="aside">

<p> Hier kommen Nebeninformationen rein dkeijpojwpekjfoekfpoekpoekfpogjeporgjerogjeorigjer igjergjprgjergjergjrigjpr </p>
<p>dkeijpojwpekjfoekfpoekpoekfpogjeporgjerogjeorig jerigjergjprgjergjergjrigjpr</p>
</div>

<div id="seitenleiste">

<br/> <br/> <h4 class="linkfarbe" > Buchvorstellung </h4> <br/>

<p>dkeijpojwpekjfoekfpoekpoekfpogjeporgjerogjeorig jerigjergjprgjergjergjrigjpr</p>

<p>test </p>

</div>

<div id="footer">
<p> </p>
</div>

</div>
</body>

</html>

Hier die css-Datei:
body
{
max-width: 60em;
margin: 0 auto;
background-color:#F7EFD6;
font-family: Arial, sans-serif;
text-align: center;
}

a:link
{
text-decoration: none;
}

a:visited
{
color: #005880;
}

*
{
margin:0;
padding:0;
background-repeat: no-repeat;
}

h1
{
font-size: 16pt;
/*line-height: 2em;*/
color: #3579A0;
text-align: left;
padding-top: 2.5em;
padding-right: 1em;
}

p
{
font-size: 13pt;
}

#aside
{
font-size: 13pt;
background-color: orange;
width: 170px;
float: right;
}

#content
{
text-align: left;
padding: 2em 0em 1em 2em;
margin-left: 240px;
margin-right: 190px;

background-color: green;
/*border: 1px solid black;*/
}

#footer
{
background-color: #005880;
clear: both;
color: white;
}

#footer p
{
text-align: center;
}

#kopfbereich
{
margin-top: 2em;
margin-right: 2em;
margin-left: 2em;
height: 120px;
/*border: 2px solid orange;*/
background-color: #FFFFFF;
/*background-image: url(images/domasfit_schrift_un.gif);*/
}

#main
{
width: 1000px;
margin:0 auto;
background-color: yellow;
border:1.5px solid #CC9966;
}

#navi
{
background-color: #005880;
height: 20px;
/* letter-spacing: .1em;*/
background-image: url(images/.jpg)
}

#navi li
{
display: inline;
border-right: 1px solid;
padding-right: .3em;
margin-right: .5em;
font-size: 10pt;
}

#navi ul
{
padding: .1em .4em .1em 24.1em;
}

#navi a
{
color: white
}

#navi a:hover
{
color: #C0C279;
}

/*#navi a:visited
{
color: #131B46;
}*/

#seitenleiste
{
background-color: #CC9966;
width: 220px;
float: left;
text-align: center;
padding-left: 1em;

/*border: 1px groove green;*/
}

#seitenleiste li
{
color: #005880;
line-height: 2;

}

#seitenleiste a
{
display: block;
color: #005880;
line-height: 1.6em;
}

#seitenleiste a:hover
{
color: #9A6F1C;
}

MrMurphy · #2 (**permalink**) 11.09.2015, 19:07

Hallo,

ich weiß nicht wo du deine Informationen her hast. Der Quellcode enthält teilweise Elemente aus dem letzten Jahrtausend, die bereits seit der Einführung von CSS2 im Jahr 2000 nicht mehr benutzt werden sollten (z. B. das font-Element) oder das Erzeugen von Abständen mittels des br-Tags.

Auch der Aufbau mit div hat mit aktuellem HTML nichts mehr zu tun.

Und XHTML ist bereits im Jahr 2006 offiziell zu Grabe getragen worden und sollte seitdem auch nicht mehr verwendet werden.

Von daher müsste mehr oder weniger der gesamte Quelltext umgeschrieben werden.

Die Frage ist nun erst einmal in wie weit du damit zurecht kommen wirst. Es macht ja wenig Sinn ein Layout zu erstellen, mit dem du dann nichts anfangen kannst.

Gruss

MrMurphy

Suchende · #3 (**permalink**) 11.09.2015, 20:02

Erst einmal vielen Dank für die Antwort!

Ich weiß, dass so einiges nicht auf dem neuesten Stand ist. Über die neuen HTML-Befehle habe ich mich auch informiert. Da die alten Befehle funktionieren, habe ich noch nichts geändert. Dies dürfte aber nicht der Grund sein, weshalb die Darstellung des drei-Spalten-Layouts nicht funktioniert, oder?

Gerne höre/sehe ich mir deinen Vorschlag an.

MrMurphy · #4 (**permalink**) 11.09.2015, 20:54

Hallo,

ich habe mal ein dreispaltiges Layout erstellt. Außer den Farben ich habe ich alles weggelassen, was für das Layout unwichtig ist. Die Farben sind auch nur Beispielfarben zur Unterscheidung der einzelnen Elemente.

Bilder konnte ich nicht berücksichtigen, da du die nicht zur Verfügung gestellt hast und ich deshalb deren Größe nicht kenne.

Die Art des Layouts mit floats ist zwar veraltet, aber mit moderneren Lösungen wie dem Flexsbox-Modell bist du wahrscheinlich überfordert.

Dafür ist das Layout ausbaufähig, falls du zukünftig doch auf eine modernere Lösung umsteigen möchtest.

Den Hauptinhalt habe ich im Quelltext wie in deiner Vorlage vor die beiden seitlichen Container gestellt.

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Drei-Spalten-Layout 01</title>
   <style>
      * {
         box-sizing: border-box;
      }
      html {
         background-color: white;
         font-size: 100%;
      }
      body {
         background-color: yellow;
         width: 90%;
         min-width: 1000px;
         padding: 0;
         border: 1px solid black;
         margin: 0 auto;
      }
      a {
         text-decoration: none;
         color: black;
         outline: none;
      }
      header {
         width: 100%;
         border-top: 1px solid yellow;
      }
      header h2 {
         background-color: white;
         text-align: center;
         padding-top: 50px;
         margin: 32px 32px 0 32px;
      }
      nav {
         background-color: blue;
         text-align: right;
         width: 100%;
         padding: 0 32px;
      }
      nav a {
         color: white;
         display: inline-block;
         margin: 0 8px;
      }
      nav a:first-child {
         margin-right: 32px;
      }
      main {
         background-color: green;
         display: block;
         width: 50%;
         float: left;
         padding: 8px;
         margin-left: 25%;
         margin-right: -75%;
      }
      section {
         background-color: brown;
         width: 25%;
         float: left;
         padding: 8px;
      }
      aside {
         background-color: orange;
         width: 25%;
         float: right;
         padding: 8px;
      }
      footer {
         color: white;
         background-color: blue;
         width: 100%;
         clear: both;
      }
      footer h2 {
         margin: 0;
      }
   </style>
</head>

<body>
   <header>
      <h2>Schöpfer deiner Welt</h2>
   </header>
   <nav>
      <a href="#">Blog</a>
      <a href="#">Home</a>
      <a href="#">Buch kaufen</a>
      <a href="#">Lesung</a>
      <a href="#">Kontakt</a>
      <a href="#">Autorin</a>
   </nav>
   <main>
      <h2>Buch bestellen</h2>
      <a href="#">Zur Buchbestellung</a>
   </main>
   <section>
      <h2>Buchbestellung</h2>
      <p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen.</p>
   </section>
   <aside>
      <p>Nebeninformationen</p>
      <p>Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.</p>
   </aside>
   <footer>
      <h2>footer</h2>
   </footer>
</body>

</html>

Gruss

MrMurphy

Suchende · #5 (**permalink**) 11.09.2015, 23:59

Jetzt weiß ich wenigstens, dass es funktionieren kann.
Mal sehen, was ich daraus mache.

Ganz herzlichen Dank für die anschauliche Darstellung!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
FBML Seite erstellen	Ntracks	CSS	6	01.04.2011 20:03
Mitwachsender Content und Footer Problem	Bentham	CSS	5	19.09.2010 11:49
IE 7: Zoom Problem, Höhen Problem, Text problem	Cu Chullain	CSS	4	02.09.2010 13:56
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht)	Angélique	CSS	13	16.03.2010 18:20
Problem: IE versteckt Text & Feedback	Herbi	CSS	2	11.08.2006 14:39