I would like to wrap a nav around a centered logo image, see a example her.
In addition I would like this nav to scale in a responsive way, when I re-size the browser window.
This is my non-responsive attempt so far! fiddle
<div id="nav">
<img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="Mountain View" class="logo"/>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div><!--end nav-->
Maybe in a kind of table structure?
Or there is a prity lib for your problem:
http://zikes.github.io/circle-menu/
http://zikes.github.io/circle-menu/examples/
Related
I have long page with fixed left sidebar :
<div id="sidebar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
</ul>
</div>
and js for affix:
$("#sidebar").affix({offset: {top: 0, bottom:420} });
I have and footer which is with height:390px.
When I first time scroll to the bottom of the page and try to scroll up the sidebar returns to its first position (to the top of the page) and it is not with position:fixed, anymore. It is with inline style position:relative, added with Bootstrap JS. When I scroll to the top I see class changed to affix-top. Every other scroll page position, the class is affix, even if it is of the bottom of the page and sidebar stay with position:relative.
If I use only :
$("#sidebar").affix({offset: {top: 0} });
, without bottom, it works fine, but I need bottom, because of the footer.
Where can be the problem ?
As the docs suggest adding position: absolute to the .affix-bottom appears to solve this problem.
So you need the css:
#sidebar.affix-bottom {
position: absolute;
}
Bootply
I have a nav that includes a drop down.
<ul>
<li class="n1">Nav 1</li>
<li class="n2">Nav 2</li>
<li class="n3">Nav 3
<ul class="dropdown">
<li>DropDown 1</li>
<li>DropDown 2</li>
<li>DropDown 3</li>
</ul>
I wish to add spacing below the nav, so I use margin-bottom.
But the margin is not correct, it's like the UL is not it's full height, I fix this with:
overflow: hidden
But then the hidden drop down gets cut off.
Any ideas on a fix?
You can try using padding. That will allow you some extra room around each element.
Thank you for reading my question.
I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):
I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header logo"><img src="the image"></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to look something like this:
empty space THE IMAGE
MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4
empty space THE IMAGE
I'm not sure whether I understood the question. But to my answer would be:
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
And style it like so:
ul li{
margin-right:20px;
line-height:200px;
float:left;
}
ul li img{
height:200px;
width:auto;
}
ul li a {
text-decoration:none;
border-bottom:2px solid red;
}
You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom.
Here you can see jsFiddle
I've got some HTML:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
This is styled as a horizontal menu. The number of links in my list are such that the nav needs to drop down to two lines. But I don't want it to drop at a place mid-li. Which is to say that because my links are multi-word, it tends to drop in the middle of an item. Any way to do this that forces the next line to always be at a place in-between the <li> elements?
just add the css white-space:nowrap; to the li's
Persumably you could try replacing the spaces in your li-items with non-breaking-spaces, like so:
<nav>
<ul>
<li>Menu Item One</li>
<li>Menu Item Two</li>
<li>Menu Item Three</li>
</ul>
</nav>
nav li {display:block; float:left; white-space:pre;}
See the interface here:
http://jsfiddle.net/3h9Kw/
I have a very specific question and I hope thats okay when asking it here.
What of the following is the correct usage:
1)
<div id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</div><!-- #more END -->
2)
<section id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</section><!-- #more END -->
3)
<section id="more">
<section class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
</section><!-- #more END -->
Note: the code snippet is placed at the bottom of the site and contains links to partner sites, links to other pages and also insite links linking to another category/page.
If you think none of the above examples is correct, could you maybe post what you think is the best solution here?
And in case 3) is best: Than i should also change h4 to h1 and put them into header ?
None of the above.
Section is defined: "For a section in a document. Such as chapters, headers, footers, or any other sections of the document". Many HTML5 elements, such as section, do not offer new functionality, but instead document semantics (as you have tagged:). Section and div may seem a like; section is actually a div, which in itself contains meta information.
There are 3 general rules of thumb for section:
-Don’t use it just as hook for styling or scripting; that’s a div
-Don’t use it if article, aside or nav is more appropriate
-Don’t use it unless there is naturally a heading at the start of the section
So it really depends on your document's structure. In the HTML, "more" contains a section of hyperlinks. You should pick 2) and change the section-element to nav-element.
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element
I think that 3 is probably the best of the things versions you've listed, though you might want to give the specification a once over, and see how the described usage matches up with what you're doing. One thing I will add is that, unless it's part of a larger grouping of content, you might want to consider using an <aside> tag for wrapping the links, as it's content set aside from the rest of the page. If it's part of a sidebar or footer, however, I'd think the <section> tag would work fine.
As for the issue of <h4> vs <h1>, I'm not 100% sure, but it probably wouldn't hurt. The W3C suggests using tags hierarchically, so I'd say that, unless you've got the link section inside another section that's using an <h1>, then it should be the right thing to do.