Nicht mehr ganz neu hier
Hallo,
hab schon einige Beiträge gelesen, aber das hat mir nicht weitergeholfen...
Ich habe drei Bereiche (Header, Content, Footer). Header und Content sind untereinander. Soweit so gut. Aber beim Footer klappt das (warum auch immer) nicht ganz.
Könnt ihr mir einen Tipp oder die Lösung geben??
Danke!
Auszug aus dem Quelltext:
hab schon einige Beiträge gelesen, aber das hat mir nicht weitergeholfen...
Ich habe drei Bereiche (Header, Content, Footer). Header und Content sind untereinander. Soweit so gut. Aber beim Footer klappt das (warum auch immer) nicht ganz.
Könnt ihr mir einen Tipp oder die Lösung geben??
Danke!
Auszug aus dem Quelltext:
HTML:
html {
height: 100%;
}
body {
color: #555;
font-size: 15px;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #FFDDC4;
height: 100%;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
color: #0088cc;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4 {
color: #cb4d1f;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
strong {
color: #333;
}
/* HEADER
-------------------------------------------*/
#header {
background: url(../img/bg_line.png) repeat-y;
padding: 0 0px;
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
margin-height: 10px;
height: 280px;
}
#firmenlogo {
color: #000;
background: url(../img/header_logo.jpg) no-repeat;
width: 900px;
height: 180px;
left: 50%;
margin-left: -400px;
position: relative;
}
#header-inner {
max-width: 1000px;
margin: 0 auto;
}
/* eigenes Menu */
#logomenu_place {
float: left;
width: 95px;
height: 40px;
}
#logomenu {
float: left;
background: url(../img/menu_logo.png) top center no-repeat #FA6900;
border-left: 1px solid #ffffff;
width: 75px;
height: 40px;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
height: 40px;
font-size: 14px;
background: #FA6900;
letter-spacing: 0.2em;
font-family: Helvetica, Arial, Verdana, sans-serif;
width: 800px;
position: absolute;
left: 170px; /* 80 */
}
#nav li {
display: block;
float: left;
margin: 0;
padding: 0;
border-left: 1px solid #ffffff;
}
#nav li a {
display: block;
float: left;
color: #ffffff;
text-decoration: none;
padding: 12px 45px 0 45px;
height: 28px;
}
#nav li a:hover {
background: #ffddc4;
color: #000;
}
#nav .current {
color: #000;
background: #ffddc4;
}
.nav_toggle {
display: none;
}
/* CONTENT
-------------------------------------------*/
#content {
max-width: 830px;
left: 50%;
margin-left: -500px;
top: 260px;
padding: 0 130px;
position: absolute;
background: url(../img/bg_line.png) repeat-y #FFDDC4;
}
.hero {
margin-bottom: 20px;
border-radius: 5px;
}
.intro {
font-size: 16px;
}
.blocks-3 {
margin-bottom: 0;
}
#blocks li {
background-color: #eee;
margin-bottom: 15px;
}
#blocks li p {
margin-bottom: 0;
}
.circle {
width:70px;
height:70px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:70px;
text-align:center;
background-color:#e67548;
margin-bottom: 15px;
}
.twitter-icon {
padding: 2px 6px;
background-color: #44B6EF;
color: white;
margin-right: 10px;
}
.fb-icon {
padding: 2px 6px;
background-color: #3B5D95;
color: white;
margin-right: 10px;
}
.gplus-icon {
padding: 2px 6px;
background-color: #CF5D45;
color: white;
margin-right: 10px;
}
.portfolio {
padding: 20px;
margin-top: 40px;
background-color: #eee;
}
/* FOOTER
-------------------------------------------*/
#footer {
max-width: 1000px;
left: 50%;
margin: -90px -500px;
font-size: 14px;
color: #666;
height: 90px;
background: url(../img/footer.png) no-repeat;
width: 100%;
bottom: 0px;
clear: both;
position: absolute;
}
.copyright {
margin: 0px 130px;
}
/* MEDIA QUERIES
--------------------------------------------*/
@media only screen and (max-width: 768px) {
.nav_toggle {
display: block;
margin-right: 10px;
}
a.nav_toggle {
text-decoration: none;
color: white;
float: right;
margin-top: 32px;
background-color: #4a5564;
padding: 4px 10px;
font-size: 22px;
}
#nav {
display: none;
clear: both;
}
#nav ul {
margin: 0;
float: left;
width: 100%;
}
#nav li {
display: block;
padding: 7px 0;
border-top: 1px solid #424C5B;
padding:10px;
}
#blocks li {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 769px) {
#nav {
display: inline !important;
}
}
Zuletzt bearbeitet von einem Moderator: