✔ Leiste Rechts & Links

-Raid- · 18. September 2007

Den Kontentbereich konnte ich ganz einfach clearen, der Header und der Footer wollen aber irgendwie nicht. Der Balken "steckt" jetzt zwischen dem Header und dem Footer fest.

Code:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 100%; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

   body {
    font-size: 15px;
    font-color: #000000;
    font-family: Times New Roman;
    margin: 0em; padding: 1.45em;
    min-width: 40em;
    background: #1a2d34 url("images/BarL.jpg") repeat-y;
  }
    h1 {
    font-size: 1.0em;
    margin: -23px -6px 0.2em; padding: 74.5px;
    background: url("images/header.jpg");
    border: 0px ridge silver;
  }
    ul#Navigation {
    font-size: 14px;
    float: left; width: 140px;
    margin: -7.5px; padding: 0.2em;
    border: 0px solid black;
    clear:both;
  }
    ul#Navigation li {
    list-style: none;
    border: 1px solid;
    clear: both;
  }
    ul#Navigation a {
    display: block;
    padding: 2px;
  }
    ul#Navigation a:link {
    color: black; background: url("images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:link {
    text-decoration:none
  }
    ul#Navigation a:visited {
    text-decoration:none;
    text-align:center
  }
    ul#Navigation a:visited {
    color: #000000; background: url("images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:hover {
    color: #14b7ab; background: url("images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation a:active {
    color: white; background: url("images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 {
    font-size: 14px;
    float: left; width: 140px;
    margin: 0px -37px; padding: 2.25em;
    border: 0px solid black;
    clear:both;
  }
    ul#Navigation2 li {
    float: left;
    width: 138px;
    list-style: none;
    border: 1px solid;
    clear: both;
  }
    ul#Navigation2 a {
    display: block;
    padding: 2px;
  }
    ul#Navigation2 a:link {
    color: black; background: url("images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 a:link {
    text-decoration:none
  }
    ul#Navigation2 a:visited {
    text-decoration:none;
    text-align:center
  }
    ul#Navigation2 a:visited {
    color: #000000; background: url("images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 a:hover {
    color: #14b7ab; background: url("images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation2 a:active {
    color: white; background: url("images/NaviButton.jpg");
    text-align:center;
  }
 
    div#wrapper {
    background: url(images/BarR.jpg) right repeat-y;
    padding: 0em 1.5%; margin: 0em 0em;
  }
    div#Datum {
    font-size: 1.1em;
    color:#ffffff;
    float: right; width: 10em;
    margin: -30.2% 0em; padding: 0em 0em;
    border: 0px dashed silver; background:url("images/Background-news-middle.jpg");
    clear: both;
  }
    div#Inhalt {
    margin: -3px -6px 39% 140px;
  }
    html div#Inhalt {
    height: 1em;
  }
    div#Inhalt h2 {
    font-size: 1.1em;
    margin: 0em 0em;
    background: url("images/NaviDown.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 2em 0em;
    background: url("images/InhaltBackground.jpg");
  }
    p#Footer {
    font:1em/100% bold;
    margin: -6px; padding: 0.20em 0em;
    text-align: center;
    background: url("images/NaviDown.jpg");
  }

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>NailDesign V3 - Willkommen</title>
<style type="text/css">
@import "layout.css";
</style>
<script type="text/javascript" src="uhrzeit.js"></script>
</head>
<body>
<div id="wrapper" class="clearfix">
<h1></h1>

<ul id="Navigation">
  <center><li>Navigation</a></li></center>
  <li><a href="index.html">Willkommen</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="bilder.htm">Bilder</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <center><li> &nbsp</li></center>
</ul>

<ul id="Navigation2">
  <center><li>Navigation</a></li></center>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <center><li> &nbsp</li></center>
</ul>

<center><div id="Datum">
<body onLoad="UhrzeitAnzeigen();">
<span id="Uhrzeit"></span>
</div></center>

<div id="Inhalt">
  <h2><center><span style=color:white>Willkommen auf der Seite von Uschi Huthmacher</span></center></h2>
 <center><p>Under Construction<br><br><br><br><br><br><br></p></center>
</div>
<p id="Footer">© <script language="javascript" type="text/javascript">
<!--

var Datum = new Date();

document.write(Datum.getFullYear());

//-->
</script> by Naildesign</p>
</div>
</body>
</html>

-Raid- · 24. September 2007

Ich nochmal...
Ich schaffe es einfach nicht, diese Leisten richtig einzubinden.
Bin am verzweifeln...

Hier mal ein Bild zu der Seite:
http://img181.imageshack.us/my.php?image=starswc2.jpg

Und hier der bisherige Code:

Code:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 100%; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

   body {
    font-size: 15px;
    font-color: #000000;
    font-family: Times New Roman;
    margin: 0em; padding: 1.45em;
    min-width: 40em;
    background: #1a2d34 url("http://www.tutorials.de/forum/images/BarL.jpg") repeat-y;
  }
    h1 {
    font-size: 1.0em;
    margin: -23px -6px 0.2em; padding: 74.5px;
    background: url("http://www.tutorials.de/forum/images/header.jpg");
    border: 0px ridge silver;
  }
    ul#Navigation {
    font-size: 14px;
    float: left; width: 140px;
    margin: -3px -6px; padding: 0em 0em;
    border: 0px solid black;
    clear:both;
  }
    ul#Navigation li {
    list-style: none;
    border: 1px solid;
    clear: both;
  }
    ul#Navigation a {
    display: block;
    padding: 2px;
  }
    ul#Navigation a:link {
    color: black; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:link {
    text-decoration:none
  }
    ul#Navigation a:visited {
    text-decoration:none;
    text-align:center
  }
    ul#Navigation a:visited {
    color: #000000; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation a:hover {
    color: #14b7ab; background: url("http://www.tutorials.de/forum/images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation a:active {
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 {
    font-size: 14px;
    float: left; width: 140px;
    margin: 0px -37px; padding: 2.25em;
    border: 0px solid black;
    clear:both;
  }
    ul#Navigation2 li {
    float: left;
    width: 138px;
    list-style: none;
    border: 1px solid;
    clear: both;
  }
    ul#Navigation2 a {
    display: block;
    padding: 2px;
  }
    ul#Navigation2 a:link {
    color: black; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 a:link {
    text-decoration:none
  }
    ul#Navigation2 a:visited {
    text-decoration:none;
    text-align:center
  }
    ul#Navigation2 a:visited {
    color: #000000; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
    ul#Navigation2 a:hover {
    color: #14b7ab; background: url("http://www.tutorials.de/forum/images/NaviButtonOver.jpg");
    text-align:center;
  }
    ul#Navigation2 a:active {
    color: white; background: url("http://www.tutorials.de/forum/images/NaviButton.jpg");
    text-align:center;
  }
 
    div#wrapper {
    background: url(images/BarR.jpg) right repeat-y;
    padding: 0em 1.5%; margin: 0em 0em;
  }
    div#Datum {
    font-size: 1.1em;
    color:#ffffff;
    float: right; width: 10em;
    margin: -30.2% 0em; padding: 0em 0em;
    border: 0px dashed silver;
    clear: both;
  }
    div#Inhalt {
    margin: -3px -6px 39% 140px;
  }
    html div#Inhalt {
    height: 1em;
  }
    div#Inhalt h2 {
    font-size: 1.1em;
    margin: 0em 0em;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 2em 0em;
    background: url("http://www.tutorials.de/forum/images/InhaltBackground.jpg");
  }
    p#Footer {
    font:1em/100% bold;
    margin: -6px; padding: 0.20em 0em;
    text-align: center;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>NailDesign V3 - Willkommen</title>
<style type="text/css">
@import "layout.css";
</style>
<script type="text/javascript" src="uhrzeit.js"></script>
</head>
<body>
<div id="wrapper" class="clearfix">
<h1></h1>

<ul id="Navigation">
  <center><li>Navigation</a></li></center>
  <li><a href="index.html">Willkommen</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="bilder.htm">Bilder</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <center><li> &nbsp</li></center>
</ul>

<ul id="Navigation2">
  <center><li>Navigation</a></li></center>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <center><li> &nbsp</li></center>
</ul>

<center><div id="Datum">
<body onLoad="UhrzeitAnzeigen();">
<span id="Uhrzeit"></span>
</div></center>

<div id="Inhalt">
  <h2><center><span style=color:white>Willkommen auf der Seite von Uschi Huthmacher</span></center></h2>
 <center><p>Under Construction<br><br><br><br><br><br><br></p></center>
</div>
<p id="Footer">© <script language="javascript" type="text/javascript">
<!--

var Datum = new Date();

document.write(Datum.getFullYear());

//-->
</script> by Naildesign</p>
</div>
</body>
</html>

Maik · 24. September 2007

Hi,

vielleicht solltest du einfach mal die Polsterungseigenschaften des Dokumentkörpers und Viewports auf null setzen, damit die rechte Leiste auch bis an den rechten Fensterrand reicht:

Code:

html,body {
margin:0;
padding:0;
}

und das doppelt vorhandene <body>-Tag im DIV #Datum entfernen.

Ansonsten kann ich da im Stylesheet bzgl. der beiden Hintergrundgrafiken keinen Fehler ausmachen.

-Raid- · 25. September 2007

Danke Maik, klappt jetzt.
War das padding im body.
Jetzt sieht die Seite zwar soweit gut aus, jedoch reicht der rechte Balken nicht bis zum "Boden".

Wie auf dem Bild oben auch zu sehen.
____
Keine Ahnung was ich da jetzt gemacht habe, aber jetzt ist das Layout perfekt.
Danke für deine super Hilfe, Maik
____
Gibt es einen Code, mit dem der Footer immer auf dem "Boden" der Seite ist?
____
Wie kann ich dem über und unter der Navigation ein Backgroundimage einfügen?
Habe es bisher nur geschafft, indem ich den Text als Link angegeben habe:

Code:

<ul id="Navigation">
  <center><li2><a href="#">Navigation</a></li2></center>
  <li><a href="index.html">Willkommen</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="bilder.htm">Bilder</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <center><li2><a href="#"> &nbsp</li2></center></a>
</ul>

Code:

   ul#Navigation li2 {
    list-style: none;
    border: 0px solid; }
    ul#Navigation li2 a:link {
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }
    ul#Navigation li2 a:visited {
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
  }
    ul#Navigation li2 a:hover {
    color: white;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");

Maik · 25. September 2007

Guten Morgen

Ich häng dir mal ein Beispiel an, wie sich der Footer am unteren Fensterrand positionieren lässt und bei zunehmenden Inhalt nach unten wandert. Netter Nebeneffekt: die rechte "Leiste" im DIV #wrapper ist nun genauso hoch, wie die linke "Leiste".

Ein HTML-Element namens "li2" gibt es überhaupt nicht, von daher kann das Stylesheet auch nicht funktionieren.

-Raid- · 25. September 2007

Li2 funktioniert, jedoch nur mit dem FireFox. Frag mich nicht wieso... ^^"
Danke für die Datei!

Soweit so gut, hab die Navigation jetzt mit den Bildern versehen.

Code:

}
    ul#Navigation p {
    color: white;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");
    margin: 0px 0px; pedding: 0px 0px;
    width: 135px; height: 19px;

Code:

<ul id="Navigation">
  <center><p>Navigation</p></center>
  <li><a href="index.html">Willkommen</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="bilder.htm">Bilder</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <p></p>
</ul>

Aus deiner Datei konnte ich schon was herauslesen, jedoch funktioniert das nur im IE korrekt.
Im IE ist der Footer nun immer unter dem Inhalt, im Firefox jedoch, ist der Footer immer unter der Navigation.

Code:

}
    div#Footer {
    position:absolute;
    bottom:0;
    width: 98.1%;
    color: white;
    font:1em/100% bold;
    margin: -6px; padding: 0.20em 0em;
    text-align: center;
    background: url("http://www.tutorials.de/forum/images/NaviDown.jpg");

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>NailDesign V3 - Willkommen</title>
<style type="text/css">
@import "layout.css";
</style>
<script type="text/javascript" src="uhrzeit.js"></script>
</head>
<body>
<div id="wrapper" class="clearfix">
<h1></h1>

<ul id="Navigation">
  <center><p>Navigation</p></center>
  <li><a href="index.html">Willkommen</a></li>
  <li><a href="preise.htm">Preise</a></li>
  <li><a href="bilder.htm">Bilder</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="kontakt.htm">Kontakt</a></li>
  <li><a href="impressum.htm">Impressum</a></li>
  <center><p> &nbsp</p></center>
</ul>

<center><div id="Datum">
<body onLoad="UhrzeitAnzeigen();">
<span id="Uhrzeit"></span>
</div></center>

<div id="Inhalt">
  <h2><center><span style=color:white>Willkommen auf der Seite von Uschi Huthmacher</span></center></h2>
 <center><p>Under Construction<br><br><br><br><br><br><br></p></center>
</div>
<div id="Footer">© <script language="javascript" type="text/javascript">
<!--

var Datum = new Date();

document.write(Datum.getFullYear());

//-->
</script> by Naildesign</div>
</div>
</body>
</html>

Zudem hängt die "BarR" am Footer.

✔ Leiste Rechts & Links

-Raid-

Mitglied

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

Anhänge

-Raid-

Mitglied

Neue Beiträge