How to insert two hyperlinks side by side inside an li item?
In the html code below, I need to put "login" and "register" link side by side separated by a "|". What modification is required in the below code to accomplish the task.
Thanks.
The html file:
<!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"></html>
<html>
<head>
<link href="styledel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li>Home</li>
<li>The Tool
<ul id="subnavlist">
<li>Secondary Link</li>
</ul>
</li>
<li>Tutorials & FAQs</li>
<li>Login | Register</li>
</ul>
</div>
</body>
</html>
The css file:
#navcontainer
{
border-right: 1px solid #000000;
padding: 0px; /* menu look*/
font-family: 'Courier New',Courier,monospace;
background-color: #d4cfcf;
}
#navcontainer ul
{
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}
#navcontainer li a /*menu */
{
display: block;
padding: 5px .3em 5px .3em;
border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
color: #004963;
text-decoration: none;
}
#navcontainer li a:hover /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000;
}
#navcontainer li li /*sub menu*/
{
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
}
# navcontainer li li a /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a color of text */
}
/* navigation menu end */
Thanks a ton.
UAs the code is now, the links should be side by side. If they arn't, it's because they don't have enough space. This could be because you're setting a width that's too small, or the margins and paddings reduced the available space.
If you want the list items to be in one line, you use display:inline on them
#nav li{display:inline}
ul{list-style:none;} /* because you don't want a list with inline items to have bullets. */
Try switching a little of the CSS out from the <a> tag to the <li> element instead, like below, where you remove display:block from the li a and move the border-decoration to the li. Then, where you have #navcontainer li li, remove the border-decoration by setting border-left:0px and border-right:0px;
#navcontainer li
{
padding: 5px .3em 5px .3em;
border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}
color: #004963;
text-decoration: none;
}
#navcontainer li a:hover /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000;
}
#navcontainer li li /*sub menu*/
{
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
border-left:0px;
border-right:0px;
}
#navcontainer li li a /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a color of text */
}
/* navigation menu end */
Related
I want to have the entire tab menu to be clickable. In order to do that, I need the "a href" to fill the entire tab but doing so I lose the exact size and shape I want. I'm trying to accomplish by adding the :not(#sub_menu ul il) to the main ul, il{} css styles but it throws the portions out of whack.
So how can I accomplish this in HTML & CSS? Also, the bottom border is still viewable, so how can I fix this as well? Thank you
Adding :not(#sub_menu ul li) to the main p, il settings.
Then increasing the padding by 5px to "10px 20px" in #sub_nav ul li #selected.
Home Page
<body>
<main>
<h3>Home</h3>
<nav id="sub_nav">
<ul>
<li id="selected">Home</li>
<li>Away</li>
</ul>
</nav>
</body>
Away Page
<body>
<main>
<h3>Away</h3>
<nav id="sub_nav">
<ul>
<li>Home</li>
<li id="selected">Away</li>
</ul>
</nav>
</body>
CSS
#sub_nav {
float: left;
width: 100%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid;
}
#sub_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#sub_nav ul li {
display: inline;
border: 1px solid black;
}
#sub_nav ul li a {
padding: 5px 15px;
color: inherit;
text-decoration: none;
border-width: 1px 1px 0px 1px;
}
#sub_nav ul li#selected {
border-bottom: 1px solid white;
}
main {
margin-bottom: 1px;
padding: 1px;
height: 4000px;
width: 80%;
border: 1px solid black;
float: left;
}
main ul {
margin: 10px;
padding: 10px;
}
main p, li {
margin: 5px;
padding: 5px;
}
One of my assignments is to create a responsive webpage. I'm running into trouble when attempting to open it on mobiles. My 'li' elements touch and look awful.
How can I stop the 'box' around each li item from touching?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active">Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}
JSFIDDLE
Add the following code to the li a selector apart from other styles that you have applied.
li a {display:inline-block;}
Check the updated JSFIDDLE
The important thing is that for responsive webpage you should use media queries as well.
This is how I want the navigation bar, as in : http://themediaoctopus.com/social-media/nostalgic-approach-advertising
How to change the complete color of <li> when hovered on or selected?
Any idea on how to get those seperators between those buttons?
Selection action doesn't work, why? I'm on a particular page and that button on navigation bar is not highlighted. Why and how can I do it?
Here is my current navigation bar when hovered:
Here is my HTML :
<body>
<nav>
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>GET IT</li>
<li>WHAT YOU CAN DO</li>
<li>ABOUT</li>
</ul>
</nav>
</body>
Here is my CSS :
body {
color : #F9F9F9;
}
nav {
background-color: #26AD60;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 15px 0px 15px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #F9F9F9;
border-bottom: none;
font-weight: bold;
text-decoration: none;
}
nav ul li a:active {
background-color: #1C8148;
text-decoration: none;
}
nav ul li:hover {
background-color: #1C8148;
color: #F9F9F9;
}
Add this:
padding: 15px 10px 15px 10px;
To your nav ul li:hover{ CSS
Fiddle: http://jsfiddle.net/39Lzp/
In order to have that item be highlighted based on the page you are on you can add a class to it and style that class accordingly. Then, in each different HTML file, you add that class to the corresponding element. For example, index.html would look like this:
<li class="current">HOME</li>
<li>HOW IT WORKS</li>
But how_it_works.html would look like this:
<li>HOME</li>
<li class="current">HOW IT WORKS</li>
Now, for the borders, all you need to do is use the border property like so:
nav ul li {
border-left: 1px dashed white;
}
nav ul li:first-of-type {
border-left: none;
}
Also, in order for the border to span the entire height of the nav bar, change this:
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
To this:
nav ul li {
display: inline;
padding: 15px 10px 15px 10px;
}
http://jsfiddle.net/LbBEK/
Also, for future reference, you have 3 separate questions here. Next time, break your questions up to be more concise and you'll find yourself getting a much better response here on SO.
Its good if you use a:hover and the properties given to it... which allow user to have clickable area been selected and highlighted.
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>project</li>
</ul>
</nav>
CSS:
nav{
display:block;
background:#26AD60;
}
nav ul{
list-style:none;
margin:0px;
padding:0px;
overflow:hidden;
}
nav ul li{
float:left;
border-right: 1px dashed rgba(255, 255, 255, 0.25);
}
nav ul li:last-child{
border:none;
}
nav ul li a{
transition: all 0.25s linear 0s;
padding: 0px 20px;
line-height: 50px;
outline: medium none;
font-family:arial;
font-size:12px;
color: rgb(255, 255, 255);
text-shadow: none;
text-transform: uppercase;
text-decoration:none;
display:block;
}
nav ul li a:hover{
background: #229b56;
}
Please check this jsfiddle to see the same.
Just change the hover statement background-color
nav ul li:hover {
background-color: blue; // here
color: #F9F9F9;;
}
You may want to change the active statement too
nav ul li a:active {
background-color: red;
text-decoration: none;
}
For the border, you can like something like this :
nav ul li {
border-right: 1px dashed rgba(255,255,255,0.25)
}
nav ul li:last-child {
border: 0; // they dont do this, but I prefer with it. As you want.
}
Demo JSFiddle
Apply this on hover padding: 15px 10px 15px 0px;
See demo
Apply border property border-right: 1px dashed #fff for dashed separation between li.
Please look at my CSS Tabs menu: http://jsfiddle.net/NoGo/3Spru/
It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: not actively developed anymore)
The Tabs are: Home | Users | Map
My HTML:
<nav>
<div class="ym-wrapper">
<div class="ym-wbox">
<ul>
<li>
<a href="#">
<div>Home <i class="icon-home"></i></div>
<span>Go to Main Page</span>
</a>
</li>
<li class="active">
<a href="#" class="">
<div>Users <i class="icon-search"></i></div>
<span>Search User Accounts</span>
</a>
</li>
<li>
<a href="#">
<div>Map <i class="icon-globe"></i></div>
<span>Users near you</span>
</a>
</li>
</ul>
</div>
<div class="ym-clearfix"></div>
</div>
</nav>
The CSS:
header nav {
clear: both;
width:100%;
position:relative;
white-space: nowrap;
padding-top:10px;
border-bottom: 2px solid #CA278C;
}
header nav ul {
list-style: none;
padding:0;
margin:0;
display:inline;
}
header nav ul li {
display: inline-block;
border-top: 2px solid transparent;
margin: 0 5px -2px 0;
background-color: #f0f0f0;
border-bottom: 2px solid #CA278C;
line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #fff;
background-color: #fff;
}
header nav ul li.active {
border-right: 2px solid #CA278C;
border-left: 2px solid #CA278C;
}
header nav ul li a {
display: inline-block;
padding: 5px 16px;
}
header nav ul li a div {
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
header nav ul li a span {
font-size: 11px;
color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
vertical-align: baseline;
line-height: inherit;
opacity: 0.7;
}
My problem: When I change browser zoom, the bottom-line looks ugly. Is there a better way than working with margin-bottom: -2px on li elements?
I could get it to look a lot better by using subpixel positioning and setting the margin-bottom and border-width to -1.5px and 1.5px respectively. It looks fine here at jsFiddle - with minimal effort - on 100% up to somewhere close to 200%, and you could probably get it to look even better at other zoom levels by going further down the subpixel rendering path.
But then it dawned on me that you don't really need to have that bottom border on the inactive tabs, just set the margin-bottom on the tabs to 0px and then set the margin-bottom at the .active and :hover class to -2px. This will automatically look fine on any zoom level, as you won't have to worry about 'lineing up the lines' at all. Here's a jsFiddle for this approach.
header nav ul li {
display: inline-block;
margin: 0 5px 0 0;
border-top: 2px solid transparent;
background-color: #f0f0f0;
line-height: 180%;
position: relative;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #FFF;
background-color: #fff;
margin-bottom: -2px;
}
Here's what i've done so far:
<html>
<head>
<style>
/* Tabs */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
/* WARNING: when using font-size/font-family instead of font,
do not forget to set line-height:normal otherwise 1px more is shown
between tabs and their bottom line in IE8 and FF3.6 */
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 0px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a id="current" href="#">Col1</a></li>
<li>Col2</li>
<li>Col3</li>
</ul>
</div>
</body>
</html>
And it's saved to http://jsbin.com/uvako3/2. Thanks for your help
Just add text-align: right; to the #navlist css.
Explanation: You are making your list items inline elements. That makes them follow the general rules that apply to text. So by simply setting the text align, you are specifying where inline elements are aligned to.