My footer seems as though it has some type of imaginary (Unwanted padding in the top of the footer div... If you need an example of what I mean just visit my site) padding to it. If you view my sample link you will see what I am referring to.
<div id="footer">
<div id="Social">
<img src="img/Follow.png" width="339" height="21" alt="Follow on Social" style="position: relative; display:block;" />
<ul>
<li class="Twitter">Twitter</li>
<li class="Facebook">Facebook</li>
<li class="Youtube">Youtube</li>
<li class="Linkdin">Linkdin</li>
</ul>
</div> <!-- Social -->
<div style="clear:both"></div>
</div> <!-- footer -->
My CSS:
#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;
padding: 0 35px;
left: 0px;
top: 82px;
}
#Social {
float: left;
width: 339px;
}
/* Social Links */
.Twitter a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Twitter.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 42px;
height: 27px;
}
.Twitter a:hover {
background-position-y: 27px;
}
.Facebook a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/Facebook.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 18px;
height: 31px;
}
.Facebook a:hover {
background-position-y: 31px;
}
.Youtube a {
background-image: url(http://www.nerissagrigsby.com/wp-content/themes/twentytwelve/img/YouTube.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 29px;
height: 30px;
}
.Youtube a:hover {
background-position-y: 30px;
}
.Linkdin a {
background-image: url(http://www.nerissagrigsby.com/wp- content/themes/twentytwelve/img/LinkedIn.png);
overflow: hidden;
text-indent: -999px;
display: block;
width: 28px;
height: 29px;
}
.Linkdin a:hover {
background-position-y: 29px;
}
#Social ul li {
display: inline-block;
margin-right: 24px;
}
#Social ul {
margin: 12px 0 0 0;
padding: 0;
}
How can I remove this padding?
Get rid of top: 82px;
#footer {
background-image:url(img/FooterBG.png);
height: 92px;
position: relative;
z-index: 10;
padding: 0 35px;
left: 0px;
/* top: 82px; */
}
You could try using a css reset
You could also try using:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Just in case it's an internet explorer problem.
#Herbert Peters I didn't got why that imaginary boundary is there. But, if you remove
<div style="clear:both"></div>
then it will not be there.
Just put margin/padding to 0 or a negative value (try -1 and then increase until its gone) for the wanted direction
Related
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 90%;
}
#lupa{
float: right;
width: 40%;
height: 100%;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: right;
padding-top: 90px;
}
#content_1{
float: left;
height: 100%;
width: 60%;
}
#content_container{
padding-top: 125px;
height: 100%;
width: 100%;
padding-left: 35%;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
#footer_left{
height: 90%;
float: left;
width: 40%;
}
.footer_1, .footer_2{
height: 100%;
width: 50%;
}
.footer_1{
float: left;
}
.footer_2{
float:right;
}
.footer_3{
}
#full_5{
height:100vh;
background-color: #0F032D;
bottom: 0;
}
.footer_bottom{
color: white;
height: 10%;
width: 100%;
text-align: center;
clear: both;
bottom: 0;
padding-bottom: 10px;
z-index: 10;
}
#full_5 ul{
padding-right: 25px;
padding-top: 25px;
}
#full_5 ul li{
padding-top: 25px;
}
#full_5 ul li a{
color: white;
text-decoration: none;
font-size: 16px;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
html * {
box-sizing: border-box;
padding:0;
margin:0;
}
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color:#666666;
line-height: 1.7em;
}
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
#full_2, #full_3, #full_4{
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
position: relative;
height: 100vh;
width: 100%;
}
#full_1 {
background: black;
opacity: 0.36;
}
#full_4 {
background: magenta;
}
#full_2 {
background: white;
}
#full_3 {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 45px;
height: 45px;
left: calc(50% - 16px);
}
.arrow-down a img {
width: 100%;
}
#full_2 .arrow-down a img {
width: 100%;
display: none;
}
.logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;}
.main-nav {float: right; width: 60%; height: 100%;}
.menu {
background-color: #373737;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
z-index: 5;
}
#main-header a{
text-decoration: none;
color: #ffffff;
font-size:2.0em;
z-index: 10;
opacity: 1;
}
#main-header a:hover{
color: #585858;
}
#main-header {
position: absolute;
width:100%;
height:70px;
top:0;
background-color: rgba(0,0,0,0);
z-index: 100;
}
#main-header ul li {
display:inline;
padding:20px 20px;
}
#main-header ul {
float: right;
margin-top:0px;
padding:0;
padding-top: 25px;
padding-right: 25px;
text-align: right;
}
#container{
width: 95%;
margin-right: auto;
margin-left: auto;
}
#lupa{
text-align: center;
width: 100%;
height: 100%;
float: none;
}
#lupa img{516 918
width: 90px;
height: 492px;
float: none;
padding-top: 0px;
}
#content_1{
height: 100%;
width: 100%;
text-align: center;
}
#content_container{
padding-top: 100px;
height: 100%;
width: 100%;
padding-left: 0px;
margin-bottom: 20px;
}
#nadpis1{
margin-bottom: 45px;
}
#nadpis1 img{
width: 231px;
height: 44px;
}
#content_1_1 a{
color: #014FC4;
text-decoration: none;
font-weight: 800;
font-size: 25px;
}
#content_1_1 h2, p{
color: #2F2F2F;
font-size: 25px;
text-decoration: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext'
rel='stylesheet' type='text/css'>
</head>
<div class="menu" >
</div>
<div id="wrapper">
<div id="main-header">
<div class="logo">
<a href="http://david.addagio.cz/gospel"><img src=""
style="max-width: 90%; height: auto;" alt="gospel logo" /></a>
</div>
<!--/.logo-->
<div class="main-nav">
<nav class="nav">
<ul>
<li class="nav-item">Aktuálně</li>
<li class="nav-item">O nás</li>
<li class="nav-item">Kontakt
<li class="nav-item">Foto/Video
</ul>
</nav>
</div>
</div>
<div id="full_1">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_2">
<div id="container">
<div id="content_1">
<div id="content_container">
<div id="nadpis1">
<img src="where.png" alt="where">
</div>
<div id="content_1_1">
<p>Už z našeho jména vyplívá, že se nacházíme
ve městě Přerov. Klikněte na lupu a získáte
přesnou navigaci.
Jsme od Vás příliš daleko?
kontaktujte nás zde</p>
</div>
</div>
</div>
<div id="lupa">
<img src="lupa.png">
</div>
</div>
<div class="arrow-down">
<img src="arrow_down_black.png" alt="arrow-down">
</div>
</div>
<div id="full_3">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_4">
<div class="arrow-down">
<img src="arrow_down.png" alt="arrow-down">
</div>
</div>
<div id="full_5">
<div id="footer_left">
<div class="footer_1">
<ul>
<li>Podmínky použití</li>
<li>Kontakty</li>
<li>Novinky</li>
<li>Fotky</li>
</ul>
</div>
<div class="footer_2">
</div>
</div>
<div class="footer_3">
</div>
<div class="footer_bottom">
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "285px"
}, 200);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
</script>
</body>
</html>
Hi,
Well, i am making a website.. it contains 5 divs, (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%;
there is a
body {
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...)
This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)
Here are photos from a) Edge , b) Chrome.
Hope, you can see it...
Also... the code snippet is maybe wrong... but it could help.
PS: Site is optimized for phones and tablets.
PPS: for clear look at the website, visit: http://david.addagio.cz/gospel
Just give boxshadow of 1px with same color on bottom
box-shadow: #0f032d 0px 1px 0;
I'm having an issue with keeping an image at the bottom of my sidebar. When I'm able to center it, it wants to join the higher-up links and won't come down, and when I force it to the bottom, I can't get it to center without dangerous margin hacks.
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
The html :
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
The image in question is the #add. Position: absolute; brings it to the bottom as desired, but floats it left, and position: relative; brings it center as desired, but pulls it from the bottom. Any input appreciated, thanks.
You are nearly there, the trick in positiong element at the center, when you are using position: absolute is by adding a left,top,right,bottom a 50% and substract the half of the size of the element you want to center.
In your case you just need to
CSS
#add {
display: block; // remove
margin: 0 auto; // remove
bottom: 0;
left: 50%; //added
margin-left: -40px; //added
position: absolute;
width: 80px;
height: 80px;
}
see my sample fiddle
try this it should work
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<div class="clear"></div>
<img id="add" src="images/phoner.png"></img>
</nav>
.sidebar {
height: 100vh;
max-width: 25%;
float: left;
font-family: 'Pontano Sans', sans-serif;
position: fixed;
}
.sidebar li:nth-of-type(1) {
padding-top: 10%;
}
.sidebar li {
color: #8B2500;
margin-top: 40px;
list-style: none;
text-align: center;
margin-left: -35px;
font-size: 20px;
}
#add {
bottom: 0;
display: block;
margin: 0 auto;
bottom: 0;
position: absolute;
width: 80px;
height: 80px;
}
.clear{
clear: both;
}
.COOLelement{
position:fixed;
margin:0 auto;
bottom:0;
width: 100px;
height: 10px;
}
Can you add a container element? That would prevent you from needing explicit sizing or margins.
.sidebar {
height: 80vh;
max-width: 25%;
position: fixed;
background: pink;
min-width: 300px;
min-height: 150px;
}
.stuck-centered {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
#add {
display: block;
margin: 0 auto;
}
body {
padding: 30px;
}
<nav class="sidebar">
<ul>
<li>About</li>
</ul>
<div class="stuck-centered">
<img id="add" src="http://placehold.it/80x80"></img>
</div>
</nav>
Full demo
Ive just been practicing using HTML and CSS and I've ran into an issue. I want this (the objects in the blue square) to be on the right but it goes underneath everything else for some reason. How can I fix it? Here is what I have tried:
HTML:
<div class="status-post row">
<div class="post-meta col-xs">
<center>
<img src="./testpost.png" alt/>
<p>
"This is a test status... Test. Test. Test."
</p>
</center>
</div>
<div class="post-interact col-xs-2">
<a href="#" class="vote voteup">
<img src="./img/global/upvote.png" alt/>
</a>
<span id="picidhere" class="count">100</span>
<a href="#" class="vote report">
<img src="./img/global/report.png" alt/>
</a>
</div>
</div>
CSS:
#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}
#appbody .status-post .post-meta {
margin-bottom: 25px;
}
#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}
#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";
}
#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;
}
#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}
#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}
#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}
#appbody .status-post .post-interact {
position: absolute;
top: 10px;
right: 10px
}
use absolute positioning to place the element
EDIT
Check this demo to understand absolute positioning
http://jsfiddle.net/jja27pce/
Just like the others have said, you need to make your content positioned absolutely, and then position then to the top right.
Code like this should work:
.post-interact {
position: absolute;
top: 0px;
right: 0px
}
Please add below css
.post-interact {
position:absolute !important;
top:0 !important;
right:0 !important;
}
into bottom of your css.
So my website is www.jacobweyer.com
When the window becomes a certain small size, it creates a large gray area on the right side, where the header and footer wont expand to cover. How do I get rid of the large content less area while still leaving a small buffer area? I'm also having an issue where I want to have my social media buttons as far right as possible, however I want it to still stay as far right as possible until it would possibly overlap the title.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpha Tau Omega | Theta Omega</title>
<link rel="stylesheet" type="text/css" href="ATOStyle.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="innerheader">
<div id="banner">
</div><!-- End banner-->
<div id="title">
</div> <!--End title -->
<div id="navbar">
<ul>
<li>Home</li>
<li>Rush</li>
<li>History</li>
<li>Alumni</li>
<li>Calendar</li>
<li>Media</li>
</ul>
</div> <!--End navbar -->
</div><!-- End innerheader -->
<div id="outersocial">
<div id="social">
<ul>
<li>
<img src="./pieces/socialmedia/facebook.png" />
</li>
<li>
<img src="./pieces/socialmedia/twitter.png" />
</li>
<li>
<img src="./pieces/socialmedia/youtube.png" />
</li>
</ul>
</div> <!-- End social-->
</div> <!--End outersocial -->
</div> <!-- End header -->
<div id="pagecenter">
</div> <!-- End pagecenter -->
<div id="footer">
<div id="footercontent">
<div id="footerbanner1">
</div> <!--end footerbanner1-->
<div id="footernav">
<p> Alpha Tau Omega Fraternity | Theta Omega Chapter | Northern Kentucky University | Contact Us!</p>
</div> <!-- End footernav-->
<div id="footerbanner2">
</div> <!-- End footerbanner2-->
</div> <!--end footercontent -->
</div> <!--end footer-->
</body>
</html>
CSS
body {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
background-color: #808080
}
/* Header Container */
#header {
background:url(./pieces/headerBar.png);
position: static;
width:100%;
height:139px;
padding:0;
z-index: 10000;
}
/* Container inside the header for sorting elements */
#innerheader {
height: 139px;
width: 750px;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* The following is the Nav Bar */
#navbar {
position: relative;
top: 76px;
left: 210px;
margin-left: inherit;
}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
display: inline-block;
width: 50px;
height: 20px;
margin: 10px;
}
#navbar ul li a {
text-decoration: none;
color: black;
}
#navbar ul li a:hover {
color: white;
}
/*The following is the Intertwine Banner */
#banner {
background:url(./pieces/banner.png);
position: absolute;
margin-left: 0px;
min-height: 193px;
min-width: 183px;
background-repeat: no-repeat;
}
/* Alpha Tau Omega - Theta Omega Title */
#title {
position: absolute;
background: url(./pieces/name.png);
margin-left: 190px;
min-height: 75px;
min-width: 285px;
}
/* The following are the social media icons */
#outersocial{
position:;
left:50%;
height: 139px;
width:50%;
}
#social {
position: absolute;
top: 2px;
right: 10px;
}
#social ul {
list-style-type: none;
}
#social li{
display: inline-block;
width: 36px;
height: auto;
margin: 5px;
}
#social img {
width: 36px;
height: auto;
}
/* Pagecenter is where the content will be on the web page*/
#pagecenter {
position: static;
margin-right: auto;
margin-left: auto;
height: 50px;
width: 750px;
min-height: 1000px;
background:url(./pieces/mainBG.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: -19px;
z-index:50
}
/* The following is the footer and its content */
#footer {
margin-top: 20px;
padding-top: 30px;
background: url(./pieces/footerbar.png);
height: 77px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;
bottom: 0px;
position: static;
}
#footerbanner1 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
left: 10px;
}
#footerbanner2 {
background: url(./pieces/footerbanner.png);
position: absolute;
min-height: 95px;
min-width: 90px;
background-repeat: no-repeat;
margin-top: -30px;
right: 10px;
}
#footercontent {
width: 100%;
height: 100%;
right: 5px;
left: 5px;
}
#footernav {
font-family: 'Quattrocento Sans', sans-serif;
position: absolute;
text-align: center;
right: 15%;
left: 15%;
}
#footernav p {
margin: 0px;
padding-right: 25%;
padding-left: 25%;
font-family: 'Quattrocento Sans', sans-serif;
color: white;
position: relative;
}
#footernav a {
font-family: 'Quattrocento Sans', sans-serif;
color: white;
}
#footernav a:hover {
color: orange;
}
An object is just a special kind of data, with properties and methods.
Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.
The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
Example1. :
person=new Object();
person.firstname="stack";
person.lastname="overflow";
person.age=50;
person.color="black";
Example2 :
var message="Hello India!";
var x=message.length;
here .length is the property of object message.
I hope it will be helpful to you.
I need to build this Site Mockup
Here is what I have right now Site
When you scroll down to the bottom of the page you see that height of the Layout does not fit (there remains a black line on the bottom).
I tried some adjustments, but the height of the Layout is still wrong.
What can be done to fix it?
Here is my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RW-Fliesen</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="contact-info" title="contact- info"></div>
<ul class="mn">
<li> </li>
<li> </li>
<li> </li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="content">
<div id="top">
<div class="foto1" title="Fliesen"> <img src="foto1.png" alt="Fliesen1"/> </div>
<div class="foto2" title="Fliesen"> <img src="foto2.png" alt="Fliesen2"/> </div>
</div>
<div id="leftcolumn">
<div class="text" title="text">
<p> RW-Fliesen <br />
Ludwig-Thoma-Str. 36 <br />
82008 Unterhaching
</p>
<div class="text2" title="text">
<p> Telefon: <br />
Fax: <br />
Mobil: <br />
Email: <br />
</p>
</div>
<div class="text3" title="text">
<p> 089 - 358 557 88 <br />
089 - 358 557 89 <br />
0179 - 673 77 41 <br />
info#rw-fliesen.com <br />
</p>
</div>
<div class="text4" title="text">
<p> Betriebsnummer: 7084943 <br /> <span class="text-blue"> Eingetragen in die Handwerksrolle bei <br /> der Handwerkskammer für München <br /> und Oberbayern. </span> </p>
</div>
</div>
<div class="face" title="face">
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=&locale=de_DE&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Dfe1e61258%26origin%3Dhttp%253A%252F%252Fwww.rw-fliesen.com%252Ff21318bbdc%26domain%3Dwww.rw-fliesen.com%26relation%3Dparent.parent&height=290&header=true&show_faces=true&stream=false&width=262&href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FRW-Fliesen%2F115860578491339&colorscheme=light"></iframe>
</div>
</div>
<div id="rightcolumn">
<div class="text5" title="text">
<p> Wir sind Ihr fachlich kompetenter Fliesenleger- und Innenausbaubetrieb in Unterhaching. </p>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body { background: #1c1b17 url(bg.jpg) repeat-x; margin: 0; padding: 0; height: 1000px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}
p { color: #17142B; line-height: 18px; padding: 0; font-size: 13px; font- weight: 600; }
h3 { color: #003d7a; font-size: 10px; font-weight: 600; margin-top: 0px; padding: 0px; }
h4 { color: #2f303f; font-size: 13px; font-weight: 600; margin-top: 20px; padding: 0px; }
.text-blue { color: #003d7a; line-height: 16px; padding: 0; font-size: 10px; font-weight: 600; }
#wrapper { width: 1000px; height: 800px; margin: 0 auto; }
#header { height: 400px; width: 1000px; display: block; position: relative; }
#header .logo { position: absolute; width: 374px; height: 221px; display: block; float: left; cursor: pointer; background: url(logo.png) 0 0 no-repeat transparent; top: 55px; left: 10px; }
#header .contact-info { position: absolute; width: 293px; height: 133px; display: block; float: left; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; top: 100px; left: 700px; }
ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding: 0; list-style-type: none; }
ul.mn li { float: left; }
ul.mn li a { display: block; float: left; height: 73px; }
ul.mn li a.mn1 { width: 104px; background-image: url('mn1.png'); background-position: 0 0; }
ul.mn li a.mn2 { width: 212px; background-image: url('mn2.png'); }
ul.mn li a.mn3 { width: 142px; background-image: url('mn3.png'); }
ul.mn li a.mn4 { width: 128px; background-image: url('mn4.png'); }
ul.mn li a.mn5 { width: 117px; background-image: url('mn5.png'); }
ul.mn li a.mn6 { width: 147px; background-image: url('mn6.png'); }
ul.mn li a.active, ul.mn li a:hover { background-position: 0 73px; }
#content { height: 1000px; width: 1000px; display: block; position: relative; }
#top { height: 300px; width: 1000px; display: block; position: relative; margin-bottom: 100px; }
#top .foto1 { width: 452px; height: 139px; float: left; margin-top: 30px; }
#top .foto2 { width: 253px; height: 138px; float: left; margin-top: 30px; margin-left: 100px; }
#leftcolumn { height: 800px; width: 300px; display: block; position: relative; float: left; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative; margin-bottom: 90px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: inline-block; position: relative; }
#leftcolumn .text3 { height: 10px; width: 200px; display: inline-block; position: relative; padding-left: 30px; }
#leftcolumn .text4 { height: 10px; width: 300px; display: inline-block; position: relative; margin-top: 80px; }
#leftcolumn .face { height: 100px; width: 300px; display: block; position: relative; margin-top: 290px; }
#rightcolumn { height: 800px; width: 700px; display: inline-block; position: absolute; margin-left: 350px; margin-top: 0px; float: right; }
#rightcolumn .text5 { height: 300px; width: 700px; display: inline-block; position: relative; }
#footer
You have an iframe with Facebook information in your page. This iframe extends to the bottom of the page and is causing the black background to be visible.
You need to lower the height of this iframe. Currently it's set like this (inline):
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 690px; width: 262px;" class="fb_ltr" src="..."></iframe>
If you change the height to maximum 684px the black bar dissapears:
<iframe id="f580fdad4" name="f83387924" scrolling="no" style="border: none; overflow: hidden; height: 684px; width: 262px;" class="fb_ltr" src="..."></iframe>
I also noticed that your menu bar was not lining up within your header, I do not have 10 reputation points yet so I cannot share the image file of how your page look in my browser Chrome Version: 26.0.1410.63. If you would like that image please feel free to email me and I will send to you.
Making the assumption that you were trying to mimic the mock-up site that you referenced in your initial post. I believe you should make the following adjustments to section of your css code that addresses your menu bar. What you provided:
ul.mn { position: absolute; float: left; top: 316px; width: 978px; margin: 0; padding:0; list-style-type: none; }
What I am proposing:
ul.mn { position: absolute; float: left; top: 316px; width: 850px; margin: 0 auto 0 10px; padding:0; list-style-type: none;}
Notice that I changed the width to reflect the width as dictated by the combined widths of each of your defined button divs to 850px from 978px, then I proposed that instead of setting all of the margins to 0 that you make the top 0, the right auto, bottom 0, and the left 10px (because from what I perceive from your mock-up the left side of the menu is to line up with the left side of the logo). Making those changes I was able to get your menu bar to sit nicely at the base of your header div.
Please keep, at least me, informed on your progress. I am always looking to share ideas and learn how other approach problems. I believe it makes us all that much more intelligent.
Best of luck,
Steve