I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
Related
I have a menu on my website which is situated like this,
header>.container>nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left
}
What I am trying to do is relocate nav inside of a new element within the structure called topLine, and so my new code is,
header.container.clearfix.topLine.nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left;
background-color:#282b30;
}
However it is not working and I am not sure what I am missing.
The HTML code is below
<header>
<div class="container">
<div class="topLine">
<!--MENU-->
<nav class="clearfix">
<i class="fa fa-bars"></i>
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Companies</li>
<li>News</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
i would have posted a comment but i don't have enough xp yet. :)
some periods that you have in your css should't be there. Periods are for referencing a class. for example, i see a .nav but you don't have a class="nav" anywhere in the html. if you want to refer to a child element, use >. So instead, do header > .container > .clearfix > .topLine > nav {
Problem:
Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.
HTML code:
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
CSS code:
How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?
You could do something like this:
nav ul li {
width:100px;
display:inline-block;
margin:5px;
padding:5px;
color:#333;
text-align: center;
}
nav[role="main"] ul li {
background-color:#aaa;
}
nav[role="sub"] ul li {
background-color:#eee;
}
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
Not sure what you mean by
same appearance but different styling
You can use the role attribute as a CSS selector, as shown here:
nav[role="main"],
nav[role="sub"] {
background: #222;
color: #f40;
}
nav[role="main"] a,
nav[role="sub"] a {
color: #fff;
}
<nav role="main">
<ul>
<li>Startpage
</li>
<li>Cars
</li>
<li>About us
</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari
</li>
<li>BMW
</li>
<li>Volvo
</li>
</ul>
</nav>
HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
I cannot figure out why the forth level is not styling. Can someone please help with this CSS spaghetti?
Fiddler: Menu Demo
You have a few problems with this. For starters I strongly suggest that you clean up your CSS and Validate your HTML.
This is invalid in your CSS, which is part of the problem.
.nav ul li li li:hover a {
background:#00999b url(img/arrow_over.gif) no-repeat 95% 9px !important;
}
And this HTML is invalid: You have unclosed tags inside of other tags.
<ul>
<li class="canieti first"><span>***HOME</span><ul>
<li class="quienessomos first"><span>***SECOND</span><ul>
<li class="consejodirectivonacional"><span>***THIRD</span><ul>
<li class="mesadirectivanacional first"><span>***FOURH</span></li>
</ul>
<div style="clear: both;"></div>
</li>
<li class="canieti first"><span>Other</span></li>
</ul>
<div style="clear: both;"></div>
</li>
</ul>