13 replies [Last post]
theboyholty
theboyholty's picture
Offline
newbie
Bury
Last seen: 10 years 17 weeks ago
Bury
Timezone: GMT+1
Joined: 2009-01-26
Posts: 6
Points: 4

The effect i'm going for can be seen here:

http://www.mannyroadend.co.uk/ytindex.html

I've created this manually by having the following css code:
#menuitem1 {
position: absolute;
left: 5px;
height: 30px;
width: 80px;
border: solid black 01px;}

#menuitem2 {
position: absolute;
left: 90px;
height: 30px;
width: 80px;
border: solid black 01px;}

#menuitem3 {
position: absolute;
left: 175px;
height: 30px;
width: 80px;
border: solid black 01px;}

but i don't want three separate menuitems, I just want one called #menuitem, which can be reproduced in the html code thus:

The benefit of this is that I can add new ones without too much re-adjusting of the existing items.

I've messed about with relative positioning but can't stop them appearing vertically. What am i missing?

Triumph (not verified)
Anonymous's picture
Guru

Is it really a menu? If so

Is it really a menu? If so you should have it marked up in an unordered list. It is a list of links, correct?

<ul>
    <li><a href="link.html"><img="img.jpg" alt="image" /></a></li>
    <li><a href="link.html"><img="img.jpg" alt="image" /></a></li>
    <li><a href="link.html"><img="img.jpg" alt="image" /></a></li>
    <li><a href="link.html"><img="img.jpg" alt="image" /></a></li>
    <li><a href="link.html"><img="img.jpg" alt="image" /></a></li>
</ul>

Then check here for some examples: http://css.maxdesign.com.au/listamatic/

Also, your example is not the correct use of absolute positioning.

where_is_will
Offline
newbie
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2009-01-26
Posts: 5
Points: 0

Is there a reason you are

Is there a reason you are positioning "absolutely"? If not then create the single menu items, maybe with a container div around them to give a border and float them left.

#menuitem {

height: 30px;
width: 80px;
border: 1px solid #000;
float:left;
}

Then add your marging / padding to get the spacing you want.

theboyholty
theboyholty's picture
Offline
newbie
Bury
Last seen: 10 years 17 weeks ago
Bury
Timezone: GMT+1
Joined: 2009-01-26
Posts: 6
Points: 4

Yes

I used position:absolute to demonstrate the effect I was looking for. This is not my final code.

I want to have a single definition for a div container using position:relative which I can re-use and it will put the new instance of that container next to the first one so i can have multiple divs but with only one definition in my stylesheet.

Hope that's more clear.

The fact that its a menu shouldn't be an issue because it will have mulitple uses and the menu is just one of them so suggesting using a list doesn't really help me at this time.

where_is_will
Offline
newbie
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2009-01-26
Posts: 5
Points: 0

Just my opinion, but the

Just my opinion, but the final code would have been helpful. Also IMO if you are re-using a div then it should really be a "class", not an "id".

If in summary you want a 30px high black bordered box which you can re-use, then the following should work for whatever you want. Just remember that floating things means they are out of the flow of the page, which brings it's own issues.

.menuitem {

height: 30px;
width: 80px;
border: 1px solid #000;
float:left;
margin-left:5px;
}

Then call it with:

or whatever else you want to apply the class to.

Triumph (not verified)
Anonymous's picture
Guru

Hello? menuitem = list

Hello? menuitem = list item. *taps microphone* Is this thing on?

Then you style the UL for a border if needed and the LI for backgrounds or whatever else.

theboyholty
theboyholty's picture
Offline
newbie
Bury
Last seen: 10 years 17 weeks ago
Bury
Timezone: GMT+1
Joined: 2009-01-26
Posts: 6
Points: 4

Thanks bud, that's it,

Thanks bud, that's it, sorted. I hadn't thought of using a class rather than an id. That's exactly the effect I was after. :thumbsup:

And the reason I hadn't posted the final code was because I hadn't finished it. What I gave you above was latest work in progress. :rolleyes:

Anyway, cheers. I'm glad to have got that sorted.

Oh and Triumph, mister frickin sarcastic you can stick your 'taps microphone' up your arse mate. The guy who actually read my posts was the opne who helped me out in the end.

where_is_will
Offline
newbie
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2009-01-26
Posts: 5
Points: 0

Good stuff.

Good stuff.

Triumph (not verified)
Anonymous's picture
Guru

theboyholty wrote:... Oh and

theboyholty wrote:

... Oh and Triumph, mister frickin sarcastic you can stick your 'taps microphone' up your arse mate. The guy who actually read my posts was the opne who helped me out in the end.

So, you have it marked as a menu item, I give you a way to style menu items, provide a link to list styling and you say I didn't read your post? Then the guy that parroted my advice (albeit with a tad bit of unpurposeful markup and a whole lot of spoonfeeding) gets the thumbs up. That's sweet.

If you still want to ignore me that's fine but in case someone else reads this thread a better way to do it is to use an unordered list and instead of styling a class you style the li:
li { float: left; display: block; height: 2em; width: 100px;}

Much simpler, more semantic.

where_is_will
Offline
newbie
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2009-01-26
Posts: 5
Points: 0

Oh for heaven's sake - 1.

Oh for heaven's sake -

1. Parroting? Charming. Is there usually this much attitude on this forum? I won't bother again if people who have posted 5k+ times have this much contempt for those they are helping.

2. I am not, was not, and never have been arguing that a ul list isn't the way to go on a menu (not the only way, but certainly the tidiest semantically) But he wanted to use the class for other things rather than just a menu.

3. What's wrong with spoonfeeding? I might be doing a disservice, but it seemed that the guy needed a couple of pointers with this, so what's the problem with taking it down to basics? You don't have to read it!

Anyway, it's sorted, so we can all get on with something else now. Right?

Triumph (not verified)
Anonymous's picture
Guru

where_is_will wrote:Oh for

where_is_will wrote:

Oh for heaven's sake -

Yes, indeed.

where_is_will wrote:

1. Parroting? Charming. Is there usually this much attitude on this forum? I won't bother again if people who have posted 5k+ times have this much contempt for those they are helping.

Did you or did you not post near identical advice? My point wasn't that you're some sort of worthless repeater, only that you and I gave very similar replies (except mine went a bit beyond what was necessary into what is probably a better plan) and I was the only one that got told to stuff it.

You'll have to forgive my attitude toward someone that tells me to anally implant a microphone. I think it's very well justified. I could have just deleted the whole thing and blocked the offender but I didn't. Where's the contempt in that?

where_is_will wrote:

2. I am not, was not, and never have been arguing that a ul list isn't the way to go on a menu (not the only way, but certainly the tidiest semantically) But he wanted to use the class for other things rather than just a menu.

with a class called "menuitem" we have a name for that issue, divitis and classitis both fit the bill here. It's just unnecessary. Sure there are different opinions but I don't hold to the one that says "it doesn't matter if it works".

where_is_will wrote:

3. What's wrong with spoonfeeding? I might be doing a disservice, but it seemed that the guy needed a couple of pointers with this, so what's the problem with taking it down to basics? You don't have to read it!

I do have to read it, it's my job as a moderator. Not only do I get to offer what I can I also get to keep the place clean and civil. My jobs been harder today. Spoonfeeding begets the expectation of more spoonfeeding. Having someone else do the work for you also robs the person of the satisfaction of a job well done.

where_is_will wrote:

Anyway, it's sorted, so we can all get on with something else now. Right?

That is up to you and the OP I suppose.

Just to wrap things up very nice and tidy-like, there was neither contempt nor sarcasm in any of my posts in this thread. You don't have a right to an attitude-free response here. If you're that thin-skinned then maybe you don't belong here.

Just sayin'.

where_is_will
Offline
newbie
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2009-01-26
Posts: 5
Points: 0

Several points well made and

Several points well made and so taken on the chin.

I stand by the advice, but I happily retract the "contempt" line, as if I had been told something in quite so graphic a manner I doubt I would have been overly amused either.

Anyway, back to work.

Triumph (not verified)
Anonymous's picture
Guru

where_is_will wrote:Several

where_is_will wrote:

Several points well made and so taken on the chin.

I stand by the advice, but I happily retract the "contempt" line, as if I had been told something in quite so graphic a manner I doubt I would have been overly amused either.

Anyway, back to work.

Thank you. I hope I haven't made you feel unwelcome in any way.

theboyholty
theboyholty's picture
Offline
newbie
Bury
Last seen: 10 years 17 weeks ago
Bury
Timezone: GMT+1
Joined: 2009-01-26
Posts: 6
Points: 4

oh and another thing . . . .

oh and another thing . . . .

nah, forget it. Thank you both for your advice, and you can remove that microphone now. Smile