This is the HTML:
<nav class="listfirst">
<li class="header"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</nav>
and the CSS:
#bottomnav{
width:1000px;
height:300px;
position:absolute;
top:5px;
left:10px;
}
#bottomnav .list1{
float:left;
margin-right:20px;
}
#bottomnav .listfirst{
float:left;
margin-right:20px;
margin-left:22px;
}
#bottomnav li{
width:165px;
height:22px;
margin-left:10px;
list-style-type: none;
display:block;
}
The lists in IE7 are just displaying as blocks and overflowing the container, whereas i need them to float left to stay in the bottomnav container.
I know it is probably a simple css fix but does anyone have any suggestions?
Please try below css code.
#bottomnav .list1{
float:left;
margin-right:20px;
*float:left; // this property apply in IE7
}
I think your html is incorrect. Always need to put <li> between an <ul> tag, and perhaps you missed to close <a> tags?
Example:
<nav class="listfirst">
<ul>
<li>Foo</li>
<li>Foo</li>
</ul>
</nav>
you have to specify:
#bottomnav li {
float:left;
}
cheers
Related
i have a slight problem with the :nth-of-type() selectors.. maybe you can help out.
I can't manage to select only the first a.
how to do this?
Thanks
<nav>
<ul>
<li>Home</li>
<li>Produkte</li>
<li>Beratung</li>
<li>Kontakt</li>
<li>Anfahrt</li>
</ul>
and the sass
li > a:nth-of-type(1){
&:before{
content:"1";
display:inline-block;
width:20px;
background:black;
border-radius:50%;
margin-right:5px;
}
}
You can select first li and then a inside li:first-child a, you can do the same with li:nth-of-type(1) a or li:nth-child(1) a
li:first-child a {
background: blue;
}
<nav>
<ul>
<li>Home</li>
<li>Produkte</li>
<li>Beratung</li>
<li>Kontakt</li>
<li>Anfahrt</li>
</ul>
</nav>
Hello I am trying to make a website but my menu bar is not doing what it should. This is what it should look like:
http://i.stack.imgur.com/KDvwo.png
But instead it looks like this:
http://i.stack.imgur.com/Y1Ya8.png
Here is my code:
HTML
<div class="wrapper">
<header>
<h1>Colve</h1></div>
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h1>About-Colve</h1>
<p>Colve is a company that gives you the things you want in one place</p>
<p>Created by Bradley Beeke</p>
</section>
</div>
CSS
html {
font:12pt Lato, sans-serif;
min-height:100%;
background-image:linear-gradient(45deg,#3498db,#2ecc71);
}
body{margin:0px;}
header{
background-color:white;
Color: #FFDF00;
float:left;
padding-left:5px;
display:block;
}
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:100%;
float:right;
}
nav a {
text-decoration:none;
list-style:none;
color:#FFDF00;
font-size:20px;
padding:8px;
}
nav li:hover, a:hover {color:#998100;}
li{display:inline;}
section { margin-bottom: 1000px; padding-top: 150px; float: left; }
Please can you help me!
Working DEMO
<div class="wrapper">
<header>
<h1>Colve</h1> <!-- remove the </div> present here -->
<nav>
<ul class="menu1">
<li><a class="button" href="#">Home</a></li>
<li><a class="button" href="#about">About</a></li>
<li><a class="button" href="#downloads">Downloads</a>
<li><a class="button" href="invasion.html">INVASION</a></li>
</li><li><a class="button" href="contact.html">Contact</a></li>
</ul>
</nav>
In the nav css, make width to be auto
nav {
background-color:white;
float:right;
padding-right:5px;
height:60px;
display:block;
width:auto;
float:right;
}
Add width: 100%; in header {} because currently the header is not properly aligned.
The HTML is not well constructed. Please remove the extra and from the code.
Well, right off the bat your HTML is invalid.. I see two immediate problems.
First, the closing tag after your closing H1 tag cannot be there (it looks like that was just an accident anyway).
<div class="wrapper">
<header>
<h1>Colve</h1></div>
Second, the closing that starts this line doesn't make any sense.. Remove it.
</li><li><a class="button" href="contact.html">Contact</a></li>
Oh, I lied.. there's a 3rd.. There's no closing tag for this element.
<li><a class="button" href="#downloads">Downloads</a>
Other than that, your HTML looks fine to me at a quick look, but in the future you may want to bookmark this site:
http://validator.w3.org/#validate_by_input
After you correct those problems with your HTML, update your question if you're still having problems.
I'm doing a site in HTML, the front-end part, but I want to do menu with between a logo.
I tried with following
position:absolute;
top:180px;
right:300px;
But it's not responsive and I think it's a bad way to do that, I tried with the % but when I change the size of the window the logo isn't centered.
I simply put the logo in a ul and used vertical-align but it doesn't work.
Do you have any idea ?
Thank you.
This is my code
The HTML code is
<body>
<div id="nav">
<ul id="menu1">
<li>Section 1</li>
<li>Section 2</li>
</ul>
<ul id="menu2">
<li><img src"image.png" alt=""/></li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
and the CSS is
#nav
{
background-color:red;
width:550px;
height:150px;
}
#menu1, #menu2
{
list-style:none;
}
#menu1 li a
{
text-decoration:none;
font-size:18px;
float:left;
margin-top:50px;
margin-right:10px;
margin-left:10px;
}
#menu2 li a
{
text-decoration:none;
font-size:18px;
float:right;
margin-top:35px;
margin-left:10px;
margin-right:10px;
}
img
{
width:235px;
height:196px;
display:inline-block;
position:absolute;
margin-left:365px;
}
Already, the code for inserting the image is not good :
<img src="image.png" alt=""/>
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
I'm making a navigation where the children will be showed in a different box, much like http://www.boffi.com/EN/Collections/bathrooms/b14.aspx . I managed to separate the child using absolute positioning, but can't get the child elements background to have a 100% height. it's a list element, so if I put height: 100% , the bottom two main navigation elements dissapears. Please help! Here's my html:
<ul id="mainmenu">
<li id="liHome" class="active">
Home
</li>
<li id="liServices" class=" ">
Services
<div class="child">
<ul style="" id="SubMenuY2" class="submenu">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</div>
</li>
<li id="liEnvironment">
Environment
</li>
<li id="liCareer">
Career
</li>
<li id="liContact">
Contact
</li>
</ul>
and the css
body, html{
height:100%;
}
#mainmenu{
background:black;
color: white;
width:130px;
position:relative;
top:0;
height:100%
}
#mainmenu li a {
color:white;
}
ul.submenu{
position:absolute;
background:blue;
width:130px;
}
div.child{
position:relative;
margin-left:130px;
}
Thanks a lot for the help.
I simplified your code a little.. well I actually just removed the div with class="child", as you don't really need it.
Then, all I did was this:
ul.submenu{
position:absolute;
left: 130px; top: 0;
background:blue;
width:130px;
height: 100%;
}
Take a look at the fiddle: http://jsfiddle.net/joplomacedo/rqqju/
Was this what you were looking for?