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;
}
Related
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
I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.
I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?
HTML Code:
<ul id="Menu">
<li>Home </li>
<li>Info
<ul style="display:none;">
<li>Program</li>
<li>Getting Started<li>
<li>Credits</li>
</ul>
</li>
<li>Video </li>
<li>server </li>
<li>Profile </li>
<li>Help</li>
</ul>
CSS Code:
#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}
#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}
Help in advanced. any help is apreciated :)
also post a code not only telling me whats wrong thanks!
use #Menu before your css class names : DEMO
like: #Menu li:hover > ul {display:list-item;}
NOTIC: css Class names are Case-Sensitive
I am thinking this is because the html code contains an inline display:none.
In the inner <ul>, we should remove <ul style="display:none;"> in the above html.
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.)
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;
}
I tried to do a dropdown menu, but I have a lot of questions and it seems I am doing all wrong. Some of the major question that are perturbing my dreams are:
Should I use list-style:none; on ULs or LIs (or both)?
Is it better to put background-color and border on As or LIs?
Should the LIs that are inside the absolute floating UL have
float:left; or position:relative;?
The code I am using seems of work, but my biggest fear is that I am writing unnecessary lines or even bad coding.
Please help.
The CSS I am using:
*{
padding:0;
margin:0;
}
#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}
#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}
#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}
#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}
#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}
#menu li:hover{
background:#a6a6a6;
}
#menu li li:hover{
background:#f5f5f5;
}
#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}
#menu li ul a{
color:#333;
}
#menu a:hover{
color:#fff;
}
#menu li ul a:hover{
color:red;
}
#menu li li:first-child{
border-top:0;
}
.clear{
clear:both;
font-size:0;
line-height:0;
}
The HTML structure is:
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<li>Drop Down
<ul>
<li>DD Item</li>
<li>Another One</li>
<li>Last DD Item</li>
</ul><div class="clear"></div>
</li>
</ul><div class="clear"></div>
</div>
I am using JQuery to show/hide the menu with:
$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});
The code I used is strongly modified, but taken from here
Your dreams are probably safe. That is, your CSS looks pretty good overall. You may want to consider using Twitter Bootstrap for some of what you're doing (awesome drop-downs), but you can certainly roll-your-own.
To answer your questions:
Should I use list-style:none; on ULs or LIs (or both)?
Just on ul's.
Is it better to put background-color and border on As or LIs?
Put them on the li elements.
Should the LIs that are inside the absolute floating UL have float:left; or position:relative;?
These accomplish entirely different things. Floating left should be sufficient, but you may want to do both.
You should also refactor your jQuery code, despite the fact that it works:
$("#menu ul li").hover(
function () {
$(this).children("ul").slideDown(100);
},
function () {
$(this).children("ul").slideUp(100);
}
);