So I'm trying to make an image a hidden link. I had my links in my topBar div be styled to look like buttons with CSS, when I attempted to make an image in my Header just a simple link you could click on it styled it like the button even though it was in an entirely differnt div tag and had a different div class.
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head title="ScoopNoop">
<link rel="stylesheet" href="../css files/scoopnoop.css">
</head>
<body>
<div class="topBar">
Jump to Bottom Bar
Page 2
Google
Colts
</div>
<br>
<div class="header">
<a href="https://en.wikipedia.org/wiki/Easter_egg_(media)">
<img src="../images/derp.jpg" alt="Derp">
</a>
<h1>
ScoopNoop
</h1>
<img src="../images/derp.jpg" alt="Derp">
</div>
CSS:
/* All */
body {
background-color: skyblue;}
.body {
padding: 15px 15px;}
/* Bottom Bar */
.bottommBar {
float: left;
margin: 15px;}
.bottomBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;}
.bottomBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
/* Header */
div.header {
text-align: center;
margin: 3em;}
.header img {
max-width: 10%;
height: auto;
margin: 5px 5px;
display: inline-block;}
.header h1 {
margin: 5px 5px;
display: inline-block;}
/* Top Bar */
.topBar {
margin: 2em;}
.topBar a:visited, a:active, a:link {
margin: 5px;
padding: 5px;
color: lightgrey;
text-align:center;
background-color: red;
text-decoration: none;
float: left;[enter image description here][1]}
.topBar a:hover{
margin: 5px;
padding: 5px;
color: black;
text-align:center;
background-color:yellow;
text-decoration: underline;
float: left;}
Instead of
.topBar a:visited, a:active, a:link
and
.bottomBar a:visited, a:active, a:link
It should be
.topBar a:visited, .topBar a:active, .topBar a:link
and
.bottomBar a:visited, .bottomBar a:active, .bottomBar a:link
Related
<head>
<title>HTML5/CSS3 Responsive Theme</title>
<meta charset="UTF-8">
<link href="main.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale=1">
</head>
<body class="body">
<header class="mainheader">
<img src="img.jpg">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
body {
background-image: url(img1.jpg);
color: #000305;
font-size: 87.5%;
font-family: Arial, "Lucida Sans Unicode";
line-height: 1.5;
text-align: left;
}
a {
text-decoration: none;
}
a:link, a:visited; {
}
a:hover, a:active; {
}
.body {
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav {
background-color: #666;
height: 48px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited, {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
All the attributes you see here are working except those within .mainheader nav a:link , .mainheader nav a:visited. (color: #FFF; display: inline-block; padding: 10px 25px; height: 20px;) You asked to see more code, here it is. Thanks
Of course it will not apply. Why?
You have a syntax error , comma after the selector.
Try changing this to:
.mainheader nav a:link, .mainheader nav a:visited,
to:
.mainheader nav a:link, .mainheader nav a:visited
Try this
.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
Please tell me why the four nav items are not centering. I want the space between the middle two nav elements to line up with the center marking.
https://jsfiddle.net/yerc52px/
.mainHeader nav {
background: #383838;
font-size: 1.143em;
height: 40px;
width: 100vw;
line-height: 30px;
margin: 0px 0px 0px 0px;
padding: 0;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {margin: 0px 0px 0px 0px;}
.mainHeader nav ul li {display: inline;}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
width: 18%;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #727272;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Your .mainHeader nav has a width of 100vw when you should probably be using 100%. 100vw wont take into account the margin being applied by the body tag, so it actually spills over 100% to be something like 100% + 20px.
https://jsfiddle.net/yerc52px/3/
.mainHeader nav {
width: 100%;
also your .mainHeader nav ul has default padding being applied to it. Use this to fix that issue:
.mainHeader nav ul {
margin: 0px 0px 0px 0px;
padding: 0;
}
Now to fix the paragraph tag... remove this:
p {
margin-left: auto;
margin-right: auto;
width: 10px;
}
and replace it with:
p {
text-align: center;
}
I'll introduce you to FLEX!
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Overwrite your syntax on the following.
.mainHeader nav ul {
display:flex;
justify-content:space-between;
// or if you want equal spaces between menu options
// use justify-content:space-around
}
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
// Removed width
}
But bewary, you should always put prefix like -webkit-, -moz-, -ms-, etc... But some browsers aren't supported like our favorite IE.
Here's your updated JSFIDDLE
https://jsfiddle.net/yerc52px/6/
You Have to remove width from your code . Edit this section.
.mainHeader nav a:link, .mainHeader nav a:visited {
padding: 5px;
color: #fff;
display: inline-block;
height: 30px;
/* width: 18%; */
}
https://jsfiddle.net/lemonkazi/yerc52px/5/
I have asked everyone I know, and I've searched this site too, but no luck. Now I'm asking all of you for help. I am using HTML5 and CSS3 to make my second website. (First one was 7 years ago, looks terrible now!)
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image and any other content on the page. I have tried using the z-index in every possible place (with a position marking) and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the NavBar HTML Code:
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gigs</li>
<li>Groups
<ul>
<li>SB Trio</li>
<li>NYGT</li>
<li>Qtto Bloomdido</li>
</ul>
</li>
<li>Publications</li>
<li>Repairs</li>
<li>Lessons</li>
<li>Contact</li>
</ul>
</div>
Here's the CSS from the NavBar:
#nav { position: relative;
top: 0;
text-align: center;
background-color: #FF9933;
background-image: url(images/WoodAfromosia.jpg);
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size: 130%;}
#nav ul { list-style: none;
padding: 1;
margin: 0% 0% 0% 0%;}
#nav ul li { float: center;
display:inline-block;
font-weight: bold;
text-transform: uppercase;}
#nav { overflow: hidden; width: 100%;}
#nav ul li a {display: inline-block;
padding: .5em;
background-color: peachpuff;
background-image: url(images/Paperpapyrus.jpg);
border: 2px solid #000;
border-radius: .5em;
margin: 3% 6% 3% 6%;
white-space:nowrap;}
#nav ul ul {display: none;}
#nav ul ul li {display: block;
float: left;
text-align: left;
margin: -6.5% 0% 0% -40% ;
width: 100px;}
#nav li:hover ul { position:absolute; /* Position under correct tab */
display:block;}
#nav li:hover li { float:none;
overflow: visible;}
#nav ul a:link { color: black; }
#nav ul a:visited { color: black; }
#nav ul a:focus { color: blue;
border-color: #fff; }
#nav ul a:hover { color: darkviolet;
border-color: #fff; }
#nav ul a:active {color: cyan; }
Here's the CSS from the Background Image and Intro Image just below the NavBar:
body { position: relative;
padding: 0;
margin: 0;
background-color: azure;
background-image: url(images/Paperwhitebricks.jpg);}
a {text-decoration: none;}
#intro {text-align: center;
margin: -1% 0% -.5% 0%;}
remove overflow:hidden from the #nav it will fix the issue
#nav {
overflow:hidden /* remove */
width: 100%;
}
here is the fiddle
JS Fiddle
I have been trying to get to grips with responsive layouts.
The active link on the nav bar does not appear to be working and I cannot see what I have done wrong.
I would like the navigation bar to highlight the current active page. In this case, the active page is the home page. At the moment it is displaying a grey background, however, I would like it to be orange.
It would be much appreciated if someone could take a look at the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<header class="main-header">
<img src="Images/logo.gif" alt="Logo">
<nav><ul>
<li class="active">Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul></nav>
</header>
</body>
</html>
CSS:
body{
background-image: url('Image/bg.png');
color: #000305;
font-size: 87.5%;
font-family: Arial;
line-height: 1.5;
text-align: left;
margin: 0;
padding: 0;
}
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: none;
}
a:link, a:visited{
color: #CF5C3F;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active{
background-color: #CF5C3F;
color: #fff;
text-decoration: none;
}
.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.main-header img{
width: 30%;
height: auto;
margin: 2% 0;
}
.main-header nav{
background: #666;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px;
}
.main-header nav ul{
list-style: none;
margin: 0 auto;
}
.main-header nav ul li{
float: left;
display: inline;
}
.main-header nav a:link, .main-header nav a:visited{
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 23px;
text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.main-header nav li a {
border-radius: 5px;
}
.main-header img {
width: 30%;
height: auto;
margin: 3% 0;
}
This seems to be the piece of CSS where you try to target the 'active' menu button:
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
You are targeting elements with a mainHeader class, but your <header> element has a class called main-header.
In your CSS, replace all occurences of .mainHeader with .main-header and everything should work.
Add a class to your nav, let's say "navigation"
then in css add,
.nav ul li a:current {
//code here
}
Let me know how you get on.
OK - I admit I am a CSS Newb (be gentle please) and not all that much of an HTML guru either - I am much better with business logic than front ends. That said, I am developing a web site for my husband (We cant afford to have it done outside). I am trying to implement a sticky footer on a page that may have variable length. The problem is that ever since I implemented the menus on the left side of the page, the footers jump up to the top of the page. I have no idea why, and can't seem to figure out why. The page contents are pulled from a database. The basic HTML layout is written in HTML with the detail information (the tab strips, menus, content) written out of a database via php. The basic HTML structure is like this:
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
<div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</body>
The CSS is as follows (Note: I have tried all variations of the sticky footers solution that I have found here and on line.) Any suggestions are appreciated.
<style>
/*START NAV*/
ul, ul li, li{list-style: none;}
#navigation-wrapper{
background-image: url(images/line.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 100px;
width: 1000px;
margin: 27px 0 0;
}
#logo{
display: block;
float: left;
height: 150px;
width: 200px;
display: block;
text-indent: -999993px;
background-image: url(images/wgclogo2_small.png);
background-repeat: no-repeat;
background-position: center center;
}
#logo a {
margin: 10px 0 0;
display:block;
height:100%;
width:100%;
}
#navigation{
display: block;
float: right;
margin: 10px 0 0 0;
}
#navigation ul {
color: #323131;
font-family: "proxima-nova",sans-serif;
text-transform: uppercase;
text-align: right;
}
#navigation li {
display:inline;
padding: 0 0 0 15px;
font-weight: 600;
}
#navigation a {
color: #323131;
text-decoration: none;
font-size:13px;
}
#navigation a:hover{
color: #78756f;
border-bottom: 5px solid #323131;
border-top: 5px solid #323131;
padding-top: 12px;
padding-bottom: 10px;
}
div#nav{
width: 577px;
height: 44px;
}
div#nav ul {
width: 100%;
height: 100%;
overflow: hidden;
}
div#nav ul li {
float: right;
}
div#nav ul li a {
text-indent: 100px;
overflow: hidden;
display: block;
height: 44px;
}
/*Start First item in Nav 42+0=42 */
div#nav ul li.about a {width: 42px}
div#nav ul li.about a:hover, div#nav ul li.about a.current { }
/*End First item in Nav*/
/*Start Next item in Nav 58+42=100 */
div#nav ul li.food a {width: 58px}
div#nav ul li.food a:hover, div#nav ul li.food a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 54+100=154 */
div#nav ul li.special a {width: 54px}
div#nav ul li.special a:hover, div#nav ul li.special a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav 42+154=196 */
div#nav ul li.service a {width: 42px}
div#nav ul li.service a:hover, div#nav ul li.service a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.cost a {width: 52px}
div#nav ul li.cost a:hover, div#nav ul li.cost a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.contact a {width: 57px}
div#nav ul li.contact a:hover, div#nav ul li.contact a.current { }
/*End Next item in Nav*/
/*Start Next item in Nav No more adding neccesary*/
div#nav ul li.customers a {width: 50px}
div#nav ul li.customers a:hover, div#nav ul li.customers a.current { }
/*End Next item in Nav*/
/*END NAV*/
/*START CONTENT & HEADERS*/
html, body{
height: 100%;
background-image: url(images/bkg.png);
}
#content-container{
min-height: 100%;
position:relative;
vertical-align: top;
}
#body-wrapper{
/* overflow: auto; */
min-height: 100%;
padding-bottom: 40px;
display: inline-block;
position:absolute;
vertical-align: top;
}
#content{
display:inline-block;
position: absolute;
width:800px;
margin-left: 200px;
}
h1 {
text-align: left;
text-decoration: none;
color: #003366;
font: normal normal 30px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h2 {
text-align: left;
text-decoration: none;
color: #993300;
font: 24px Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
h3 {
text-align: left;
font: 16px Georgia, "Times New Roman", Times, serif;
color: #666666;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
p.alert{
text-align: left;
font-weight: bold;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #ff5600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
}
#content ul, ol {
border-left: 3px solid #dfedcb;
margin-left: 5px;
margin-bottom: 20px;
padding-left: 15px;
color: #323131;
font: 16px Georgia, "Times New Roman", Times, serif;
}
/* START Floating Menu Styles */
#floater-container{
display: inline-block;
position:absolute;
left: 0px;
vertical-align: top;
text-align: start;
}
div.floating-menu {
position:static;
background:rgba(0.25,0.25,0.25,0.25);
border:1px solid #299366;
width:185px;
z-index:300;
}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
/*END Floaters */
/*END CONTENT & HEADERS*/
/*START LOGIN*/
#login-wrapper{ vertical-align: middle; border-style: solid; border-width: thin; height: 125px; width: 500px; margin: 27px 0 0;}
#facebook{text-align: center; vertical-align: middle; background-image: url(images/login_border.png); background-position: right center; background-repeat: no-repeat; display:inline-block ; float: left; width: 200px; height: 125px; margin: 0 0 0 0;}
#local_login{vertical-align: middle; display: inline-block; float: right; width: 300px; height: 125px; margin: 0 0 0 0;}
/*END LOGIN*/
/* START TABSTRIP STYLES */
.tabStrip ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabStrip li {
margin: 0 2px 0 0;
list-style-type: none;
float: right;
}
.tabLink {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e8e8e8;
border: #dadada solid;
border-width: 1px 1px 0 1px;
color: #8a8a8a;
}
.tabLinkActive {
display: inherit;
text-decoration: none;
padding: 5px;
background: #e0e0e0;
border: #c0c0c0 solid;
border-width: 1px 1px 0 1px;
color: #0066ff;
}
.tabContent {
display: none;
}
.tabContentActive {
display: inherit;
clear: both;
background: #f0f0f0;
border: 1px #dedede solid;
padding: 10px;
/* height:inherit; */
width:97.5%;
}
/*END TABSTRIPS */
</style>
<div> before #content should be </div> and you missing one closing </div> before </body>.
<body>
<div id='content-container'>
<div id='wrapper'>...</div>
<div id='body-wrapper'>
<div id='floater-wrapper'>
<div id='floating-menu-1'>
</div>
<div id='floating-menu-2'>
</div>
</div>
<div id='content'>
</div>
</div>
<div id='foot-wrapper'>
<div id='foot-content'>
</div>
</div>
</div>
</body>
But aside from that you are using absolute positioning for #content and #body-wrapper. Absolute positioning is causing those blocks to be rendered, lets say, on a different layer, so anything that goes after absolute positioned will not be rendered below those block but below the previous block that has position set to relative.
The only solution I ever come up with for sticking footer to the bottom of the page is by using javascript. After page is loaded you check whether page main content is big enough to place footer at the bottom. If not, you set the height of the appropriate element to make it so.
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
/* IE 6 and down:
#container {
height:100%;
}
You could use one prepared
http://www.cssstickyfooter.com/
List of supported browsers.
http://www.cssstickyfooter.com/browser-list.html