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.
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;
}
I have made a list of links in html for a prototype of a website:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stuffy_stylesheets.css">
<title> INF </title>
</head>
<body>
<div id= "content">
<p>More Stuff</p>
<p>Even More Stuff</p>
</div>
<div id= "list">
<ul id = "menu">
<li> wad</li>
<li> wad</li>
<li> wad</li>
<li> wad</li>
</ul>
</div>
</body>
</html>
These pages so far mean absolutely nothing, however,I wanted to style and format the links so that they are towards the top left of the web page and inline with each other, to do this, I have experimented with display: inline-block, however, for some odd reason that doesn't seem to work. So I was wondering what code I would need to add to format it this way. My CSS is below:
body{
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content
{
color: #eaeaea;
text-align: center;
}
#list{
display:flex;
}
#menu
{
padding: 10px;
float:left;
margin: 0px;
width: 15%;
}
#menu li
{
list-style: none;
width:10em;
display: block;
border-width:1px;
border-style:outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a
{
color:#545456;
background: #babbc1;
text-decoration: none;
text-align:center;
display:block;
cursor:pointer;
}
#menu li:hover
{
border-style:inset;
}
The only thing you seem to be doing wrong here is the width: 15% that you've applied on the #menu.
Skipping that property and adding display: inline-block on your li elements should solve this.
Here's a fiddle for the same.
P.S. - While you're at it, change border colour to border-color.
Change your css code to something like this.
body {
font-family: "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
background: #434447;
}
#content {
color: #eaeaea;
text-align: center;
}
#list {
display: flex;
}
#menu {
padding: 10px;
margin: 0px;
}
#menu li {
list-style: none;
width: 10em;
display: inline-block;
border-width: 1px;
border-style: outset;
border colour: black;
padding: 3px 2px 3px 2px;
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
}
#menu a {
color: #545456;
background: #babbc1;
text-decoration: none;
text-align: center;
display: block;
cursor: pointer;
}
#menu li:hover {
border-style: inset;
}
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.
I have a small problem with a hover. So I want to make hover of the a tag inside of span tag, gone.
Here is my HTML file:
<nav id="top-menu">
<ul>
<li> Home </li>
<li> <span>Products</span> </li>
<li> Statistics </li>
<li> Countries </li>
<li> Settings </li>
<li> Contacts </li>
</ul>
</nav>
And here is my CSS file:
nav#top-menu {
width: 100%;
height: 33px;
background-color: #696969;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li {
margin: 0;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 25px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 20px;
text-align: center;
background-color: #696969;
text-decoration: none;
color: #FFFFFF;
border-bottom: #696969 solid 2px;
}
#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }
#top-menu ul li span a{
color: black;
}
So I add this to make productshover, gone:
#top-menu ul li span a:hover { }
or
#top-menu ul li span:hover { }
But it didn't. Can anyone tell me what am I doing wrong?
Thanks.
Style the hover same as surrounding style (including text-decoration:none), and flag these as !important so they override the browser default stylesheet.
#top-menu ul li span a:hover {
color: #FFFFFF !important;
border-bottom: #696969 solid 2px !important;
text-decoration: none !important;
}
The properties you have to specifically control, are the ones which the "hover" would normally style. Most typically, that might be color.
Try to add hover for the a with !important like
#top-menu ul li span a:hover {
border-bottom: #FFFFFF solid 2px !important;
}
Because you have already given border-bottom to the anchor tag before.
Say something like that for the span:
span a:hover{/*Nothing here*/}
It should negate the hover effect. Hope this helps.
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 */