I have this CSS Code for my website:
#charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
html, body, #wrap {
width:100%;
height:100%;
margin:0;
padding:0;
font-family:Calibri;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -580px; /* the bottom margin is the negative value of the footer's height */
border:4px solid #000000;
}
.push {
height: 580px; /* .push must be the same height as .footer */
}
/* header stuff */
#header-topbar {
width:100%;
height:40px;
/* padding:10px 10px 10px 10px; */
background-color:#666666;
}
#header-topbar2 {
width:100%;
height:100px;
/* padding:10px 10px 10px 10px; */
background-color:#eeeeee;
}
#phone-tel {
float:right;
margin-right:16%;
margin-top:5px;
font-size:20px;
}
#logo {
position:absolute;
float:left;
margin-left:15%;
margin-top:15px;
}
/* main body/content */
#body-content {
padding-bottom:200px;
width:80%;
margin:120px auto 0 auto;
padding:10px 10px 10px 10px;
border:solid 1px #a79494;
border-top:solid 4px #a2cd3a;
}
/* homepage-boxes */
#homepagebox {
width:80%;
margin:0 auto 0 auto;
}
#homepagebox .column {
float: left;
width: 25%;
}
#homepagebox .column div {
margin: 5px;
min-height: 350px;
background: #eeeeee;
}
/* FOOTER */
#footer {
width:100%;
height:580px;
border-top:4px solid #666666;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
#enquiryForm { clear:both; padding:8px 40px 0 0; }
.enquiryField { clear:both; padding:5px 0; }
.enquiryField label { clear:none; float:left; }
.enquiryField input { clear:none; font-family:Calibri; float:right; padding:3px; width:189px; }
.enquiryField textarea { clear:none; float:right; font-family:Calibri; padding:5px; width:189px; }
.enquiryError { clear:both; color:#fff; font-family:Calibri; }
#enquirySent { color:#fff; font-family:Calibri; }
the footer displays at the bottom of the page but if the main page content is too long the footer doesnt move down at all. the content just displays over the footer.
for example, in my HTML I have 4 divs aligned next to each other and they are displaying over the footer
i have created a fiddle here: http://jsfiddle.net/rwqjH/1/
You need to clear your floating elements, add the below line before <div class="push"></div>
<div style="clear: both;"></div>
Demo
Note: I've not fixed your footer alignments, they are pretty messed
up, I would suggest you to learn CSS positioning
try adding overflow:auto; to #wrap. When you float elements they get removed from the layout and #wrap no longer resizes to fit them by default.
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.
tried with with with marign-left/right:auto, but no result.
html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css
#panels{
padding-top:15px;
margin-left: auto;
margin-right: auto;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}
Try this:
CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
DEMO HERE
Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.
Fiddle here
Of course there was an un-closed div element in your initial code which is fixed now.
So the CSS looks like,
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet::
#panels {
padding-top: 15px;
margin: 0 auto;
background: cyan;
width: 50%;
/* u need this */
height: 500px;
}
#panel-left {
width: 50%;
box-sizing: border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow: hidden;
background-color: gray;
float: left;
padding-left: 25px;
height: 473px;
border: 1px solid #000;
}
#panel-right {
width: 50%;
box-sizing: border-box;
/*min-width:209px;*/
height: 473px;
background-color: white;
float: left;
padding-left: 25px;
border: 1px solid #000;
}
<div id="panels">
<div id="panel-left">left</div>
<div id="panel-right">right</div>
</div>
Hope this helps. Happy Coding :)
i'm having problems using my css page, where it should be a almost white background it doesnt show in my class. my code:
<div id="content">
<?php
$query="SELECT * FROM softwares ORDER BY Idsoft DESC LIMIT 5";
$result=mysqli_query($ligabd,$query);
while ($rows=mysqli_fetch_array($result))
{
$id=$rows["Idsoft"];
$a1=$rows["nome"];
$a2=$rows["marca"];
$a3=$rows["preco"];
$a4=$rows["stock"];
$a5=$rows["img"];
?>
<div class="img">
<a href="productprofile.php?id=<?php echo $id; ?>">
<img src="<?php echo $a5;?>" width="110" height="90">
<div class="desc"><?php echo "".$a2." - ".$a1.""?></div>
</a>
</div>
<?php
}
?>
</div>
and here my css:
#content
{
width: 500px;
width: 80%;
height:1000;
margin: 0 auto 0 auto;
background-color:#999
overflow:hidden;
background-size:1980px 1080px;
}
and for the image tiles:
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
my problem is that the background in the content should appear under the class, but i cant make it work, already tried to instead of using a class using an id but i cant format. i'll be appreciated by who helped me!
Your CSS:
#content {
width: 500px;
width: 80%; //Why multiple declaration?
height:1000; //Forgot unit i.e px or %
margin: 0 auto 0 auto;
background-color:#999 //Missed semicolon
overflow:hidden;
background-size:1980px 1080px; //Consider removing it if you aren't using background image.
}
div.img {
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img {
display:inline;
margin:5px; // this will not be of any effect. Margin is ignored for inline elements
border:1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
Corrected CSS:
#content {
width: 500px; // Or 80%
height:1000px;
margin: 0 auto 0 auto;
background-color:#999;
overflow:hidden;
}
div.img {
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img {
display:inline;
border:1px solid #ffffff;
}
div.img a:hover img {
border:1px solid #0000ff;
}
div.desc {
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
Okay, it seems like you have some errors in the CSS. In the first CSS code block (#content {}) you are:
Missing a semi-colon after background-color:#999, this is the reason why it isn't working as expected.
Using two width properties
Setting a height value without specifying the unit (px, %, etc.).
Using background-size without using a background image, it won't work on a background color.
Also remember that you can shorten margin: 0 auto 0 auto; to margin: 0 auto;
Working JSFiddle example.
I have two menus floated to the left of a page.
I then have a div floated to the right with an auto height, that adjusts to the content on the page (results of the menu ).
In my example I will treat the ul's as divs since they are set to block elements anyway:
<body>
<div class="container">
<div class="div1_head"></div>
<div class="div1"></div>
<div class="div2_head"></div>
<div class="div2"></div>
<div class="div3_head"></div>
<div class="div3"></div>
</div>
</body>
Each of these elements has a separate div header that goes above them.
I cannot figure out the correct way (if there is one) to clear and float the divs, so that they will all be aligned in the correct row.
margin:0;
padding:0;
.container {
width:100%;
float:left;
height:500px;
background:#ebebeb;
}
.div1_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
margin: 24px 0 0 0;
}
.div1 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div2_head {
float:left;
background: #cfcfcf;
width:20%;
height:50px;
clear:left;
margin: 24px 0 0 0;
}
.div2 {
float:left;
background: #dedede;
width:20%;
height:200px;
clear:left
}
.div3_head {
float:right;
background: #cfcfcf;
width:76%;
height:50px;
clear:none;
margin: 0 0 0 4%;
}
.div3 {
float:right;
background: #dedede;
width:76%;
height:200px;
clear:none;
margin: 0 0 0 4%;
}
Do to the nature of the web application i'm using nesting the div and header into a larger container div isn't an option.
Here is a jsfiddle: http://jsfiddle.net/Kq49s/1/
Ok, if you don't want to add in new DIVs to your current app.
Try to change your div3's css like this...
Here is the demo on jsfiddle... http://jsfiddle.net/NTX6h/
.div3_head {
position:absolute;
top:24px; /* same as your .div1_head's margin top */
right:10px; /* if you want to add some right margin */
background: #cfcfcf;
width:76%;
height:50px;
}
.div3 {
position:absolute;
top:74px; /* .div3_head's margin top + .div3_head's height */
right:10px; /* if you want to add some right margin */
background: #dedede;
width:76%;
height:200px;
}
I have a drop down list and I have a footer, when I pull down the drop down list... the footer always is in front of the list blocking the view, how can I eliminate this:
My css for the footer is:
#footer {
height:45px;
padding:10px 0;
position:relative;
}
#footer .inner {
position:relative;
z-index:2;
}
#ie6 #footer .inner {
}
#footer .bg {
background:url("http://jqueryui.com/images/footer_bg.png") no-repeat scroll left top transparent;
height:65px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:1;
}
#ie6 #footer .bg {
background:none repeat scroll 0 0 transparent;
}
#footer p {
color:#5E5E5E;
font:9px 'Arial','Helvetica',sans-serif;
margin:0;
padding:0;
text-transform:uppercase;
}
#footer p a {
color:#BBBBBB;
}
#footer span.first {
display:block;
float:left;
padding:6px 0 0 16px;
}
#footer .block {
display:block;
float:left;
}
#footer .block span, #footer span.empty {
display:none;
}
#footer .liferay {
background:url("http://jqueryui.com/images/icon_liferay.gif") repeat scroll 0 0 transparent;
border:0 none;
height:22px;
margin:3px 10px 0;
width:98px;
}
#footer .filamentgroup {
background:url("../images/oracle.png") ;
border:0 none;
height:18px;
margin:3px 22px 0 3px;
width:90px;
}
and here's the actual footer code:
Set your menu's z-index style higher than your footer's. I can only see footer styles there so we can't know which styles have you applied to your popup menu.