Leiste Rechts & Links @ tutorials.de: Tutorials, Forum & Hilfe

-Raid- · 17.09.07 21:34

Hi,
ich würde gerne eine Leiste links und rechts neben der Seite entlang laufen lassen. Ich habe schon ein paar Sachen ausprobiert, jedoch klappte das nicht wirklich.
Zudem ist die Navigation schon auf "float: left", wie kann ich etwas noch neben der Navigation anzeigen lassen?
Bin noch ein Anfänger in Sachen CSS und hoffe, dass ihr mir helfen könnt.

MFG
-Raid-

Code :

  body {
    font-size: 15px;
    font-family: Times New Roman;
    margin: 0; padding: 1.2em;
    min-width: 40em;
  }
    h1 {
    font-size: 1.0em;
    margin: -6px -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: -4px; padding: 0.29em;
    border: 0px solid black;   
  }
    html ul#Navigation { 
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0em;
  }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0px;
    border: 0px solid #3a3a3a;
  }
    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/background.jpg");
    text-align:center;
  }
    div#Datum {
    font-size: 1.1em;
    color:#FFFFFF;
    float: right; width: 10em;
    margin: 0; padding: 0;
    border: 0px dashed silver; background:url("http://www.tutorials.de/forum/images/Background-news-middle.jpg");
  }
    div#Datum p3 {
    float: right; width: 9em;
    font-size: 1em;
    margin: 0em 0em;
    min-width: 20em;
    background: url("http://www.tutorials.de/forum/images/Background-News-Middle.jpg");
  }
    div#Inhalt {
    margin: 0em 0em 0em 145px;
    padding: 0em 0em;
  }
    html div#Inhalt {
    height: 1em;
  }
    div#Inhalt h2 {
    font-size: 1.1em;
    margin: 0em 0em;
    background: url("http://www.tutorials.de/forum/images/background-news-top.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 2em 0em;
    background: url("http://www.tutorials.de/forum/images/background-news-middle.jpg");
  }
    p#Footer {
    clear: both;
    font:1.2em/135% bold;
    margin: -6px; padding: 0.16em;
    text-align: center;
    background: url("http://www.tutorials.de/forum/images/Footer.jpg");
  }

Maik · 17.09.07 21:42

Hi,

von der linken und rechten Leiste kann ich in dem Stylesheet nichts entdecken, aber vielleicht hilft dir die angewandte Technik in dem Beispiel http://positioniseverything.net/thr.col.stretch.html weiter?

-Raid- · 17.09.07 22:06

Die Leiste ist auch nicht vorhanden, da sie mir das Layout "gesprengt" hat.
Ich werde mir deinen Link mal angucken, danke!

Code :

  body {
    font-size: 15px;
    font-family: Times New Roman;
    margin: 0; padding: 1.2em;
    min-width: 40em;
  }
    h1 {
    font-size: 1.0em;
    margin: -6px -6px 0.2em; padding: 74.5px;
    background: url("images/header.jpg");
    border: 0px ridge silver;
  }
    div#BarL {
    float: left; width: 5em;
    margin: 0em 0em 0em; padding: 0;
    background: url("images/BarL.jpg");
  }
    ul#Navigation {
    font-size: 14px;
    float: left; width: 140px;
    margin: -4px; padding: 0.29em;
    border: 0px solid black;   
  }
    html ul#Navigation { 
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0em;
  }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0px;
    border: 0px solid #3a3a3a;
  }
    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/background.jpg");
    text-align:center;
  }
    div#Datum {
    font-size: 1.1em;
    color:#FFFFFF;
    float: right; width: 10em;
    margin: 0; padding: 0;
    border: 0px dashed silver; background:url("images/Background-news-middle.jpg");
  }
    div#Datum p3 {
    float: right; width: 9em;
    font-size: 1em;
    margin: 0em 0em;
    min-width: 20em;
    background: url("images/Background-News-Middle.jpg");
  }
    div#Inhalt {
    margin: 0em 0em 0em 145px;
    padding: 0em 0em;
  }
    html div#Inhalt {
    height: 1em;
  }
    div#Inhalt h2 {
    font-size: 1.1em;
    margin: 0em 0em;
    background: url("images/background-news-top.jpg");
  }
    div#Inhalt p {
    font-size: 1em;
    margin: 0em 0em;
    padding: 2em 0em;
    background: url("images/background-news-middle.jpg");
  }
    p#Footer {
    clear: both;
    font:1.2em/135% bold;
    margin: -6px; padding: 0.16em;
    text-align: center;
    background: url("images/Footer.jpg");
  }

Hier ist mein Versuch, die Grafik anzeigen zu lassen...

Maik · 17.09.07 22:51

Du musst die Grafik "BarL.jpg" stattdessen als Hintergrundbild für das body-Element definieren:

Code :

body {
    font-size: 15px;
    font-family: Times New Roman;
    margin: 0; padding: 1.2em;
    min-width: 40em;
    [b]background: url(images/BarL.jpg) repeat-y;[/b] /* Hintergrundbild senkrecht wiederholen */
  }

-Raid- · 17.09.07 22:57

Danke, klappt soweit.
Hab jetzt nur das Problem, dass die Hintergrundfarbe weder aus der CSS noch aus der HTML sichtbar ist, das heißen soll, dass die Hintergrundfarbe immer weiß ist.
Zudem habe ich zwei Leisten die ich einfügen will, eine rechts und eine links.

Code :

  body {
    font-size: 15px;
    font-color: #000000;
    font-family: Times New Roman;
    margin: 0; padding: 1.2em;
    min-width: 40em;
    background: url("images/BarL.jpg") repeat-y;
    background: url("images/BarR.jpg") repeat-y;
  }
    h1 {
    font-size: 1.0em;
    margin: -6px -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: -4px; padding: 0.29em;
    border: 0px solid black;   
  }
    html ul#Navigation { 
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0em;
  }
    ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0px;
    border: 0px solid #3a3a3a;
  }
    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;
  }
    div#Datum {
    font-size: 1.1em;
    color:#FFFFFF;
    float: right; width: 10em;
    margin: 0; padding: 0;
    border: 0px dashed silver; background:url("images/Background-news-middle.jpg");
  }
    div#Datum p3 {
    float: right; width: 9em;
    font-size: 1em;
    margin: 0em 0em;
    min-width: 20em;
    background: url("images/Background-News-Middle.jpg");
  }
   div#Inhalt {
    margin: 0em -6px 14em 145px;
  }
    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 {
    clear: both;
    font:1em/100% bold;
    margin: -6px; padding: 0.16em;
    text-align: center;
    background: url("images/NaviDown.jpg");
  }

Ein dickes DANKE! für deine Hilfe.

Maik · 17.09.07 23:00

Noch können einem Element keine zwei Hintergrundbilder zugewiesen werden.

Von daher müsstest du dir ein übergeordnetes DIV einrichten, dass das bestehende Layout aufnimmt und das Hintergrundbild "BarR.jpg" enthält:

Code :

1
2
3

div#wrapper {
background: url(images/BarR.jpg) right repeat-y; /* Hintergrundbild rechtsbündig vertikal wiederholen */
}

Und von welcher Hintergrundfarbe sprichst du?

-Raid- · 17.09.07 23:20

Vielleicht lässt sich das mit einem Bild besser erklären.

http://img129.imageshack.us/my.php?image=pageqh6.jpg

Maik · 18.09.07 06:07

Hi,

solange du keine Hintergrundfarbe für den Dokumentkörper definierst, wird dieser vom Browser weiß dargestellt:

Code :

body {
    font-size: 15px;
    font-family: Times New Roman;
    margin: 0; padding: 1.2em;
    min-width: 40em;
    background: [b]#273A41[/b] url(images/BarL.jpg) repeat-y; /* Hintergrundbild senkrecht wiederholen */
  }

-Raid- · 18.09.07 12:51

Danke, dass war dann auch soweit alles.

___
Das mit dem Hintergrund ist mir schon klar, nur wurde die Hintergrundfarbe vorher aus der HTML ausgelesen, nicht aus der CSS-Datei.
___
Ich habe den Code

Code :

1
2
3

div#wrapper {
background: url(images/BarR.jpg) right repeat-y; /* Hintergrundbild rechtsbündig vertikal wiederholen */
}

jetzt in die CSS Datei eingefügt, jedoch wird kein Bild angezeigt. Habe versucht in der HTML diese Grafik mit diesem Code einzubinden:

Code :

1	<div id="wrapper"></div>

,leider funktioniert das auch nicht, wenn du mir jetzt noch sagen könntest wo das hingehört, wärst du mein Held!
MFG
-Raid-

Maik · 18.09.07 13:10

Das DIV #wrapper muss die vorhandenen Seitenbereiche (Navigation, Inhalt, usw.) umschliessen:

Code :

<body>
    <div id="wrapper">
        <!-- Hier folgt der Bestand -->
    </div>
</body>

Desweiteren wirst du die Floatumgebung zum Abschluss "clearen" müssen, damit die Spalten das Element am unteren Elementrand nicht überlappen - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Code :

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird dann im DIV #wrapper aufgerufen:

Code :

1	<div id="wrapper" [b]class="clearfix"[/b]> ... </div>

-Raid- · 18.09.07 13:40

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.09.07 00:04

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.09.07 06:18

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.09.07 00:14

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.09.07 06:27

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3 Divs, einer links oben, einer links unten und rechts einer daneben !

links und rechts ausrichten

<< newbie - Rahmen links und rechts

Tabellenrahmen links und rechts

Frames rechts UND links in Dreamweaver?

E-Mail:

Abonnieren Abbestellen