Jump to content

Release Cellwidth?


span
 Share

Recommended Posts

Hi,I've got an issue i cant work around, i guess i lack the knowledge or it might just not be possible? Anyway. I want to repeat an image inside a selected cell, simple enough, the tricky part is that the cell I'm working with wont cooperate. I've tried many different ways of doing this but i cant seem to get it right, here is an image that demonstrate my problem.workinprogress.jpgIsn't there a way to release the cellwall, so that it expands all the way to the left? I've tried setting the cell width to 100%, but it doesn't work. My thought was that the repeat-x will adjust to your screen resolution. I'd be great full for any type of help!

Link to comment
Share on other sites

If you are discussing the width of a table cell, you are restricted by all the other width and positioning definitions that construct the table. If any elements are fluid (no defintion, which allows them to expand or contract), they will expand from left to right, not right to left. If you want something to move leftwards, you'll need to redefine the whole table, I think.If an element inside a table cell has relative positioning, and a negative value for the left coordinate, it might be able to bust leftwards. I do not think you can apply that concept to the cell itself, however. I've never tried it, but it would surprise me.When you use tables as a framework for laying out your page, you must accept certain limitations.

Link to comment
Share on other sites

Thank you Deirdre's Dad. To bad i didn't know about this earlier! What would you recommend, is there any way to get passed this? The thing is that I've constructed the whole layout in photoshop, and as default it's saved into a html document with images and cells.

Edited by span
Link to comment
Share on other sites

A quick test in Firefox, Safari, and Chrome reveals that a div positioned inside a table cell will adjust itself leftward, out of the cell, if its margin-left property has a negative value. So in principle, any content that is now in your cell could be wrapped in a div element. The div should automatically fill the cell horizontally. The div's height can be set to 100% so it fills the cell vertically.I don't know if that helps. I don't know if it works in other browsers.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Let's try something much simpler. This may not be exactly what you want, but it might be close. I'm suggesting a background div behind your table, exactly the height of your banner. The CSS might look like this:

#bannerbg {   height: 236px;   width: 100%;   background-color: #5C665B;   border-bottom: solid 1px #000;   position: absolute;   z-index: -1;}

Add the following HTML immediately after your body tag, before your table tag:

<div id="bannerbg"></div>

Now, if you figure out how that works, you'll notice that your banner actually has multiple borders, and that the side color is a gradient, not a solid block. So maybe a solid color looks a little off. So a better set up would be to create an image with those details, 1px wide, and use it as a repeating background. It could be a background for the div above, or even a background for the body element, positioned at top-left, repeat-x. If you do that, you won't need the div at all.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Great stuff! This actually resolved my header problem, many thanks :) However, one issue still remains, thats the footer part.. the thought is to have the same repeat function of the green thick layer. And best thing would be if it followed the page as text push it downwards. Make it "absolute bottom" or something that rhymes with that?

Edited by span
Link to comment
Share on other sites

Ok, thought i was passed this but it seems like im stuck again. This time it's a browser problem. As usual, when you run IE with the website i get all sorts of different problems. The div banner stop repeating itself right next to the left side of the header logo. Any ideas? I did as you suggested with the footer and its very solid. Too bad you cant have to backgrounds in one page :)Website

Edited by span
Link to comment
Share on other sites

It's not the background image. The div itself is offset 11px from the edge of the frame. And I don't know why.I won't know why, either. At first I thought this would be an easy cheat. And in Firefox, it turned out that way. But the bottom line is that your code is very old-school. And that makes it unpredictable. Difficult -- maybe impossible -- to straighten out using conventional techniques. You'd almost have to stumble on a solution by guess and by golly.Near as I can tell, your choice comes down to this: live with what you have (which is not terrible) or take it all apart and start over, doing things the right way. Which is not a pleasant choice for you. Judging from what you have now, you're looking at a steep learning curve.So, how deep into the waters do you want to swim? :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...