L.Adlon Posted May 24, 2014 Share Posted May 24, 2014 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 More sharing options...
Ingolme Posted May 25, 2014 Share Posted May 25, 2014 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. 1 Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 Yep, I'm definitely trying that Float thing again! Scared me off last time. Link to comment Share on other sites More sharing options...
L.Adlon Posted May 25, 2014 Author Share Posted May 25, 2014 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 More sharing options...
Ingolme Posted May 26, 2014 Share Posted May 26, 2014 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 More sharing options...
dsonesuk Posted May 26, 2014 Share Posted May 26, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now