Doing a Fluid + Liquid Layout, with HR Tag?

[templetalker]

Hi Coding Fellows,

This conundrum has put me to a halt. I think I know the answer, but I want to see if my <hr> tags can do the trick as I explain below.

Here’s the start of the page >
http://3tigersdesign.com/drafts/yoh_003.html

Here’s a mock up of what I’m going for here >
http://3tigersdesign.com/drafts/yoh_001.html

You can see that my idea is to extend the navigation bar infinitely to the left and right, while still keeping the rest of the page in the center. I have used <hr> tags to style the navbar. I don’t know if I came up with this, but I’ve used it successfully on other designs before http://www.marigoldfairtradeclothing.com, but the difference here is that I’d like those <hr> tags to extended past the fixed layout.

You can see that page is not fixed/centered. This probably has to do with the fact that everything is in a <div> wrap.

My best guess is I’ll have to use small 1×1 pixel graphics in the nav bar to get it to extend. I would also have to place the nav bar and the main header <h1> outside of the wrap with absolute positioning/z-indexing.

Bring on the feedback please!

Please forgive me, I’m a little rusty since it’s been 3 months off the CSS wagon.

Page Code

Code:

---

---

• Home
• About
• Prices
• FAQs
• Gallery
• Contact

[Rob MacKay]

first iframes and now hr’s within ULs… I think the sky is falling!

Ok stop. thats a dirty dirty nasty way of doing it lol

Firstly remove your hrs, and add a border-top to your UL box (which you should also set a fixed height and whatever width you are using) – then take 1px vertical slice of the background you are using and repeat it x down your UL.

you could just take a slice of the background idea and repeat it forgetting about the boarder…

HRs in ULs eek… lol

:o

[templetalker]

Robskiwarrior,

Thanks for the insight. My thought process was geared towards using a fluid layout, when you zoom in with an <hr> tag as a graphical line replacement the <hr> tag doesn’t blur or get distorted as an image would obviously. The <hr> also doesn’t get dropped when graphics are disabled. Yes, semantics, but would placing the <hr> tags outside the <ul> be so wrong? It’s good to know your perspective, and I’ll try your method out.

Any more insight on the kind of layout that would efficiently work as I’ve mocked up? Thanks peeps. :)

[Rob MacKay]

well if you have an image that is detailed or a gradient then yea it would get blured, but if you use an image that is physically pixel coloured they would be no noticeable change – especially if you use web safe colours.

HR’s should be left for dividing or splitting up stuff, you should never use them for site stucture. Plus technically you are using them inside a UL without wrapping them in a LI, which is a little bit naughty. :)

[templetalker]

Thanks again Robski. I’ve come up with a solution, and I’ll post it up here by the end of today for you to look at with your discernment if it’s not a problem.

[Rob MacKay]

thats no problem at all, post away :D

[Author]

Posts