I have this CSS for a vertical menu:
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
how can i make the <li> elements without a a href link different like a menu title so the links below are like a sub menu
here is a fiddle with the full code:http://jsfiddle.net/32hqL/
for example, where it says Link Title, needs to be different like a proper title. maybe centered or something
you can wrap the title in a span and then style the span:
<li><span>LINK TITLE</span></li>
#vertical_menu li span {}
http://jsfiddle.net/peteng/32hqL/4/
http://jsfiddle.net/32hqL/1/
You do it by using:
li:not(a) {
color: red;
}
You can set some style on #vertical_menu li, which will be override with #vertical_menu li a
Demo
try this
http://jsfiddle.net/32hqL/11/
CSS
#charset "UTF-8";
/* CSS Document */
#vertical_menu {
float:left;
padding-left:10px;
}
#vertical_menu > ul > li {
display:inline-block;
width:250px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
text-align:center;
font-weight:100;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
ul {
padding:0px;
margin:0px;
}
li:not(a) {
color: red;
text-align:center;
font-weight:600;
}
You can define set of styles for link title in separate class and give that class to link title li's. Have a look at working demo here: http://jsfiddle.net/32hqL/9/
.title{
text-align: center;
color: blue;
font-weight: bold;
padding: 5px 0 0 0;
}
Related
I am unable to remove the underline in between the clickable buttons. It seems to continue as a block, but I can't remove display:block; as it makes only the text clickable.
#font-face {
font-family:"cfont";
src: url("font/Guerra_Santa.ttf");
}
body {
margin:0;
}
#menu {
background-color:black;
height:70px;
width:800px;
margin-right:auto;
margin-left:auto;
}
#menu ul {
list-style-type:none;
text-align:center;
}
#menu li {
font-family:cfont;
display:inline-block;
text-align:center;
line-height:70px;
height:70px;
width:200px;
background-color:#C28285;
}
#menu ul li a {
display:block;
text-decoration:none;
color:white;
}
Demo
Don't self close the anchor.
Change:
<li><a href="index.html"/>Home</li>
To:
<li>Home</li>
http://jsfiddle.net/wdwgmvtk/13/
I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem.
I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here http://jsfiddle.net/sxP94/22/.
I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful.
Here is the code:
CSS
body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
}
.main {
background:#f8f8f8;
}
a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}
.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;
}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}
HTML
<body>
<div class="main">
<div class="header">
<div class="header_resize">
<div class="menu_nav">
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span>
<ul>
<li>Boudoir</li>
<li>Babies</li>
<li>Engagement</li>
<li>Wedding</li>
<li>Lifestyle</li>
<li>Family</li>
<li>Grads</li>
</ul>
</li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer.
Give position: relative to parent of the sub menu. The sub menu is given position:absolute and hence shows up outside.
.menu_nav ul li {
position: relative;
}
I would like to create some empty space between lines in my list. At the moment the lines are continuous. Here is a jsfiddle example I created: http://jsfiddle.net/bonyhad/pnPDz/8/
Here is the CSS:
#example {
width:800px;
height:220px;
display:block;
overflow:hidden;
margin:0 0 4em 0;
}
#example ul {
list-style:none;
margin:0;
}
#example li {
border-bottom:1px solid #fff;
}
#example h1 {
color:#000;
font-size:20px;
margin-bottom:5px;
}
#example a:link, #example a:visited {
color: #444;
display:block;
border-bottom:1px solid #666;
text-decoration:none;
padding: .3em .25em;
}
.links {
float:left;
width:615px;
margin:0;
padding:0;
}
.links ul {
margin:0;
padding:0;
}
#example .links li {
float:left;
margin 0 20px 0 0;
width:185px;
}
#example .links li:nth-last-child(2),
#example .links li:nth-last-child(3),
#example .links li:nth-last-child(2) a,
#example .links li:nth-last-child(3) a,
#example li:last-child,
#example li:last-child a {
border: 0;
}
And here is the HTML:
<section id="example">
<div class="links">
<h1>links</h1>
<ul>
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
<li>Example9</li>
<li>Example10</li>
<li>Example11</li>
<li>Example12</li>
<li>Example13</li>
<li>Example14</li>
<li>Example15</li>
<li>Example16</li>
<li>Example17</li>
<li>Example18</li>
</ul>
</div>
</section>
Each item on the list should be underlined separately, not as a continuous line.
do this: (update your #example li css to this)
#example li
{
border-bottom:1px solid #fff;
padding:5px;
margin:2px;
}
working fiddle
have a look at box model and mdn
Add a 5px space to the right of each item:
#example li {
margin-right:5px;
}
How can I force all items in a horizontal list (menu) to be the same width?
This is my CSS code so far:
a { text-decoration:none; }
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { display:inline; }
#navlist li a {
padding:10px;
margin:2px;
background:grey;
color:white;
}
#navlist li a:hover {
color:white;
background:black;
}
EDIT:
It now works (thanks to #Gaby) by changing the first 3 lines into:
#navlist ul { margin:0; padding:0; list-style-type:none; }
#navlist ul li { float:left; text-align:center; }
#navlist ul li a { text-decoration:none; display:block; width:120px; }
float the elements and make them block instead of inline
#navlist ul { margin:0; padding:0; list-style-type:none; overflow:auto; }
#navlist ul li { display:block;width:100px;float:left; }
You might want to make the a to be block as well, to fill the li and make it all clickable..
I'm better about getting things to look good in IE8, FF, and Safari, but IE7 still throws curve balls at me...
Please check out this page and scroll down below the nav bar:
http://rattletree.com/instruments.php
It should become obvious when viewing in FF vs IE7. For some reason the formatting of the list is pushing the list items down on the page...
any tips?
<ul class="instrument">
<li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li>
<li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li>
</ul>
css:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
li.imagebox img{
border: solid black 1px;
}
li.textbox {
display:inline;
}
li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
basically this line ul.instrument li { is overiding li.imagebox etc.
so what you can do is this:
CSS:
ul.instrument {
text-align:left;
display:inline-block;
}
ul.instrument li {
list-style-type: none;
display:inline-block;
}
ul.instrument li.imagebox {
display:inline;
margin:20px 0;
padding:0px;
vertical-align:top;
}
ul.instrument li.imagebox img{
border: solid black 1px;
}
ul.instrument li.textbox {
display:inline;
}
ul.instrument li.textbox p{
margin:10px;
width:340px;
display:inline-block;
}
Basically what I did, instead of declaring li.imagebox I used ul.instrument li.imagebox
so that it won't be overide by this declaration ul.instrument li
Hope this helps :)
Edit, here's another take but this approach is different it uses float
CSS:
ul, li, h3, p { margin: 0; padding: 0 }
ul, li { list-style: none }
ul.instrument { overflow: hidden}
ul.instrument li, ul.instrument li img { float: left; }
ul.instrument li.imagebox { margin:20px 0; }
ul.instrument li.imagebox img { border: 1px solid black }
ul.instrument li.textbox p { margin: 10px; width: 340px }
but this one works in all browsers, I promise :D. Basically the first 2 lines resets the elements you used so that it will look the same in all browser.