Hallo zusammen,
ich bin neu hier bei netcup, heute wurde der Serverumzug zu netcup vollzogen, die Domains werden gerade transferiert.
Also bitte nicht wundern, wenn ich hier einen Link zur bplaced-Seite setze, sobald meine Domains erreichbar sind, läuft wieder alles wie gewohnt darüber.
Seit ein paar Tagen arbeite ich an einem neuen HP-Projekt (eins vorab, ich mache dies aus Spaß und es handelt sich um eine reine Liebhaber-Homepage über meinen Hund etc.).
Nun habe ich das Design der HP erstellt, soweit passt auch alles.
Ich habe zwei nebeneinander-liegende Div-Container. Der linke hat ein float: links und eine feste breite, der rechte hat ebenfalls eine feste Breite, kein float (siehe css-Code)
Nun dachte ich mir, ich gebe dem rechten Container eine feste Höhe und lasse dann mit dem Befehl overflow: auto; scrollen, wenn der Inhalt größer ist, als die Höhe der Box. Die Darstellung im Internet Explorer, Chrome usw. ist korrekt, nur Firefox verschiebt alles. (siehe hier: Unsere Schenkieseite) D.h. Der Inhalt der rechten Box beginnt erst, nach dem Ende des Inhaltes der linken Box, d.h. unterhalb der Navigation. Das passiert aber erst, wenn ich den Befehl: overflow: auto; setze. Mit der height: 1000px; passiert das noch nicht.
Habt ihr eine Idee, was ich falsch gemacht habe?? Habe schon viel probiert ... aber ich finde leider den Fehler nicht.
Ich stelle euch hier mal meinen css-Code ein:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #000;
background-image: url(../images/hgcomic1.jpg);
}
#container {
border: 1px solid #fff;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
width: 1000px;
background-color: #69C;
border-radius: 15px;
}
#Seite {
text-align: left;
width: 900px;
padding: 0.5em;
border: 2px dotted #fff;
overflow: hidden;
height: 100%; /* for IE6 */
}
#sidebar_links {
font-size: 0.91em;
float: left;
width: 230px;
margin: -1px;
padding: 0px;
}
#sidebar_links li {
list-style: none;
margin: 0; padding: 0.5em;
}
#sidebar_links a {
display: block;
padding: 0.2em;
}
#sidebar_links a:link {
color: #FFF;
background-color: #69C;
}
#sidebar_links a:visited {
color: #666;
background-color: #eee;
}
#sidebar_links a:hover {
color: #FFF;
background-color: #69C;
text-decoration: underline;
}
#sidebar_links a:active {
color: #808080;
background-color: #69C;
}
div#Inhalt {
margin-left: 250px;
padding: 17px;
width: 615px;
height: 1000px;
overflow: auto;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Inhalt p {
font-size:1em;
margin: 1em 0;
}
#main {
overflow: hidden;
height: 100%; /* for IE6 */
}
#wrapper {
font-size: 0.9em;
background-image: url(../images/wrapper.jpg);
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
#rahmen_oben, #rahmen_unten {
line-height: 1px;
background: transparent url(../images/wrapper_border.jpg) no-repeat;
}
#rahmen_rechts {
line-width: 1px;
background: transparent url(../images/wrapper_border.jpg) no-repeat;
}
/*~~Header~~*/
#kopf {
margin-bottom: 25px;
background-color: #69C;
width:95%;
}
#kopf img {
background-color: #69C;
height: auto;
margin-top: 25px;
width: 100%;
}
/*~~Footer~~*/
#fuss {
margin: 30px;
background-color: #69C;
align: center;
font-family: Calibri;
color: #000;
clear: both;
}
#fuss a:visited {
color: #000;
}
/*~~Navigation horizontal~~*/
ul#navigation {
margin-bottom: 55px;
margin-top: 35px;
margin-left: 30px;
margin-right: 30px;
padding: 0px;
list-style-type: none;
}
ul#navigation li {
margin: 0px;
display: inline;
}
ul#navigation a:link {
background-color: #69C;
padding: 2px 5px 2px 5px;
font-size: 22px;
color: #000;
font-family: "Calibri";
text-decoration: none;
}
ul#navigation a:hover {
background-color: #F9F
padding: 2px 5px 2px 5px;
color: #000;
}
ul#Navigation a:visited {
color: #000; background-color: #69C;
}
/*~~Navigation Sidebar~~*/
ul#sidebar_Navi {
font-size: 16px;
float: left;
width: 150px;
margin-left: 35px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
color: #FFFFFF;
}
Alles anzeigen