I'm trying to get the #footer div to stay at the bottom of the #content div and the #sidebar div, but what once worked elsewhere, doesn't seem to want to work anymore and I'm at a loss.
Works here: http://wiki.tf-575.com/index.php?title=RBL_Store
But not here: http://beta.tf-575.com/index.php?title=RBL_Store
body {
background: #020B12;
font: x-small sans-serif;
color: B3DFFC;
margin: 0;
padding: 0;
text-align: center;
}
#container {
background: #020B12 url(background-tile.png) top left repeat-y;
font: normal;
width: 100%;
margin: 0 auto;
text-align: left;
}
#header {
background: #020B12;
color: B3DFFC;
padding-top: 1px;
padding-bottom: 67px;
}
#sidebar {
background: none;
float: left;
margin-bottom: 84px;
padding: 0 1px;
width: 164px;
top: 80px;
position: absolute;
}
#content {
color: #446C90;
margin-top: -48px;
min-width: 960px;
font-size: 120%;
text-align: left;
padding: 0 20px 0 165px;
}
#footer {
background: url("footer.png") no-repeat scroll left bottom transparent;
clear: both;
color: #446C90;
font-size: 90%;
min-height: 82px;
margin: 0;
padding: 82px 0 0 165px;
text-align: center;
}
<body>
<div id="container">
<div id="header">
<snip />
</div>
<div id="sidebar">
<snip />
</div>
<div id="content">
<snip />
</div>
<div id="footer">
<snip />
</div>
</div>
</body>
Your problem is that on the beta site the sidebar is positioned absolute, so the float is ignored and the clear:both; doesn't push down the footer anymore
try setting the width of the footer to 100%
Related
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I cannot figure out why the height of this container(summaryBox) is not changing. I have tried setting the min-height, max-height and changing some other things but nothing is working. I wanted the height of the container to be 20% of the screen, but its not working. Everything else works fine and I am scratching my head.
CSS:
.summaryBox {
border: 1px solid green ;
width: 80%;
margin: auto;
overflow: hidden;
min-height: 20%;
}
.summaryBox .img1 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .img2 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .sum1 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .sum2 {
width: 21%;
float: left;
color: white;
padding: 0px .5% 0px .5%;
}
.summaryBox .arrowPanelLeft {
float: left;
width: 6%;
color: white;
text-align: center;
}
.summaryBox .arrowPanelRight {
float: right;
width: 6%;
color: white;
text-align: center;
}
HTML:
<div class="summaryBox">
<div class="arrowPanelLeft">
<p><</p>
</div>
<div class="img1">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="sum1">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="img2">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="sum2">
<p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
</div>
<div class="arrowPanelRight">
<p>></p>
</div>
</div>
You need to set the height of the html and body elements, as well. This is something 'CSS resets' (such as Eric Meyer's) will usually do for you. Append this code to your css file:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You have set .summeryBox height to a percentage.. of what?
You need to add this to your css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Then the .summeryBox will be set relative to the body tag.
Alternatively you can set the outer container (.summeryBox) dimensions in pixels.
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
I'm having some trouble with a fixed nav bar at the top of my page. It's supposed to be flush with the top of the page, but isn't. Here's my HTML:
<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>
<ul>
*enough li's to go past the bottom of the screen*
</ul>
and my CSS:
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
}
#logo {
padding-left: 1%;
padding-right: 1%;
color: #75cc83;
width: 180px;
height: 100%;
background-color: #333333;
font-size: 3em;
font-family: candara, sans-serif;
}
It seems like there are only problems with the fixed nav once I put content in there (the list items, in this case)
Add top:0 to you nav's rules:
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
top:0;
}
jsFiddle example
I have a two column layout which has stopped working while tweaking to get rid of the double scroll bars on body. Now I have one scroll bar on wrap which is what I wanted but the contents somehow overlap by the width of the scroll bar.
html, body {
margin:0;
padding:0;
font: 12px Geneva, Verdana, sans-serif;
color: #1e1f21;
vertical-align: top;
height: 100%
}
body {
background: #fff url(../esimages/cubes.png) no-repeat left bottom fixed;
}
#wrap {
background: #f5f5f5;
margin: 0 auto;
width: 960px;
height: 100%;
}
#logo {
height: 75px;
width: 100%;
background: #1e1f21;
padding: 10px 0px 5px 0px;
}
#header {
height: 30px;
width: 100%;
background: #1e1f21;
margin:0px;
padding: 0px;
}
#container {
overflow: hidden;
height: auto;
background: #f5f5f5;
width: 100%;
margin: 0px;
padding: 0px;
text-align: left;
}
#content1 {
min-height: 100%;
background: #f5f5f5;
padding: 20px 20px 20px 40px;
margin: 0
}
#content2 {
float: right;
width: 290px;
min-height: 100%;
background: #f5f5f5;
padding: 20px 0px 20px 10px;
margin: 0
}
#footer {
clear: both;
padding: 10px;
background: #1e1f21;
text-align: center;
line-height: 200%;
font-size: 10px;
}
The two content boxes don't fit in the container side by side as they should. I have tried with different reduced fixed widths for content1 but it makes no difference at all and the column width stays the same no matter what. I am tearing my hair out because it's just not logical!
<body>
<div id="wrap">
<div id="logo"></div>
<div id="header"></div>
<div id="container">
<div id="content2">
<div class="box0">
<ul>
<li></li>
</ul>
</div>
</div>
<div id="content1">
<p></p>
</div>
</div>
<div id="footer" align="center"></div>
You need to put a width and float: left on content1. Also keep in mind that the total width + padding cannot exceed the container's width.
Also, you're missing a semicolon after margin: 0 for content1