bojack2424 bojack2424 - 1 month ago 7
CSS Question

#FFFFFF value not working with linear gradient and box shadow

I don't understand why the values aren't being accepted. I've tried different values, and nothing is working. Box shadow isn't appearing at all either

CSS

body{
background: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
color: #666666;
font-family: Helvetica;}

header{
background-color: #000033;
color: #FFFFFF;
line-height: 60px;
text-indent: 1em;
text-align: center;
background-image: url("sunset.jpg");
background-repeat: no-repeat;
background-position: right;
padding-top: 15px;
}

nav a{
text-align: center;
background-color: #FFFFFF;
text-decoration: none;
font-weight: bold;
padding: 10px;

}



h2{
color: #3399CC;
font-family: Georgia;
text-shadow: 1px 1px #CCCCCC;
}

h1{
font-family: Georgia;
margin-top: 0px;
}

h3{
font-family: Georgia;
color: #000033;
}

dt{
font-family: Georgia;
color: #000033;

}


ul{
list-style-image: url("marker.gif");
}

footer{
font-family: Georgia;
font-style: italic;
font-size: 75%;
padding: 20px;
}

.resort{
color: #5C7FA3;
font-weight: bold;
}

footer{
text-align: center;
padding: 20px;

}

.contact{
color: #5C7FA3;
font-weight: bold;
font-size: 90%
}

#wrapper{
background-color: white;
width: 940px;
max-width: 2048px;
box-shadow: 3px, #333333;

}

#main-image{
height: 300px;
background-image: url("coast-main.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}

#accomodations-image{
height: 300px;
background-image: url("bungalow-main.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

}

#activities-image{
height: 300px;
background-image: url("hiking-man.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

}

main{
padding: 1px 20px 20px 20px;

}


One of the pages CSS is being referenced on. Ignore the CSS comment section, it's not updated

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Atlantic Trails Resort</title>
<link rel="stylesheet" href="atlantic.css" type="text/css">
<style type="text/css">

<!--
body{background-color: #FFFFFF;color: #666666; font-family: Helvetica;}

header{background-color: #000033; color: #FFFFFF; line-height: 400%; text-indent: 1em;
background-image: url("sunset.jpg");background-position: right;}

nav{background-color: #90C7E3;}

h2{color: #3399CC;}

h3{color: #000033;}

resort{color: #5C7FA3;}
-->
</style>
</head>

<body>
<!-- page content goes here -->

<div id ="wrapper">
<header>
<h1>Atlantic Trails Resort</h1>
</header>

<nav>

<a href="Index.html">Home</a>&nbsp;
<a href="Accommodations.html">Accommodations</a>&nbsp;
<a href="Activities.html">Activities</a>&nbsp;
<a href="Reservations.html">Reservations</a>&nbsp;

</nav>

<h2>Enjoy Nature in Luxury</h2>
<img src="coast.jpg" alt height="250" width="320">
<p><span class ="resort">Atlantic Trails Resort</span> offers a special lodging experience
on the rugged Atlantic North Coast of Maine. Relax in serentiy
with panoramic views of the Atlantic Ocean.</p>

<ul>
<li>Private bunglows with decks overlooking the ocean.</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dinning at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the pine forests</li>

</ul>
<div><span class ="contact">Atlantic Trails Resort</span></div>
<div>1210 Atlantic Trails Way</div>
<div>Cliffside, Maine 04226</div>

<br>
<div>888-555-5555</div>
<br>





<footer>

Copyright &copy; 2016 Atlantic Trails resort<br>


</footer>
</div>
</body>



</html>

Answer

This is due because you didn't define the css gradient properly Bojack. I think the fiddle will provide what you are looking for.

it gets better...but you've got to do it every day.

JS Fiddle: Edited Solution

This is what I've changed:

    background-image: linear-gradient(#ffffff, #90C7E3);
    background:#90C7E3; 
    background: -webkit-linear-gradient(-90deg,#ffffff,#90C7E3); 
    background: -o-linear-gradient(-90deg, #ffffff, #90C7E3);
    background: -moz-linear-gradient(-90deg,#ffffff, #90C7E3); 
    background: linear-gradient(-90deg, #ffffff, #90C7E3); 

I've defined the gradient with -90deg but you can change it however you want. Just follow this link, it explains it quite well:

w3schools - gradient CSS

I've fixed the box shadowing as well. You placed your values incorrectly. This is how you did it: box-shadow: 3px, #333333; You shouldn't put a coma between the values.

Here is how I edited your code:

#wrapper{
    background-color: white;
    width: 940px;
    max-width: 2048px;
    box-shadow: 3px 3px 5px #333333;
}
Comments