I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css
Related
I am creating a wordpress site, using and modifying one of the available templates.
Currently all of the posts are 80% width of the page, one after another going down the page. But we would like the posts to be in boxes instead. This is all working fine, however, there is a slight problem with the response on browser resize / smaller screens.
I have 3 boxes, in a line left to right. When i resize the screen (change the width), the 3rd box drops down below the first (as expected) however if the second box is longer/higher/taller than the first, the the 3rd box drops all the way down to the bottom of the 2nd box, but on the first box's column.
Ive made a very, very simplified JSFiddle to show this,
http://jsfiddle.net/vux85/
Here is the code from above for if the jsfiddle isnt working..
CSS:
#ul1 {
width:100%;
background: red;
list-style:none;
}
.list_item {
width:100px;
float:left;
margin:15px;
background:green;
}
HTML:
<ul id="ul1">
<li class="list_item">This is small.</li>
<li class="list_item">This box is very very very very very very very very very big, bigger than the other two boxes because it just is. </li>
<li class="list_item">This one is medium sized, a bit of text in here</li>
</ul>
The result i would like is box 3 dropping below box 1, like it does, but all the way up to the bottom of box 1 (with some margin of course)
Thanks!
You might want to try this.
Hope this is what you were looking for.
I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
Using this layout: http://jsfiddle.net/spadez/JBuE6/6/
On the top right I want the green button to site on the same line as the H1 tag on the right side, and so that every new list item sits to the side of the next time.
I think this might be something to do with:
display:block
I haven't been able to get this to work and I dont know if this is even the right approach.
Move the UL before the H1 and you should be in good shape, e.g.
<ul>
<li>Create New</li>
<li>Create New2</li>
<li>Create New3</li>
</ul>
<h1>Title</h1>
Example:
http://jsfiddle.net/52raq/3
If you want a right aligned item to be the same height as a left aligned item you need to put it BEFORE the left aligned item. That should take care of it.
I've got a css-based horizontal drop down menu that works perfectly well, but I'm having trouble adding an effect that adds a top border on the item that represents the page the user is currently on. Here's the HTML code for the dropdown:
<ul id="browse">
<li>
Comedy
<ul>
<li>Caddyshack</li>
<li>Back to School</li>
<ul>
</li>
<li>
80s
<ul>
<li>Die Hard</li>
<li>Overboard</li>
<ul>
</li>
</ul>
Here's what I want:
Hovering over an item changes its background color, as well as the background of the dropdown (the nested ul element)
On the active page for an item, that item should have a 2 pixel tall colored border at the top.
Just to be clear, the dropdown already works fine, and I can already identify the "active" menu item. I just can't seem to figure out how to combine changing the background color on hover and adding a border-top on the active menu item without messing up the style of the menu somehow (either leaving a 2px tall blank space on hover, or having the hover background property override the border-top property on the active item)
I should also add, CSS-only solutions please.
Any help here would be much appreciated.
For the background color, it's fairly simple, just use code similar to this:
#browse a:hover {
background-color: fuchsia; /*Whatever your background color is*/
}
As for the border effect, that's a little harder to do semantically, but I feel that this article on CSS specificity would do the trick. Basically, it involves adding an id to your body, and then referencing that id in the CSS so that only the specific pages will be affected.
EDIT: If you're having issues with your top border affecting layout (I don't know what orientation the navigation has), try reducing the margin or padding you have on each item by the size of your border (2px, in this case) to maintain overall box height. If you don't have any margins/paddings, try negative margins.
I'm working on a navigation like the image below.
The whole nav is the width of the browser window, but the items are centered to the design.
I haven't worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?
Thanks
I'd go with using a container with a simple background colour and positioning the menu inside of that.
I'll whip up a quick example for you.
UPDATE
Here's a quick example I've just put together: http://jsfiddle.net/aQTRF/
Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you've stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.
I would advise using HTML and CSS over images where possible. It will make the page faster to load.
How about something nice and simple like this?
Use an unordered list
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
Add your styles to #nav for the background