Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Basic Layout Problem 1

Status
Not open for further replies.

joecdn

Programmer
Oct 28, 2003
47
CA
I'm trying to do a basic layout ... I didn't think this part would be so tedious. I'm having the following problems with having it display across the screen regardless of what resolution you have your computer set to.

I created a style sheet where I wanted to have a background to repeat horizontally. Basically I cropped a portion of the banner I created. The entire thing lies in a table that's a 100% wide. I inserted the actual banner .gif file and set the style sheet to repeat with the portion I cut out. So that when you look at it, it should display the image, but if your resolution is set high, it should continue on. Anyway, the problem I'm having is the alignment. The cropped portion that repeats is sitting higher then the image, revealing a little bit of the background color of the entire page. Does anyone no why that is? Also, to add to the display, is there a way I can have buttons on the end, so that it still stays at the end regardless of the resolution? Hopefully this makes sense. Any insight would be great.

Thanks in advance
 
post a link (or a code) as it is worth 1000 words ;-)

> need more info?
:: don't click HERE ::
 
Here's the code ... Hopefully it makes sense

<table width=&quot;104%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td><table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<!--DWLayoutTable-->
<tr>
<td class=&quot;unnamed2&quot;><img src=&quot;nlwebpage.gif&quot; width=&quot;800&quot; height=&quot;145&quot;></td>
<td align=&quot;right&quot; valign=&quot;top&quot; class=&quot;unnamed2&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td><img src=&quot;contact.gif&quot; width=&quot;105&quot; height=&quot;28&quot;></td>
</tr>
<tr>
<td><img src=&quot;login.gif&quot; width=&quot;105&quot; height=&quot;28&quot;></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=&quot;unnamed1&quot;> <table width=&quot;500&quot; height=&quot;24&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr>
<td width=&quot;50&quot;><img src=&quot;spacer.gif&quot; width=&quot;50&quot; height=&quot;1&quot;></td>
<td width=&quot;37&quot;>Home</td>
<td width=&quot;54&quot;>Products</td>
<td width=&quot;59&quot;>About Us</td>
<td width=&quot;59&quot;>Locations</td>
</tr>
</table></td>
<td class=&quot;unnamed1&quot;><!--DWLayoutEmptyCell--> </td>
</tr>
</table></td>
<td> </td>
</tr>
</table>
 
so its a table.....
width=&quot;104%&quot;
---?? 104% = just to be on a safe side ? :)

&quot;I inserted the actual banner .gif file and set the style sheet to repeat with the portion I cut out. &quot;

-- u dont need to insert an image....CSS will handle/hold the image and do the tiling
now....we need to look into your CSS code!

u want this image to &quot;expand&quot; along with the table? or the opposite?
it would help if u had an URL so we can really see this image...
anyway, post the CSS portion.
All the best!


> need more info?
:: don't click HERE ::
 
Yeah, I'm not sure why it said 104%, it must have changed when I was doing some adjusting and I didn't notice it, but it should be 100% and I put it back. Anyway, here's the .css code. I didn't want to put this on the online site yet because I'm doing this from scratch and I wanted to wait until I get a solid web page first. People still go to our current one.

I don't want the image to expand, but I would like to have the 2 buttons (soon to be buttons) to adjust so that they're always positioned on the right hand side.

.unnamed1 {
background-image: url(maroon%20banner.gif);
background-repeat: repeat-x;
}
.unnamed2 {
background-image: url(bg.gif);
background-repeat: repeat-x;
}
 
A ha .....now we'r onto something and more that I think about it....u should not need any CSS and u could use only table propeties ( a few nested tables) to get your &quot;look&quot;
Read through James' example:


and let me know if it helps....if not then we can monkey out way arround it ;-)
All the best!

> need more info?
:: don't click HERE ::
 
Thanks for your help, that seemed to have worked out better. The tutorial was very good as well. I probably will end up using a CSS anyway because there's other things I want to add to it like font styles, size, mouse over's, etc. But, I appreciate your help.
 
I though u might have been going for that effect ;-)
glad to hear it worked out!
All the best!

> need more info?
:: don't click HERE ::
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top