Hey guys. Im setting a position:absolute to my UL to make it appear on the bottom of div #destaques, but isnt work. Whats going on?
<div id="destaques">
<ul>//stuff</ul>
<div class="banner"><img src="images/001.jpg"/></div>
<div class="banner"><img src="images/002.jpg"/></div>
<div class="banner"><img src="images/003.jpg"/></div>
<div class="banner"><img src="images/004.jpg"/></div>
</div>
Its currently appearing on the page bottom.
#destaques {
margin:0;
padding:0;
width:1000px;
height:250px;
float:left;
overflow:hidden;
}
#destaques .banner {
position:absolute;
}
#destaques ul {
float:left;
border:1px solid #777;
background:#fff;
position:absolute;
margin:0;
color:#333;
padding:0;
right:0px;
}
What im doing wrong?
Thanks!
You need to add:
position:relative;
to your #destaques div
Related
For some reason my footer isn't moving along to the bottom of the content as it always has and I've been over my code back and forth and can't figure out the problem. I used both html and css validators and they saw no errors in my coding. I figured maybe I'm missing a quote or semi colon somewhere but I can't figure out what's causing the problem.
Here's a fiddle to show what's going on https://jsfiddle.net/Optiq/n6xmhL2j/1/
here's the HTML
<body>
<div id="front_page" class="page">
<header>WELCOME SLIDESHOW</header>
<div id="intro_links">
<a class="nav_link" href="#">New Artists</a>
<a class="nav_link" href="#">New Designs</a>
<a class="nav_link" href="#">New Garments</a>
<a class="nav_link" href="#">How it Works</a>
</div>
<div id="new_artists" class="title_01">New Artists</div>
<div class="new_artist_pane">
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
<div class="art_pane01">
</div>
</div>
</div><!--front_page-->
<footer>footer</footer>
</body>
Here's the CSS
#charset "utf-8";
/* CSS Document */
body{
margin:0;
padding:0;
height:auto;
width:100%;
display:block;
/*background-color:#36F;*/
}
header{
width:100%;
height:444px;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
}
.page{
width:100%;
height:auto;
margin-bottom:4%;
display:block;
}
#intro_links{
width:88%;
overflow:auto;
margin:auto;
display:block;
}
.nav_link{
width:23%;
height:137px;
float:left;
text-align:center;
text-decoration:none;
margin:4% 0 4% 2%;
display:block;
background-color:#03C;
color:#fff;
}
.title_01{
width:44%;
height:44px;
background-color:#666;
font-size:29pt;
color:#fff;
display:block;
float:left;
clear:both;
}
.new_artist_pane{
width:66%;
height:auto;
border:solid 1px #333;
float:left;
margin:4% 0 0 2%;
display:block;
}
.art_pane01{
width:100%;
height:333px;
float:left;
border:solid 1px #CCC;
margin-bottom:4%;
display:block;
}
Such cases happen when you have elements with float
Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.
add this right before closing the div :
<div style="clear:both;"></div>
</div><!--front_page-->
<footer>footer</footer>
JS Fiddle
Another- and better since we don't have to add extra markup to the page - way to do it is to add .clearFix class to the parent container div which its closing tag </div> is right before the footer, to do so change this:
<div id="front_page" class="page clearfix">
to this:
<div id="front_page" class="page clearfix">
and put this in your css:
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
or :before and :after:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Here's a JS Fiddle 2 showing the above technique
more details:
https://css-tricks.com/the-how-and-why-of-clearing-floats/
http://www.positioniseverything.net/easyclearing.html
DEMO
Probably you've given float:left to every possible element and that's what disturbing it. Just add it to footer too as below:
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left;//here
}
The simplest way and most succinct way to answer what you need is to just add the clear: both to the CSS.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear: both; //add this here
}
There is 3 ways to do that.
FIRST.
add float:left; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
float:left; // add this
}
SECOND.
set display of the footer inline:block or inline-table
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:inline-block; // or display:inline-table;
}
THIRD.
add clear:both; to the footer.
footer{
width:100%;
height:111px;
margin-top:4%;
background-color:#999;
color:#fff;
text-align:center;
display:block;
clear:both; // add this
}
I want to have a page like this.
After trying some CSS and HTML code like this:
CSS Code:
html,body{
margin:0px;
background-color:#CCC;
}
#header{
background-color:#FFF;
height:350px;
width:750px;
display:block;
}
#menu{
background-color:#096;
height:60px;
width:100%;
display:block;
}
#content{
background-color:#03F;
width:750px;
height:400px;
}
#footer{
background-color:#900;
height:120px;
width:750px;
display:block;
bottom:0px;
position:relative;
}
HTML Code:
<center>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
it was the same thing but after making some text into "content" part divs got separate. like thisThis.
Whats the issue in my CSS code?
It is Because p tag have some default margin.
Add CSS like this
p{
margin:0px;
}
Fiddle
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
I want a header,body and footer.I have coded it.when I alter the codes the footer either sits below the body when i give it like this
HTML CODE:
<div id="body" style="background-image:url(img/bg.png);" class="body">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
<p style="desc p"></p>
</div>
</div>
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div><h6 class="footer h6">2011-FOOOTER</h6><img src="img/info.png" alt="" /></div>
</div>
CSS CODE:
.body
{
float:left; float:left; width:100%; height:100%; min-height: 100%; overflow-y: scroll;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px;
}
.desc p
{
margin-top:0;
}
CSS CODE of footer:
.footer
{
float:left; width:100%; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
when I code it as below,the footer sits on the body and when you go down you can see the text below the footer
.footer
{
float:left; width:100%; position:absolute; line-font-size:15px; padding:0px; bottom:0px; height:25px; font-size:18px;
}
I want the footer to be fixed to the bottom of the screen and want the text to scroll without the scroll bar.
Could someone suggest what is the mistake I have done and where?
Try this styles for which to see scrollbar just remove overflow:hidden in body
html,
body {
margin:0;
padding:0;
height:100%;
overflow:hidden;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:fixed;
bottom:0;
left:0;
}
Sure you will get footer pushed under body with 100% height of body, with no space for footer to stay in your view, you need to solve it, anyway this question is so common, your words maybe not helped you, simply you need to search about "Sticky Footer" a lot of questions answered here or simply with magic of Google you can see :
http://ryanfait.com/sticky-footer/
and http://www.cssstickyfooter.com/
And learn about it.
Good luck.
in the footer class
Instead of
position:absolute;
use
position:fixed;
this should work
Even though my #tbr div align is set to right, sprites keep aligning to the left. Any ideas why?
Normal text, links and images work fine. (aligned to right, with 20px right margin, like it is supposed to be).
HTML:
<div id="topbar">
<div id="tbl">abc</div>
<div id="tbc">center</div>
<div id="tbr">
<div id="bar">
</div>
</div>
</div>
CSS:
#topbar {
width:100%;
height:36px;
padding-top:12px;
background-color:#e7e6e6;
border-top:1px solid #d0cdcd;
border-bottom:1px solid #d0cdcd;
}
#tbl {float:left; width: 30%; text-align:left; padding-left:20px;}
#tbc {display:inline-block; text-align:center; width: 30%;}
#tbr {float:right; width: 30%; text-align:right; padding-right:20px;}
#bar {margin-top:-5px;}
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:left;
}
#sound {width:35px; background-position:0 0;}
JSFIDDLE: http://jsfiddle.net/B4n9T/
Not sure if I am following you here completely, but I think this might be your issue
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:left; //you want this to be right
}
http://jsfiddle.net/B4n9T/3/
Here's how it's fixed:
position:relative; on #tbr and to stop it being incorrectly positioned again i've set the width:auto; on it too.
Just give float:right to you #bar a like this:-
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:right;
}
i hope this will help you....
see the demo:- http://jsfiddle.net/B4n9T/5/
See this
Is this What you wanted?