✔ Leiste Rechts & Links

-Raid- · 17. September 2007

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. September 2007

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. September 2007

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. September 2007

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;
    background: url(images/BarL.jpg) repeat-y; /* Hintergrundbild senkrecht wiederholen */
  }

-Raid- · 17. September 2007

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. September 2007

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:

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

Und von welcher Hintergrundfarbe sprichst du?

-Raid- · 17. September 2007

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

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

Maik · 18. September 2007

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: #273A41 url(images/BarL.jpg) repeat-y; /* Hintergrundbild senkrecht wiederholen */
  }

-Raid- · 18. September 2007

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:

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:

<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. September 2007

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:

<div id="wrapper" class="clearfix"> ... </div>

✔ Leiste Rechts & Links

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

-Raid-

Mitglied

Maik

Neue Beiträge