I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
Related
I have a navigation bar that has a black background with white text. The text changes to red when hovered over. however when the user is on the select page that specific background will change to red. however the hover over change the text to red. I want it so that when the user is on the home page, and they hover over the home button, the text doesnt change to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="topbar">
</div>
<div id="navbar">
<div id="navbtn">
<ul>
<li>Home</li>
<li><a href="custom.php" >Custom Printing</a></li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="logo">
<img src="testlogo.png" alt="logo">
</div>
</body>
</html>
the CSS:
#navbtn {
width:100%;
Margin:20px;
white-space: nowrap;
text-align:center
}
ul {
width:100%;
list-style:none;
margin:0;
padding:0;
display: inline-block;
padding-top: 2.25em;
}
li {
width: 140px;
display: inline-block;
}
a {
text-align:center;
font-size: 1.25em;
padding:8px 0;
display:block;
width:100%;
text-decoration:none;
color:#FFF;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
a:hover {
color:#F00;
background-color:#000;
}
You can use an active class to fix this easily: JSFiddle
<li>Home</li>
a.active {
background-color:#F00;
}
a.active:hover {
color: #fff;
}
I also added your active tab background color into the .active class removing your inline style
You could add:
<style type="text/css">
a:hover {
color:#FFF !important;
background-color:#000;
}
</style>
In your html pages but your "home" so it will rewritte the main css sheet.
I am making a personal bio site, and I want different color backgrounds for the header, body, and footer. I found this website, http://www.chimengxi.com/ and that is kinda what I am going for. In the end, I hope to get my header to be horizontal, instead of stacked. Some 3 toned color scheme would be awesome if its doable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h1>Terrence Horgan <br> Information Science Major </h1>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
CSS
body {
background-color:orange;
height:100%
}
ul.navbar {
background-color:orange;
text-align:right;
font-size:175%
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto
}
h1 {
position:relative;
bottom:85px
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative
}
Wrap your navbar in a div. Style the div background-color however you want.
Wrap the content below the navbar and above the footer in another div. Style accordingly.
Set background-color of footer to whatever you want.
Here is an example of changing the colors. I made them quite noticeable by coloring them green and yellow and adding a few simple CSS styles to make them fit accordingly (floats, text-aligns). Look at the code below, and please note I pasted your CSS at the top. All you need to do is paste the code between the tags into your CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%
}
ul.navbar {
background-color:green;
text-align:right;
font-size:175%;
padding-bottom: 10px;
text-align: center;
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block;
float: left;
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto;
font-size: 25px;
margin-top: 20px;
}
h1 {
float: left;
font-size: 24px;
text-align: left;
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative;
background-color: yellow;
width: 100%;
text-align: center;
}</style>
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<h1>Terrence Horgan <br> Information Science Major </h1>
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
I am new to HTML/CSS and need some help with text aligning. THe text are link and I'd like to align two links to the left of the page and one link to the right. Can anyone help? Here is my code
BACK and HOME buttons are meant to be aligned left, and MISC is meant to be aligned right
THanks Heaps it's driving me creasy!
HTML **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
</head>
<body>
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
</body>
</html>
CSS **
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
Add the following css to your links. Demo
#left{
float:left;
}
#center{
position: absolute;
left: 48%;
}
#right{
float:right;
}
use style="float:left;" for BACK and HOME buttons and style="float:right;" for MISC.
Put style="display:inline;" for ul tag.
Here you go.
WORKING DEMO
The Code:
MISC
I hope this is what you are looking for.
<div class="menu">
<ul>
<a class="pull-left" href="index.html">BACK</a>
<a class="pull-left" href="index.html">HOME</a>
<a class="pull-right" href="index.html">MISC</a>
</ul>
</div>
As you can see I've added classes to your links. Now lets add some class declarations to your stylesheet file:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
HTML
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
css
.right{
float:right;
}
DEMO HERE
You need better structure in your HTML ... Namely, in the ul element ... You're adding list items that are not labeled as list items. The alignment issue can be fixed using the following code.
For the sake of time, I've removed the reference to an external stylesheet, and added the styles in the head tag. You can remove the styles from the head tag and readd them to the stylesheet to maintain HTML best practices.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<style type="text/css">
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
.menu ul {
}
.menu ul li { display: inline-block; }
.menu ul li.misc {
float: right;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>BACK</li>
<li>HOME</li>
<li class='misc'>MISC</li>
</ul>
</div>
</body>
Pure CSS solution can be :
a:nth-child(3n) {
float:right;
}
or
a:nth-last-child(1) {
float:right;
}
Plus, write valid HTML. If you have only anchor elements for list then you have to use nav tag and there is no need of using extra div.
<body>
<nav class="menu">
BACK
HOME
MISC
</nav>
</body>
Remove margin-left from .menu.
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
OK! I just started HTML and CSS today and thought it would be a good approach to learn by building something rather than just reading some text.
[ http://jsfiddle.net/GUkrK/ ]
So I decided to build one sample navigation bar.
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
and the css
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
But now my problem is the positioning of that horizontal line. Do I have to place that by setting the pixels in absolute or relative positioning? Can't it be done automatically?
And how come the horizontal line does not cover the total width of the browser? and Can I adjust the width of that horizontal line?
EDIT: Thanks everyone. Here is the edited sample http://jsfiddle.net/sunu0000/zdDU5/
Remove float: left; from the CSS definition of #menu.
Sample
http://jsfiddle.net/Y8AAH/3/
CSS for #menu
#menu {
vertical-align:middle;
display:block;
width:600px;
height:108px; /* Looks better with like: 40px !! */
}
Depending on what your layout should look like this definition may be sufficient:
#menu {
display:block;
height:108px; /* Looks better with like: 40px !! */
}
Updated sample: http://jsfiddle.net/Y8AAH/4/
Updated sample with centered menu
#menu {
height:40px;
text-align: center;
}
http://jsfiddle.net/Y8AAH/5/
I sugger you read this before continuing. It appears you don't really know what you're doing, so learn before asking question =p