Related
I am trying to get my links in a ul to align with the image and text so I can have a good navbar, but for some reason it goes below everything. How can I fix this?
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
li,
a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
apply display:flex to nav and why not removing float:right from li as well?
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
}
#logo {
padding: 10px;
}
ul {
margin-left: auto;
}
li,
a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-flex;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
You want to float the #nav-items list right, since that's a block element. Then display: inline-block on the li's, and color/text-decoration on the a's
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
#nav-items {
float: right;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LanguageBird</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav>
<img src="img/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<script src="main.js"></script>
</body>
</html>
If you want to use a flex layout, apply display: flex; to nav, and use align-items to center vertically. Then assign margin-left: auto to #nav-items to push that menu to the right.
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
#tagline {
font-style: italic;
}
nav {
background-color: white;
-webkit-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 7px -2px rgba(0, 0, 0, 0.75);
}
#logo {
padding: 10px 10px 10px 10px;
vertical-align: middle;
}
li {
display: inline-block;
}
a {
color: black;
text-decoration: none;
}
nav {
display: flex;
align-items: center;
}
#nav-items {
margin-left: auto;
}
<nav>
<img src="https://s1.postimg.org/qiu818fhr/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have a banner right above a navigation menu. The two have their own container divs going horizontally across the screen. I have box shadows on both of them to make it look like outer glow. The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. Is there any way that I can modify my code to make it look like the shadows are one? Thanks for your time.
http://i.imgur.com/dJ69OyV.gif
My HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapperOuter">
<header>
<div id="bannerContainer">
<div id="banner">
<h1>Scott <span class="green">H.</span> Lacey</h1>
<p>Web Developer <span class="green">♠</span> Photographer <span class="green">♠</span> Musician</p>
</div>
</div>
<div id="toolbarContainer">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Services</li>
<li>Resume</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="toolbar">
<div id="social">
<label>Connect With</label>
<ul>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div id="search">
<form action="#" method="POST">
<input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
</form>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
span.green {
color: #66cc00;
}
body {
background: url(../img/bodyBackground.gif) repeat-x #000;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 1em;
color: #666666;
}
a {
color: #66cc00;
text-decoration: none;
border-bottom: 1px dotted #66cc00;
}
a:hover {
color: #666666;
}
#wrapperOuter {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
#bannerContainer {
background: url(../img/themeSprite.gif) 0 0px;
height: 148px;
border-bottom: 1px solid #333;
margin: 0;
padding: 0;
}
#banner {
background-image: url(../img/themeSprite.gif);
background-position: 0px -210px;
height: 148px;
margin: 0px auto;
width: 960px;
border-width: 0px 1px;
border-color: #666;
border-style: solid;
background-repeat: repeat-x;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
text-align: center;
}
#banner h1 {
margin: 0px;
padding-top: 25px;
}
#banner p {
color; #999;
}
#toolbarContainer {
background-color: #222;
border-bottom: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
margin: 0px;
padding: 0px;
}
nav {
background-image: url(../img/themeSprite.gif);
background-position: 0px -153px;
margin: 0px;
padding: 0px;
width: 960px;
margin: 0px auto;
height: 52px;
border: 1px solid #000;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
display: inline;
border-left: 1px solid #333;
border-right: 1px solid #666;
height: 52px;
box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
display: block;
margin: 0px;
border-bottom: 0;
color: #333;
height: 52px;
padding: 15px 25px;
}
#toolbar {
width: 960px;
margin: 0px auto;
padding: 15px 0;
overflow: auto;
}
#social {
float: left;
}
#social label {
float: left;
display: block;
padding-right: 10px;
}
#social ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#social ul li {
float: left;
display: inline;
margin: 0px 5px;
padding: 0;
}
#social ul li a {
color: #666;
border: 0;
font-size: 18px;
}
#search {
float: right;
}
#search input {
background: #333;
border: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
color: #666;
padding: 10px;
}
Take the drop shadows off of .bannerContainer and .toolbarContainer, then place a div around the outside of both of those and add the drop shadow there. You will have to put the <div id="toolbar"> outside of this div too.
The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. Right now you have 2 elements which are going to be stacked on one another.
<html>
<head></head>
<style>
.main {
width: 100%;
}
.box1 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: red;
display: inline-block;
}
.box1inner {
margin: auto;
width: 70%;
height: 50px;
background: blue;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: orange;
display: inline-block;
}
.box2wrapper {
margin: auto;
width: 70%;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2inner {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">
<div class="box1inner">
</div>
<div class="box1inner">
</div>
</div>
<div class="box2">
<div class="box2wrapper">
<div class="box2inner">
</div>
<div class="box2inner">
</div>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I'm using the Nathan Smith Grid System and everything I wrap with the "container_12" class has a white background. What I want is it to be transparent.
Example: http://jsfiddle.net/JordanSimps/RZvxn/1/
HTML:
<!-- Beginning of the blue top header -->
<div class="top-header-wrap">
<div class="container_12">
<div class="top-header">
<div class="grid_2">
<img class="hover" src="http://www.dubstepcast.com/images/phone.png" /> (586) 997-9490
</div>
<div class="grid_3">
<img src="http://www.dubstepcast.com/images/mail.png" /> info#experienceheritage.org
</div>
<div id="social">
<div class="grid_7">
<ul>
<li id="twitter"><img id="twitter" src="http://www.dubstepcast.com/images/twitter.png" /></li>
<li id="pinterest"><img id="pinterest" src="http://www.dubstepcast.com/images/pinterest.png" /></li>
<li id="facebook"><img id="facebook" src="http://www.dubstepcast.com/images/facebook.png" /></li>
<li id="google"><img id="google" src="http://www.dubstepcast.com/images/google.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of the blue top header -->
<!-- Beginning of the second header - Logo & Navigation buttons -->
<div class="container_12">
<div class="bottom-header">
<!-- LOGO BEGINS HERE -->
<div class="grid_2">
<p><img class="logo" src="http://www.dubstepcast.com/images/logo2.png" /></p>
</div>
<!-- LOGO ENDS HERE -->
<!-- NAVIGATION BUTTONS BEGIN HERE -->
<div class="grid_8 prefix_2">
<ul class='navbar navbar-horizontal'>
<a href="#" id="panel-1" class="drop-shadow raised">
Home
</a>
<a href="#" id="panel-2">
FAQ's
</a>
<a href="#" id="panel-3">
Invite
</a>
<a href="#" id="panel-4">
Contact
</a>
</ul>
</div>
<!-- NAVIGATION BUTTONS END HERE -->
</div>
</div>
<!-- End of the second header - Logo & Navigation buttons -->
CSS:
#charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://www.dubstepcast.com/images/bg.jpg');
background-repeat: repeat-x repeat-y;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
padding-top: 20px;
text-align: center;
}
h2 {
padding-top: 20px;
text-align: center;
}
p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
/* HEADER */
/* TOP HEADER */
.top-header {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
background: #11A1B1;
height: 43px;
padding-top: 15px;
}
.top-header a {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.top-header a:hover {
color: #D3582D;
text-decoration: none;
}
.top-header-wrap {
border-top: solid 3px #32BED0;
background: #11A1B1;
height: 58px;
}
/* SOCIAL ICONS */
#social {
height: 35px;
}
#social li {
display: inline;
}
/* TWITTER */
#social ul #twitter a {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
#social ul #twitter a:hover {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
/* PINTEREST */
#social ul #pinterest a {
background-image: url('http://www.dubstepcast.com/images/pinterest.png');
width: 18px;
height: 18px;
}
#social ul #pinterest a:hover {
background-image: url('http://www.dubstepcast.com/images/pinterest_active.png');
width: 18px;
height: 18px;
}
/* FACEBOOK */
#social {
text-align: right;
}
#social ul #facebook a {
background-image: url('http://www.dubstepcast.com/images/facebook.png');
width: 18px;
height: 18px;
}
#social ul #facebook a:hover {
background-image: url('http://www.dubstepcast.com/images/facebook_active.png');
width: 18px;
height: 18px;
}
/* GOOGLE */
#social ul #google a {
background-image: url('http://www.dubstepcast.com/images/google.png');
width: 18px;
height: 18px;
}
#social ul #google a:hover {
background-image: url('http://www.dubstepcast.com/images/google_active.png');
width: 18px;
height: 18px;
}
/* BOTTOM HEADER */
.bottom-header {
margin-top: 10px;
height: 155px;
}
.bottom-header img {
margin-top: 25px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/*
* Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
* http://devsmash.com/projects/navbar
*
* Copyright 2013 Jeremy Martin (jmar777)
* Contributors: Duke Speer (Duke3D)
* Released under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
.navbar {
height: 100px;
display: block;
list-style-type: none;
list-style: none;
position: relative;
margin: 55px 0 0 25px;
padding: 0;
}
.navbar > a {
font-weight: 400;
font-family: "Helvetica";
letter-spacing: 1px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
-moz-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
font-size: 16px;
width: 125px;
height: 18px;
margin-left: 5px;
float: left;
text-align: center;
padding: 25px 0 30px 0;
}
.navbar > a p {
font-family: "Helvetica";
font-weight: lighter;
color: #11A1B1;
margin-top: 4px;
font-size: 10px;
letter-spacing: normal;
}
.navbar > a:hover p {
color: #11A1B1;
}
.navbar > a:hover {
color: #D3582D;
}
.navbar > * {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
}
.navbar.navbar-processed > * {
margin: 0;
position: absolute;
}
.navbar-horizontal > * {
float: left;
}
.navbar-horizontal > :first-child {
margin-left: 0;
}
.navbar-vertical > :first-child {
margin-top: 0;
}
#panel-1 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-2 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-3 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-4 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
/* GIVES THE DROP-SHADOW ON THE NAVIGATION BUTTONS MORE OF A REALISTIC LOOK */
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
According to your jsfiddle the following CSS rules are being applied to container_12 in the demo.css file
.container_12, .container_16, .container_24 {
background-color: #fff; /* Makes the background white */
background-repeat: repeat-y;
margin-bottom: 20px;
}
So you can either remove these or overwrite them with
.container_12 {
background: none
}
add this to css
.container_12{
background: transparent;
}
as per firebug, this is line 2 of demo.css
.container_12, .container_16, .container_24 {
background-color: #FFFFFF;
background-repeat: repeat-y;
margin-bottom: 20px;
}
so use
#div.container_12 {
background-color: transparent;
}
to override it with greater specificity
You have background-color: #fff; set in demo.css
Change it to background-color: transparent;
Issues I'm having:
When I decided to take the borders off the css the header area gets smaller (which i do not want to happen). - I want to take off the border lines without moving anything around.
When I place an image into the header(it stretches and does not display correctly). Also over the image, I want to place a text is that possible?
Also, if you go onto the menu page, you will see that the thumbnails are not aligned, why is that?
Here is the website: http://younani.com/finalsite/finalindex.html
Here is my css:
#header {
text-align: center;
background: url('bg1.gif');
}
#container {
width: 960px;
margin: 0 auto;
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif;
background-image: url('backgroundflower5.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#h2 {
text-align: center;
}
#container {
width: 960px;
margin: 0 auto;
}
#container div {
border: 1px solid;
}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
width: 494px;
border-radius: 8px;
}
#left,#center,#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {
font-family: Josefin Slab;
background-color: #FFFFFF;
width: 494px;
border-radius: 8px;
text-align: center;
}
.clear {
clear: both;
}
#right {
font-family: Josefin Slab;
font-weight: bold;
border-radius: 8px;
background-color: #FFFFFF;
}
#left a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow: 0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
#left a:link {
background-color: #E6E6E6;
}
#left a:visited {
background-color: #E6E6E6;
}
#left a:hover {
border: 3px inset #333333;
}
#left ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
#footer {
text-align: center;
font-family: Audimat;
clear: both;
width: 38%;
border-radius: 8px;
background-color: white;
text-align: center;
margin-right: auto;
margin-left: auto;
}
Here is the relevant HTML of my home page:
<div id="container" class="clearfix">
<!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
HELLLLLO :D :D
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers</strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav">
<b>
Home
Menu
Occasions
About Us
Contact Us
</b>
</div>
</div>
</div>
<!-- #container -->
<div id="header" style="float: left; width: 100%;">
<h1>Younani Flowers</h1>
</div>
------or-----
Apply clearfix
<div id="header" class="clearfix">
<h1>Younani Flowers</h1>
</div>
http://www.webtoolkit.info/css-clearfix.html