I have a horizontal list used as a nav, where I want to put images/icons above the text in the list.
However, I can't get the images to center with each list item.
The images has the exact same size.
HTML:
<div id="nav">
<ul>
<li><img src="images/kranznav.png" alt="kranz" />COMPETE</li>
<li><img src="images/thumbnav.png" alt="thumb" />SCORE</li>
<li><img src="images/bagnav.png" alt="bag" />SHOP</li>
<li><img src="images/morenav.png" alt="more" />MORE</li>
</ul>
</div>
<div class="clear">
</div>
CSS:
#nav {
background:#ffffff;
width:100%;
margin-top:-2em;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:2%;
margin-left:10%;
margin-right:10%;
margin-top:5%;
}
#nav a {
display:block;
width:20%;
margin-right:0% auto;
padding-left:0% auto;
color:#5E09CB;
text-decoration:none;
}
Add text-align:center; to #nav li
Your mistake is the width of 2% you gave the list items.
This limits the width
http://jsfiddle.net/bukfixart/Z9uc7/
Try it this way:
#nav li {
display:inline;
float:left;
/*width:2%;*/
margin-left:10%;
margin-right:10%;
margin-top:5%;
text-align:center;
}
Related
Here, I am missing something basic.
HTML
Unordered List:
<ul>
<li>Apple</li>
<li>Ball</li>
<li>Cat</li>
</ul>
CSS
ul li{
background-color:#fcf;
margin:5px;
list-style:none;
}
Fiddle Link
I want the width of li be according to the content but here the width is 100%(maybe). Help Me!! Thanks in Advance
You could float and clear the list items like:
ul li{
background-color:#fcf;
margin:5px;
list-style:none;
float:left;
clear:left;
}
jsFiddle example
Or wrap the list items in a span
Unordered List:
<ul>
<li><span>Apple</span>
</li>
<li><span>Ball</span>
</li>
<li><span>Cat</span>
</li>
</ul>
ul li {
list-style:none;
}
ul li span {
background-color:#fcf;
margin:5px;
}
jsFiddle example
Try something like this. It accomplishes what you want, but I can't imagine this being all that practical.
CSS
ul li {
background-color:#fcf;
margin:5px;
list-style:none;
display:inline;
float:left;
clear:both
}
http://jsfiddle.net/ytL0rweo/
By using: float or display:inline-block
ul li{
background-color:#fcf;
margin:5px;
list-style:none;
float:left;
}
OR
ul li{
background-color:#fcf;
margin:5px;
list-style:none;
display:inline-block;
}
I am new to web development and I building my first website. I want to create a header that has an image in the center and the nav menu surrounding it.
Here is the code I'm working with:
HTML:
</head>
<body>
<div id ="header">
<div id="nav">
<ul>
<li>About</li>
<li>Philanthropy</li>
<li><img src="http://i.imgur.com/cosDXx1.png"/></li>
<li>Why Join?</li>
<li>Contact</li>
</ul>
</div>
</div>
</body
>
CSS:
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:10px;
display:inline;
margin-left:60px;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
JSfiddle link:
http://jsfiddle.net/5g6sm01q/
On my screen it is in a line but when I shrink it (and in the jsfiddle example) it is not. Please any tips or help with this problem would appreciated.
Convert all the pixel values into % or atleast the padding and the left and right margins, and see the change..I've just edited your fiddle a little bit..
see this http://jsfiddle.net/5g6sm01q/2/
Chnge the css like this
body {
margin:0px;
padding:0px;
}
#header{
width:100%;
height:110px;
background-color:black;
}
#nav ul{
list-style-type:none;
font-family:"Slabo 13px",serif;
float:center;
}
#nav ul li{
padding:0.5%;
display:inline;
margin-left:2%;
margin-bottom:20px;
}
#nav ul li a{
text-decoration:none;
color:#006600;
}
#nav ul li a:hover{
color:#CC0000;
}
UPDATE
As #Krodmannix mentioned in his comment,there is a way in CSS to dictate how to format the page based on different screen sizes using media queries.It makes it very easy to adapt your site to mobile screens without any page redirection
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}