I have a div that I want to use for dynamic content. When the content that fills the div is non-existent, I don't want to see it. Right now, I can see about a 5px box. Even when I remove the padding, I can still see about 1px of the box. How do I remove the box when there is no content?
#test {
border:1px dashed red;
font-size:16px;
margin:20px 0 0 0;
width:332px;
background-color:#eee;
padding:5px 0 5px 60px;
}
You can do in CSS:
div#test:empty {
display: none;
}
There's a jquery way of doing this as well, if you're interested. The :empty selector can hide things like so:
$('#test:empty').hide();
If you remove the padding,margin and border (which you don't mention in your question) then the height will be 0px, and you will not see anything in the browser. Check the screenshot below and the offsetHeight value.
For example you can create another div below #test and then add display:none for #test, you will see that the position of the second div doesn't change.
Because there is a div . You have to do this with server-side programming language (or maybe javascript) . For example :
if(content()) // if there is any content
{
echo "<div id=\"test\"></div>";
}
else
{
}
What about using the search box in the upper right corner?
Hide empty div will point you to some same questions, that have been answered before.
Related
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I want to move link a bit down when clicked, but when I try to do that using :active state everything below that button moves a bit too. What's the easiest fix to that (I don't want to mess too much with my HTML code, so maybe something css-related?).
HTML:
Test
<p>This paragraph moves when I click button above. I want to prevent that.</p>
CSS:
a { display: inline-block; }
a:active { margin: 5px 0 0 0; }
position:relative & top: 5px sounds like a good idea, but this doesn't work either (button moves 1px down for ever :/).
http://jsfiddle.net/JyZLF/
This may suit your needs:
a {
display: inline-block;
margin: 0 0 5px 0;
}
a:active {
margin: 5px 0 0 0;
}
http://jsfiddle.net/JyZLF/3/
personally, I wouldn't use margin for this, I would use:
a:active {
position:relative;
top:5px;
}
http://jsfiddle.net/seemly/jFrCj/1/
Much cleaner, less code and less likely to effect the rest of your layout, improving the future-proofing of your site.
Margin moves the element box itself, where as position relative leaves the box of the element where it is, but takes the element out of the flow of the document, allowing the movement of it anywhere you want without effecting anything else.
You could add position:relative to the a, then in the a:active, change it to top:5px. So your code will look like
a{display:inline-block; position:relative;}
a:active{top:5px;}
http://jsfiddle.net/JyZLF/7/
A positioning of relative basically says "You can move this element wherever you want on the page, but the space will stay where the element originally sat." The link had a default positioning of static, which means it follows in the normal flow of elements. So if you moved the margin down 5px, then everything below it will change
You could wrap the a in a div and then give that div a specified height, while also giving the a absolute positioning.
see below:
http://jsfiddle.net/8P93R/1/
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
I'm actually working on a website that should have a div in position fixed on the top of my page.
But it doesn't work fine : my div on the top is covering a part of my page. I don't understand how to get a solution for this.
The div fixed on the top is ".menutop" :
.menutop {
width:100%;
background-color:white;
top:0;
position:fixed;
margin-bottom:10px;
border-bottom:1px solid black;
color: #428CB7;
}
Should I add something in my body configuration ?
Thank you !
When an element has position:absolute or position:fixed, it is removed from the flow, so any other elements will act as if it's not there. In order to prevent this causing problems, in your case, add a margin-top to your content so that the menu no longer covers it.
You will probably need to add a margin-top to the body for whatever height the menutop is.
This is a really odd one. I cannot seem to affect this one image via css at all. Tried adding a class specifically for the image and also writing css to affect just the image, but zip. It won't budge. The only thing that made it move was setting the neg. margin on the actual image, and there it only moved up about 40px and wouldn't go any further (taken that off since then). The image in question is the "imagine" tab (wp-image-39) on this page:http://circore.com/haute/. The bits of css I've left are:
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
I've also tried affecting all images in the content area and a bunch of other things. The red background is just so I can see if something worked. Argh! Thanks so much!
Instead of trying to put styles on the image, why not put styles on the containing div?
.toptab { margin-top: -50px; }
Would that suit your needs?
I would set position: absolute for the image. Then you will be able to move it freely with margins relative to its inline position.
The last 3 classes of your CSS
#text-4
{
font-size:11px;
line-height: 15px;
color: #000000;
text-align: center;
}
img.wp-image-39
{
margin-top:-120px;
background:#ff0000;
}
.toptab
{
margin-top:-120px;
background:#ff0000;
}
are inside #media print { which is actually not closed.
Put a closing bracket before #text-4 or wherever you need.
<div style="margin-top:-120px;">
Inline CSS would work also on the div that wraps around the . Hope this helps.