Layout help, please

Dreamweaver & Flash (ahh ahhh) plus Web related Tutorials & Resources, HTML, CSS, PHP, Flash or whatever.
Post Reply
morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

Layout help, please

Post by morphim » February 13th, 2007, 2:06 pm

Hello. I have a site I'm working on but I'm not sure how best to tackle the banner / navigation. I know what i want but I'm not sure how to do it.

Herein lies the problem (well 'herebelow' actually)

This is what I currently have >>
Image

And this is what I want >>

Image

My problem is that the bottom of the flower is obviously lower than the main parts of the banner. I guess I need to chop the bottom of the flower off them maybe realign it below in a seperate div??

I also can't get the nav links horizontally centred with the little flowers.
Also, I know the nav text is bigger in the top one but I did that temporarily so the nav covered the width of the banner.

How do??

I currently have a containing div, then a banner div above a navigation div.
Is it possible to have two horizontal divs, one on top of the other, with another div to the right which spans them both?? Sort of like a table with rowspan??
TIA (is that a recongnized acronym?? Blimey, the time it took to write this bit I might as well have just type 'Thanks in Advance' :roll: :wink: )[/img[/img]
It's always a sunny day above the clouds : )

odog
Big Bird's nest fluffer
Posts: 168
Joined: January 6th, 2006, 8:58 am
Location: The Emerald Isle (Oirland)
Contact:

Post by odog » February 15th, 2007, 3:31 pm

I hope this makes sense, but here goes...

Make the little daisy logo including the flower and the gradient boxes a single image. Place them into a div as a background image and make the dimensions of the div equal to the dimensions of this image. You can then place the naviagtion div inside the first one and move it around using padding. This will only work in a fixed width layout though.

In relation to the flowers in the navigation you should be able to center them vertically by giving each <li> a background image that is the daisy you want and giving it top and left attributes. Use the padding to push the text around until you get the desired result. The only problem is you will not have a daisy after contact.

hth.
The sooner you fall behind, the more time you have to catch up.

morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

Post by morphim » February 15th, 2007, 4:28 pm

I seem to have this more or less sorted now (as best I can)
It's more like I wanted anyway.

69D over at the other place suggested more or less what you say, so thanks for your input all the same 8)
It's always a sunny day above the clouds : )

odog
Big Bird's nest fluffer
Posts: 168
Joined: January 6th, 2006, 8:58 am
Location: The Emerald Isle (Oirland)
Contact:

Post by odog » February 15th, 2007, 4:38 pm

Saw your little bitch ass over on the CA forum. So we're not good enough for you then Morph.

Last time I help you, you ungrateful f**k.

:wink: .
The sooner you fall behind, the more time you have to catch up.

Paul Stones
Ernie's rubber duckie
Ernie's rubber duckie
Posts: 283
Joined: January 6th, 2006, 11:00 pm
Location: Onanism zone

Post by Paul Stones » February 15th, 2007, 4:42 pm

TIA is an accepted TLA, at least in the murky pools where I lurk...

Simon
A Pig in Space
A Pig in Space
Posts: 484
Joined: January 7th, 2006, 10:55 am
Location: Devon
Contact:

Post by Simon » February 15th, 2007, 6:33 pm

one way to do the little flowers is:

.navigation{
font: normal 80% Geneva, Arial, Helvetica, sans-serif;
background: url("image/flower.gif") no-repeat right top;
background-color:#edf1f4;
padding:2px 10px 2px 2px;
margin:0px;
color:#3b6f97;
text-decoration:none;
text-align:center;
}

what this does isplace the image top right, and with the padding it then moves the text slightly away from the image as if it lays besides it.
there is a god, and i am him

morphim
Site Admin
Posts: 609
Joined: January 5th, 2006, 2:21 pm
Location: Next Rock after the one Cow's at

Post by morphim » February 16th, 2007, 11:21 am

As I mentioned above (with my bitch ass :D ) I used the banner graphic as a BG in the banner / header div, instead of 'img src', so the div was now fundamentally empty. I then nested the nav div into the bottom left corner.
The nav itself was an inline list. I then added a graphic each side of the nav links as list elements.
(li graphic /li)
(li text /li)
(li graphic /li)
(li text/li)
and so on.
Works as well as I need it to. Maybe not the most efficient way but it's better than what I started with


Cheers for all the input though. 8)
It's always a sunny day above the clouds : )

Simon
A Pig in Space
A Pig in Space
Posts: 484
Joined: January 7th, 2006, 10:55 am
Location: Devon
Contact:

Post by Simon » February 16th, 2007, 11:29 am

no need to shout! just adding my two pence worth :cry: :arrow: :D
there is a god, and i am him

Post Reply