/    Sign up×
Community /Pin to ProfileBookmark

Two <div>’s horizontally, not vertical?

Copy linkTweet thisAlerts:
Aug 30.2004

I’m making the switch to complete CSS (I find it so much simpler than tables, apart from trying to center align something ?), and am making a horizontal menu.
The HTML for the menu is:

[code]<div id=”menuhome”><a href=”index.php”></a></div><div id=”menuhome”><a href=”index.php”></a></div>[/code]

CSS:

[code]#menuhome a
{display:block; width:52px; height:20px; background: url(“../images/home.up.jpg”) 0 0 no-repeat}
#menuhome a:hover
{background: url(“../images/home.over.jpg”) 0 0 no-repeat}[/code]

Is there a way to have these buttons ‘side-by-side’, instead of vertical?

Or should I use a different tag than <div>?

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@the_treeAug 30.2004 — [CODE]#menuhome {float: left;}[/code]
Copy linkTweet thisAlerts:
@JohnnoauthorAug 30.2004 — Thanks for that, but the menu i'm using has 13 parts (sorry I didn't mention it before).

If I try to add more than two with float:left, then it creates a new paragraph.
Copy linkTweet thisAlerts:
@DaveSWAug 30.2004 — It would be better if you used a list for your menu. Check out:

http://css.maxdesign.com.au/listamatic/

Alternatively this tool will produce the code for you:

http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
Copy linkTweet thisAlerts:
@ray326Aug 30.2004 — As Dave said, try building your menu with a list. At any rate this is not valid because an ID should only be used once.

<div id="menuhome"><a href="index.php"></a></div><div id="menuhome"><a href="index.php"></a></div>
Copy linkTweet thisAlerts:
@pawkyAug 31.2004 — if you need to use the id more than once, use classes instead. In your css an id is defined as #idname and a class as .classname.

as for what code you should use, use the following:

<i>
</i>#nav li { float: left;
list-style: none;
}
#nav a { width: 52px;
height:20px;
background: url("../images/home.up.jpg") 0 0 no-repeat
}

#nav a:hover {
background: url("../images/home.over.jpg") 0 0 no-repeat
}


<i>
</i>&lt;ul id="nav"&gt;
&lt;li&gt;&lt;a href="index.php"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="index.php"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


that's better, and u can do all the styling of the links building off of that ?
Copy linkTweet thisAlerts:
@rsdAug 31.2004 — If you want it displayed horizontal then add "list-style-type:none;" and "display:inline;" to the css for the line item.
Copy linkTweet thisAlerts:
@johndoe190Aug 31.2004 — Im not entirely sure but im sure float:left works better than display:inline for some reason can someone clarify a better reason please.
Copy linkTweet thisAlerts:
@Paul_JrAug 31.2004 — Inline-level elements cannot have padding, margin, height, width, or border (maybe more?) applied.
Copy linkTweet thisAlerts:
@johndoe190Aug 31.2004 — Well legally anyway?
Copy linkTweet thisAlerts:
@pawkyAug 31.2004 — [i]Originally posted by sharkey [/i]

[B]Well legally anyway? [/B][/QUOTE]

eh, not doing it legally can just lead to trouble ? cept w/ IE which anything you do leads to trouble lol
Copy linkTweet thisAlerts:
@TimeBanditSep 01.2004 — [i]Originally posted by Johnno [/i]

[B]

Is there a way to have these buttons 'side-by-side', instead of vertical?

[/B][/QUOTE]

Horizontal graphical nav:

gladeelementary.com

You can float them all side by side.
×

Success!

Help @Johnno spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...