12 replies [Last post]
pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Hi,
I am a new css designer, trying to wean from tables.

Here is my first fully css site

http://www.sharkbite.ca/sharktestsites/syreon-site/

I have a few problems, but the main thing is on the right sidebar, the right border needs to go all the way down to meet up with the bottom, the same as the main content one, and I am not sure how to do this. Does anyone have any ideas?

Any other feedback would be MOST appreciated.

Thanks!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 49 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you considered faux

have you considered faux columns?

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Does this work?

At first try this doesn't seem to work in this case, I might take another look at it if I can't find anything else.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

For the faux columns trick

For the faux columns trick (which is exactly what you'll want to do for this)..

I'm assuming that you read through the link that was posted for you, and understand the idea behind the faux column method?

The div that you need to focus on is your #mainContent div. Since this div goes horizontally across your entire page, and vertically to the bottom of your content, this is the div that needs the faux column background image.

Instead of using the "border" property in the css to create your column borders, you will want to set the "background-image:" prooperty of #mainContent to the image that you just created. The #mainContent will stretch vertically as long as needed based on your longest column.. and since the background image will repeat as well, your borders will appear to go all the way to the bottom.

You'll want to remove the border properties throughout the rest of CSS as well, since this image file will be creating the illusion of borders for you.

I hope this made sense.. if not, I'm sure we can help you further. Good luck, and that's a very nice looking website!

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Ahhhh

Yes, that does make sense, I will try that. And thanks!

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Great! Post again if you get

Great! Post again if you get stuck or need more clarification on something. Smile

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Question

Except that the #mainContent div does not go al the way across, it has a margin. Would I have to remove the margin and use padding instead? If I do that, I lose my curve on the right of the top border so I would have to deal with that as well. I will give it a try though.

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Question

Another question, with the form at the top, what is the best way to line up the left side of the text fields? Should they go in a separate div or is there a way to "tab" them over so they always line up?
Thanks again.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

pfish wrote:Except that the

pfish wrote:

Except that the #mainContent div does not go al the way across, it has a margin. Would I have to remove the margin and use padding instead? If I do that, I lose my curve on the right of the top border so I would have to deal with that as well. I will give it a try though.

It doesn't? I was using Firebug, and your #mainContent div lit up a box starting just below your upper border with the curved edge, going the full width of the page, and right down to the lower border with curved edge..

Maybe I need to look into that further lol.. sorry about that if I misled you there!

One way or another, you need to find (or create) a div that wraps around the content in that area.. something that will be as wide as the page (border to border). By containing all of your floated divs, this container div will have to stretch vertically as long as the longest nested part.. which is why setting a background image to the container div is what you want to do. It will ensure that the illusion of your side, and inner, borders continue from top to bottom.

I'll take a better look at it, as I pretty much jumped to conclusions about the size of the #mainContent div when I saw Firebug highlight it.

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

That worked

http://www.sharkbite.ca/sharktestsites/syreon-site/index2.html

OK, by adjusting my margins and padding I did get it to work, but I didn't use a repeating strip, I used a 2000px high image (as a gif it's only 7k) with no repeat so I could keep the curve at the top. May not be the best way, but it worked.

Thanks for your help, now about the form fields...

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 12 years 11 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

pfish

pfish wrote:

http://www.sharkbite.ca/sharktestsites/syreon-site/index2.html

OK, by adjusting my margins and padding I did get it to work, but I didn't use a repeating strip, I used a 2000px high image (as a gif it's only 7k) with no repeat so I could keep the curve at the top. May not be the best way, but it worked.

Thanks for your help, now about the form fields...

Well, a 2k px high image should do the trick huh? Smile

I'm not going to lie.. I've never really read through any official "faux column" pages. I actually used the technique on many websites before I knew it even had a name. I ran into an issue once where I needed my column to stretch, and doing that just made sense to me.

The point of that little story was to say that I honestly don't know how well any of the sites really explain the trick.. and it's hard to explain it with just text. To really give a good example, I'd have to create an image file, and re-write the code myself to help explain where and how to place it.

I'm glad you got it working one way or another though!

As far as the forms issue.. maybe I don't understand, but I'm not seeing it. Everything looks perfectly lined up to me using FF.

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Thanks

I am slowly figuring out css and a lot of it is thinking through the problem, but I think this forum may help me a lot in the future!

As for the forms, if I change the name on the first one to "Log In", you would see what I mean. In Safari they don't line up, although Explorer looks fine as well.

pfish
pfish's picture
Offline
Enthusiast
Last seen: 11 years 27 weeks ago
Timezone: GMT-7
Joined: 2008-10-14
Posts: 60
Points: 44

Another issue with this one

Two more things that have come up - Explorer issues - that I cannot figure out.

http://www.sharkbite.ca/sharktestsites/syreon-site/

Under the main photo, in Explorer, there is a white space that is not supposed to be there, it's not there in Safari or FireFox.

Also the left Sidebar 1 is WAY more spaced out vertically than it should be, also fine in FireFox and Safari. If I take out the hr then the spacing is more what it should be. ( http://www.sharkbite.ca/sharktestsites/syreon-site/index2.html ) it's like there is extra leading given to the hr.

Is there a simple fix for this?

Thanks!