I'm having problems targetting the DIVs on this test page I made at http://flexibletheme.tumblr.com/
In particular I have a div with an id of columns (div#columns), I can't get the background color to change.
Any ideas on how to get the background to render in div#columns?
Add overflow: hidden to #columns to clear the floats.
Another common way to clear floats is the clearfix class.
Take your pick of the two methods, but in general overflow: hidden is easier if it works for you.
In the source code on your page, you're missing a double-quote:
<div id=columns">
Try changing it to:
<div id="columns">
Related
A link to my page: My Page
For debugging purposes I have set CSS background colors for the 3 sections of my page. The "Zine" should have background of red, the "Book Cover" should have a background of "green", and the "Magazine" at the end should be "Yellow".
For some reason the background of red is only getting applied to a very small portion of the "Zine" section, all the images and text in the Zine section should have background red but most of it is coming up green.
Also if you notice this is on a 960 grid layout, and in the Book section (which should be green background) I have a h1 Book Jacket> tag, which you will actually see the text Book Jacket on the outside of the 960 grid (right side of page to the top right of the image of David Carson)
Edit: Found solution:
I changed the following code:
<article class="container_12">
<section class="zine">
To:
<article>
<section class="container_12 zine">
I think this fix works because the section class "zine" wraps the entire contents of what should have been red background. This eliminates need for a clear fix, however the clearfix suggested by others also works.
The height of .zine is collapsing. This happens because it contains floated elements which aren't cleared. There are quite a few methods of clearing floats. I'd recommend using one (or both) of the following two methods:
The "clearfix hack". Simply add the CSS rules from this page to your CSS docuement and add the class "cf" (or whatever) in addition to the class "zine".
Or, overflow: hidden. Basically, just add overflow: hidden to the "zine"-element.
Edit:
As you found out yourself, since you use the 960 grid, the container_12 and container_16-elements have clearfix built-into them. Adding either of those class names to the wrapping elements does the same thing as I explained above.
You should use the grid_X classes (X is a number between 1 and 12), when you use 960.gs .
and you should add a .clear after every "row".
You should take a look at 960.gs's source and see how they use it. That's a really good overview.
I'm learning how to make a simple template with CSS e HTML5 but i've got a problem: i want to make a container with sidebar and articles list but it dosen't work.
See to believe: http://informaticalab.com/template.html
That black line, should be a simple border that contains both the elements.
Thanks for help and sorry for bad english,
Federico
It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.
If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.
An easy way to do that is create a new class called "clear" or something similar with the following:
.clear {
clear:both;
}
However, the downside is that you're introducing a new dom element simply to modify the layout.
Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) is to tell the containing element to deal with these floated elements:
#container {
....old code...
overflow: auto;
width: 100%;
}
This has a few quirks under certain circumstances, so it's up to you which you choose to use.
See the fiddle here: http://jsfiddle.net/callseng/kZB5j/
This uses the clear element method.
I'm specifying a teal background color for the body of a page:
<body style="background-color: #0197B1">
This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)
I add the following at the bottom:
<br style="clear:both" />
some text
</body>
to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?
Page can be viewed at: http://www.momentumnow.co/testimonials
Thanks
Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.
Remove html {background-color:#ffffff;} and you should be done.
When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.
You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.
To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, #Christian Varga's solution will get you off for the time being.
I check Firefox only,
line 4: html{background-color:#ffffff; height:100% }
Just remove body
or
line 4: html,body{background-color:#0197B1; height:100% }
I'm using visibility:hidden to hide certain elements, but they still take up space on the page while hidden.
How can I make them totally disappear visually, as though they are not in the DOM at all (but without actually removing them from the DOM)?
Try setting display:none to hide and set display:block to show.
use style instead like
<div style="display:none;"></div>
Toggling display does not allow for smooth CSS transitions. Instead toggle both the visibility and the max-height.
visibility: hidden;
max-height: 0;
To use display:none is a good option just to removing an element BUT it will be also removed for screenreaders. There are also discussions if it effects SEO. There's a good, short article on that topic on A List Apart
If you really just want hide and not remove an element, better use:
div {
position: absolute;
left: -999em;
}
Like this it can be also read by screen readers.
The only disadvantage of this method is, that this DIV is actually rendered and it might effect the performance, especially on mobile phones.
Look, instead of using visibility: hidden; use display: none;. The first option will hide but still takes space and the second option will hide and doesn't take any space.
display: none is solution, That's completely hides elements with its space.
Story about display:none and visibility: hidden
visibility:hidden means the tag is not visible, but space is allocated for it on the page.
display:none means completely hides elements with its space. (although you can still interact with it through the DOM)
The answer to this question is saying to use display:none and display:block, but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property.
This also drove me crazy, because using display kills any css transitions.
One solution is to add this to the class that's using visibility:
overflow:hidden
For this to work is does depend on the layout, but it should keep the empty content within the div it resides in.
display:none to hide and set display:block to show.
here's a different take on putting them back after display:none. don't use display:block/inline etc. Instead (if using javascript) set css property display to '' (i.e. blank)
$('#abc').css({"display":"none"});
this hides the content and also does not leave empty space.
above my knowledge it is possible in 4 ways
HTML<button style="display:none;"></button>
CSS #buttonId{ display:none; }
jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);
display:none is the best thing to avoid takeup white space on the page
Thanks to this question. I wanted the exact opposite, i.e a hidden div should still occupy its space on the browser. So, I used visibility: hidden instead of display: none.
If somehow all the other options to hide an element do not suit you, there is another option which I do not see mentioned. It works assuming the element has no children.
It will hide an element without occupying space:
display: contents;
Check the browser support as it is a newish CSS feature.
With visibility set to hidden the only way I know of to make it not take up space is to use position:absolute and then set the top, left, etc., parameters. It's not ideal but it works.
As I have been troubleshooting this issue and researching, I thought I'd share my insight. If you've gotten yourself to this page, I assume you are trying to figure out why your element is taking up space on your page even with style.display = "none".
Most likely, the reason for this is NOT the element in question; but a child, parent, or sibling of it. Open up your console and go to the Elements tab. Look in there for clues as to what could possibly be taking up space. Maybe you're using a template-engine and didn't realize a <br> was rendering outside of a dynamic <div>. Or maybe you should be targeting a more nested element. Try to think along these lines while troubleshooting.
if display: none; doesn't work you have to add clear: none;
Okay, this is a weird one to me. Here's the HTML element I'm working with:
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
The width of the image's parent element needs to be dependent on the image's size.
I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).
Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)
Check out this great article on the best ways of handling the image-with-a-caption scenario.
Personally this is one of those cases where you gotta suck it up and go with that works.
Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).
What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).
Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)
I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.
Thanks!
Here's a solution that probably does not work for you even though it does produce the layout you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.
I came up with a working and fairly clean solution.
The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:
http://test.dev.arc.net.au/caption-layout.html
Tested and working in IE8, Firefox and Safari/Win
The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).
The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.