Background Image Alignment

[peteyb]

Hi all

I am using css to display my background image. As you can see from the attached file, the image is a blue fading to white then back to blue.

The image is 1920 x 1080 pixels. I have had to shrink it to upload it though.

I need the image to sit horizontally between the two edges of the browser.

All I am getting at the mo is the left part?

http://www.tigltd.com/v3

Any ideas?

[Centauri]

body {
width: 100%;
background: white url(http://www.tigltd.com/v3/images/bg.gif) no-repeat center top;
font: 70% Arial, sans-serif;
}

I would also recommend making the graphic much shorter, say 10px high, and changing the style to:body {
width: 100%;
background: white url(http://www.tigltd.com/v3/images/bg.gif) repeat-y center top;
font: 70% Arial, sans-serif;
} This will result in faster image load

[peteyb]

this still does not accomplish the blue sitting against either side of the browser?

[Centauri]

If you want the blue fade effect starting from each side and fading towards the centre, you will need two images, one for left and one for right. This will require a wrapper div surrounding the whole site to apply the second image to, though.

[peteyb]

is this good coding practice?

if so how do you do it?

[Centauri]

Bit hard to test and advise when the images don't seem to exist on the server....

You need to apply one image to the body and the other to the #back div

[peteyb]

the images are bg1.gif for the left and bg2.gif for the right.

[Webnerd]

It is actually better to establish a fixed horizontal width and center your content nowadays since monitors are getting so huge. You don't want a paragraph that reads from left to right with 1000 characters, it would be impossible to read.

It is nice that some sites will expand full screen but this can also create huge areas of empty and useless real estate on the page.

[Centauri]

The #back div is not expanding past the header as you need to clear the floated contents - the overfow property can do that. You also need to not specify a background colour for #back, as this will cover the body background.div.back {
overflow: hidden;
background: url(http://www.tigltd.com/v3/images/bg2.gif) repeat-y right top;
}The images are also way too wide - if you want the page to be able to work down to 800px screens, each image should be no wider than about 390px.

[kiwibrit]

It is actually better to establish a fixed horizontal width and center your content nowadays since monitors are getting so huge.....

I think there is a case for using max-width (supported by IE7) - though I suspect many high-resolution monitors use a smaller window for browsing the web. If max-width is set at a reasonably high value, and you are using margin:0px auto; for centering, there is no need to worry about IE5, since the residual users of that browser are unlikely to have a monitor that would cause them the problem.

[peteyb]

many thanks for the advice.

i have implemented Centauri's option but now the image stops repeating after my second text div.

http://www.tigltd.com/v3

[peteyb]

any ideas guys

[Centauri]

To get the back div to be a minimum 100% height of the screen, it needs to reference that 100% to the height of its parents, the body and html, neither of which have a reference height set. Therefore setting the height of body and html to 100% first will give that reference. As you need the height of the back div (that is really a bad name - I would call it "wrapper", and make the name an id rather than a class) to be a minimum height of 100%. As IE6 doesn't understand that, it needs to be fed the 100% height through a * html hack.

I also mentioned that the width of the background graphics needs to be such that you don't get an overlap on smaller screens - a cropped version of bg2 is attached here.

Besides all that, there are numerous other problems - the footer overlaps content when content is long or screen size is small, the right column drops when screen size is smaller, the menu is a complete mess in FireFox, and doesn't drop in IE6....

Turning first to the footer, absolute positioning does not work as it is then not pushed down by the content if necessary. It needs to be outside the #wrapper (I will call it that now), and have a negative top margin applied to pull it back over the bottom of #wrapper to sit at the bottom of the screen. To do this, it needs to be one div with a defined height. Your existing #footer and #bottom divs can be easily combined into one, containing only the ul and a paragraph for the bottom text, eleiminating a number of divs and id's in this area. As this can overlap the content, a padding div can be placed after the floated columns to both clear the floats and provide the necessary space for the footer.

The content columns are a problem due to the mixture of em-sized margins and % size of the divs - at smaller screen sizes, the total width is more than 100%. This can be addressed by giving the margins in % values, and defining the margins in the centre to be zero. Next, your content consists or headings and paragraphs - so mark it up that way. This eliminates the <br>s, the not widely supported :first:line psuedo class, and a few more divs.

The menu doesn't work as you probably designed it relying on IE's bugs (yes, that includes IE7). An inline element like an <a> cannot be given a width - it must be set to block level for that. The easiest way is to float the <a>s left (which also gets around IE6's buggy behaviour using blocks inside inline <li>s), and floating the <li>s as well. The <ul> can then be assigned a width and given auto side margins to centre it.

The revise html I came up with is :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Insurance Group - Independent Insurance Brokers</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="revisit-after" content="30 days" />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<link rel="stylesheet" type="text/css" href="style/dropHeader3.css" />
<link rel="stylesheet" type="text/css" href="style/bodyPage.css" />
<link rel="stylesheet" type="text/css" href="style/footer.css" />
<link rel="stylesheet" type="text/css" href="style/niftyCorners.css" />


<script type="text/javascript" src="functions/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("ul#nav a","small transparent top");
}
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<div id="placement">
<img src="images/logo.gif" alt="The Insurance Group - Independent Insurance Broker" /><br />independent insurance broker
</div>
</div>
<div id="nav">
<ul>
<li id="home" class="activelink"><a href="#">homepage</a>
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">recent news</a></li>
<li><a href="#">meet the team</a></li>
<li><a href="#">vacancies</a></li>
<li><a href="#">office locations</a></li>
<li><a href="#">contact form</a></li>
</ul>
</li>
<li id="who" class="activelink"><a href="#">personal insurance</a>
<ul>
<li><a href="#">about personal</a></li>
<li><a href="#">car insurance</a></li>
<li><a href="#">caravan insurance</a></li>
<li><a href="#">commercial vehicle</a></li>
<li><a href="#">house insurance</a></li>
<li><a href="#">marine insurance</a></li>
<li><a href="#">motorcycle insurance</a></li>
<li><a href="#">public liability</a></li>
<li><a href="#">travel insurance</a></li>
</ul>
</li>
<li id="prod" class="activelink"><a href="#">commercial insurance</a>
<ul>
<li><a href="#">about commercial</a></li>
<li><a href="#">fleet insurance</a></li>
<li><a href="#">motor traders</a></li>
<li><a href="#">property owners</a></li>
<li><a href="#">taxi insurance</a></li>
</ul>
</li>
<li id="serv" class="activelink"><a href="#">claims advice</a>
<ul>
<li><a href="#">about claims</a></li>
<li><a href="#">claims procedure</a></li>
<li><a href="#">your responsibility</a></li>
<li><a href="#">claim notification</a></li>
<li><a href="#">regulatory information</a></li>
</ul>
</li>
<li id="cont" class="activelink"><a href="#">contact us</a></li>
</ul>
</div>
<div id="pageleft">
<h2>Welcome to The Insurance Group's CSS Website</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc rhoncus gravida ipsum. Morbi mollis ipsum gravida dolor. Nam id velit venenatis eros iaculis scelerisque. Fusce ornare adipiscing mi. Vivamus ac est quis quam adipiscing semper. Aliquam ultricies tortor. Maecenas condimentum tortor nec eros eleifend tincidunt. Sed lectus. Phasellus ac leo eget libero varius tincidunt. Nunc leo orci, vehicula id, facilisis vel, sagittis eget, ipsum. Morbi volutpat ipsum nec elit. Vivamus eleifend molestie sapien. Pellentesque leo pede, condimentum in, ultricies ut, porta a, nunc. Mauris tristique.</p>
<p>Nunc tellus. Aliquam quam. Pellentesque tellus sapien, mattis in, ultricies non, ultrices sed, odio. Nunc nisl justo, viverra vitae, feugiat ut, congue sit amet, est. Proin tempus libero at urna. Quisque in quam. Donec euismod gravida mauris. Proin ut felis placerat velit egestas ultricies. Integer nec orci. Quisque feugiat venenatis risus. Vestibulum ultrices lectus eu ipsum. Nulla in erat. Vestibulum sed dui. Aliquam vehicula fringilla tellus. Proin nec massa. Phasellus rhoncus lacinia augue. Mauris velit mauris, pretium facilisis, tempus ac, dignissim nec, velit. Nunc ut sapien sed purus euismod commodo.</p>
</div>
<div id="pageright">
<h2>Welcome to The Insurance Group's CSS Website</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc rhoncus gravida ipsum. Morbi mollis ipsum gravida dolor. Nam id velit venenatis eros iaculis scelerisque. Fusce ornare adipiscing mi. Vivamus ac est quis quam adipiscing semper. Aliquam ultricies tortor. Maecenas condimentum tortor nec eros eleifend tincidunt. Sed lectus. Phasellus ac leo eget libero varius tincidunt. Nunc leo orci, vehicula id, facilisis vel, sagittis eget, ipsum. Morbi volutpat ipsum nec elit. Vivamus eleifend molestie sapien. Pellentesque leo pede, condimentum in, ultricies ut, porta a, nunc. Mauris tristique.</p>
<p>Nunc tellus. Aliquam quam. Pellentesque tellus sapien, mattis in, ultricies non, ultrices sed, odio. Nunc nisl justo, viverra vitae, feugiat ut, congue sit amet, est. Proin tempus libero at urna. Quisque in quam. Donec euismod gravida mauris. Proin ut felis placerat velit egestas ultricies. Integer nec orci. Quisque feugiat venenatis risus. Vestibulum ultrices lectus eu ipsum. Nulla in erat. Vestibulum sed dui. Aliquam vehicula fringilla tellus. Proin nec massa. Phasellus rhoncus lacinia augue. Mauris velit mauris, pretium facilisis, tempus ac, dignissim nec, velit. Nunc ut sapien sed purus euismod commodo.</p>
</div>
<div id="bottompad"></div>
</div>
<div id="footer">
<ul>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">terms of business</a></li>
<li><a href="#">sitemap</a></li>
</ul>
<p>&copy; 2007 The Insurance Group | Registered in England No. 2080712
<br /> Registered Office: 114-116 Ridgeway, Plympton, Plymouth, Devon PL7 2HN</p>
</div>
</body>
</html>
Css next post.

[Centauri]

The modified css files I used are :
dropHeader3.css :html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font: 70% Arial, sans-serif;
background-color: white;
background-image: url(../images/bg1.gif);
background-repeat: repeat-y;
background-position: left top;
}
#wrapper {
min-height: 100%;
background-image: url(../images/bg2.gif);
background-repeat: repeat-y;
background-position: right top;
}
* html #wrapper {
height: 100%;
}
#logo {
background: #95b3d7;
margin-top: 1em;
text-align: center;
margin: 0;
padding: 0;
}
#placement {
padding: 1em 0em;
margin: 0;
font: 2em "Times New Roman";
color: white;
text-transform: capitalize;
}
div.overload {
text-align: center
}
#nav {
padding: 1.5em 0 0 0;
background: #bbd9ee;
border-bottom: 1px solid #09539e;
height: 2.4em;
}
#nav ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 51em;
}
#nav li {
position: relative;
float: left;
margin-right: .2em;
}
#nav a {
width: 10em;
background: #e7f1F8;
text-decoration: none;
color: #09539e;
float: left;
text-align: center;
text-transform: capitalize;
height: 2.4em;
line-height: 2.4em;
}
#nav a:hover {
background: #d6e3bc;
color: #fff;
}
#nav li.activelink a, #nav li.activelink a:hover {

}
#nav li ul {
display: none;
position: absolute;
top: 2.4em;
padding: 0 0;
margin: 0 0;
left: -1px;
width: 10em;
border: 1px solid #09539e;
border-top: 0;

}
#nav li li {
height: 2.4em;
line-height: 1.5;
font-size: 1em;
text-transform: capitalize;
}
#nav li:hover ul, #nav li.navHeader ul {
display: block;
}

The bodyPage.css :div#pageleft, div#pageright {
width: 45%;
margin: 5em 2% 2em 2%;
padding: 0.5em 0.5em 0.5em 0.5em;
border: 1px solid black;
text-align: justify;
font-size: 1.1em;
display: inline;
}

div#pageleft {
float: left;
margin-right: 0px;
}

div#pageright {
float: right;
margin-left: 0px;
}

h2 {
font-size: 1.6em;
color: #09539e;
text-decoration: underline;
font-weight: normal;
margin: 0;
padding: 0;
}
#bottompad {
clear: both;
height: 6.5em;
}
and the footer.css :#footer {
height: 6.5em;
background: #365f91;
text-align: center;
margin: -6.5em 0 0;
padding: 0;
}
#footer ul {
margin: 0;
padding: 0;
background-color: #d6e3bc;
}
#footer li {
margin-right: 3px;
display: inline;
list-style: none;
}
#footer a {
padding: 0 0.6em;
background: #d6e3bc;
text-decoration: none;
color: #09539e;
line-height: 2.5em;
text-transform: capitalize;
}
#footer a:hover {
background: #e7f1F8;
text-decoration: underline;
border: 1px dashed #09539e;
padding: 0.5em 0.5em;
margin: 0;
}
#footer p {
text-align: center;
font: 1.2em/1.2 "Times New Roman", arial bold;
color: white;
margin: 0;
}


Cheers
Graeme

PS: Now all you need to do is get the menu hover working in IE6 - I would suggest the suckerfish method.

[peteyb]

I dont know where to start, thank you.

1. I had heard of "hacks" but did not understand their meaning or implementation - are there any other widely known hacks that are needed for day to day CSS development?

2. How can I install IE6 and IE7 on the same PC?

3. Thanks for the advice on the footer, I will etch this method into my brain for future!!

4. The method I used for this drop down was a mixture of niftyCube (for rounded corners) and Suckerfish (for the hover drop down). I think that there must be some duplication of code or I have deleted something which is causing IE6 problems.


Regards

Peter

[Centauri]

I see the suckerfish javascript now in the navHeader.js file. i think the problem may be in the niftycube javascript onload() over-riding the suckerfish onload() - you may need an onload() function to run both scripts. As I am not really a javascript person, it may be wise to ask the question on the javascript forum.

A "hack" is just a method of doing something non-standard that can target particular browsers. In the case of IE6, it thinks there is another wrapper outside of the html element, so it can be targeted using * html. meaning an html element within any other element - "proper" browsers will ignore this as it doesn't make sense, but IE6 will happily accept it.

Here (http://tredosoft.com/Multiple_IE) is one article on running multiple versions of IE.

Some other articles on IE hacks are here (http://www.positioniseverything.net/explorer.html) and here (http://www.howtocreate.co.uk/wrongWithIE/)

[peteyb]

Im begining to understand why developers do not like IE!!!!

Do you not think the font quality looks better in IE though?

The drop downs are working in IE6 but with a sligh defect - there is a visible gap between the li and the border. Any ideas?

[peteyb]

also, how are you able to see inside my stylesheet references, these details are not displayed in the view source option

[Centauri]

There is also a problem in FF where the dropdown border is only on the left side. As you have increased the <a> width to 15em, this also needs to be applied to the dropdown <ul>s - IE incorrectly expands the <ul>s to fit the content. As IE expands the <ul>, it also then makes room for the right padding inhereted from the top <li>s, so we also have to get rid of that :#nav li ul, #nav li ul ul {
display: none;
position: absolute;
padding: 0 0;
width: 15em;
border: 1px solid #09539e;
left: -1px;
}

#nav li li {
height: 2.4em;
line-height: 1.5;
font-size: 1em;
text-transform: capitalize;
margin: 0;
}

To view the css without any other tools, from the view source it is simply a matter of copying the css url and pasting in the browser bar. I use the Web Developer Toolbar addon for FireFox, so a click on an icon and view css displays all the css files active.

[peteyb]

yet again, thanks.

one last bit of help if you dont mind. I have added a second level drop down on the home insurance tab.

It works in IE7, FF and Opera but not IE6?