I am building a fixed width site, 970px, centered, with a gradient as the surround. Originally the fixed width portion was white with several horizontal areas (menu, search area, product selection area) having a different background. This was accomplished simply with a background color of white for a div that is the next child of the body, which contained all the content of the page, and an override to the background color when needed. This worked fine.
Can I make these horizontal areas have the same background as the gradient, which will obviously be different at different places in the page? I thought I would simply keep the background-color transparent (the default) at all levels until I came to the parent of content I want white, making that parent's background-color #FFFFFF. This works if I specify a height to the area. However, the main body of the website will be of indeterminate height, and must be white (or something other than the gradient!). Are there any techniques through which I can force an element and its contents into a white background without specifying a height on that element?
Thanks.
Thanks for the response. I should clarify with code so that the question is clear. Sorry for that.
Here is sample HTML that illustrates the problem:
<body>
<div id="Page">
<div id="Header">
<div id="HeaderNavigationSection">
<div id="HeaderNavigationMenu">
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
</ul>
</div>
</div>
<div id="HeaderBannerSection">
<a href="#">
<img id="CompanyLogo" alt="Company Logo" src="" height="45" width="200" />
</a>
<p id="BannerSloganOne">Banner Slogan One Text</p>
<p id="BannerSloganTwo">Banner Slogan Two Text</p>
</div>
<div id="HeaderSearchSection">
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label One and Related Search Area</p>
</div>
<div class="HeaderSearchSectionLine">
<p class="HeaderSearchBoxLabel">Search Label Two and Related Search Area</p>
</div>
</div>
</div>
</div>
</body>
First, here is CSS that works, using a page-level white background color and a section level different background color (yellow for illustration). This works throughout my code. I do not show any resets or basic settings. Note that the commented-out CSS for the #HeaderBannerSection is not needed (it appears in the code that doesn't work, which is shown after this code).
html {
height: 100%;
background-color: #D4D4D4; /* surrogate for browser-specific gradient */}
body {
text-align: center;}
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;}
#HeaderNavigationSection {
height: 30px;
background-color: #FFFF00;}
#HeaderNavigationMenu {
display: inline;
float: right;}
#HeaderNavigationMenu li {
display: inline;
float: left;}
#HeaderNavigationMenu li a {
display: inline;
float: left;
margin: 8px 0px 10px 0px;
padding: 0px 10px 0px 10px;}
#HeaderBannerSection {
/*width: 970px;*/
/*background-color: #FFFFFF;*/}
#CompanyLogo {
display: inline;
float: left;
width: auto;
margin: 10px 0px 10px 10px;}
#BannerSloganOne {
display: inline;
float: left;
width: 330px;
margin: 20px 0px 20px 80px;}
#BannerSloganTwo {
display: inline;
float: right;
width: 300px;
margin: 20px 10px 20px 0px;
text-align: right;}
#HeaderSearchSection {
clear: both;
height: 68px;
background-color: #FFFF00;}
.HeaderSearchSectionLine {
clear: both;}
.HeaderSearchBoxLabel {
display: inline;
float: left;
margin: 10px 0px 0px 10px;}
Here are the changes to that CSS that attempt to make the html-level background color (namely the gradient) the default, through transparency, except where specifically overridden where desired (in this example, for the #HeaderBannerSection (with code from above commented out as needed)):
#Page {
width: 970px;
margin: 0px auto 10px auto;
line-height: 1.2;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: left;
/*background-color: #FFFFFF;*/}
#HeaderNavigationSection {
height: 30px;
/*background-color: #FFFF00;*/}
. . .
#HeaderBannerSection {
width: 970px;
background-color: #FFFFFF;}
. . .
#HeaderSearchSection {
clear: both;
height: 68px;
/*background-color: #FFFF00;*/}
This code does not work. The background-color for the section that should be white instead remains the gradient. This is true unless I specify a height for the section, then it all works. But I won't be able to specify the height for the main section (not shown) unless I do a jQuery to determine rendered height and then do a jQuery css height setting (not ideal, and haven't even tried it yet to see if it works). Incidentally, the offending code does work in IE6 and IE7 (at least as rendered in Expression Web 4 SuperPreview).
Thanks again for any help you can give me.
For your banner section try this jsfidle
the min-width property forces the div to have a specific minimum width if the content inside it is not enough to fill it (it will be the specified width by default until the content in it is so much that the div has to expand)
I've changed the background colour so that you can see the actual div # work
feel free to change to #FFFFFF once you are sure you have gotten it correct.
Related
I am using bootstrap 3.0 and the following is my HTML code , I am facing a problem with the background color.
HTML code
<div class="container" id="pictures">
<div class="row">
<div class="col-md-12">
<h1>Collection</h1>
</div>
</div>
</div>
CSS code (I have targeted the H1 tag using this css code)
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 370px;
border-radius: 10px;
margin-top: -65px;
}
Heres the problem , as i size down my browser horizontally , the background color disappears . can somebody tell me why ?
The problem come from the following styles you have applied for h1
margin: 60px 370px;
It means it required minimum (370+370) width to show your h1 tag. Reduce the margin to less number then you can see it in small screens also.
#pictures h1 {
padding:10px 0;
color: #fff;
font-size:60px;
background-color: #f92735;
text-align: center;
margin: 60px 30px;
border-radius: 10px;
margin-top: -65px;
}
DEMO
I have a footer in my webpage with some text in it. When i try to add padding-left property to it, the width of the footer expands over the enclosing parent div element and this problem only happens with Opera and not with Chrome or Firefox or IE.. What should be done to correct it ??
CSS for footer :
footer {
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
}
Instead of adding an extra block level element inside of your footer, you should try the CSS3 box-sizing property with value set to border-box. The following footer definition should probably solve the problem for you:
footer
{
color: #FFFFFF;
background-color: #3399CC;
padding-top: 12px;
padding-bottom: 12px;
width: 100%;
float: left;
box-sizing: border-box; /* prefix accordingly */
}
To read a short introduction, visit the following link: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
you can fix this problem by taking a div inside footer tag and apply padding to that div
<style>
footer {
color: #FFFFFF;
background-color: #3399CC;
width: 100%;
float: left;
}
.footer {
padding-top: 12px;
padding-bottom: 12px;
padding-left:10px;
}
</style>
<footer>
<div class="footer">hello this is footer</div>
</footer>
That's a common sense. If you add "padding" and "width of 100%" you will get that result. Remove the "padding" or the "width of 100%" you will notice the problem no longer exist.
Add div tag between the parent-of-footer and the footer, and add the padding-left to that new div, like this:
<div id="parentOfFooter" style="background-color: #00ff00;">
<div id="paddingLeftProblemSolver" style="background-color: #ff8800; padding-left:50px;">
<div id="myfooter" style="color: #FFFFFF; background-color: #3399CC; padding-top: 12px; padding-bottom: 12px; width: 100%; float: left;">
i'm a footer
</div>
</div>
</div>
I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}
CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.
#bannerText {
line-height: 60px;
}
Is one way..
I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.
Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?