simon-nassim
Neues Mitglied
hallöchen,
ich habe auf meiner Website mehrere Bilderreihen.
So sieht der Html Code grob aus:
<html>
<head>
</head>
<body>
<div class="box1">
Titel
Bild
Text
href="index.htm">Übersicht</a> | <a href="page-0002.htm">Weiter ></a> | <a
href="page-0069.htm">Ende >·</a></p>
<hr>
</div>
<div class="box2">
<ul id="list-nav">
button mit navigation für die galerie. aufbau soll sein: button auf .gif rechts als sidebar mit hintergrund bild. Das bild ist grau und wird nach links transparenter. Das is jedenfalls der Plan. Die Buttons sollen übereinander sein und von der Höhe übereinander angeordnet werden. Das Problem ist das in CSS korrekt umzusetzen.
</ul>
</div>
<div id="footer"> <br>
<div class="wrap2">
footer mit globalen menu
</div>
</div>
</body>
</html>
CSS sieht bisher so aus:
body {
background: url(../../images/background/bg.jpg) no-repeat center center fixed; //*Bild aus dem Backgroundordner geht irgendwie nicht*//
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Lucida Grande, arial, verdana, sans-serif;
font-size: 80%;
font-weight: lighter;
margin-bottom:500px;
margin-top:30px;
margin-left: 10%;
margin-right: 0;
}
img {border: solid 3px #000000;}
//*Bündigkeit des Textes*//
h1 {text-align: left;}
h2 {text-align: left;}
h3 {text-align: left;}
h4 {text-align: right;} //*Datum*//
h1 {text-transform: capitalize;} //*Jedes Wort wird groß geschrieben*//
a:link {
color: blue; //*Unbesuchte Links*//
}
a:visited {
color: #AC0F0F; //*Besuchte Links*//
}
a:hover {font-weight:bold; } //*Bei Maus drüber fett*//
//*Innenabstand*//
h1 {padding-bottom: 20px;
padding-left:20px ;
padding-right:20px ;
padding-top:20px }
#vorschau {width: 400;
height: 200; }
.wrap2 {
position:relative;
margin:0 auto;
/*replace 900px with your width*/
width:60%;
left:50%;
margin-left: -25%
}
.wrap2 img {border-width: 0}
#header, #footer {
width:100%;
float:left;}
#footer {
position:fixed;
bottom:0;
z-index:999998;
background: url(../../style/footer4.gif);
background-size: cover;
left:0%;}
body {color: #000000; background-color: #CCCCC0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
td, th, ul, li, input, textarea {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
a {color: #222266; text-decoration: none; }
a:hover {color: #222266; text-decoration: underline; }
p {margin: 1em 0 1em 0; }
p.small {font-size: 80%; margin: 0.5em 0 0.5em 0; }
h1 {font-size: 24px; font-weight: bold; margin-bottom: 1em; }
h2 {font-size: 15px; font-weight: bold; margin-bottom: 1em; }
h3 {font-size: 12px; font-weight: bold; margin-bottom: 1em; }
hr {height: 1px; border: none; color: #888888; background-color: #888888; }
ul#list-nav {
width:525px;
position: absolute;
margin:1px;
display:table-row;
float: left;
text-decoration:none;
padding:0px 0;
width:525px;
color:#eee;
float:right;
text-align:center;
}
.box1, .box2 { /*2 Boxen die nebeneinander sind box1 marginright is abstand*/
float:left;
width: 60%;
}
.box2 {float: right;
position: fixed;
height: 132px;
left: 0;
top: 185px;
width: 24px;
}
.box2 img {border-width: 0}
So sieht die website momentan aus;http://simon-nassim.square7.ch/Galerie/Lijiang/page-0001.htm
Die Sidebar klappt momentan von der Positionierung nicht. Damit die Sidebar mit dem Footer zsm passt kann ich die Hintergrund Datei jederzeit anpassen.
Kann mir jmd sagen was ich falsch gemacht hab?
Liebe Grüße
Simon-Nassim
ich habe auf meiner Website mehrere Bilderreihen.
So sieht der Html Code grob aus:
<html>
<head>
</head>
<body>
<div class="box1">
Titel
Bild
Text
href="index.htm">Übersicht</a> | <a href="page-0002.htm">Weiter ></a> | <a
href="page-0069.htm">Ende >·</a></p>
<hr>
</div>
<div class="box2">
<ul id="list-nav">
button mit navigation für die galerie. aufbau soll sein: button auf .gif rechts als sidebar mit hintergrund bild. Das bild ist grau und wird nach links transparenter. Das is jedenfalls der Plan. Die Buttons sollen übereinander sein und von der Höhe übereinander angeordnet werden. Das Problem ist das in CSS korrekt umzusetzen.
</ul>
</div>
<div id="footer"> <br>
<div class="wrap2">
footer mit globalen menu
</div>
</div>
</body>
</html>
CSS sieht bisher so aus:
body {
background: url(../../images/background/bg.jpg) no-repeat center center fixed; //*Bild aus dem Backgroundordner geht irgendwie nicht*//
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Lucida Grande, arial, verdana, sans-serif;
font-size: 80%;
font-weight: lighter;
margin-bottom:500px;
margin-top:30px;
margin-left: 10%;
margin-right: 0;
}
img {border: solid 3px #000000;}
//*Bündigkeit des Textes*//
h1 {text-align: left;}
h2 {text-align: left;}
h3 {text-align: left;}
h4 {text-align: right;} //*Datum*//
h1 {text-transform: capitalize;} //*Jedes Wort wird groß geschrieben*//
a:link {
color: blue; //*Unbesuchte Links*//
}
a:visited {
color: #AC0F0F; //*Besuchte Links*//
}
a:hover {font-weight:bold; } //*Bei Maus drüber fett*//
//*Innenabstand*//
h1 {padding-bottom: 20px;
padding-left:20px ;
padding-right:20px ;
padding-top:20px }
#vorschau {width: 400;
height: 200; }
.wrap2 {
position:relative;
margin:0 auto;
/*replace 900px with your width*/
width:60%;
left:50%;
margin-left: -25%
}
.wrap2 img {border-width: 0}
#header, #footer {
width:100%;
float:left;}
#footer {
position:fixed;
bottom:0;
z-index:999998;
background: url(../../style/footer4.gif);
background-size: cover;
left:0%;}
body {color: #000000; background-color: #CCCCC0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
td, th, ul, li, input, textarea {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
a {color: #222266; text-decoration: none; }
a:hover {color: #222266; text-decoration: underline; }
p {margin: 1em 0 1em 0; }
p.small {font-size: 80%; margin: 0.5em 0 0.5em 0; }
h1 {font-size: 24px; font-weight: bold; margin-bottom: 1em; }
h2 {font-size: 15px; font-weight: bold; margin-bottom: 1em; }
h3 {font-size: 12px; font-weight: bold; margin-bottom: 1em; }
hr {height: 1px; border: none; color: #888888; background-color: #888888; }
ul#list-nav {
width:525px;
position: absolute;
margin:1px;
display:table-row;
float: left;
text-decoration:none;
padding:0px 0;
width:525px;
color:#eee;
float:right;
text-align:center;
}
.box1, .box2 { /*2 Boxen die nebeneinander sind box1 marginright is abstand*/
float:left;
width: 60%;
}
.box2 {float: right;
position: fixed;
height: 132px;
left: 0;
top: 185px;
width: 24px;
}
.box2 img {border-width: 0}
So sieht die website momentan aus;http://simon-nassim.square7.ch/Galerie/Lijiang/page-0001.htm
Die Sidebar klappt momentan von der Positionierung nicht. Damit die Sidebar mit dem Footer zsm passt kann ich die Hintergrund Datei jederzeit anpassen.
Kann mir jmd sagen was ich falsch gemacht hab?
Liebe Grüße
Simon-Nassim
