PDA

View Full Version : Simply background css help please



LE1
Feb 1st, 2010, 02:01 PM
Hi,

I am trying to add a tint down the left and right sides of my site.

I am using a 20 pixel image and repeat-y.
But can't get it right.

using two seperate divs outside the container with one position left other position right.?

What is the best way.

abduraooft
Feb 1st, 2010, 02:19 PM
What is the best way. Posting a link to your page would be the best way to convey your issue.

LE1
Feb 1st, 2010, 09:26 PM
Here is a short bit of test code to show whats happening.
Attached is the bg_image.jpg.
Thanks.

<html>
<head>

<style type="text/css">

#left_tint{
background: url(bg_tint.jpg) repeat-y;
width:990px;
height:500px;
margin: 0 auto;
}

#right_tint{
background: url(bg_tint.jpg) repeat-y;
width:990px;
height:500px
margin: 0 auto;
}

#container{
margin: 0 auto;
width:960px;
height:100px;
background:gray;
font-family:verdana, geneva, sans serif;
}


</style>

</head>

<body>

<div id="left_tint">
<div id="right_tint">
<div id="container">

<p>content etc</p>

</div><!---end container--->
</div><!--end left_tint -->
</div><!--end right_tint -->

</body>

</html>

mbaker
Feb 2nd, 2010, 02:59 AM
Here is one possible solution (which requires two new images):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Layout Test</title>
<style type="text/css">
#outer{
width:814px;
margin:0 auto;
}

#left_tint{
background: url(bg_tint-left.jpg) repeat-y;
width:27px;
height:500px;
float:left;
}

#right_tint{
background: url(bg_tint-right.jpg) repeat-y;
width:27px;
height:500px;
float:left;
}

#container{
width:760px;
height:100px;
background:gray;
font-family:verdana, geneva, sans serif;
float:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="left_tint"></div>
<div id="container">

<p>content etc</p>

</div>
<div id="right_tint"></div>
</div>

</body>
</html>

But here is a simpler solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Layout Test</title>
<style type="text/css">
#outer{
width:814px;
height:500px;
margin:0 auto;
background: url(bg_tint.jpg) repeat-y;
}

#container{
width:760px;
height:100px;
background:gray;
font-family:verdana, geneva, sans serif;
margin:0 auto;
}
</style>
</head>
<body>
<div id="outer">
<div id="container">

<p>content etc</p>

</div>
</div>
</body>
</html>

Excavator
Feb 2nd, 2010, 04:14 AM
Hello LEI,
It doesn't need to be quite that difficult. You just need a container the width of your image so you can repeat it on the Y axis. Then you need a container that fits inside the border portions.
The outside container will expand to enclose the inside container which will match whatever content is in it.

Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #FC6;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#outer_box {
width: 814px;
margin: 0 auto;
background: url(bg_tint.jpg) repeat-y;
}
#container {
height: 600px;
width: 760px;
margin: 0 auto;
background: #ccc;
}

</style>
</head>
<body>
<div id="outer_box">
<div id="container">

<!--end container--></div>
<!--end outer_box--></div>
</body>
</html>

LE1
Feb 2nd, 2010, 10:48 AM
Thanks Guys,

:thumbsup:

Excavator
Feb 2nd, 2010, 10:50 AM
Your background image is 814px wide and the 760px div just fits inside it. If you want to change the widths of your site, you'll have to change that image also.

LE1
Feb 2nd, 2010, 10:52 AM
Your background image is 814px wide and the 760px div just fits inside it. If you want to change the widths of your site, you'll have to change that image also.

:o Cheers just spotted that. Thanks again.

LE1
Feb 2nd, 2010, 01:23 PM
Can you help me with another query.
I have been told that for SEO purposes it is better to have more relevent
text nearer the top of the HTML.

But I can not find a way to make this happen.

Here is test sample again.
Please let me know if there is a way to get the main text higher in the HTML?



<head>

<style type="text/css">

#container {
height: 600px;
width: 760px;
margin: 0 auto;
background: #ccc;
position:relative;
overflow:hidden;
}

#head{
width:760px;
height:100px;
background-color:red;
float:left;
}
#main{
width:460px;
height:400px;
background-color:yellow;
float:left;
}
#left{
width:150px;
height:400px;
background-color:blue;
float:left;
}
#right{
width:150px;
height:500px;
background-color:green;
float:right;
}
#top_image{
width:610px;
height:100px;
background-color:gray;
float:left;
}



</style>
</head>
<body>

<div id="container">


<div id="head">
head
<!--end head--></div>


<div id="top_image">
top image

<!--end top image--></div>


<div id="right">
right
<!--end right--></div>



<div id="left">
left
<!--end left--></div>


<div id="main">
main
<!--end main--></div>




<!--end container--></div>

</body>
</html>

mbaker
Feb 2nd, 2010, 06:12 PM
I have been told that for SEO purposes it is better to have more relevent
text nearer the top of the HTML.
...
Please let me know if there is a way to get the main text higher in the HTML?

Here is one solution. I'm sure there are more elegant ways of doing this. This solution is dependent upon the fixed sizes of of the various elements which makes absolute positioning possible.

See below for an explanation and further commentary.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>SEO &amp; CSS</title>
<style type="text/css">

#container {
height: 600px;
width: 760px;
margin: 0 auto;
background: #ccc;
position:relative;
overflow:hidden;
}
#rest {
position: absolute;
top: 0;
}
#head{
width:760px;
height:100px;
background-color:red;
float:left;
}
#main{
position:relative;
top:200px;
left:150px;
width:460px;
height:400px;
background-color:yellow;
}
#left{
width:150px;
height:400px;
background-color:blue;
float:left;
}
#right{
width:150px;
height:500px;
background-color:green;
float:right;
}
#top_image{
width:610px;
height:100px;
background-color:gray;
float:left;
}

</style>
</head>
<body>

<div id="container">

<div id="main">
main
<!--end main--></div>

<div id="rest">

<div id="head">
head
<!--end head--></div>

<div id="top_image">
top image

<!--end top image--></div>

<div id="right">
right
<!--end right--></div>

<div id="left">
left
<!--end left--></div>

<!--end rest--></div>

<!--end container--></div>
</body>
</html>

The changes to your code (marked in red above) are:

Move <div id="main"> to be the first div within <div id="container">, then wrap the remaining divs in a <div id="rest">. Having added this additional container the changes to the CSS are minor.

First in the CSS in #main delete float:left; and add position:relative; top:200px; left:150px;. This will place your main div where you want it. All you need do now is place everything around it. This is easily done by locating the new <div id="rest"> over <div id="container"> by adding:

#rest {
position: absolute;
top: 0;
}
In other circumstances it might have been necessary to insert an empty place holder div to take the place of <div id="main"> to maintain the liquid layout of divs, but in this case that is not necessary.

However having gone through all of that I do question the veracity of the SEO based advice to put the more important content at the top of the page.

The thing that the Search Engines are interested in is the unique content on your pages. Given that on most sites the content of the sections you have labelled "head", "top image", "left" and "right" are very much the same, if not identical on all, or nearly all pages on a website, it is very easy to determine the unique content on each page. The content that is the same (or substantially the same) between pages is not the unique content so can be ignored when looking for the unique content. That being the case, it will be very easy for Search Engines to find you content, whereever you put it on the page.

LE1
Feb 2nd, 2010, 08:46 PM
Michael,

That works a treat.
Thanks for such a detailed post.
I will be checking out your html guide.

Regards SEO I did hear it from a reliable source.
Unless it's a bit of a red herring?
SEO seems to be a bit that way inclined.

Dan.