I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Please I have an image as a link to another page and I have a menu of 2 text options (using ul&li) When I use only my image, it works, but when I try to put everything together, my image doesn't link, only the menu works. My code run in Chrome and Explorer, I can't see where the problem is. Someone please help me.
Thanks!
Here my html code:
<body>
<div id="container">
<div id="header">
<div id="home">
<img id="flores" src="images/flores.jpg" alt="home" />
</div>
<div id="connexion">
<section id="formulario">
<p id="titulo">Mi cuenta</p>
<form action="" method="get">
...
</form>
</section>
</div>
<div id="contenido">
<div id="contenido_menu">
<ul>
<li>Rosa</li>
<li>Jasmin </li>
</ul>
</div>
</div>
</div>
</div>
</body>
My css code:
#container{
position: relative;
margin:auto;
margin-top:150px;
width:1024px;
height:768px;
background-color: grey;
}
#header{
margin:auto;
margin-top:0px;
width:1024px;
height: 150px;
}
#home{
position:absolute;
width:624px;
height:150px;
}
#flores {
margin-top:0px;
width:100%;
height:100%;
}
#contenido{
position:absolute;
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
position: absolute;
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
#contenido_menu ul{
margin: 0 auto;
}
#contenido_menu li{
display:inline;
padding-top: 50%;
padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
font-family: Arial;
font-size:19px;
font-weight:bold;
color:#1a53ff;
height:40px;
padding:30px 50px;
text-decoration:none;
}
Only thing I can imagin is that some div or the menu is over the picture. Try to check it with an tag inspector from your debugging tools.
Check your code properly.
In the html you have given the location of flores.jpg as "images/flores.jpg".
While for the other image rosas.jpg, in your css you typed the location as "img/rosas.jpg".
Check whether both images are in their respective folders, or you might have typed one of them wrong.
The problem comes from the below declaration. Remove padding-top:50%. I hope by mistake you put % instead px.
#contenido_menu li{
display:inline;
padding-top: 50px;
padding-bottom: 5px;
}
Also remove position:absolute from #home class.
#home{
/*position:absolute;*/
width:624px;
height:150px;
}
DEMO
You positioned the home and the menu div absolute, if I remove absolute it works fine:
http://jsfiddle.net/2m8rmvuh/
Edit: Linked to an old fiddle, now its the correct one ;)
#home{
width:624px;
height:150px;
}
#contenido{
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
I dont know if thats the look you want, but if you give them the attribute absolute, they are overlapping, if you use a large picture.
I need a little help here for my html/css code ... I need to follow the height of my divbody to divwrapper, since the divwrapper was floated to left, the height of my divbody is only 10 (theres padding valued 5px). This is the code, thanks!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Information Technology</title>
</head>
<style>
body{
margin:0px;
}
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
.divwrapper{
height:auto;
background-color:#eee;
float:left;
padding:5px;
}
.divcontent{
width:480px;
height:200px;
background-color:yellow;
float:left;
border-bottom:1px solid #000;
}
</style>
<body>
<div class="divbody">
<div class="divwrapper">
<div class="divcontent">
</div>
<div class="divcontent">
</div>
</div>
</div>
</body>
Use clearfix method to fix your float issue.
HTML
<div class="divbody clearfix">
<div class="divwrapper">
<div class="divcontent">
</div>
<div class="divcontent">
</div>
</div>
</div>
CSS
body{
margin:0px;
}
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
.divwrapper{
height:auto;
background-color:#eee;
float:left;
padding:5px;
}
.divcontent{
width:480px;
height:200px;
background-color:yellow;
float:left;
border-bottom:1px solid #000;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Here is an example
Here you can find more information about clearfix.
Add position: absolute; to divbody
.divbody{
position: absolute;
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
}
Add overflow: hidden; (which is one among many other potential options) to your .divbody to construct a new block context.
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
Read more at: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Demo
You need to add an overflow:auto; to divbody class. What this does is that it wraps itself up according to its child elements.
WORKING DEMO
The Code:
.divbody{
width:970px;
height:auto;
background-color:#cecece;
margin:0px auto;
padding:5px;
overflow:auto; /* The needs to be added */
}
Hope this is what you are looking for.
Use overflow: hidden; or overflow: auto; as quick fix, we are now moving to new age modern browsers, say good bye to cleat:both or clearfix:after
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
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}