First heads up is that I'm in my first year at University and I could be making a dumb as balls mistake. However, when I try to get my a:selected to be the same length as my li:hover, the a:selected seems to be off by a few amount of pixels. I've been messing with the padding and still have no luck. Is there a specific reason with my CSS used or a technical problem/browser interpreting it differently?
Here's my CSS:
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation li:hover {
padding: 0px 0px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
#siteNavigation a:hover {
color: #BDBFBE;
padding: 10px 45px;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
margin: 0px;
padding: 0px 0px;
display: inline;
list-style: none;
color: #E03A00;
background-color: #BDBFBE;
border-bottom: 3px solid #E03A00;
border-top: 6px solid #BDBFBE;
border-left: 1px solid black;
border-right: 1px solid black;
}
#siteNavigation a {
margin: 0px;
padding: 0px 45px;
display: inline;
text-decoration: none;
color: #E03A00;
}
#siteNavigation #selected a {
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
Here's the HTML:
<!doctype html>
<head>
<title>First Web page</title>
<meta charset="utf-8" />
<meta name="author" content="Matthew Sharp" />
<meta name="description" content="Index page" />
<link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Grey Color's {Light to dark}:
FCFFFD
E3E5E4
BDBFBE
7E7F7F
3F403F
ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->
</head>
<body>
<nav id="siteNavigation">
<ul>
<li>
Home
</li>
<li id="selected">
Structure
</li>
<li>
Common Elements
</li>
<li>
CSS Selectors
</li>
<li>
Common CSS
</li>
</ul>
</nav>
<section id="bodyLayer">
</body>
And the results can be seen here:
Cheers.
Solution in JSFiddle
Basically, the problem is that you're applying the selected CSS to the a tag, when you wanted to apply it to the li tag.
The a tag captures the text and a small area around it based on the margin and padding, but the actual "cell" is represented by the li tag, so that's where you want to apply the selected CSS.
#siteNavigation #selected a { /*should be #siteNavigation li#selected*/
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
I also tidied up some of the CSS, like removing the unnecessary padding, the too-thick border-top for selected, and added this :
#siteNavigation #selected a{
color: #BDBFBE;
}
So the text color would be correct.
Check the JSFiddle for the detailed answer.
Here's a cleaned up version of your navigation:
Demo: http://jsfiddle.net/rxh17e3h/
Use float:left instead of display:inline-block
Use class="selected" istead of id
Control everything from the li. Don't assign hover to the a tag
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
border-bottom: 3px solid #E03A00;
border-top: 6px solid transparent;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #BDBFBE;
color: #E03A00;
}
#siteNavigation li a{
padding: 10px 45px;
color:inherit;
text-decoration: none;
}
#siteNavigation li:hover, #siteNavigation li.selected{
color: #BDBFBE;
background-color: #E03A00;
border-top: 6px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
}
The problem is that quite simply you are putting an action on the tag and expecting it to behave in the same way as the same action on an tag. Quite simply the two tags hold a different space on your page. The contains your tag.
So apply the behaviour to one or the other.
Some just target the a tag with a:hover a:selected etc others will target li. Whenever I get problems like this I just comment out the dimension code and un comment until the error appears or just use firebug.
Related
href won't work in Chrome but it works on Microsoft Internet Explorer or Edge.
Looks like the line (a href="....html")Something(/a) is not working on edge or safari.
It is like dropdown menu.
There is a lot of code. You can check this problem here: http://www.kuhnibelarusi.lv . You will see 4 blue lines. Click on one of them and there will be the dropdown menu.
.dropdown {
position: relative;
border-radius: 0px;
}
.dropdown-menu {
top: 100%;
left: 0;
z-index: 1000;
float: inherit;
padding: 5px 0;
margin: 4px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid #ccc;
border: 0px solid rgba(0, 0, 0, .15);
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
<li class="dropdown" style="list-style-type: none; padding: 5px; background-color: #3a4d5d; margin: 2px">Pakalpojumi <span class="caret"></span>
<ul class="dropdown-menu">
<li>Interjera dizains</li>
<li>Virtuves projektēšana</li>
</ul>
</li>
You are relying on default browser styles. As you have noticed, they are not reliable.
You also seem to be assuming href contains instructions how to style the elements - this is incorrect. href only defines the target url of the link.
If you want it to look in a specific way (turn blue, as you said), you have to use own css rules:
a,
a:link {
color: black;
}
a:hover {
color: blue;
}
a:visited {
color: red;
]
Strictly spoken, you only need the second part to make the link turn blue on hover, but if you don't define how it has to look before, you can again get different results in different browsers.
You need to tell Chrome and other browsers that you want a hover state for your 'a' tags, use CSS to do this...
.dropdown-menu li a {
color: red;
}
.dropdown-menu li a:hover {
color: blue;
}
you can also style :active and :visited
Try it out =]
Code:
<style>
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
}
.RoundButton:link {color: #000000;}
.RoundButton:visited {color: #000000;}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
</style>
Then I have some HTML:
<center><div class="RoundButton">Hi</div></center>
When I view it it shows the default link colors, but the round button changing color
works. I looked on W3Schools, and their example looks like mine, but works. Help?
Please make your question more specific. What is the issue on your styling?
Then change the .RoundButton:hover to a:hover {} to what ever you like.
The HTML:
<div class="RoundButton">Hi</div>
The CSS
.RoundButton
{
text-align: center;
text-decoration: none;
font-size: 34px;
width: 70px;
height: 40px;
background-color: #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #000000;
padding: 5px;
margin:0 auto;
}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
a:link {color: #000000;}
a:visited {color: #000000;}
The fiddle.
I centered the div using margin:0 auto instead of the <center> tag, and adjusted the CSS.
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some HTML and CSS that creates inline block elements (divs) that one might find on a landing page. However, they only appear to be vertically aligned correctly when they contain some content (an unordered list) inside the divs. If there is no content in the div, the element get pushed down. Here is a jsfiddle. Here is the code. Can anybody explain why the third div block is not vertically aligned?
EDIT: While I'm comfortable that the "fix" to this issue is to ensure that each div uses "vertical-align:top" in the styling, I'm still a little puzzled as to why I'm required to use this styling in the first place. I would think that the div elements would always line up evenly, regardless of the content inside the divs.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
inline-block elements are vertical-align:baseline; by default. Change this to vertical-align:top;
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
vertical-align:top; /* add this rule */
}
add vertical-align:top; to .landing-block class
Set vertical-align: top for the .landing-block class declaration in your CSS.
Add float: left
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;
}
jsfiddle
I found lots of things that do this using Javascript, but I was wondering if it was possible to do with just HTML and CSS. Specifically, I want the navbar to appear after one scrolls past the top header.
The following is the HTML code I'm currently using.
<h1>
<a class="border" href="http://example.com">home</a> <a class="border" href="forum">forum</a> <a class="border" href="links">links</a> <a class="border" href="contact">contact</a> <a class="border" href="contact/bio">bio</a>
</h1>
<div id="navigation">
Home
Contact
Forum
</div>
And here is the CSS code. This part is the top header.
h1 {
font-size:48px;
text-align: center;
color:#00F;
border-style: solid;
border-color: #360;
-moz-border-radius: 30px;
border-radius: 30px;
}
a:link {
color: #00F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00F;
}
a:hover {
text-decoration: none;
color: #006;
}
a:active {
text-decoration: none;
color: #000;
}
a.border {
border-style: solid;
border-color: #00F;
border-width: 5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
a.border:hover{
border-color:#006;
}
a.border:active {
border-color: #000;
}
And this part is the static navbar CSS.
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
The answer is no..You cannot
Reason:
CSS is not JavaScript
CSS cannot calculate nor it can detect that user has scrolled passed a certain element
So that's why people use JavaScript, so that necessary information such as client viewport size, element sizes etc can be calculated and the desired result is thrown to the user
I am trying to add menus to a combined background. But when I nest the background with the menus inside it, they dont co-work and dont align right. For instance when I move one of the menus to the left, the others start moving in another direction. Now I really tried solving this but it seems the only way right now is for me to adjust each of them until all are aligned right. So thats my question today:
How can i make this work, without adjusting each menu over and over again?
Here comes the css and html code
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li>a{color: white;
font-size: 12px}
<ul class="baked">
<li>
PointerIndex
<ul>
<li>Reflections</li>
<li>Practicing</li>
<li>NewsFeed</li>
<li>Explanatory Art</li>
<li>Top AI</li>
</ul>
</li>
</ul>
NOTE that i have a total of 9 of these menus, all of which are contained in the following div
div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
I am confused with the information which you have given.
I have modified your code in which the sub menu items are right aligned. Try it. Please specify little more information.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
<style type="text/css">
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
text-align:right; padding-right:10px;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li a{color: white;
font-size: 12px}
/* div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
*/
</style>
</head>
<body bgcolor="#999999">
<ul class="baked">
<li>
PointerIndex
<ul>
<li>Reflections</li>
<li>Practicing</li>
<li>NewsFeed</li>
<li>Explanatory Art</li>
<li>Top AI</li>
</ul>
</li>
</ul>
</body>
</html>