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;
}
Related
I want to create a small white div/background at the top of this site.
http://bit.ly/ZgawU6
The front page shows it correctly, however I've made this with a background-image. When the same background image is used on a page like this: it's at 50% or something, and top:0 won't work.
Can anyone point me in the right direction?
Thanks!
http://bit.ly/1311wSB
What I did was wrap the div with the class of navigation container with another wrapper div, lets call it outer-navigation-wrapper then applied this css.
HTML:
<div class="outer-navigation-wrapper">
<div class="container navigation-container">
...
</div> <!-- end navigation-container -->
</div> <!-- end outer-navigation-wrapper -->
CSS:
.outer-navigation-wrapper {
background: #fff;
height: 60px;
}
So, quickly typing this, so sorry if it's kinda vague/confusing.
So, I have a bar I am using css on the bottom of the screen, and I have a divider above it. I try to use height 100% on the divider to get the height to go all the way to the bottom, but it goes under the bar, and I want it not under the bar. How would you guys suggest I do this? I would prefer a css method, but javascript would be fine too.
If you have any padding on that divide, it will be added to the 100%. Thats probably your question.
Something like this maybe:
<style>
.one {
height:100%;
display:block;
}
.two {
padding: 20px;
}
</style>
<div class="one">
<div class="two">
</div>
</div>
I have a #info div element which shows some text strings like below:
<body>
...
<div id="info">
ABCDEFGHIJKLMNOPQRSTUVWXYZ ...
</div>
</body>
I would like to CSS the #info div to position it at the bottom center of the page, so I did the following thing:
#info{
width:100px;
margin:0px auto;
}
With the above CSS, the #info div is on the bottom center of the page, BUT only part of the text strings are showing (only shows '...' without the 'ABCDE..' showing).
I thought it maybe because of the width:100px is not enough to show all the texts, so I change to width:200px, but surprisingly after I increase the width, nothing was showing on the bottom center at all. Why?
-------------------- UPDATE ------------------
I have another div above the #info div, if this is the reason, then I would like to ask how to CSS the #info div to locate it below the upper div?
My best guess is that you have something above it that is overlapping and hiding part of the DIV. With the current text, it is splitting on the space between the letters and the dots, putting the dots on a second line. That part of the DIV is displaying below something else with the first part being hidden. When you increase the width to 200px it's wide enough to fit everything on one line and all of it disappears. You might want to try adding a clear: both and see if that pushes it below whatever is hiding the text. Sometimes adding a border (or using outlining of elements with a browser developer plugin) can help diagnose what is going on. Check your z-index as well to make sure that you have things in the proper plane to do what you want.
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<section>
<div id="info1">
asdgfawregawregawregawregawregawregaweg
</div>
<div id="info2">
asdgfawregawregawregawregawregawregaweg
</div>
</section>
</body>
</html>
css file:
#info1 {
color: red;
}
#info2 {
width:100px;
margin:0px auto;
}
So... all displayed.
Maybe you give not enough information...
I had this issue, I accidentally set font-size:0 to zero in body and Html , once I removed it text where visible
Trying to put a div id inside another div id, but having problems. The html is simple enough, a div inside a div with two closing divs beside each other, but I can't for the life of me get the css correct. I feel really silly asking such a newbie question, please help. I want the css to display the html with the outer container with a background color that shows around the outside of the inner container.
Can you give me an example of the css required for this? Thanks for your help, -Matthew
Here you have example on JSFiddle:
http://jsfiddle.net/JXUeF/1/
if your html looks like this (this is how i understood your description):
<div id="outer">
<div id="inner">
some content here
</div>
</div>
your css should look like this:
#outer{
background-color: red;
padding: 5px;
}
#inner{
background-color: blue;
}
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>