zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Problem beim Erstellen eines dreispaltigen Layouts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.09.2015, 19:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.09.2015
Beiträge: 3
Suchende befindet sich auf einem aufstrebenden Ast
Standard Problem beim Erstellen eines dreispaltigen Layouts

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, zur css-datei
=-->
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li class="abstand" ><a href="home-buchvorstellung-schoepfer-deiner-welt.htm" title="Home" alt="Home">Blog</a></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;</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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.09.2015, 20:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 948
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.09.2015, 21:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.09.2015
Beiträge: 3
Suchende befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.09.2015, 21:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 948
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (11.09.2015 um 23:40 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.09.2015, 00:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.09.2015
Beiträge: 3
Suchende befindet sich auf einem aufstrebenden Ast
Standard

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

Ganz herzlichen Dank für die anschauliche Darstellung!
Mit Zitat antworten
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
FBML Seite erstellen Ntracks CSS 6 01.04.2011 21:03
Mitwachsender Content und Footer Problem Bentham CSS 5 19.09.2010 12:49
IE 7: Zoom Problem, Höhen Problem, Text problem Cu Chullain CSS 4 02.09.2010 14:56
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) Angélique CSS 13 16.03.2010 19:20
Problem: IE versteckt Text & Feedback Herbi CSS 2 11.08.2006 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:01 Uhr.