Jump to content

Horizontal row of hyperlinks with set width


L.Adlon

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.

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...