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
Related
I'm trying to put the footer at the bottom of the page.
My html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<header id="main__header">
<div id="logo"></div>
<div id="search">
<form>
<input type="text" value="Search..." />
</form>
</div>
<nav>
<ul>
<li id="home">Home</li>
<li id="about">About Us</li>
<li id="carrers">Carrers</li>
<li id="newsletter">Newsletter</li>
<li id="contact">Contact</li>
</ul>
</nav>
</header>
<section id="body__section">
<section id="left__section" class="margin__section">
<article id="news1">
<img src="images/pic.jpg" width="200" height="170" alt="pic1" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news2">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news3">
<img src="images/pic.jpg" width="200" height="170" alt="pic2" />
<header> </header>
<div>
<p> </p>
</div>
</article>
<article id="news4">
<img src="images/pic.jpg" width="200" height="170" alt="pic3" />
<header> </header>
<div>
<p> </p>
</div>
</article>
</section>
<section id="right__section" class="margin__section">
<aside id="social"></aside>
<aside class="ad"></aside>
<aside class="ad"></aside>
</section>
</section>
<footer> </footer>
</div>
</body>
</html>
My style.css
* {
margin: 0;
padding: 0;
}
html, body, #main {
height: 100%;
}
html, body, #main_header, nav, ul, footer {
width: 100%;
}
#main {
position: relative;
margin: 0 auto;
width: 1100px;
}
#main__header {
position: relative;
height: 180px;
margin: 0 auto;
background-color: #ff532a;
}
#logo {
position: relative;
top: 5px;
left: 20px;
border: 1px solid #fff;
width: 206px;
height: 75px;
}
#search {
position: absolute;
top: 5px;
right: 20px;
}
nav {
position: absolute;
bottom: 10px;
}
ul {
display: block;
list-style-type: none;
clear: right;
width: 1061px;
margin: 0 auto;
}
nav ul li {
display: block;
width: 209px;
float: left;
margin-left: 4px;
}
#home {
margin-left: 0px !important;
}
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 1.4em;
height: 35px;
padding: 5px;
border: 1px solid #fff;
border-radius: 8px;
}
#body__section {
width: 100%;
height: 100%;
padding-bottom: 20px;
}
#left__section {
width: 810px;
height: 100%;
float: left;
}
#right__section {
width: 250px;
height: 100%;
float: right;
border-top: 1px solid #d2d3d2;
}
.margin__section {
margin-top: 30px;
}
article {
position: relative;
border-top: 1px solid #d2d3d2;
border-bottom-width: thin;
height: 230px;
width: 100%;
}
section article img {
margin: 30px;
}
section article div {
position: absolute;
top: 30px;
right: 0px;
width: 550px;
height: 170px;
background-image: url('images/article.jpg');
}
.border__solid {
border: 1px solid #000;
}
#right__section aside {
width: 100%;
margin-top: 30px;
}
#social {
height: 50px;
background-color: #e7e8e7;
}
.ad {
height: 377px;
background-color: #ffffa1;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
The problem is that the gray footer stays in the middle under the section. I really want the footer to be at the bottom of the page, not fixed.
screenshot
You need to add an element with "clear: both" after the two floating sections that you have inside your container section. Then you have to remove the "height: 100%" from your container section.
So, add to your css:
.clear {
clear: both;
}
Change your "#body__section" to:
#body__section {
width: 100%;
height: auto;
padding-bottom: 20px;
}
And add to your html, just before the end of the "body__section":
<div class="clear"></div>
I recommend to use this CSS...
#main {
position: relative;
margin: 0 auto;
width: 1100px;
min-height: 100%;
padding-bottom: 180px;
}
footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
}
...and take the 'main element out of this rule:
html, body, #main {
height: 100%;
}
so it becomes
html, body {
height: 100%;
}
This makes the footer a child of #main, absolutely positioned at its bottom, with enough padding-bottom on #main to prevent any overlapping(180px, like the height of the footer), and a min-height of 100% for #main to ensure the footer is also at the bottom on pages which aren't that high.
These changes will fix things for you:
#main {
position: relative;
margin: 0 auto;
height: auto; //changing to auto
width: 1100px;
}
footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 180px;
background-color: #beb0ff;
position: relative; //changing to relative
clear: both; //clearing previous divs
}
Hope this helps!
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;
this is what I neet to build: Mockup
At the moment I stuck at sidebar. I need to align the contact info of the phone numbers so that they are aligned vertically.
Here you see what I have right know, the text is not aligned in one height with the phone numbers: Site Link
CSS:
#charset "utf-8";
/* CSS Document */
body { background: #1c1b17 url(bg.jpg) repeat-x; margin: 0; padding: 0; height: 1800px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
p {
color: #22222b;
line-height: 16px;
padding: 0;
font-size: 12px;
font-weight: 600;
}
#wrapper { width: 1000px; 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: 1100px; width: 1000px; display: block; position: relative; }
#top { height: 300px; width: 1000px; display: block; position: relative; margin-bottom: 100px;}
#top .foto1 { width: 452px; height: 339px; float: left; margin-top: 30px; }
#top .foto2 { width: 253px; height: 338px; float: left; margin-top: 30px; margin-left: 100px; }
#leftcolumn { height: 200px; width: 300px; display: block; position: relative; }
#leftcolumn .text { height: 10px; width: 300px; display: block; position: relative; margin-bottom: 200px; }
#leftcolumn .text2 { height: 10px; width: 50px; display: block; position: relative; }
#leftcolumn .text3 { height: 10px; width: 130px; display: block; position: relative; padding-left: 80px; }
#leftcolumn .face { height: 300px; width: 300px; display: block; position: relative; }
#rightcolumn
#footer
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 />
</p>
</div>
<div class="text3" title="text">
<p>089 - 358 557 88
<br />089 - 358 557 89
<br />0179 - 673 77 41
<br />
</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>
<div id="footer"></div>
</div>
</div>
</body>
</html>
How can we solve it?
use display: inline-block; with text2 and text3 class.
#leftcolumn .text2 {
height: 10px;
width: 50px;
display: inline-block;
position: relative;
}
#leftcolumn .text3 {
height: 10px;
width: 130px;
display: inline-block;
position: relative;
padding-left: 80px;
}
On #leftcolumn .text3 add this style rule:
top:-22px;
You could revise that block HTML like this:
<style type="text/css">
.title{ display:inline-block; width:80px; }
</style>
<p><span class="title">Telefon</span> 089 - 358 557 88</p>
<p><span class="title">Fax</span> 089 - 358 557 88</p>
<p><span class="title">Mobil</span> 0179 - 673 77 41</p>
Fix your display css by changing display:block to display:inline-block. This should solve your issue.
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
I'm trying to make this template, which I'm going to later be converting into a WordPress theme. The problem I'm having is similar to this post: Make div stay at bottom of page's content all the time even when there are scrollbars But when I tried the solutions off of that post, but didn't work for me.
What I want to have is the footer be at the very bottom of the page (hidden from view if the content is longer than the viewer's browser window) and not have it fixed on the bottom of the window.
All of the top content (the navigation, bars, logo, etc.) is positioned where I would like it to be. But the link above the footer and the footer aren't positioned at the very bottom of the page. Instead, when it first loads up, it positions itself at the bottom of the page. The more content it has, it stays in the area where it first loaded. See the screenshot below:
Here is the following HTML/CSS for the page:
HTML
<div id="blackbar"></div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>Contains post content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 • Champaign, Illinois 61826–6537</li>
<li>217–352–4232</li>
<li>example#broerenrusso.com</li>
<li>© 2012 Broeren Russo Inc.</li>
</ul>
</div>
CSS
/*General Implementations*/
body {
background: #6CF;
width: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar {
background: #000;
height: 55px;
position: absolute;
top: 25px;
/*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar {
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img {
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper {
width: 798px;
height: 100%;
float: left;
position: absolute;
left: 15%;
/*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper {
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight', Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul {
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li {
display: inline-block;
width: 114px;
/*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover {
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a {
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar {
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img {
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar {
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content {
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline {
background: #000;
height: 302px;
}
/*content block*/
#content {
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper {
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline {
float: right;
font-family: 'RobotoMedium', Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation {
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post {
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink {
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight', Arial, sans-serif;
}
/*Main footer*/
#footer {
position: absolute;
bottom: 0;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul {
width: 684px;
margin: 0 auto;
}
#footer ul li {
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight', Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last { margin: 0; }
I know part of the problem is all of the top content (navigation, white bar on top, etc.) have the position: absolute; CSS within them. But I wanted to keep this CSS declaration. How do I have it so the link above the footer and the footer itself positioned at the bottom of the page/content and not positioned at the bottom of the window?
So here it is. It took a long time because of absolute positioning
<body>
<div style="width:100%; min-height: 100%; position: relative; display:inline-block;">
<div id="blackbar">
</div>
<div id="wrapper">
<div id="redbar">
<img src="images/logo_broeren_03.png" alt="" title="" />
</div>
<div id="navigationWrapper">
<ul>
<li>Contact Us</li>
<li>Who We Are</li>
<li>Our Portfolio</li>
<li>Home</li>
</ul>
<div id="whitebar">
<img src="images/logo_broeren_04.png" alt="" title="" />
</div>
</div>
<div id="newsbar">
</div>
<div id="contentWrapper">
<div id="secondaryNavigation">
</div>
<div id="slider-headline">
</div>
<div id="content">
<div class="post">
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
<p>
Contains post content</p>
<br />
</div>
</div>
</div>
</div>
<div id="footer">
<span id="studioLink">designed by Two Eleven Studios</span>
<ul>
<li>602 N. Country Fair Drive, P.O. Box 6537 Champaign, Illinois 618266537</li>
<li>2173524232</li>
<li>example#broerenrusso.com</li>
<li> 2012 Broeren Russo Inc.</li>
</ul>
</div>
</div>
</body>
css
<style type="text/css">
/*General Implementations*/
html, body
{
background: #6CF;
width: 100%;
height: 100%;
}
/*Main Elements*/
/*Black bar on the far left side*/
#blackbar
{
background: #000;
height: 55px;
position: absolute;
top: 25px; /*width: 155px;*/
width: 15%;
}
/*Red bar containing red part image of logo*/
#redbar
{
background: #C0272D;
width: 114px;
height: 80px;
float: left;
}
#redbar img
{
float: right;
position: relative;
top: 24px;
}
/*Wrapper containing main content, navigation, white bar w/ logo, news feed, and main content*/
#wrapper
{
width: 798px;
min-height: 100%;
float: left;
position: relative;
left: 15%; /*left: 155px;*/
}
/*Navigation wrapper containing white bar w/ logo and main navigation*/
#navigationWrapper
{
width: 570px;
height: 130px;
position: relative;
top: 0;
float: left;
font-size: 12px;
font-family: 'RobotoLight' , Arial, sans-serif;
text-transform: uppercase;
}
/*Main navigation settings*/
#navigationWrapper ul
{
/*position: relative;
top: 0;
float: right;*/
height: 24px;
width: 570px;
}
#navigationWrapper ul li
{
display: inline-block;
width: 114px; /*height: 22px;*/
text-align: right;
float: right;
padding: 3px 0 0 0;
}
#navigationWrapper ul li:hover
{
border-top: 2px #C0272D solid;
padding: 1px 0 0 0;
}
#navigationWrapper ul li a
{
position: relative;
top: 10px;
color: #000;
text-decoration: none;
}
/*White bar w/ white logo*/
#whitebar
{
background: #FFF;
height: 56px;
width: 570px;
position: relative;
top: 0px;
}
#whitebar img
{
float: left;
position: absolute;
}
/*News feed on the side*/
#newsbar
{
width: 114px;
height: 179px;
background: #FFF;
margin: 80px 0 0 0;
}
/*Slider/Headline Block and content block*/
#slider-headline, #content
{
width: 684px;
}
/*Slider/Headline Block*/
#slider-headline
{
background: #000;
height: 302px;
}
/*content block*/
#content
{
background: #FFF;
padding: 6.5em 0 1em 0;
margin: 0 0 1.5em 0;
}
/*wrapper containing slider/headline block and content block*/
#contentWrapper
{
width: 684px;
margin: -179px 0 24px 114px;
}
/*Company tagline (only on index page)*/
#companyTagline
{
float: right;
font-family: 'RobotoMedium' , Arial, sans-serif;
margin: 5px 0 0 0;
}
/*Secondary navigation within contentWrapper*/
#secondaryNavigation
{
width: 611px;
height: 110px;
margin: 0 auto;
position: absolute;
background: #666;
z-index: 10;
top: 320px;
right: 44px;
}
/*Post settings*/
.post
{
width: 89%;
margin: 0 auto;
}
/*Studio link*/
#studioLink
{
position: absolute;
bottom: 27px;
left: 3px;
font: 8px 'RobotoLight' , Arial, sans-serif;
}
/*Main footer*/
#footer
{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
background: #CCC;
height: 24px;
}
#footer ul
{
width: 684px;
margin: 0 auto;
}
#footer ul li
{
list-style-image: none;
display: inline-block;
font: 9px/11px 'RobotoLight' , Arial, sans-serif;
margin: 0 23px 0 0;
}
#footer ul li:last
{
margin: 0;
}
</style>
Here is the fiddle. Working perfect for me. Checked in Chrome and Firefox.
Try this formula. in hurry
<div class="header">
</div>
<div id="Content">
<div class="con"></div>
</div>
<div class="header">
</div>
css
html, body
{
height: 99%;
background-color:Black;
}
.header ,.footer
{
width: 960px;
height: 15%;
background-color:Gray;
}
#Content
{
min-height: 85%;
width: 960px;
background-color:Navy;
}
.con
{
min-height:900px;
width:960px;
background-color:Aqua;
}
fiddle here
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
HTML
<div class="wrapper">
<p>http://ryanfait.com/resources/footer-stick-to-bottom-of-page/</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © 2008</p>
</div>
CSS
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em; /*!*/
}
.footer, .push {
height: 4em; /*!*/
clear: both;
}
Set the body to height: 100%; and overflow: auto;
Set the footer to position: fixed;, bottom: 0; and left: 0;
Then you must only set the margin-bottom of your content to the height of your footer.
Change the position of the footer from absolute to fixed:
#footer {
position: fixed;
...
}