I am playing around with CSS and so far I'am trying to make a website. I making a navigation bar and it's going down so it's horizontal. I need it to go across and I also need like 1 grey line to separate the tabs out. This is what I got so far.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
CSS:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
So again this goes downwards , i need it to go to the side and just have like a single line which separate every tab out.
div.horizontal
{
width:809px;
height:63px;
position:relative;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left:5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
display: inline;
color:#FFFFFF;
background-color:#000000;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Working fiddle:
http://jsfiddle.net/EpPSv/10/
Related
i want to make a navigation bar similar the one found here.
I tried but I couldn't :D
Here's what I did:
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
or you can try the fiddle that i created
http://jsfiddle.net/uYd9u/
I believe this is what you are looking to do.
http://jsfiddle.net/cornelas/uYd9u/11/
In order to achieve what you are wanting to create.
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
border-bottom: 4px solid #98bf21;
text-align: right; //ADD
}
li
{
display: inline-block; //REMOVE FLOAT:right;
vertical-align: bottom; //ADD to align to bottom
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
li.active,li.active a:link{//ADD so you can have one box have a background.
background-color:#98bf21;
color:#FFFFFF;
}
a:hover,a:active
{
background-color:#7A991A;
}
I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?
I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?
Here is my CSS Code:
/*navigation.xhtml; author: Mica */
#navigation {
float:left;
width:100%;
height:18px;
margin:15px 0 25px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
padding:0px;
float:left;
width: 100%;
}
#navigation li.topmenu {
float:left;
width:170px;
}
.topmenu a {
float:left;
width:100%;
text-align:center;
}
.topmenu ul {
float:left;
display:none;
width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
padding:3px 0;
border:1px solid #C27000;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#FF8C00;
margin:0;
font-weight:bold;
}
.submenu a{
width:100%;
clear:both;
postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
background-color:#FFA500;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#logo a:hover {
opacity:0.8;
}
/*content in basicTemplate.xhtml; author: Mica */
#content {
float:left;
min-height:200px;
margin:0 7px;
}
HAHAAA found it!
z-index only works when a position is declared first: so I need to set in this block a position:
.topmenu:hover ul {
display:block;
z-index:500;
}
Like here:
.topmenu:hover ul {
display:block;
position:relative;
z-index:500;
}
How can I get a list to flow to the side?
The best example ive seen of what I mean is on TruTower's VoIP Page. I'm trying to update my site from old html to new css but cant find the right code.
Prefer OL style (numbers) but UL is okay too.
You may want to look at this jsfiddle for an example to get you started.
http://jsfiddle.net/ashrobbins/SKzwU/
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
Updating Andrew's answer to suit your needs exactly:
Screenshot:
HTML:
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ol>
CSS:
ol {
margin:0;
padding:0;
position:absolute;
right:0px;
left:0px;
background: #eee;
}
li {
float:left;
padding-left:5px;
list-style-position: inside;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:inline-block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
li:hover{
color: #fff;
background-color:#666;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
FIDDLE
I'am trying to make this in css. Trying to make this navigation bar. Any help would be great.
This is what iam trying to do:
So the first pic is how it should look like when the user enter the website. Then if they hover over the any of the tabs it should just change color. Any help on trying to make this would be great. I tried this but wont work.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
Just need to see what the css would look like. Thanks again
EDIT what i have done as people want 2 see:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Like i said this is not right but this is all i can do atm. Thanks
Using your HTML, you can do something like this:
CSS
ul{
list-style:none;
}
li{
float:left;
width:100px;
height:50px;
background:black;
border:2px solid gray;
text-align:center;
}
a{
color:white;
text-decoration:none;
font-size:24px;
font-weight:bold;
line-height:50px;
font-style:italic
}
li:hover{
background:gray;
}
JSFiddle.
Just change the colors.
hello
what i am trying to is to create a sub menu from a sub menu. for example if a user hovers over Actions this then drops to show say billing - mail etc. i would like to create another sub if a user hovers over billing. i have attached the code i am using which is stu nicholls pro dropdown. thanks
menu css
.nav {
height:35px;
background: url(images/pro_line_0.gif) repeat-x;
margin-top:100px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:500;
}
.nav .table {
display:table;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
padding:0 5px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(images/pro_line_2.gif);
padding:0 0 0 10px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(images/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
padding:0 0 0 15px;
cursor:pointer;
color:#088;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 5px 0 15px;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back_0.gif);*/
padding:0;
z-index:100;
left:0px;
text-align:left;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 5px 0 30px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
/*background:url(images/back_1.gif);*/
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
font-weight:bold;
/*background:url(images/back_1.gif);*/
}
sample html
<ul class="select"><li><a href="#nogo"><b>Control Panel</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li>Tickets</li>
<li>Messages</li>
<li>Actions</li>
<li>History</li>
<li>Settings</li>
<li>Destruction</li>
<li>Contacts</li>
<li>Users</li>
<li>Companies</li>
</ul>
</div>
Try using nested <ul>s in your HTML. That is, build your menu like so:
<ul class="menu">
<li>
<a>My Link</a>
<ul class="submenu">
<li><a>My Nested Link</a></li>
</li>
</ul>
Then use a simple Javascript solution like Superfish (or one of your chosing)
http://users.tpg.com.au/j_birch/plugins/superfish/