I have a div (class="sidebar") that I want to display on the right hand side of my content area. I've set the content area as the container, then placed the sidebar inside that, specified height, width, background color and floated it right.
It's displaying in firebug, but not appearing on the screen.
I'm currently learning CSS so any tips/advice on what I'm missing are welcome.
Any advice available will be gratefully received.
Thanks in advance,
Tom Perkins
You can view my code here:
http://jsfiddle.net/tomperkins/v3yqf/
Because HTML elements have transparent background color by default. Giving the element a background color and you can see it immediately:
.sidebar {
background: orange;
}
See: http://jsfiddle.net/v3yqf/3/ ( http://jsfiddle.net/v3yqf/3/embedded/result if your screen is narrow)
Try placing your sidebar div before your content div. Also, you will see it better if you specify background: green instead of color: green ;)
Edit:
So, use
<div class="sidebar"></div>
<div class="content"></div>
instead of
<div class="content"></div>
<div class="sidebar"></div>
Related
I am having trouble achieving the following. I would like to remove the white background color above my nav bar on the following page. http://www.balfourautobody.com/
This way the logo will sit on the brick instead of on white background.
I have been playing around with it but can not seem to figure it out.
I understand that is probably a pretty simple question but I am stuck.
Any help would be much appreciated
The white background belongs to the wrapper element (#wrapper). You would also have to remove the box shadow.
Be aware that doing this will remove your content background as well so you'll have to add another in.
Move your div with id="logo" before div with id="wrapper":
<body>
<div id="logo">
...
</div>
<div id="wrapper">
...
</div>
...
</body>
To remove white space above navbar, add to styles something like this:
#contact-details {
margin: 10px;
}
#header {
min-height: 10px;
}
I am facing with a problem that my top menu overlaps the body. When actually menu must be placed above body.
I've already tried display: block; but it didn't help
Can you look trough it please ?
Here my Demo
Okay, try this. Give the menu div
style="display:table;"
and hope it will solve your issue. Before it doesnot assume any space for div itself, but only for the content and the main div occupies the space right from the top.
Here is the fiddle. I have given there inline css. But I suggest to define a class for menu and put the css in there.
Have you created a container div for the entire page? And then have a background div and a separate menu div?
<div id="page_container">
<div id="background"> Background code
<div id="menu">Menu code
</div>
<div id="body_content">Content in body code
</div>
</div>
</div>
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
I am trying to create header , footer and a side bar that extends throughout the content but I am having problem. I have jsfiddle. but I am unsuccessful creating sidbar that is equal and with the containt in height.
See this answer. The user suggests that you give a large bottom padding and a negative bottom padding of the same amount for the sidebar and main divs. Put a container around your sidebar and main div and hide the overflow in it.
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
Hey now define your sidebar and content bar
width in %
as like this
live demo http://jsfiddle.net/zAYru/5/
I have a div (sub area of page with scroll bar) that has some text, an image and a table.
The background color defined for the div -
<div style="background-color: white">
does not fill the area to the top, the top arrow of the scroll bar is above the area filled with the background color (by about the width of one line). Adding a br at the top fixes it, but moves stuff too far down.
I read two potential solutions. One suggested I set a fixed height for the div. That would require changing the height by trial-and-error every time I changed the content of the page. Next. The other suggestion said to add this at the end, just before the /div -
</div>
<div class="clear"></div>
</div>
but that has no effect.
There are several different pages that get loaded into the scrolling area, using SSI's, and some of those included pages use divs, and some of those are floats and some absolutes.
Thanks for any help.
EDIT
Adding the following, which I didn't realize was needed with the "clear", still doesn't work
<style type="text/css">
.clear {
clear:both;
height:1px;
overflow:hidden;}
</style>
Ad
I just wrote this up and it seems to keep the background color no matter how much content you put in it...
<div style='background:#abc;overflow:auto;'>
<p>a bunch of content goes here</p>
</div>
you can, of course, set a height to that but more likely it would be in some div wrapper...