Struggling to convert tables to CSS

Skelbo · #21 (**permalink**) Aug 10th, 2007, 21:48

The Devil's in the details.

I just noticed that your URL has no single quotes around it.

Meh.

Try this:

background:url('/gfx/layout2007summer/scroll_middle.jpg')

That should cure what ails ye...

wickedmoon · #22 (**permalink**) Aug 10th, 2007, 22:16

That doesn't do it. I was reading this article also, http://www.yourhtmlsource.com/styles...ckgrounds.html, and it advises against quotes. I assume single and double-quotes will be treated the same in this instance.

So do tables win out in the end?

Skelbo · #23 (**permalink**) Aug 10th, 2007, 22:26

NO they don't.

Send me a PM and I'll give you my real email address so you can zip up your images and send them to me.

This thing has made me crazy with all the back and forth...and I am d#^% tempted to code the dang thing just to prove it can be done.

I'm serious.

Lchad · #24 (**permalink**) Aug 10th, 2007, 22:59

The path to the image is correct because the background is showing in IE6 and IE7.

Right now you have a little quotation mark around your image path.
See:

Code: Select all

#wrapper {
    width: auto;
    margin: 0 auto;
    background:url('/gfx/layout2007summer/scroll_middle.jpg') repeat-y;
    }

You need to take those out.
Also you have transparent and 0% in that same line.

Did you try this:

Code: Select all

#wrapper {
    width: auto;
    margin: 0 auto;
   background:url(/gfx/layout2007summer/scroll_middle.jpg) repeat-y;

Hang in there... I'm sure we can figure this out.

Lchad · #25 (**permalink**) Aug 10th, 2007, 23:10

Nevermind that last post... that's not working.

I'll have to investigate further. My guess is something else in the css maybe interfering.

Lchad · #26 (**permalink**) Aug 10th, 2007, 23:45

Ok... I got the very basic structure working.
Here is the css:
replace the background image .jpg where I have the red text.

Code: Select all

html {
    background: #330000;
    margin: 0;
    padding: 0;
}
#scrolltop {
    width: 995px;
    height: 93px;
    margin: 0 auto;
    }
#wrapper {
    width: 995px;
    margin: 0 auto;
    background: url(background_image_here.jpg) repeat;
    overflow: hidden;
    }
.left {
    width: 150px;
    float: left;
    }    
.middle {
    width: 695px;
    float: left;
    }
.right {
    width: 150px;
    float: left;
    }
#scrollbottom {
    width: 995px;
    clear: both;
    margin: 0 auto;
    }

HTML

Code: Select all

<body>

<p align="center">Header</p>
<p align="center">Ecards. Videos. Games. Pictures. Forum.</p>
<p align="center">Username: 
  <input name="textfield" type="text" class="textfield" size="20" />
  Password: 
  <input name="textfield" type="text" class="textfield" size="20" />
Login. Sign up. Lost password. </p>
<div id="scrolltop"><img src="gfx/layout2007summer/scroll_top.jpg" width="995" height="93" /></div>
    <div id="wrapper">
        <div class="left">tons<br />
and<br />
tons<br />
of<br />
content</div><!--end left div -->
<div class="middle">
Lots more fantastic content<br />
and images<br />
and a huge money making<br />
site</div><!--end middle div -->
<div class="right">Super content here<br />
and maybe an image or two</div>

    </div><!--end wrapper div -->
<div id="scrollbottom"><img src="gfx/layout2007summer/scroll_bottom.jpg" width="995" height="76" /></div>

</body>
</html>

One thing that FF didn't like was the left, middle and right div's being ID's. It did like div class.
Now as you begin to reenter all the other CSS, I'd move one step at a time and TEST because I believe you have some css properties that "might" be causing conflict. I used your code and changed the left, right, middle to classes and still couldn't see the background image. When I started over with clean code, the problem was resolved.

But at least you have the basic structure and scroll bits in now.

Yell, if you run into trouble.

wickedmoon · #27 (**permalink**) Aug 11th, 2007, 18:30

That's got it, thanks. Is it better to use repeat-y? As that works too.

Lchad · #28 (**permalink**) Aug 11th, 2007, 20:29

Yes you are 100% correct. When I was making a test site, I used a background that I had (since I didn't snag yours). My background required a repeat x and y... sorry forgot to change that before submitting here.

wickedmoon · #29 (**permalink**) Aug 11th, 2007, 22:18

I've done my CSS refresher course. I'm trying to figure out how to float the box (which will be an advert) to the right of the centre column at http://wickedmoon.com/wickedmoon_v2c.php. I want the text in that column to wrap around and under the box, but at the moment the box appears below the last line of the content in the centre column. I'll later add in some margins.

I'd also like to get the text "Main content" so it's level with the text in the left and right columns. At the moment the centre column is pushed down a bit, but I don't know what is causing this.

wickedmoon · #30 (**permalink**) Aug 17th, 2007, 14:21

I was looking at the background image at http://www.cssplay.co.uk/layouts/background which stretches to fit the browser window. Would that work with how I've set up the scroll image at http://wickedmoon.com/wickedmoon_v2c.php ? I'd only want to stretch it horizontally. The image is slightly blurred, so should look ok if stretched a little. The image is in three pieces, one above the other.

Skelbo · #31 (**permalink**) Aug 17th, 2007, 14:26

I've been completely swamped both at work this week (3 major projects due and one beginning) and with some side projects, but I will at some point in the near future (next few days) make this work and provide the html and css.

This is not nearly as hard as it's being made out to be.

wickedmoon · #32 (**permalink**) Aug 17th, 2007, 14:33

Thanks for the offer, but we got it working in the end, at least the issue converting tables to CSS. I think I got this next problem sorted too.

wickedmoon · #33 (**permalink**) Aug 17th, 2007, 14:50

I got as far as this: http://wickedmoon.com/wickedmoon_v2c.php. The top and bottom images of the scroll stretch to fit the browser, but the centre of the scroll doesn't. I'd set the width of all three to 100%. I'm not sure what to try next to get the centre of the scroll to stretch like the rest.

Jason

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Struggling to find a decent Popup Script	christopher	JavaScript Forum	4	Apr 6th, 2008 20:22
i am REALLY struggling	DPhahn	Other Programming Languages	39	Feb 21st, 2008 13:45
Struggling with Keywords	Pickle	Search Engine Optimization (SEO)	4	Jul 3rd, 2007 22:14
Creating Forum - Struggling with Text Box Size	minckle	ASP.NET Forum	2	Apr 18th, 2007 13:45
Easiest way to convert from tables to CSS	aod2002	Web Page Design	17	Mar 11th, 2007 01:33

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Struggling to convert tables to CSS