need some CSS help

[Aharami]

question concerning the header image and menus. well only the menus now as they are not positioning correctly.
gallery

i want it to look like this

edit: ok so i figured out how to have the header image centered. but the menus arent showing up where i want them to. How do i get the menus to start 20 pixels from the left edge of the background image? how do i set the position of the menus absolute relative to the header image?

html

<div id="gsHeader">
<ul class="menu">
<li class="page_item"><a href="http://www.raktim.com" title="Blog">Blog</a></li>
<li class="current_page_item"><a href="http://www.raktim.com/gallery/main.php" title="Gallery">Gallery</a></li>
<li class="page_item"><a href="http://www.raktim.com/about" title="About">About</a></li>
<li class="page_item"><a href="http://www.raktim.com/guestbook" title="Guestbook">Guestbook</a></li>
<li class="page_item"><a href="http://www.raktim.com/archivepage" title="Archives">Archives</a></li>

</ul>
</div>

CSS

#gsHeader{
height: 100px;
text-align: left;
/*padding: 0 0 0 0;*/
position: relative;
background: url('../ice/images/head_aruba1.jpg') center center no-repeat;
}

/* Rak - below added for header menus*/
ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}

ul.menu li {
display: inline;
margin: 0;
}

ul.menu,
ul.menu li a {
padding: 5px 15px 6px !important;
}

ul.menu li a {
font-size: 1em !important;
color: white !important;
margin: 0 !important;
background: black !important;
}

ul.menu li a:hover {
background: black !important;
color: white !important;
text-decoration: none !important;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_item a:visited {
background: black !important;
color: white !important;
text-decoration: none !important;
}

 

[Aharami]

I want to have the header image centered in my gallery and the leftmost menu item starting from 20px to the right of the left edge of the header image

 

[Aharami]

anyone?

 

[Hmongkeysauce]

I advise against using absolute positioning. If you want to know why, try resizing your browser and see what happens to your menu and your background image. One trick to solve your problem, and to actually help load time, is divide that big background image into two pieces, one 20px width and the rest into the other such as this:
<div id="small_bg" style="width: 20px; height: 100px; backgroud: image/bg1.jpg; float: left;"></div>
<div id ="big_bg" style="width: <insert width>; height: 100px; background: image/bg2.jpg; float: right;">
<!--your menu goes here-->
</div>

It also seems like you're not using a container on your gallery/main.php. When using <div> instead of tables, a container to contain your main layout is very useful and helps to control positioning of other divs. I hope this helps.

 

[jw0ollard]

Your container is fluid and your banner is not... it makes it very disorienting. (when resizing)

Add "body {width:950px;}" to your CSS to keep the Gallery from becoming any wider than the banner. Gallery 2 may even just have a Width setting in the Config somewhere, but I've never worked with it to say for sure.

 

[911paramedic]

Your image isn't wide enough to fill that space. Change no-repeat to repeat-x and you will see what I mean.

 

[911paramedic]

P.S. Anything with that many !important; statements has to be a CSS mess.

 

[Aharami]

thanks for replying. i'll try that out now

 

[Aharami]

Originally posted by: Hmongkeysauce
I advise against using absolute positioning. If you want to know why, try resizing your browser and see what happens to your menu and your background image. One trick to solve your problem, and to actually help load time, is divide that big background image into two pieces, one 20px width and the rest into the other such as this:
<div id="small_bg" style="width: 20px; height: 100px; backgroud: image/bg1.jpg; float: left;"></div>
<div id ="big_bg" style="width: <insert width>; height: 100px; background: image/bg2.jpg; float: right;">
<!--your menu goes here-->
</div>

It also seems like you're not using a container on your gallery/main.php. When using <div> instead of tables, a container to contain your main layout is very useful and helps to control positioning of other divs. I hope this helps.

im not understanding what you mean. i gotta take a look at it when i get home. and I thought I am using a container. Isnt #gsHeader a container?

 

[Aharami]

Originally posted by: jw0ollard
Your container is fluid and your banner is not... it makes it very disorienting. (when resizing)

Add "body {width:950px;}" to your CSS to keep the Gallery from becoming any wider than the banner. Gallery 2 may even just have a Width setting in the Config somewhere, but I've never worked with it to say for sure.

yea defining a fixed width for the body makes it look like I want it to...kinda. I didnt really want a fixed width gallery and that is one of the reasons why i chose not to embed gallery in wordpress. I was hoping there would be some way to link the menu items to gsheader so that menu positions would change dynamically upon browser resize but stay fixed in relation to header image (as you expand browser, header image would slide out more to stay centered and menus would slide out more as well but always stay at the same place over the header image). Is something like that not possible with CSS?

I guess if thats not possible, I can define a larger fixed width for the body and just create a wider header image

 

[Aharami]

Originally posted by: 911paramedic
Your image isn't wide enough to fill that space. Change no-repeat to repeat-x and you will see what I mean.

no i know what you mean. as i expand the browser the header image slides out to stay centered but the menus dont. is there a way to position the menus so that they slide out as well relative to the window but stay in the same place relative to the header image? is there no way to link menus to gsheader?

Originally posted by: 911paramedic
P.S. Anything with that many !important; statements has to be a CSS mess.

yea i know. CSS is a mess. im working on cleaning it up. Im editing an existing theme and it has two different CSS. I'll have it cleaned up and into one css file when im done with it

 

[Hmongkeysauce]

whoops.i think you're right about the container. sorry my mistake.

 

[Aharami]

whats the difference between an id selector and a class? im going thru the w3c css tutorial right now and they tell you which is which but dont really explain the difference. #gsHeader is an id and .menu is a class. but what sets each apart? does div require IDs? can I set up a .gsHeader with all the properties and values of #gsHeader and call something like <div class="gsHeader">?

 

[stevf]

id & class are very similar in what they do and how they are used. You are supposed to only use a particular ID once per page but can use a class as often as you want - that help?

 

[jw0ollard]

Originally posted by: Aharami

Originally posted by: 911paramedic
Your image isn't wide enough to fill that space. Change no-repeat to repeat-x and you will see what I mean.

no i know what you mean. as i expand the browser the header image slides out to stay centered but the menus dont. is there a way to position the menus so that they slide out as well relative to the window but stay in the same place relative to the header image? is there no way to link menus to gsheader?

Somebody already suggested it:

You simply put the banner in a DIV the same % width as the gallery (I think it's 90%), and then you split the banner into two images (well 3, technically), and you align the separate images so that when you expand the window, the image "stretches" out with it.

The third and middle image must be able to repeat, and look at least semi-decent doing it.

Also, the typical way to go about this would be to use a table, and put the 3 images in separate TDs, but if you're already using a table-less layout, then you could put 2 DIVs inside a larger DIV, float the left and right images left and right, respectively, and then assign the middle, repeatable image as a background to the larger DIV.

------------------

To answer your latest post:

An id selector can only apply to one element on a page. It's "illegal" for an id selector to apply to more than one thing at a time.

A class selector is just that, a "class". You can assign any number of elements to that class.

Edit: Yay 200 posts. I'm a Senior now. =p

 

[911paramedic]

The easiest way to do it is to size the image correctly. Barring that, make the UL a direct descendant of the image DIV so they are connected.

I often nest like <div id="example"><span class="another-example"></span> Div content</div> Then I can insert things into that div, via the span, totally unrelated yet linked. Problem is you are using tables...

Either size the image larger, or shrink the container to the image size.

(Or did you want the menu moved inward to begin with??)

 

[jw0ollard]

Originally posted by: 911paramedic
The easiest way to do it is to size the image correctly. Barring that, make the UL a direct descendant of the image DIV so they are connected.

I often nest like <div id="example"><span class="another-example"></span> Div content</div> Then I can insert things into that div, via the span, totally unrelated yet linked. Problem is you are using tables...

Either size the image larger, or shrink the container to the image size.

(Or did you want the menu moved inward to begin with??)

Right, but I think he wants the menu and the banner to move together when you resize, and the only way to do that would be just to make the banner fluid.

If that's not what the OP wanted, maybe I just read the thread wrong?? =p

OP, if I have time, I'll split the banner up, try to find a spot that "stretches" well, and just link the 3 images up to Photobucket and give you the general idea of how to code it. Can't promise much, though.

 

[Aharami]

Originally posted by: stevf
id & class are very similar in what they do and how they are used. You are supposed to only use a particular ID once per page but can use a class as often as you want - that help?

yes it does. thanks

 

[Aharami]

Originally posted by: 911paramedic
The easiest way to do it is to size the image correctly. Barring that, make the UL a direct descendant of the image DIV so they are connected.

I often nest like <div id="example"><span class="another-example"></span> Div content</div> Then I can insert things into that div, via the span, totally unrelated yet linked. Problem is you are using tables...

Either size the image larger, or shrink the container to the image size.

(Or did you want the menu moved inward to begin with??)

care to explain that further?
my code is

<body class="gallery">
<div id="gallery" class="gecko">
<div id="gsHeader">
<ul class="menu">
<li class="page_item"><a href="http://www.raktim.com" title="Blog">Blog</a></li>
<li class="current_page_item"><a href="http://www.raktim.com/gallery/main.php" title="Gallery">Gallery</a></li>
<li class="page_item"><a href="http://www.raktim.com/about" title="About">About</a></li>
<li class="page_item"><a href="http://www.raktim.com/guestbook" title="Guestbook">Guestbook</a></li>
<li class="page_item"><a href="http://www.raktim.com/archivepage" title="Archives">Archives</a></li>
</ul>
</div>

and

body.gallery {
margin: 0;
padding: 0;
min-height: 1024px;
min-width: 1050px;
}

#gallery {
padding: 0px;
padding-left: 50px;
padding-right: 50px;
}
#gsHeader{
height: 100px;
text-align: left;
/*padding: 0 0 0 0;*/
position: relative;
background: url('../ice/images/head_aruba1.jpg') center center no-repeat;
}

ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}

so my code should look something like

<div id="gsHeader">
<span class ="menu">
<ul>
<li class="page_item"><a href="http://www.raktim.com" title="Blog">Blog</a></li>
<li class="current_page_item"><a href="http://www.raktim.com/gallery/main.php" title="Gallery">Gallery</a></li>
<li class="page_item"><a href="http://www.raktim.com/about" title="About">About</a></li>
<li class="page_item"><a href="http://www.raktim.com/guestbook" title="Guestbook">Guestbook</a></li>
<li class="page_item"><a href="http://www.raktim.com/archivepage" title="Archives">Archives</a></li>
</ul>
</span>
</div>

I tried that and got this, so I must be misunderstanding you.

I want the header image and menus of my blog and gallery to line up perfectly. I already got the header images to line up since they are both centered in the browser but im having trouble making the menus line up perfectly since menus are positioned 20px right of the container's left edge.
In the blog, resizing doesnt matter since container is 950px (size of header image) and centered. So container slides out right to stay centered as browser is resized - thus moving the menus along with it. But I dont want to set a fixed width for the gallery as I want the flexibility of displaying images larger than 950px wide. So I cant position the menus 20px right of the container's left edge in my gallery. I need to poistion them 20px right of the centered header image's left edge.

To put it visually what Im talking about, here are some screenshots.
Following two taken with browser sized so that gallery's container is the same width as header image (950px). Notice how header image and menus line up between the blog and gallery.
http://pics.bbzzdd.com/users/aharami/blog_hdr_950.jpg
http://pics.bbzzdd.com/users/aharami/gal_hdr_950.jpg

as browser width is expanded, blog isnt affected since container is 950px wide and centered. But gallery's container expands with expanding browser and thus the menus dont line up anymore. But the header images still line up since they are both centered in gallery and blog. So to maintain menu position in gallery, id have to link them to header image div somehow so that menus move along with header image.
http://pics.bbzzdd.com/users/aharami/blog_hdr_large.jpg
http://pics.bbzzdd.com/users/aharami/gal_hdr_large.jpg
I want the gallery menus to line up with the blog menus even with browser width > 950px

 

[Aharami]

this is more trouble than it's worth. Im just gonna go with a fixed width gallery. Thanks to all who chimed in. Much appreciated!