StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
1193387
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-07-28T11:05:45.717
FavoriteCount
0
LastActivityDate
2009-07-28T11:05:45.717
LastEditDate
LastEditorUserId
0
OwnerUserId
145748
ParentId
1184834
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
As the previous answers suggest, you could put <code>float:left</code> on the <code>menulinkboxaround</code>. It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links. With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well. Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer. You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu. For example: <pre><code> <style type="text/css"> ul.menu { /* removing the browser defaults for margin padding and bullets */ margin: 0; padding: 0; list-style-type: none; /* Now you have a sensible parent it is a good idea to put the font family here, I have also added a fallback of sans-serif in the rare case Helvetica and Verdana are not available on the users computer, it might be best to set this on the body if you are using this font site-wide */ font-family: Verdana, Helvetica, sans-serif; /* To create symetry I am adding 25px to the right and left of the menu, this will stay green even if the items inside are not */ padding: 0 25px; background-color: green; /* increacing the lineheight so the background color of the links does not overflow the green of the menu behind it, for a simple menu like this it is fine, a more complex or longer links that need to wrap I suggest changing the method of implementation from display inline to floating which is a bit more complex */ line-height:1.95; } /* because all the list items are inside this parent list you can use the descendant selector to target them rather than adding a separate class, you are saying all list items inside the unordered list that has a class of menu */ ul.menu li { /* telling the list items to behave like inline elements so they are naturally on one line also removint the browser default margin and padding */ display: inline; margin: 0; padding: 0; } ul.menu a:link, ul.menu a:visited, ul.menu a:hover, ul.menu a:focus, ul.menu a:active { /* you can combine all your padding rules together in the order Top Right Bottom Left, I remember this like it kinda spells TRouBLe :) */ padding: 5px 25px 5px 25px; background-color: green; /* setting the color to white because the default link color of blue is not that visible against green */ color: white; } /* adding the :focus selector to make this more keyboard accessible */ ul.menu a:hover, ul.menu a:focus { background-color: red; color: black; } ul.menu a:visited { background-color: yellow; color: black; } </style> </pre> <ul class="menu">  <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li> </ul> </code></pre> I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8 <pre><code> <style type="text/css"> ul.menu { margin: 0; padding: 0; list-style-type: none; font-family: Verdana, Helvetica, sans-serif; padding: 0 25px; background-color: green; /* overflow hidden clears the internal floated links and zoom 1 kicks IE into doing the same, I suggest you move the zoom: 1 into an IE stylesheet using conditional comments */ overflow: hidden; zoom: 1; } ul.menu li { display: inline; margin: 0; padding: 0; } ul.menu a:link, ul.menu a:visited, ul.menu a:hover, ul.menu a:focus, ul.menu a:active { padding: 5px 25px 5px 25px; background-color: green; color: white; /* setting the links to float left and giving them display block as well explicitly, this is so that the vertical padding of 5px gets applied, inline elements can only have horizontal margin and padding, and since we are floating them they now take up 0 vertical height in the document which is why we needed to clear the float on the surrounding menu */ display: block; float: left; } ul.menu a:hover, ul.menu a:focus { background-color: red; color: black; } ul.menu a:visited { background-color: yellow; color: black; } </style> <ul class="menu"> <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li> </ul> </code></pre> This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain. If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put <code>float: left</code> and <code>clear: both</code> on the <code>ul.menu</code> which should shrink to the width it needs to take up I hope this helps
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POCSS Creating a menu-div-box?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USNatalie Downe
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.