Jump to content
L.Adlon

Horizontal row of hyperlinks with set width

Recommended Posts

If I want to have a horizontal row of text hyperlinks with a set width, is there either a way to get some sort of width property working (on inline elements), or eliminate the carriage return caused by setting the elements to block display?

 

I'm kind of stumped... as the width parameter doesn't work unless the text hyperlink is a block element, and setting it to a block element (to get width to work), causes a carriage return, preventing them from being positioned side to side/horizontally.

Share this post


Link to post
Share on other sites

There's the inline-block element. It will be able to have width, height, margins and padding but will behave inline. That also means that whitespace in the HTMl code will be represented as a space between the elements, so you have to watch out for that.

 

You can also use the CSS float property on block elements.

  • Like 1

Share this post


Link to post
Share on other sites

I'm curious about something...

 

I'm seeing examples of horizontal nav buttons being done using <ul>, and I'm not entirely sure I understand what the reasoning is.

 

I'm currently doing it with just a bunch of <a> tags:

 

 

<a href="page1.html" alt="" class="navbutton">PAGE 1</a>

<a href="page2.html" alt="" class="navbutton">PAGE 2</a>

<a href="page3.html" alt="" class="navbutton">PAGE 3</a>

 

....whereas other samples are putting that as a unordered list, and I'm not seeing what that adds to it, compared to what I'm doing. What am I missing here?

 

 

 

BTW, I tried adding "display:block; float:left; width:100px;" to the navbutton class definition, and it seems to work (as far as allowing me to specify the width, and not have the inherant carriage return of making it a block element. I'm still paranoid about the browser support... but that's just me. Thanks for the tip!

 

BTW2, I'm still curious why writing the code as I did in the sample (with a carriage return between each 'button') results in that small area of between the resulting links in the page display that triggers the mouse pointer to change to a text editing cursor (...but is remedied by putting all the <a> tags together in one line, eliminating the carriage returns in the code.

Share this post


Link to post
Share on other sites

The reason for using lists is for semantics. If what you want to show is a list of links then you use one of the list elements (<ul> unordered list, <ol> ordered list, <dl> definition list). In a semantic page, the HTML tags describe the content that is contained within them.

Share this post


Link to post
Share on other sites

 

BTW2, I'm still curious why writing the code as I did in the sample (with a carriage return between each 'button') results in that small area of between the resulting links in the page display that triggers the mouse pointer to change to a text editing cursor (...but is remedied by putting all the <a> tags together in one line, eliminating the carriage returns in the code.

 

Every carriage return between each link is treated as a space which as already mentioned

 

 

There's the inline-block element. It will be able to have width, height, margins and padding but will behave inline. That also means that whitespace in the HTMl code will be represented as a space between the elements, so you have to watch out for that.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...