I am having an issue where my navigation a is conflicting with an a href on .content - I have been trying to tackle this for the last few hours and no luck, thanks.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
You declare style for global <a> tag, so all <a tags will use that style. Special style for <a tags from .content class can be achieved by adding to your css file: .content a { your instructions }.
Furthermore, use ul nav li a to specify your desired options for the menu. If you have multiple ul list in your project, use a specific class for each of them.
See this now has very different properties on default and hover.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
.content a {
background:blue;
transition:1s;
}
.content a:hover {
transform:translateX(500px);background:red;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
Related
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I need to fix my BreadCrumb in my simple website, it shows the whole list not just the one is opened with the pages before. Like, it should show HOME, HOME>About Us, HOME>Gallery, HOME>Contact US. But just show the whole breadcrumb list the whole time.
Can you help me? thanks
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<img style="width: 370px;" src="pictures/logo.png" />
</div>
<div>
<ul class="breadcrumb">
<li>Home</li>
<li>About Us</li>
<li>Our Menu</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div>
<nav id="mainMenu">
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Our Menu</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div style="width: 100%;" id="slider">
<br /> <br />
<figure />
<img src="pictures/image1.png" alt> <img
src="pictures/image2.png" alt> <img src="pictures/image3.jpg"
alt> <img src="pictures/image4.jpg" alt> <img
src="pictures/image5.jpg" alt> <br /> <br />
</div>
<div style="background-color: #b30000; height: 250px; width: 500% px">
<br />
<p>
<h1>
KFC<br> 299 Westmoreland St.<br> Dublin 2<br> Eircode:
D02 HK35<br> Ireland
</h1>
</p>
<br />
<h1>
<p>
Tel + 353 1 9999999<br> Fax + 353 1 6666666<br> Email
KFC#.ie
</p>
</h1>
</div>
</body>
</html>
CSS
font-size: 19px;
font-family: Calibri, arial, helvetica;
color: white;
padding: 0cm 0cm 0cm 1cm;
line-height: 1.3;
letter-spacing:1px;
}
h2 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 1cm;
line-height: 1.3;
text-align:center;
}
h3 {
font-size: 15px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 11.5cm;
line-height: 1.3;
}
h4 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 4cm;
line-height: 1.3;
text-align:left;
float:left;
}
h5 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding-right: 6.5cm;
line-height: 1.3;
text-align:right;
}
*{margin:0; padding:0;}
.menu {
list-style:none;
border:1px solid #c0c0c0;
float:left;
text-align:center;
font-family: Calibri, arial, helvetica, sans-serif;
font-size: 20px
}
.menu li{
position:relative;
float:auto;
border-right:1px solid #c0c0c0;
}
.menu li a{color:#333; text-decoration:none; padding:5px 20px; display:block;}
.menu li a:hover{
background:#b30000;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
}
.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
#mainMenu {
width:1000px;
margin:0 auto;
list-style:none;
}
#mainMenu li {
float:left;
}
#mainMenu a {
display:block;
text-align:center;
width:150px; /
text-decoration:none;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: middle;
font-size: 0;
animation: 30s slidy infinite;
}
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 10px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
input[type=submit] {
background-color: #b30000;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #b30000;
}
.container {
border-radius: 5px;
background-color: #808080;
padding: 20px;
width: 45%;
float: left;
font-size: 16px;
font-weight: 900;
font-family: Calibri, arial, helvetica, sans-serif;
letter-spacing:0.5px;
}
body {
background: white;
margin: 0;
font-family: monospace;
}
.gallery {
width: 90%;
margin: auto;
list-style: none;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.gallery li {
margin: 5px;
}
.gallery img {
width: 200px;
height: 200px;
}
.modal {
display: none;
}
.modal:target {
display: block;
position: fixed;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal h3 {
color: #fff;
font-size: 30px;
text-align: center;
margin: 15px 0;
}
.imagen {
width: 100%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.imagen a {
color: #fff;
font-size: 40px;
text-decoration: none;
margin: 0 10px;
}
.imagen a:nth-child(2) {
margin: 0;
height: 100%;
flex-shrink: 2;
}
.imagen img {
width: 500px;
height: 100%;
max-width: 100%;
border: 7px solid #fff;
box-sizing: border-box;
}
.cerrar {
display: block;
background: #fff;
width: 25px;
height: 25px;
margin: 15px auto;
text-align: center;
text-decoration: none;
font-size: 25px;
color: #000;
padding: 5px;
border-radius: 50%;
line-height: 25px;
}
.map {
float: right;
padding-right: 35px;
padding-bottom: 100px;
}
.divFooter {
background-color: #b30000;
height: 270px;
width: 500%;
float: left;
}
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
font-size: 17px;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
I am trying to display a facebook like box on the sidebar of my website. Yet when I put the code in, nothing appears. I have tried moiving the code to different spots and still nothing appears. I am not sure what I am doing wrong. Thanks in advance. Here is the code.
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Kustum Kostumes</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="page">
<div id="header">
<div class="background">
<h1 id="logo"> <img src="images/Banner1.jpg" alt="Logo" /> </h1>
<div id="navigation">
<ul>
<li class="selected">
<li>
Home
</li>
<li>
Services
</li>
<li>
Gallery
</li>
</ul>
</div>
</div>
</div>
<div id="contents">
<div id="blog">
<div id="sidebar">
<div class="section">
<div class="fb-page" data-href="https://www.facebook.com/kustumkostumes" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/kustumkostumes" class="fb-xfbml-parse-ignore">Kustum Kostumes</blockquote></div>
<ul class="posts">
<li>
<span class="time">.</a>
</li>
<li>
<span class="time"></a>
</li>
<li>
<span class="time"></a>
</li>
</ul>
</div>
<div class="section">
<h5></h5>
<ul>
</ul>
</div>
</div>
<div id="main">
<h3>Welcome to Kustum Kostumes</h3>
<p> We aim to provide high quality, handmade and crafted kostumes, props, sculptures, and artwork!<br> We put in a lot of time and effort into what we produce to make sure that not only is the client <br>happy but it looks as close as possible to the source material. </p><p>Please check out the services page to see a detailed list of what we have to offer <br>and the approximate prices for each. Please use the Gumtree links on the side <br>for what we currently have for sale. Alternatively, contact us for anything you have in mind.<br> Don't forget to like us on facebook for continual updates.
</p>
<img src="images/bg-header2.jpg" alt="Img" height="325" width="547">
</div>
<div class="footer">
</div>
</div>
</div>
<div id="footer">
<div class="background">
<div class="body">
<form action="contact.php" method="post" id="message" class="section">
<h3>Send a Message</h3>
<ul>
<li>
<label>Full Name:</label>
<input type="text" value="">
</li>
<li>
<label>Email:</label>
<input type="text" value="">
</li>
<li>
<label>Message:</label>
<textarea></textarea>
</li>
<li>
<input type="submit" value="Send">
</li>
</ul>
</form>
<div class="section">
<h3>Contact Us</h3>
<ul>
<li>
<span>Phone</span><strong>:</strong>
<p>
0450101551
</p>
</li>
<li>
<span>Email</span><strong>:</strong>
<p>
kustumkostumes#gmail.com
</p>
</li>
<li>
<span>
</li>
</ul>
</div>
<p id="footnote">
© Copyright 2017. All rights reserved. ABN 78 820 831 193
</p>
</div>
</div>
</div>
</div>
CSS Stylesheet
/* Website template by freewebsitetemplates.com */
#font-face {
font-family: 'DaysOne-Regular';
src: url('../fonts/DaysOne-Regular.eot');
src: local('☺'), url('../fonts/DaysOne-Regular.woff') format('woff'), url('../fonts/DaysOne-Regular.ttf') format('truetype'), url('../fonts/DaysOne- Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: url(../images/bg-body.jpg) repeat left top;
font-family: Arial, Helvetica, sans-serif;
min-width: 960px;
margin: 0;
}
.background {
background: url(../images/bg-pattern-red.jpg) repeat left top;
}
#page {
width: 960px;
margin: 0 auto;
padding: 156px 0 0;
}
img {
border: 0;
}
/*------------------------------ SPRITES ------------------------------*/
#footer ul li a {
background: url(../images/icons.png) no-repeat;
}
#message input[type='submit'], .more {
background: url(../images/bg-buttons.png) no-repeat;
}
.more {
background-position: 0 -35px;
color: #636974;
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
width: 170px;
padding: 1px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.more:hover {
background-position: 0 -82px;
color: #010000;
}
/*------------------------------ HEADER ------------------------------*/
#header {
width: 100%;
border-bottom: 5px solid #c3c3c3;
position: absolute;
left: 0;
top: 0;
}
#header .background {
height: 150px;
border-bottom: 1px solid #b6051c;
}
/** Logo **/
#logo {
font-family: 'DaysOne-Regular';
font-size: 36px;
font-weight: normal;
line-height: 130px;
width: 960px;
margin: 0 auto;
}
#logo a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
/** Navigation **/
#navigation {
background: url(../images/bg-navigation.png) no-repeat;
height: 49px;
width: 960px;
margin: 0 auto;
position: relative;
top: 0;
}
#navigation ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 1px 10px;
}
#navigation li {
float: left;
}
#navigation li a {
color: #636974;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 47px;
width: 154px;
border-color: transparent;
border-style: none solid;
border-width: 1px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#navigation li a:hover, #navigation li.selected a {
background-color: #bebcbc;
color: #2e3a54;
border-color: #afafaf;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
background: #fff url(../images/bg-content-bottom.png) no-repeat left bottom;
display: inline-block;
width: 100%;
margin-bottom: 30px;
padding: 23px 0 0;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#contents h1, #contents h2, #contents h4, #contents h5, #contents h6 {
color: #2e3a54;
font-family: "DaysOne-Regular";
font-size: 36px;
font-weight: normal;
margin: 0 0 18px;
}
#contents h2 {
font-size: 24px;
line-height: 24px;
text-transform: uppercase;
}
#contents h4 {
font-size: 16px;
line-height: 24px;
margin: 0 0 12px;
text-transform: uppercase;
}
#contents h5 {
font-size: 14px;
line-height: 24px;
margin: 0;
text-transform: uppercase;
}
#contents h5 a {
color: #940315;
text-decoration: none;
}
#contents h6 {
font-size: 12px;
line-height: 24px;
text-transform: uppercase;
}
#contents p {
color: #636974;
font-size: 14px;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
}
#contents p a {
color: #636974;
}
#contents p a:hover {
color: #721f29;
}
#contents h5 a:hover {
text-decoration: underline;
}
#contents .footer {
background-color: #f8f8f8;
clear: both;
width: 900px;
margin: 0 0 4px -30px;
padding: 20px 30px 0;
}
#contents .footer h6 {
float: left;
width: 210px;
margin-bottom: 30px;
margin-right: 20px;
text-transform: uppercase;
}
#contents .section {
width: 260px;
padding: 0 0 0 20px;
}
#contents > div:first-child {
padding: 48px 30px 24px;
}
.time {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
/** adbox **/
#contents #adbox {
background: url(../images/bg-adbox-bottom.png) no-repeat left bottom;
padding: 0 0 19px;
position: relative;
}
#adbox > div {
background-color: #f0f0f0;
height: 390px;
-webkit-border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
-moz-border-radius-bottomleft: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
padding-right: 20px;
}
#adbox > div:after {
clear:both;
content:"";
display:block;
height:1%;
line-height:0;
visibility:hidden;
}
#adbox h1 {
padding-top: 18px;
}
#adbox h4 {
font-size: 14px;
}
#adbox img {
float: left;
margin-right: 20px;
}
/** Sidebar **/
#contents .sidebar {
float: left;
min-height: 490px;
width: 279px;
border-right: 1px solid #f2cc3d;
margin: -19px 40px 0 30px;
padding: 20px 0 0;
}
#contents .sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#contents .sidebar ul li {
font-size: 14px;
line-height: 24px;
margin: 0 0 24px;
}
#contents .sidebar ul span {
color: #636974;
display: block;
font-size: 12px;
line-height: 12px;
padding: 6px 0 5px;
}
#contents .sidebar ul li a {
color: #636974;
text-decoration: none;
}
#contents .sidebar ul li a:hover {
text-decoration: underline;
}
#sidebar, .highlight {
float: right;
display: inline-block;
border-left: 1px solid #f2cc3d;
margin: 0 0 24px 19px;
}
#sidebar .section {
border-top: 1px solid #f2cc3d;
padding-top: 24px;
}
#sidebar .section:first-child {
border: 0;
padding-top: 0;
}
#sidebar .section ul {
color: #636974;
font-size: x-small;
margin: 0 0 24px;
padding-left: 12px;
}
#sidebar .section ul li {
padding-left: 10px;
}
#sidebar .section ul li > a {
color: #636974;
display: block;
font-size: 14px;
line-height: 24px;
text-decoration: none;
}
#sidebar .section ul li a:hover {
text-decoration: underline;
}
/** list **/
ul.list {
list-style: none;
width: 600px;
margin: 0;
padding: 0;
}
ul.list li h5 + img {
float: left;
margin-right: 20px;
margin-top: 6px;
}
/** Main **/
#main > ul {
display: inline-block;
list-style: none;
width: 580px;
margin: 0;
padding: 0;
}
#main > ul li {
float: left;
width: 290px;
}
#main > ul li p b {
color: #2e3a54;
display: block;
font-family: 'DaysOne-Regular';
font-weight: normal;
text-transform: uppercase;
}
/** About **/
#contents #about {
padding-bottom: 0;
padding-top: 48px;
}
#about #main img {
margin-bottom: 18px;
}
#about .footer p {
font-size: 12px;
}
/** Services **/
#contents #services {
display: inline-block;
width: 900px;
}
#services #sidebar {
min-height: 620px;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
width: 100%;
border-top: 5px solid #c3c3c3;
position: absolute;
left: 0;
}
#footer .background {
border-top: 1px solid #b6051c;
}
#footer .body {
width: 960px;
margin: 0 auto;
padding: 40px 0 20px;
}
#footer .section {
float: left;
display: inline-block;
width: 460px;
margin: 0 10px 24px;
}
#footer h3 {
color: #fff;
font-family: 'DaysOne-Regular';
font-size: 18px;
font-weight: normal;
line-height: 18px;
margin: 0 0 18px;
text-transform: uppercase;
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer ul li {
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 24px;
width: 100%;
border-top: 1px solid #8a0413;
padding: 12px 0 0;
vertical-align:top;
}
#footer ul li:first-child, #footer #message ul li {
border: 0;
padding: 0;
}
#footer ul li span {
float: left;
display: inline-block;
width: 70px;
vertical-align:top;
}
#footer ul li strong {
float: left;
display: inline-block;
margin-right: 6px;
vertical-align: top;
}
#footer ul li p {
float: left;
display: inline-block;
width: 370px;
margin: 0;
padding: 0 0 12px;
}
#footer ul li a {
color: #b3999c;
display: inline-block;
height: 22px;
width: 30px;
margin: 0 10px;
text-decoration: none;
}
#footer ul li a.twitter {
background-position: -40px 0;
}
#footer ul li a.facebook {
background-position: -40px -32px;
}
#footer ul li a.googleplus {
background-position: -40px -64px;
}
#footer ul li a.twitter:hover {
background-position: 0 0;
}
#footer ul li a.facebook:hover {
background-position: 0 -32px;
}
#footer ul li a.googleplus:hover {
background-position: 0 -64px;
}
/** message **/
#message label {
float: left;
color: #b3999c;
display: inline-block;
font-size: 14px;
line-height: 30px;
width: 96px;
margin-right: 10px;
text-align: right;
}
#message input[type='text'] {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 35px;
line-height: 35px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 11px;
padding: 0 4px;
}
#message textarea {
color: #636974;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 95px;
line-height: 24px;
width: 342px;
border: 1px solid #d7d7d7;
margin: 0 0 4px;
padding: 0 4px;
overflow: auto;
resize: none;
}
#message input[type='submit'] {
background-position: 0 0;
color: #636974;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 25px;
line-height: 25px;
width: 52px;
border: 0;
margin-left: 106px;
padding: 0;
}
#message input[type='submit']:hover {
background-position: -62px 0;
color: #2e3a54;
}
#footnote {
clear: both;
color: #b75661;
font-size: 12px;
margin: 0;
text-align: center;
}
I am designing my first site... the footer section to be specific. I am trying to style the <a> tags into a white color without the default webkit styling but I am unable to do so.
What am I doing wrong, and how can I change the styling?
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
.header {
background-color: #333333;
}
.nav {
padding: 0px auto;
margin: 0px auto;
}
.nav ul {
}
.nav ul li {
color: #e6e6e6;
display: inline-block;
padding: 20px 30px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a {
text-decoration: none;
color: #efefef;
padding: 20px 20px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a:hover {
color: #efefef;
background-color: #191919;
transition: background .5s;
}
.second_section .container {
background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
height: 900px;
width: 100%;
}
.copy {
position: absolute;
margin: 100px 50px 500px 500px;
color: white;
font-family: 'Josefin Sans', sans-serif;
letter-spacing: 2px
}
.copy {
text-align: center;
}
.btn_section {
top: 400px;
text-align: center;
position: relative;
}
.btn {
position: relative;
margin-top: 100px
color: white;
border: solid 2px fixed;
}
.btn_section a {
border: 1px solid white;
padding: 20px 40px;
text-decoration: none;
background-color: #191919;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1.33em;
letter-spacing: 2px;
text-transform: uppercase;
}
.btn_section a:hover {
background-color: #e6e6e6;
color: #191919;
transition: background .5s;
cursor: pointer;
}
.third_section a: hover {
background-color: black;
}
.third_section {
height: 20px;
background-color: black;
}
.fourth_section .col {
display: inline-block;
padding-top: 50px;
padding-bottom: 75px;
padding-left: 6%;
padding-right: 6%;
text-align: center;
font-family: 'Raleway';
width: 20%;
vertical-align: top;
}
.fourth_section img {
padding: 5px 5px 10px 5px;
height: 32px
}
.fourth_section > h2 {
font-family: 'Raleway';
font-size: 1.33em;
}
.col > p {
font-size: 1.12em;
}
.col a {
text-decoration: none;
color: #323232;
}
.col {
text-align: center;
font-family: Garamond;
}
.footer {
height: 100px;
background-color: #333;
padding: 20px;
}
.footer a {
text-decoration: none;
}
.footer_info {
position: relative;
text-decoration: none;
margin-bottom: 10px;
color: white;
}
<div class="header">
<div class="nav">
<ul>
<li>ABOUT</li>
<li>WORK</li>
<li>TEAM</li>
<li>CONTACT</li>
</div>
</div>
<div class="second_section">
<div class="container">
<div class="copy">
<h1>ACTUATE CONTENT</h1>
<br>
<h3>Expert content for every business</h3>
</div>
<div class="btn_section">
Write For Me!
</div>
</div>
<div class="third_section">
</div>
<div class="fourth_section">
<div class="col">
<img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2>
<br>
<p>Our meticulous research methods will uncover the most relevant information for your project. </p>
</div>
<div class="col">
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
<h2>WRITING</h2></a>
<br>
<p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p>
</div>
<div class="col">
<a href="#"><img src="http://i.imgur.com/AinCaug.png">
<h2>EDITING</h2></a>
<br>
<p>Our editors work with leading authors and publishers to bring out the best in their writing.</p>
</div>
</div>
<div class="footer">
<div class="footer_info">
<p>Terms of Use / Privacy Policy</p>
</div>
</div>
Add your styles into this :
.footer .footer_info a {
...
}