Forum: web design and graphics community

Celestial Star Forum > Web Development > Coding > Css problem, backgrounds repeating

Pages: [1]

« previous next »

Author

Topic: Css problem, backgrounds repeating (Read 613 times)

melissa

Angeling

Posts: 9

Css problem, backgrounds repeating

« on: February 18, 2008, 08:13:02 PM »

http://ladymisa.com/purple/ < what it looks like right now
http://silvra.deviantart.com/art/Eraian-Purple-Heart-77500956 < How I want it to look like

The Problem: You can look at that. I have one background repeating at the top across, exactly the way I wanted it too. However, there is two others, the footer at the bottom and the content one, the one that is "behind" the content. I need it to repeat across, but every time I put in repeat-x for it, both backgrounds would disappear.

As for the header, it's messed up, but I know how to fix that now. It's just for the background.

Any suggestions on what I can do?


« Last Edit: February 18, 2008, 08:16:16 PM by melissa »	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Css problem, backgrounds repeating

« Reply #1 on: February 18, 2008, 09:03:05 PM »

Could you post your CSS and html codes, and then point to which classes/ids are the problem ones? I've been looking at your stylesheet, but I'm not sure which class is for the troublesome repeater in the center of the page.


	Logged

melissa

Angeling

Posts: 9

Re: Css problem, backgrounds repeating

« Reply #2 on: February 19, 2008, 09:36:39 AM »

This is the first background, repeating across, it's at the top and the only one that does.

body {
   background: #431B3D url(images/top_bkg.jpg) repeat-x;
   cursor: default;
   font-family: verdana, serif;
   font-size: 12px;
   padding: 0px;
   color: #FFFFFF;
   margin: 20px 0px;
}

This is the content bkg, the one with the graident. It should be repeating across and not down.

#layout {
   width: 700px;
   clear: both;
   position: absolute;
   top: 0px;
   left: 0px;
   background-image: url(images/content_bkg.jpg);
}

This background works fine too, it's for the content box and goes down properly.

#content {
   float: left;
   padding-left: 25px;
   background-image:url(images/content_box_bkg.jpg) repeat-y;
}

This is where the footer bkg is supposed to repeat across.

#footer {
   float: center;
   clear: both;
   background-image: url(images/footer_bkg.jpg);
   height: 152px;

As I said, if I type repeat-x to make it go across, the image disappears. Erm, these are the multiple div layers. I have HTML comments right there, to help. Feel free to ask questions. Some of 'em I have multiple divs within one to create something different, like padding, to make text go right, etc.

<div id="layout">
<div id="header">
<img src="images/top.jpg" />
<div id="navigation">

<div id="navi">

   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Graphics</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Information</a></li>
      <li><a href="#">Network</a></li>
   </ul>

</div>
</div>
</div>
<div id="content"> 
<div id="content_top">

<div class="header">


<div class="header_text">
HEADER
</div>

</div>

</div>


<div id="content_footer">
</div>
</div> 

<div id="footer">

      <div id="footer_text">Eraian © 2007-2008 Melissa. All Rights Reserved. No part of this website may be reproduced in any form or by any means. Valid xHTML | Valid CSS | Best viewed in Mozilla Firefox 2.</div>
</div>

</div>


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Css problem, backgrounds repeating

« Reply #3 on: February 19, 2008, 10:18:45 AM »

After an hour of looking at the html and CSS files, I finally found ways to work around the incompatibility between IE and Firefox which will show the layout exactly the same on both browsers. Now, if you don't care about the layout looking good in IE, then change this piece of code:

Code:

#layout { background: url(http://ladymisa.com/purple/images/content_bkg.jpg) bottom left repeat-x;
min-height: 390px;
width: 100%; }

to the exact height of the center repeat background rather than having the min-height option, and change the bottom alignment to top. The point of the bottom and min-height is in IE the bottom aligns the background image away from the top repeating image, so the first doesn't overlap the other. The exact height can't be placed in the id layout because IE will recognize that as the height of the entire div, and not just the background, and will cause the footer to move up and cover the content div. The min-height guarantees the background image will show in Firefox, which requires a height to view the background image. To change the height of either one, merely change both the height of the original image in your editor (photoshop, et al) for IE and change the min-height of the id to push down the background image in Firefox.

Now, to a quick explaination. The divs weren't repeating across the entire page because the encompassing div they were all in (here with the id of layout) was only 700px wide, so they couldn't stretch the entire length of the screen. So first, I entirely took the footer element out of the div and applied a float: left to its id. Then, to make the content div stretch the full length of the screen I applied the width: 100%; to the id layout and placed the content background into the id so it would repeat across the entire page.

To shorten the length of the content area to the original 700px, I created a new encompassing div with the class name newclass and assigned the 700px as its width.

So here's your new codes (you can change the pages as you like):

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="eraian, angelus, angelus tears, melissa gibson, layout, avatars, photography, photoshop, brushes, brush, cs3, patterns, web design, tutorials, kara, graphics, portfolio, digital art, photomanipulation, icon, textures, silvra"/>
<meta name="description" content="Unique and quality graphics as well as resources. Avatars, layouts, stock photography, brushes, tutorials and more."/>
<title>Eraian</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="layout">

<div class="newclass">

<div id="header">

<img src="http://ladymisa.com/purple/images/top.jpg" />
<div id="navigation">

<div id="navi">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Terms</a></li>

<li><a href="#">Information</a></li>
<li><a href="#">Network</a></li>
</ul>

</div>
</div>
</div>
<div id="content"> 
<div id="content_top">

<div class="header">


<div class="header_text">
HEADER
</div>

</div>

</div>

<div id="content_area">
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
</div>
<div id="content_footer">
</div>
</div> 

</div>

</div> 

<div id="footer">
<div id="footer_text">Eraian © 2007-2008 Melissa. All Rights Reserved. No part of this website may be reproduced in any form or by any means. Valid xHTML | Valid CSS | Best viewed in Mozilla Firefox 2.</div>
</div>

</body>
</html>

Code:

/* CSS Document */

body {
background: #431B3D url(http://ladymisa.com/purple/images/top_bkg.jpg) top repeat-x;
cursor: default;
font-family: verdana, serif;
font-size: 12px;
padding: 0px;
color: #FFFFFF;
margin: 0px 0px;
}

div.newclass { width: 700px; }

#layout { background: url(http://ladymisa.com/purple/images/content_bkg.jpg) bottom left repeat-x;
min-height: 390px;
width: 100%; }

#header { float: left;
padding-bottom: 10px;
}
#navigation{
float: left;
padding-top: 0px;
padding-bottom: 10px;
}

#navi ul, #navi li{
background-image:url(http://ladymisa.com/purple/images/navi_button.jpg);
margin:0;
padding:0;
list-style:none;
text-decoration: none;
display: inline;}

#navi li a{
background-image:url(http://ladymisa.com/purple/images/navi_button.jpg);
width:92px;
height: 43px;
float:left;
font: 12px arial, times new roman, verdana;
color: #000000;
text-decoration: none;
text-align:center;
}

#navi li a:hover{
background-image:url(http://ladymisa.com/purple/images/navi_button.jpg);
text-decoration: none;
color: white;
}

#content {
float: left;
padding-left: 25px;repeat-y;
}

#content_top {
background: url(http://ladymisa.com/purple/images/content_top.jpg) no-repeat;
width: 418px;
height: 100px;
clear: both;
}

.header {
background: url(http://ladymisa.com/purple/images/header.jpg);
width: 404px;
height: 47px;
padding-left: 7px;
padding-top: 7px;
}

.header_text {
padding-top: 20px;
padding-left: 10px;
font: 14px Times New Roman, Arial, Jelvetica, sans-serif;
}

#content_area{
float: left;
width: 418px;
background:url(http://ladymisa.com/purple/images/content_box_bkg.jpg);
}

#content_footer {
float: left;
background:url(http://ladymisa.com/purple/images/content_footer.jpg);
width: 418px;
height: 62px;
}

#footer {
float: left;
width: 100%;
background-image: url(http://ladymisa.com/purple/images/footer_bkg.jpg);
height: 152px;
}

#footer_text {
font:10px Arial, Times New Roman;
padding-left: 100px;
padding-top: 50px;
width: 300px;
}


« Last Edit: February 23, 2008, 09:22:55 PM by EternalSorrow »	Logged

melissa

Angeling

Posts: 9

Re: Css problem, backgrounds repeating

« Reply #4 on: February 23, 2008, 01:02:22 PM »

Thank you so much! I really appreciate it! Well I do care at least, Firefox and IE are the most used. Though sometimes trying to make it work for IE is a pain in the butt, I generally can get it to work for IE 7 but nothing lower.


	Logged

EternalSorrow

Retribution

Posts: 162

Got milk duds?

Re: Css problem, backgrounds repeating

« Reply #5 on: February 23, 2008, 09:24:36 PM »

No problem, just glad I could help.


	Logged

Pages: [1]

« previous next »

Jump to:

Forum: web design and graphics community

General

Art boards

Web development

Off-topic