HTML & CSS Div Problem

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

hmm hab das eingefügt was du geschrieben hattest das funktioniert aber nicht wirklich..

hier die css file

HTML:

*{
    padding: 0;
    margin: 0;
}
.text {
padding-top: 5px;
padding-left: 5px;
}
ul {
list-style-image: url('Bilder/box.png');
list-style-position: inside;
}

a:link {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:visited {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:active {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:hover {
font-size: 15px;
color: #9ddf14;
text-decoration: underline;
}

a.footer:link {
font-size: 10px;
color: #FFF;
text-decoration: none;
}
a.footer:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

a.navi:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

h1,h2,h3,h4{
color: #9ddf14;
}

body { 
    background-color: #333333;
    color: silver;
}
#wrapper{
    width: 820px;
    background-repeat:repeat-y; 
    margin: auto;
}
#header { 
    background-image: url('Bilder/header.png');
    width: 811px; 
    height: 184px;
    background-repeat:no-repeat;
    font-size: 15px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
#sidebarleft { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    width: 21px; 
    height: 765px;
    float:left;
    }
#sidebarright { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    width: 170px; 
    height: 765px; 
    text-align: left;
    font-size: 11px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    float: left;
    }
#content { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    min-height: 765px /*moderne Browser*/
    height: 765px /*IE*/
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 620px; 
    height: 765px; 
    float: left;
}
#footer {
    background-image: url('Bilder/footer.png');
    background-repeat:repeat-y; 
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px;
    width: 811px;
    height: 34px;
    float:left;
}

.post-info {
background-color: #333333;
border-top: 1px solid #9ddf14; 
border-bottom: 1px solid #9ddf14; 
font-size : 13px;
color: #9ddf14;
padding : 2px 0px 2px 0px;
margin: 5px 0px 0px 0px;
}

.post-info .clock {
padding-left:20px; 
background:transparent url('Bilder/clock.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}
.post-info .comment{
padding-left:20px; 
background:transparent url('Bilder/comment.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}

.footer  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px !important;
}
.navi {
text-align: center;
font-size: 20px;
color: #7CFC00;
}
.old {
text-align: center;
}

Tattoomaus78 · 11.11.2008

AW: HTML & CSS Div Problem

#content {
background-color: #242424;
background-repeat:repeat-y;
min-height: 765px /*moderne Browser*/
height: 765px /*IE*/
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 620px;
height: 765px;
float: left;
}

oha..was soll da jetzt 2x hight drin, hm? ....
dann hast du den Stern-Hack vergesessen...also das "*" vor height für den IE ...

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

oh mein fehler

, hmm also das funktioniert ich mach das jetzt grad noch beim footer und den beiden sidebars doch muss der code nicht so aussehen ?

min-height: 765px ; /*moderne Browser*/
*height: 765px ; /*IE*/

/edit : bei den sidebars funktioniert es nicht...

#sidebarleft {
background-color: #242424;
background-repeat:repeat-y;
width: 21px;
min-height: 765px ;/*moderne Browser*/
*height: 765px ;/*IE*/
float:left;
}
#sidebarright {
background-color: #242424;
background-repeat:repeat-y;
width: 170px;
min-height: 765px ; /*moderne Browser*/
*height: 765px ;/*IE*/
text-align: left;
font-size: 11px;
font: 100% Verdana, Arial, Helvetica, sans-serif;
float: left;
}

sokie · 11.11.2008

AW: HTML & CSS Div Problem

ich weiss nun nict ob das Teil des Problems ist, aber warum hat der #footer ein float:left ?

Code:

#footer {
    background-image: url('Bilder/footer.png');
    background-repeat:repeat-y; 
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px;
    width: 811px;
    height: 34px;
    float:left;
}

er soll doch wahrscheinlich abschliessend unter den 3 floats stehen?!
ich würde das float:left da herausnehmen und ein clear:both; (hier eigentlich clear:left) damit der #wrapper mit seinem Hintergrundbis unten reicht.
in dem Fall könntest du dann nämlich die rechte Spalte mit dem passenden Hintergrund über den wrapper gestalten - egal wie lang der gerade ist.
die height für die rechte(und linke) Spalte wird damit überflüssig.

Loilo · 11.11.2008

AW: HTML & CSS Div Problem

nicovod schrieb:
muss der code nicht so aussehen ?
min-height: 765px ; /*moderne Browser*/
*height: 765px ; /*IE*/

Soll das ein Ansatz vom Star-HTML-Hack sein?
Also wenn ich mich jetzt nicht ganz täusche, setzt man da den Stern vor html, also in der Form von

Code:

* html element {
    height: 765px;
}

Es gibt sicher einfachere Möglichkeiten, aber einfach das Sternchen am Anfang einer Zeile dürfte eigentlich nicht die Lösung sein...

sokie · 11.11.2008

AW: HTML & CSS Div Problem

Tattoomaus78 schrieb:
#content {

oha..was soll da jetzt 2x hight drin, hm? ....
...

noch besser wäre 3x*g*

Code:

height: 765px; /* für den IE */
height: auto ! important;
min-height: 765px;/* für moderne Browser */

Loilo · 11.11.2008

AW: HTML & CSS Div Problem

Oder so... Ich sage ja, es geht auch einfacher

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

float:left hatte ich eingefügt weil du es ja beim rest überall gemacht hattest, dachte dann wär so richtig.

in dem Fall könntest du dann nämlich die rechte Spalte mit dem passenden Hintergrund über den wrapper gestalten

Wie meinst du das ?

HTML:

*{
    padding: 0;
    margin: 0;
}
.text {
padding-top: 5px;
padding-left: 5px;
}
ul {
list-style-image: url('Bilder/box.png');
list-style-position: inside;
}

a:link {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:visited {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:active {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:hover {
font-size: 15px;
color: #9ddf14;
text-decoration: underline;
}

a.footer:link {
font-size: 10px;
color: #FFF;
text-decoration: none;
}
a.footer:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

a.navi:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

h1,h2,h3,h4{
color: #9ddf14;
}

body { 
    background-color: #333333;
    color: silver;
}
#wrapper{
    width: 820px;
    margin: auto;
}
#header { 
    background-image: url('Bilder/header.png');
    width: 811px; 
    height: 184px;
    background-repeat:no-repeat;
    font-size: 15px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
#sidebarleft { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    width: 21px; 
    height: 765px; /* für den IE */
    height: auto ! important;
    min-height: 765px;/* für moderne Browser */
    float:left;
    }
#sidebarright { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    width: 170px;  
    height: 765px; /* für den IE */
    height: auto ! important;
    min-height: 765px;/* für moderne Browser */
    text-align: left;
    font-size: 11px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    float: left;
    }
#content { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    height: 765px; /* für den IE */
    height: auto ! important;
    min-height: 765px;/* für moderne Browser */
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 620px; 
    float: left;
}
#footer {
    background-image: url('Bilder/footer.png');
    background-repeat:repeat-y; 
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px;
    width: 811px;
    min-height: 34px; /*moderne Browser*/
    *height: 34px; /*IE*/
    clear:both;
}

.post-info {
background-color: #333333;
border-top: 1px solid #9ddf14; 
border-bottom: 1px solid #9ddf14; 
font-size : 13px;
color: #9ddf14;
padding : 2px 0px 2px 0px;
margin: 5px 0px 0px 0px;
}

.post-info .clock {
padding-left:20px; 
background:transparent url('Bilder/clock.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}
.post-info .comment{
padding-left:20px; 
background:transparent url('Bilder/comment.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}

.footer  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px !important;
}
.navi {
text-align: center;
font-size: 20px;
color: #7CFC00;
}
.old {
text-align: center;
}

Mit den Sidebars funktionierts irgendwie immer noch nicht, langsam komm ich mir vor wie ein volldepp

Top_Gun · 11.11.2008

AW: HTML & CSS Div Problem

Ich habe jetzt nicht alles gelesen aber wenn ich dich richtig verstanden habe:

- hast du eine linke sidebar
- hast du eine rechte sidebar
- hast du in der mitte einen content

Der content ist länger (weil mehr drin steht) als die sidebars und das ist unerwünscht...

Ändern kannst du das leider nicht, also du kannst nicht sagen sei gleichgroß wie... Ein div nimmt immer nur die Größe ein die es braucht bzw du fest definierst. Du kannst aber mit einer kleinen Trickserei eine "optische Täuschung" erzeugen, so dass es so aussieht als ob:
Momentan werden deine sidebars eine Hintergrundfarbe und/oder ein Hintergrundimage besitzen. Das muss beides weg.
Du hast ja schon einen Wrapper, dieser bekommt die Hintergrundfarbe die die Sidebars haben sollen.
Nun bekommt noch der content die (ich sag mal) Rahmenbilder (darum handelt es sich wohl). Was? Der content soll variabel sein? Kein Problem um den Content kannst du beliebigviele "Hintergrund"-divs erstellen. Da kann dann eines den linken und eines den rechten Rahmen bekommen.
Dem content gibst du natürlich, wie hier schon beschrieben, eine minimale Höhe mit, damit sich der Effekt nicht umkehrt und der Content plötzlich zu klein ist...

Wenn du mal genauer sagst wie was aussehen soll, kann ich mal nen Beispiel machen...

sokie · 11.11.2008

AW: HTML & CSS Div Problem

einfach das Hintergrundbild über den gesamten wrapper laufen lassen.

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

Also die links Sidebar hab ich eigentlich am anfang nur gemacht weil ich nicht wusste wie ich den inhalt vom content was weiter vom rand wegbekomme da es ja nicht wirklich toll aussieht wenn der text direkt am rand ist, die linke sidebar hab ich nun entfernt und dem content ein padding verpasst.

Wie es aussehen soll ! Das ganze möchte ich ja dann auch noch als wp theme umsetzen (da ich das auch noch nicht beheresche) Das ganze design ist ja nur zum lernen.

Die Rechte Sidebar soll also genau wie der content sich immer weiter nach unten erstrecken je mehr inhalt reinkommt, man kennt das ja von wordpress (kategorien, archiv, seiten, links usw)

/edit : @ sokie : wenn ich mich nicht täusche, lässt sich wenn ich das so regel wie du sagst aber dann kein inhalt in der sidebar eintragen also wird sozusagen nur die sidebar "vorgetäuscht" oder etwa nicht ?

//edit2 : So sieht das ganze im moment aus, wie man sieht läuft der content mit, die sidebar aber nicht http://www.cofilew.de/media/bilder/2008/11/sdfehler.jpg

Top_Gun · 11.11.2008

AW: HTML & CSS Div Problem

nicovod schrieb:
/edit : @ sokie : wenn ich mich nicht täusche, lässt sich wenn ich das so regel wie du sagst aber dann kein inhalt in der sidebar eintragen also wird sozusagen nur die sidebar "vorgetäuscht" oder etwa nicht ?

Auch wenn ich nicht Sokie bin: Nein und ja... In die Sidebar kannst du eintragen was du willst, es wird lediglich vorgetäuscht, dass sie bis unten hin verläuft...
Sokie und ich meinen das selbe:
In deinem Wrapper, dem gibst du die Hintergrundfarbe/-grafik, hast du Content und Sidebar. Die Sidebar ist zwar nur #px hoch, darunter verläuft aber noch der Wrapper mit der entsprechenden Farbe, da sich dieser an die Länge des Contents anpasst...

sokie · 11.11.2008

ja,so ist das.die Einteilung ist nur optisch. tatsächlich ist es egal wieviel inhalt in der Sidebar ist.
#sidebar{
background-color:transparent;
}
oder alle background werte einfach weglassen

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

Jetzt ist es raus ich bin deppert

Also, ich hab dem wrapper die hintergrundfarbe des content/sidebar bereichs gegeben, hat sich aber nichts geändert, dann hab ich noch den wert height: 765px; hinzugefügt funktionierte auch nicht, dann die 3 height werte von sokie, funktioniert auch nicht...

hier nochmal die aktuellen werte vom wrapper :

#wrapper {
width: 820px;
margin: auto;
height: 765px;
background-color: #242424px;
}

/edit : ich hab grad den beitrag von sokie gelesen und der sidebar den wert background transparent hinzugefügt, doch dann übernimmt die sidebar die farbe vom bg color also vom background der gesamten seite der heller ist als die farbe des content bereiches. Hab ich beim wrapper etwas falsch eingestellt ?

Top_Gun · 11.11.2008

AW: HTML & CSS Div Problem

Gib uns doch bitte nochmal den aktuellen und kompletten Quellcode und das CSS dazu...

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

Hier der HTML Code :

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" />
<title>GreeN!Fantasy</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
    <p class="text">Willkommen auf <a href="index.html">GreeN!Fantasy</a>!
    </div>
    <div id="content">
        ?Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo 
    dolores et ea rebum. Stet clita kasd gubergren, amet. Lorem ipsum
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
    sanctus est Lorem ipsum dolor sit amet.in vulputate velit esse molestie
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi.? 
    
    <p class="text">
    <h1>Lorem ipsum</h1>
    ?Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo 
    dolores et ea rebum. Stet clita kasd gubergren, amet. Lorem ipsum
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
    sanctus est Lorem ipsum dolor sit amet.in vulputate velit esse molestie
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi.? 
    <div class="post-info">
    <span class="clock">Geschrieben am : 10.11.2008</span> | <span class="comment">0 Kommentare</span>
    </div>
    <p class="text">
    <h1>Lorem ipsum 2</h1>
    ?Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, 
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem 
    ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
    erat, sed diam voluptua. At vero eos et accusam et justo duo 
    dolores et ea rebum. Stet clita kasd gubergren, amet. Lorem ipsum
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
    sanctus est Lorem ipsum dolor sit amet.in vulputate velit esse molestie
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
    et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum 
    facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
    luptatum zzril delenit augue duis dolore te feugait nulla facilisi.? 
    </p>
    <div class="post-info">
    <span class="clock">Geschrieben am : 10.11.2008</span> | <span class="comment">0 Kommentare</span>
    </div>
    <br>
    <br>
    <br>
    <br>
    <p class="old"><a href="old.html">Ältere Beiträge >></a></p>
    </div>
    <div id="sidebarright">
    <h2>Seiten:</h2>
    <ul>
    <li><a href="index.html" class="navi">Startseite</a>
    <li><a href="index.html" class="navi">Über Mich</a>
    <li><a href="index.html" class="navi">Portfolio</a>
    <li><a href="index.html" class="navi">Impressum</a>
    <li><a href="index.html" class="navi">Downloads</a>
    <li><a href="index.html" class="navi">Kontakt</a>
    </ul>
    <br />
    <h2>Links:</h2>
    <ul>
    <li><a href="http://www.psd-tutorials.de" class="navi">PSD-Tutorials</a>
    <li><a href="http://www.cofilew.de" class="navi">Cofilew</a>
    <li><a href="http://www.wachert.com" class="navi">Wachert</a>
    <li><a href="http://www.css4you.de/" class="navi">CSS4you</a>
    </ul>
    </div>
    <div id="footer">
    © Design by <a href="http://www.cofilew.de" class="footer">Nico Schmitz 2008</a> | Icons by <a href="http://www.famfamfam.com" class="footer">FamFamFam</a></span>
    </div>
</div>
</body>
</html>

Hier der CSS Code :

HTML:

*{
    padding: 0;
    margin: 0;
}
.text {
padding-top: 5px;
padding-left: 5px;
}
ul {
list-style-image: url('Bilder/box.png');
list-style-position: inside;
}

a:link {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:visited {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:active {
font-size: 15px;
color: #9ddf14;
text-decoration: none;
}
a:hover {
font-size: 15px;
color: #9ddf14;
text-decoration: underline;
}

a.footer:link {
font-size: 10px;
color: #FFF;
text-decoration: none;
}
a.footer:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.footer:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

a.navi:link {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:visited {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:active {
font-size: 15px;
color: #FFF;
text-decoration: none;
}
a.navi:hover {
font-size: 15px;
color: #FFF;
text-decoration: underline;
}

h1,h2,h3,h4{
color: #9ddf14;
}

body { 
    background-color: #333333;
    color: silver;
}
#wrapper{
    width: 820px;
    margin: auto;
    height: 765px;
    background-color: #242424px;
}
#header { 
    background-image: url('Bilder/header.png');
    width: 811px; 
    height: 184px;
    background-repeat:no-repeat;
    font-size: 15px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
}
#sidebarright { 
    background-color: #242424;
    background-repeat:repeat-y; 
    padding : 0px 0px 0px 5px;
    width: 165px;  
    height: 765px; 
    text-align: left;
    font-size: 11px;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    float: left;
    }
#content { 
    background-color: #242424; 
    background-repeat:repeat-y; 
    padding : 5px 0px 5px 5px;
    height: 765px; /* für den IE */
    height: auto ! important;
    min-height: 765px;/* für moderne Browser */
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 636px; 
    float: left;
}
#footer {
    background-image: url('Bilder/footer.png');
    background-repeat:repeat-y; 
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px;
    width: 811px;
    height: 34px;
    clear:both;
}

.post-info {
background-color: #333333;
border-top: 1px solid #9ddf14; 
border-bottom: 1px solid #9ddf14; 
font-size : 13px;
color: #9ddf14;
padding : 2px 0px 2px 0px;
margin: 5px 0px 0px 0px;
}

.post-info .clock {
padding-left:20px; 
background:transparent url('Bilder/clock.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}
.post-info .comment{
padding-left:20px; 
background:transparent url('Bilder/comment.png');
background-repeat: no-repeat;
padding: 0px 2px 3px 20px;
}

.footer  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 10px !important;
}
.navi {
text-align: center;
font-size: 20px;
color: #7CFC00;
}
.old {
text-align: center;
}

Top_Gun · 11.11.2008

AW: HTML & CSS Div Problem

Code:

#wrapper{
    width: 820px;
    margin: auto;
    height: 765px;
    [COLOR=Red]background-color: #242424px;[/COLOR]
}

Kann das funktionieren?

Ja, ich habs eben beim erstenmal auch nicht gesehen...

Letzendlich kannst du dann bei content und sidebar das background-color ganz rausnehmen...

sokie · 11.11.2008

AW: HTML & CSS Div Problem

Code:

#wrapper{
    width: 820px;
    margin: auto;
    /* height: 765px; die höhe muss hier auch raus,
    die ergibt sich bei längeren inhalten jedes mal anders / automatisch */
    background-color: #242424px; /*:-D*/
}

nicovod · 11.11.2008

AW: HTML & CSS Div Problem

hää ? ihr verwirrt mich gerade total!

Also wie jetzt ich soll background entfernen oder reinsetzen oder wie oder was oder wie wo ?

wenn ich height entfernen funktioniert es ja auch nicht, genauso wenn ich background entferne... ?!

sokie · 11.11.2008

AW: HTML & CSS Div Problem

hinter dem background wert sollst du kein 'px' notieren, das versteht kein browser. die höhe muss in dem element raus - der wrapper wird automatisch so lang wie die inhalte es brauchen.
aus den anderen Elemeneten (content, und sidebar) die hintergrundwerte raus