I'm trying to create my very own css menubar and I am learning a lot. Unfortunately I am stuck on this one piece and I can't figure out how to get around it. My menubar is to long so I use line breaks to wrap each menu element around but its not letting my menu to run across the menu bar. Can you tell me what I am missing here?
<div id="menucontainer">
<ol id="navlinks">
<li>COMPANY<br />OVERVIEW</li>
<li>CLIENTS<br />TESTIMONIALS</li>
<li>ACCREDITATION<br />SERVICES</li>
<li>LEGAL<br />SUPPORT</li>
<li>TRAINING</li>
<li>CONSULTING<br />SERVICES</li>
<li>FREE<br />POLICY CENTER</li>
<li>IN THE NEWS</li>
<li>STRATEGIC<br />PARTNERS</li>
</ol>
</div>
CSS Code:
/* We set the width and color of the background for a menu wrapper. */
#menucontainer{width: 1021px; height: 61px; background-color:#0C318C; margin: auto; padding-top:5px;}
/* We target the top of the order list and remove the list properties. */
#navlinks li {display: inline; list-style: none;}
/* This line sets the font style of the bullet menu */
ol{font-size: 12px; font-family: 'Tinos', serif;line-height: 18px;}
/* We target the li items with and without a hyper link and color the font white. */
li, li a {text-decoration: none; color: white;}
I put it up on JFiddle and you can find it here: http://jsfiddle.net/L4sTB/
Thanks,
Frank G.
Check this fiddle.
I have made changes to the following CSS rule.
#navlinks li {
display: inline-block; /* to display the menu items as blocks in same line */
list-style: none;
text-align: center; /* center align the text within the block */
width: 10%; /* set each block a width */
vertical-align: middle; /* align the contents to middle vertically */
}
You can set display:inline-block to your li elements and it will span the width of your nav bar: http://jsfiddle.net/shaunp/L4sTB/3/
Is this your desired effect?
The list should be inline-block. I added center align text and a border to each.
#navlinks li {display: inline-block; list-style: none;text-align:center;border: 1px solid white;}
Related
I'm practicing basic HTML programming and have added a list object to the code between two headings. when I view the list background I see that it stretches right to the side of page. About this I want to know how to limit the width of background so it ends just after covering the li elements (also curious how to get it stretch downward - maybe I need another div?)
also want to add some spacing between the li elements as shown in a book I have. I have added liststyle li {} as instructed but the ul box does not respond. it also does not respond to side / background-size properties for above issue.
how could I get this list box working?
part of the HTML code:
.liststyle { /* class */
list-style: square; /* circle / lower-roman */
padding : 15px; /*spacing between border and element*/
margin : 20px; /*spacing outside border*/
background: #66ccff; /*background box colour */
color: #ff0000; /*text color */
list-style-position: inside; /*get bullets inside background box*/
border-style: double;
border-width: 5px;
border-color: #600;
size: 100px 100px; /* background stretches horizontally to side of page*/
}
.liststyle li{ /*trying to get spacing between list items - will not work*/
padding-bottom = 100px;
}
<h1>National Geographic</h1>
<h2>How a Remote Peak in Myanmar Nearly Broke an Elite Team of Climbers</h2>
<ul class="liststyle">
<li>the beggining</li>
<li>reaching the rampart</li>
<li>regrouping</li>
<li>freezing cold</li>
</ul>
<h4>On one of mountaineering’s most dangerous journeys,
group was pushed to the limit by physical and mental challenges.</h4>
there is no size property, exists thought background-size (although you don't need this since it is only a background-color)
you have padding= should be padding:
you can use border shortand
to contain the background, you need to use a max-width in ul + display:inline-block
(extra) adding box-sizing:border-box it will make the border+padding part of the calculations for width
.liststyle {
/* class */
list-style: square;
/* circle / lower-roman */
padding: 15px;
/*spacing between border and element*/
margin: 20px;
/*spacing outside border*/
background: #6cf;
/*background box colour */
color: #ff0000;
/*text color */
list-style-position: inside;
/*get bullets inside background box*/
border: 6px solid #600;
max-width: 300px;
display: inline-block;
box-sizing:border-box
}
.liststyle li {
/*trying to get spacing between list items - will not work*/
padding-bottom:100px;
}
<ul class="liststyle">
<li>the beggining</li>
<li>reaching the rampart</li>
<li>regrouping</li>
<li>freezing cold</li>
</ul>
<h4>On one of mountaineering’s most dangerous journeys,
group was pushed to the limit by physical and mental challenges.</h4>
Use
.liststyle {
display:inline-block;
width:500px;
If you leave width param, it fits to the content.
Can someone help me with this problem I'm having please?
Why does my first sub-menu not appear when the mouse is hovering over it in CSS?
#Menu {
position: absolute;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin:2cm; /*4cm 3cm 4cm;*/
/* Padding moves the links according to the x and y axis*/
padding: 10px 300px;
}
/* This sets the style for all list <li> tags in the HTML code.*/
#Menu li {
/* This sets the style of the bullet points on the list e.g. Roman numerals, circular, square etc. */
list-style: none;
/*This sets the radius of the corners of the background box of the links.*/
/*border-radius: 50px;*/
/*This sets the colour of the background box containing the links.*/
background: #0FF;
}
/* This rule controls the links within the <li> tags.*/
#Menu li a {
/* This tag separates any item/object and tries it like a new paragraph. */
display: block;
/* Padding moves the links according to the x and y axis*/
padding: 3px 8px;
/* This sets all text within its range as all capitals. Other options are none, capitalize
(which makes the first letter of every word a capital), lowercase and initial
(which makes the first letter of a word at the beginning of sentence capital and all the rest normal).*/
text-transform: uppercase;
/*This can set the text as underlined, overline, line-through, none, initial and inherit.*/
text-decoration: none;
/* Sets the default colour of the text.*/
color: #999;
font-weight: bold;
}
#Menu li a:hover {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}
/*This rule hides the <li> from the effects of <ul> unordered list tag. If not implemented the sub-menu will be on constant display.*/
#Menu li ul {
display: none;
}
/*This rule allows the hovering effect to display the sub-menu.*/
#Menu li:hover ul, #Menu li.hover ul {
/*position : fixed will position the element relative to the browser,
relative means to position relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position,
absolute is positioned relative to its first positioned (not static) ancestor element.*/
position: absolute;
/*display: inline will make the sub-menu appear like a queue of words for example like the way the words of this comment are all queued up.*/
display: inline;
/*Without zeroing the left parameter then the sub-menu would not be directly underneath the main menu headlining. It would of been somewhere to the
right.*/
left: 0;
/*The width property sets the width of an element. In this case the sub-menu.*/
width: 100%;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin: 0;
/* Padding moves the links according to the x and y axis*/
padding: 10px 300px;
}
#Menu li:hover li, #Menu li.hover li {
/*The float property specifies whether or not an element should float. Without the float it looks like a ordered list without the numbers.*/
float: left;
}
#Menu li:hover li a, #Menu li.hover li a {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}
#Menu li li a:hover {
/*This applies hover colour to the sub-menu.*/
color: #357;
}
#Menu2 {
position: absolute;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin:2cm; /*4cm 3cm 4cm;*/
/* Padding moves the links according to the x and y axis*/
padding: 10px 500px;
}
/* This sets the style for all list <li> tags in the HTML code.*/
#Menu2 li {
/* This sets the style of the bullet points on the list e.g. Roman numerals, circular, square etc. */
list-style: none;
/*This sets the radius of the corners of the background box of the links.*/
/*border-radius: 50px;*/
/*This sets the colour of the background box containing the links.*/
background: #0FF;
}
/* This rule controls the links within the <li> tags.*/
#Menu2 li a {
/* This tag separates any item/object and tries it like a new paragraph. */
display: block;
/* Padding moves the links according to the x and y axis*/
padding: 3px 8px;
/* This sets all text within its range as all capitals. Other options are none, capitalize
(which makes the first letter of every word a capital), lowercase and initial
(which makes the first letter of a word at the beginning of sentence capital and all the rest normal).*/
text-transform: uppercase;
/*This can set the text as underlined, overline, line-through, none, initial and inherit.*/
text-decoration: none;
/* Sets the default colour of the text.*/
color: #999;
font-weight: bold;
}
#Menu2 li a:hover {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}
/*This rule hides the <li> from the effects of <ul> unordered list tag. If not implemented the sub-menu will be on constant display.*/
#Menu2 li ul {
display: none;
}
/*This rule allows the hovering effect to display the sub-menu.*/
#Menu2 li:hover ul, #Menu2 li.hover ul {
/*position : fixed will position the element relative to the browser,
relative means to position relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position,
absolute is positioned relative to its first positioned (not static) ancestor element.*/
position: absolute;
/*display: inline will make the sub-menu appear like a queue of words for example like the way the words of this comment are all queued up.*/
display: inline;
/*Without zeroing the left parameter then the sub-menu would not be directly underneath the main menu headlining. It would of been somewhere to the
right.*/
left: 0;
/*The width property sets the width of an element. In this case the sub-menu.*/
width: 100%;
/*Sets a space allocated between the written word and the edge of the browser.*/
margin: 0;
/* Padding moves the links according to the x and y axis*/
padding: 10px 500px;
}
#Menu2 li:hover li, #Menu2 li.hover li {
/*The float property specifies whether or not an element should float. Without the float it looks like a ordered list without the numbers.*/
float: left;
}
#Menu2 li:hover li a, #Menu2 li.hover li a {
/*Sets the default colour of the text when the mouse is hovering to get the sub-menu.*/
color: #000;
}
#Menu2 li li a:hover {
/*This applies hover colour to the sub-menu.*/
color: #357;
}
As you can see the second sub-menu does appear when the mouse is hovering.
Thank you for your help in that matter.
It is because the second menu is atop the first one.
This is because you use padding to position absolute positioned menus. You get something like this:
Here MENU 2 is above MENU 1 because both are positioned absolute, placed at the "same spot" in the document and MENU 2 looks like it is further to the right due to the padding.
If you add a border around the menus, or use Inspect element in your browser, you should most likely be given a more clear picture of what is happening.
MENU 2 is also above MENU 1, and not the other way around, because you have the second menu after the first in the document (DOM) – and you have not set z-index.
From your CSS:
#Menu {
position : absolute;
margin : 2cm;
padding : 10px 300px;
}
#Menu2 {
position : absolute;
margin : 2cm;
padding : 10px 500px;
}
A more complete example with HTML markup would make it easier to help. (As would a lessened amount of comments in the CSS.)
For a quick fix this should make it work, though I would most likely have used a different approach:
#Menu {
z-index : 200;
}
#Menu2 {
z-index : 100;
}
You also have a lot of redundant styling. Instead of attaching everything to ID's you should make use of class names and only separate out what differs in the styling between the menus. Giving you something like this in your markup:
<ul id="menu_1" class="menu">
...
<ul id="menu_2" class="menu">
...
And in your CSS, for the common styles:
.menu {
position : absolute;
margin : 10px;
}
.menu li {
list-style : none;
background : #0FF;
}
.menu li a {
display : block;
padding : 3px 8px;
... and so on.
Then for each individual menu:
#menu_1 {
left: 10px;
}
#menu_2 {
left: 100px;
}
... etc.
I am trying to use a css sprite for naviation in a dreamweaver template for a school project, and the image is not showing up.. Here is my code, right now I am only working on the home button. I have made individual sprites for every button.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jordan's Website</title>
<link href="Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><img src="" alt="Insert Logo Here" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li id="home"> </li>
<li id="projects">Projects</li>
<li id="tutorials">Tutorials</li>
<li id="family">Family</li>
<li id="hobbies">Hobbies</li>
<li id="tennis">Tennis</li>
<li id="yng">Youth and Gov</li>
<li id="sources">Sources</li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<h1>Instructions</h1>
<p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - http://www.adobe.com/go/adc_css_layouts.</p>
<h2> </h2>
<!-- end .content --></div>
<div class="footer">
<p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
CSS:
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~this fixed width container surrounds the other divs~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #ADB96E;
}
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
*/
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
}
#home li a{
display: block;
background: url(Assets/Images/homesprite.png) no-repeat;
height: 20px;
width: 155px;
background-color:transparent;
}
#home:hover{
background-position: 0 -20px;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
You're targeting it wrong. Your CSS code is #home li a.
Your html is <li id="home"></li>.
You need to target it like this #home a since home is the list item.
Here's the jsfiddle to show you.
So I have
<ul>
<li>Hello</li>
</ul>
and
li {
list-style-image: url(../img/bullet.png); /* 13x13 px */
/* line-height: 13px; */
/* vertical-align: middle; */
padding-left: 5px;
}
which looks like
as you can see text and image element of <li> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?
The padding will affect only whatever is inside the element—the text, in your case.
The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:
list-style: none;
and then apply the desired image as the <li>'s background
li {
/** the image will be vertically aligned in the center **/
background: url(../img/bullet.png) left center no-repeat;
/** move the text to the right **/
padding-left: 20px;
}
you can have
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
May define a img-tag or a background: url(..) for the li-tag instead of the "list-style-image"
When you only have one line per list item you can add some padding-bottom to the li element
I also needed to add "no-repeat" to the background property
HTML
<p>You can have</p>
<ul>
<li> <span>Hello</span></li>
</ul>
CSS
li {
list-style-image: url('dot.png');
}
li > span {
top:-3px; position:relative;
}
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'