PDA

View Full Version : Repeat-X does not span the page?



Serialcode
Oct 13th, 2009, 10:26 PM
Hello,

I have done a few searches around to see if there was already a thread related to my problem. Maybe I'm not using the right words to search, so I apologize if I didn't find the thread that I'm sure already exists about this issue.

So here's what's going on. I'm work on a header where I have an image-based repeating top, middle or main section, and bottom. Within the main section, I have our website logo and a permanent menu consisting of linked images.

Now, I made all three images (top, middle, and bottom) repeat very well in an image editor. I also coded it so the logo and menu appear and are spaced correctly within the middle part of the header image.

Everything is looking really good, except I want the repeating top, middle, and bottom to span the entire page. I originally had them absolutely positioned in CSS but I switched it to relative and cannot seem to get this 30px or so gap to go away between the top, middle, and bottom divs and the right side of the browser page.

I'm rendering using Safari for Mac OS X.

Here's the appropriate HTML and CSS code:

CSS

#htop {

margin-right: 0px;

margin-left: -10px;

margin-bottom: 0px;

margin-top: -10px;

width: 100%;

float: none;

left: 0%;

background-image: url(./images/hbg_top.png);

height: 8px;

top: 0%;

position: relative;

background-repeat: repeat-x;

}

#hmain {
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: -10px;
left: 0%;
position: relative;
text-align: center;
text-overflow: clip;
text-color: white;
word-wrap: break-word;
font-family: sans-serif;
height: 102px;
width: 100%;
background-image: url(./images/hbg_main.png);
background-repeat: repeat-x;
}

#htitle {
margin-top: -8px;
top: 0%;
width: 306px;
margin-left: -153px;
left: 50%;
position: absolute;
}

#hmenu {
top: 53px;
width: 720px;
margin-left: -359px;
left: 50%;
position: relative;
}

#hbottom {

margin-bottom: 0px;

margin-right: 0px;

margin-left: -10px;

margin-top: -12px;

width: 100%;

float: none;

left: 0%;

background-image: url(./images/hbg_bottom.png);

height: 8px;

top: 0%;

position: relative;

background-repeat: repeat-x;

}

HTML


<div id="htop"> </div>
<div id="hmain">
<div id="htitle">
<a href="http://www.countylinegaming.com/"><img src="./images/clg.png" border="none" alt="none"/></a>

</div>
<div id="hmenu">
<a href="http://www.countylinegaming.com/hoody" onMouseOver="rollover('hoody')" onMouseOut = "rollout('hoody')" >
<img src="./images/h_off.png" border="0" name="hoody" alt="HoodyMage" />
</a>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("./images/h_on.png");
//-->
</SCRIPT>

<img src="./images/spacer.png" width="15" border="0" alt="none" />

<a href="http://www.countylinegaming.com/quady" onMouseOver="rollover('quady')" onMouseOut = "rollout('quady')" >
<img src="./images/q_off.png" border="0" name="quady" alt="Quadraxis14" />
</a>
<SCRIPT TYPE="text/javascript" >
<!--
setrollover("./images/q_on.png");
//-->
</SCRIPT>

<img src="./images/spacer.png" width="10" border="0" alt="none" />

<a href="http://www.countylinegaming.com/jason" onMouseOver="rollover('jason')" onMouseOut = "rollout('jason')" >
<img src="./images/j_off.png" border="0" name="jason" alt="Jason's Groove Machine" />
</a>

<SCRIPT TYPE="text/javascript">
<!--
setrollover("./images/j_on.png");
//-->
</SCRIPT>

<img src="./images/spacer.png" width="12" border="0" alt="none" />

<a href="http://www.countylinegaming.com/slightlyamiss" onMouseOver="rollover('amiss')" onMouseOut = "rollout('amiss')" >
<img src="./images/am_off.png" border="0" name="amiss" alt="SlightlyAmiss" />
</a>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("./images/am_on.png");
//-->
</SCRIPT>

<img src="./images/spacer.png" width="28" border="0" alt="none" />

<a href="http://www.countylinegaming.com/applegod" onMouseOver="rollover('apple')" onMouseOut = "rollout('apple')" >
<img src="./images/ap_off.png" border="0" name="apple" alt="Applegod" />
</a>
<SCRIPT type="text/javascript">
<!--
setrollover("./images/ap_on.png");
//-->
</SCRIPT>

<img src="./images/spacer.png" width="10" border="0" alt="none" />

<a href="http://www.countylinegaming.com/thera" onMouseOver="rollover('thera')" onMouseOut = "rollout('thera')" >
<img src="./images/t_off.png" border="0" name="thera" alt="Thera" />
</a>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("./images/t_on.png");
//-->
</SCRIPT>
</div>
</div>
<div id="hbottom"> </div>


Also, here's an image that illustrate my problem.

http://www.thebluescreen.org/zams/html.png

Fisher
Oct 13th, 2009, 11:19 PM
Replace your CSS with this:

* {
margin:0;
padding:0;
}
#htop {
background-image: url(./images/hbg_top.png);
height: 8px;
position: relative;
background-repeat: repeat-x;
}
#hmain {
position: relative;
text-align: center;
text-overflow: clip;
color: white;
word-wrap: break-word;
font-family: sans-serif;
height: 102px;
background-image: url(./images/hbg_main.png);
background-repeat: repeat-x;
}
#htitle {
width: 306px;
margin-left: -153px;
left: 50%;
position: absolute;
}
#hmenu {
top: 53px;
width: 720px;
margin-left: -359px;
left: 50%;
position: relative;
}
#hbottom {
background-image: url(./images/hbg_bottom.png);
height: 8px;
position: relative;
background-repeat: repeat-x;
}

The reset at the beginning might cause some funky changes to the rest of your page, but better to deal with it now than later.

Serialcode
Oct 13th, 2009, 11:40 PM
Thank you so much, Fisher. Didn't screw up too much and what it did was an easy fix.


Thanks again!

Scriptet
Oct 13th, 2009, 11:43 PM
All DIV's are 100% width by default, as with all block elements, so you don't need to specify this unless positioning the element absolutley.
Float none is also the default, unless you are generically applying floats for some reason, but you're not in this case.

Also having the negative margin, shoves it 10px from the left, so already it's going to repeat across the screen for 100% - the 10px, hence why it won't reach the end.

Also just to add the reset is fine, unless you have forms on your page whereby it might reset some things which cannot be gained back from what I have read.

Serialcode
Oct 14th, 2009, 02:38 AM
All DIV's are 100% width by default, as with all block elements, so you don't need to specify this unless positioning the element absolutley.
Float none is also the default, unless you are generically applying floats for some reason, but you're not in this case.

Also having the negative margin, shoves it 10px from the left, so already it's going to repeat across the screen for 100% - the 10px, hence why it won't reach the end.

Also just to add the reset is fine, unless you have forms on your page whereby it might reset some things which cannot be gained back from what I have read.

This makes sense, actually, now that your post made me think. For some reason, I had repeat-x on the images but it wouldn't line up with the left side of the page unless I had a negative margin. Not sure what I messed up before, but it's all fixed now.