I am new to HTML and CSS. I have started to make my own website, I have encountered a problem, it's that when I zoom in the content div goes into the menu div. I can't seem to find the answer by myself so it would great if you could help me.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div id="vmenu">
<ul>
<li>Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
CSS:
/******************Custom Styles********************/
#font-face
{
font-family: stainy;
src: url(../font/stainy.ttf);
}
body{
background:url(../img/bg.png) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0 ;
padding:0;
height: 100%;
width: 100%;
}
.logoBar{
background:url(../img/LogoBar.png) ;
height:149px;
position:relative;
width: 100%; min-width: 960px;
}
.helper{
height:120px;
width:100%;
display: table;
}
.logo{
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
}
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
/***border: solid 2px #30c9e0;***/
width: 13.5em;
float:left;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
color: #6F8083;
font-family: stainy;
}
div#vmenu ul a:link {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:23pt;
color: #6F8083;
font-family:stainy;
display: block;
}
div#vmenu ul a:active {
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
color: black;
font-family: stainy;
font-size:23pt;
}
div#vmenu ul a:visited {
margin: 0;
color: #6F8083;
font-family: stainy;
text-decoration: none;
font-size:23pt;
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:24pt;
background-color: #30c9e0;
color: black;
}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:white;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}
To achieve what you're looking for, without modifying the layout you've created, you could add a min-width to your body style. (for your layout, 1150px ought to do it, but that is a weirdly irregular minimum width for any device. just FYI.)
you have to maintain divs % like this
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
width: 20%;
float:left;
background:#036;
}
.contentWaper{ width:79%; float:left;}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:#000;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}
<div class="contentWaper">
<div class="content">
</div>
</div>
What you can do is Added one more div to wrap .content
and give margin-left: 14em to wrapped div
Here is the demo
Related
I have the following code to display a banner in my CSS stylesheet.
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
The banner is not displaying. Instead I get a small white cube in the top left hand corner.
The full CSS style sheet is:
body {
font-family: lucida grande,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: #fff;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
clear: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/banner.jpg);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/footer.jpg);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<div id=banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Books</li>
<li>Publications</li>
<li>About Us</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar"></div>
<footer>
<p>All rights reserved</p>
</footer>
</body>
</html>
Looks like a double quotation marks error in the id attribute value
<div id=banner">
This is what I would do:
1. Try doing background-repeat: repeat; ... see what happens.
2. right click on the small image and click view image to confirm that the image is the right one.
3. post the html for better understanding.
I have used inline styling to put a radiused border around the five images in my index file. How do I apply this style to them by declaring css attributes/values in the external style sheet. Here is a demo of the index file http://jsfiddle.net/23nfM/embedded/result/
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>pedrosdigitalsolutions.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pds/images/cheat_1.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<?php include 'header.php' ?>
<div id="content">
<p class="tab"><font size="7"><b>For all things</b></font><br>
<font size="7"><b>Electronic Arduino</b></font><br>
<font size="7"><b>and "other stuff"</b></font><br>
<font size="6"><b>Love ♥ The Duino</b></font>
</p>
<img style="position:absolute; top:515px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual Shift Register 300x225.gif">
<img style="position:absolute; top:215px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual LCD 300x225.gif">
<img style="position:absolute; top:515px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/LCDBitmap_via_SR.gif">
<img style="position:absolute; top:815px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/8_LED_Array.gif">
<img style="position:absolute; top:815px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Nicks Clock 300x225.gif">
</div>
<?php include 'footer.php' ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>
body {
background: #efefef;
border: none;
color: #3F4C6B;
font: normal 13px Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center; }
#content {
height: 950px;
margin-bottom: 25px;
margin: 0 auto;
padding: 30px 0;
text-align: justify;
width: 950px;
}
.default {
-moz-box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
box-shadow: 0 5px 20px #888;
height: 50px;
width: 100%; }
.fixed {
-moz-box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
left: 0px;
position: fixed;
top: -5px;
width: 100%; }
#footer {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #98B0D9;
background: -webkit-linear-gradient(#98B0D9);
height: 70px;
position: relative;
z-index: 1;
}
h1 { line-height: 15px; }
#header {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(#606C88, #3F4C6B) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#606C88, #3F4C6B);
border-color: #0F1620 #000000;
border-image: none;
height: 93px;
margin: 0;
width: auto; }
#logo {
border: medium none;
float: left;
margin: 0; }
#menu {
-moz-border-radius: 5px;
background: -webkit-linear-gradient(#c3d9ff, #98b0d9);
background: linear-gradient(#c3d9ff, #98b0d9) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
line-height: 50px;
margin: 0 135px;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
z-index: 5;
float: center;
}
#navi {
height: 50px;
margin-top: 0; }
ul { padding: 0; }
ul li {
display: inline;
list-style-type: none;
margin-right: 15px; }
ul li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
border-radius: 5px;
color: #fff;
padding: 3px 7px;
text-decoration: none;
text-shadow: 1px 1px 1px #000; }
ul li a:hover {
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
background: #606C88;
color: #ff0; }
Strip out the inline styles, and put something like this in your external style sheet:
#content img {position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px}
Some styles specific to each image have been left out. For those, add a class or id to the image and then write styles for that image. E.g. the first image could have a class of .lalala and then you'd do this in your style sheet:
.lalala {top:515px; left:692px;}
There are a lot of ways to do that, but the easiest path for your current code would be to declare the border and some other styles in the stylesheet, and then position the images with inline styles.
So in the stylesheet, add:
#content img {
position:absolute;
width:300px;
height:225px;
border: 1px solid #000000;
border-radius: 8px;
}
Then in the html, remove all of the inline styles on each image except top and left.
So i have a simple website.
Where a have an header, then a site_content, that contains the div content and sidebar, and then a sticky footer.
here is my code:
Html:
<!DOCTYPE HTML>
<html>
<head>
<title>Turismo Murtoseiro</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="logo"></div>
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li class="selected">Home</li>
<li>Cafés</li>
<li>Restaurantes</li>
<li>Hotéis</li>
<li>Pensões</li>
<li>Contacto</li>
</ul>
</div>
</div>
<div id="site_content">
<div id="sidebar">
<!-- insert your sidebar items here -->
trujytkyukliyluilouiluiol </div>
<div id="content">
<!-- insert the page content here -->
<h1>Pedro Fidalgo - freelancer</h1>
<div>
<p> O meu nome é Pedro Fidalgo, e estudo na área de Multimédia, na escola Padre António Morais da Fonseca, na Murtosa.</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer" class="footer">
Copyright © Pedro Fidalgo 2011</div>
</body>
</html>
CSS:
* {margin:0;
padding:0;
}
html, body {height: 100%;
font: normal .80em 'trebuchet ms', arial, sans-serif;
}
p
{
padding: 0 0 20px 0;
line-height: 1.7em;
color: #666;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
background: #F0EFE2;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 30px; /* .push must be the same height as .footer */
clear: both;
}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
a, a:hover
{ outline: none;
text-decoration: underline;
color: #A4AA04;}
a:hover
{ text-decoration: none;}
.left
{ float: left;
width: auto;
margin-right: 10px;}
.right
{ float: right;
width: auto;
margin-left: 10px;}
.center
{ display: block;
text-align: center;
margin: 20px auto;}
blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}
ul
{ padding: 2px 0 22px 17px;}
ul li
{ list-style-type: circle;
padding: 0 0 4px 5px;}
ol
{ padding: 8px 0 22px 20px;}
ol li
{ padding: 0 0 11px 0;}
#logo, #menubar
{
margin-left: auto;
margin-right: auto;
}
#header
{
height: 150px;
background-color: #708B1A;
}
#logo
{
width: 877px;
position: relative;
height: 100px;
background-color: #003;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}
#menubar
{ width: 877px;
height: 50px;
padding: 0;
background: #29415D url(images/menu.png) repeat-x;}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 24px;
padding: 20px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #1C2C3E url(images/menu_select.png) repeat-x;}
#site_content
{ width: 837px;
overflow: hidden;
color #000;
height: 100%;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(images/content.png) repeat-y;}
#content
{ text-align: left;
width: 595px;
min-height: 100%;
}
#sidebar
{
float: right;
width: 200px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
}
#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 30px;
text-align: center;
margin: 0 auto 0 auto;
background: #29425E url(images/footer.png) repeat-x;
color: #FFF;
}
And i cant put my site_content (with content and sidebar) at 100%.. what am i missing?
Remove all your specified width such as width: 878px;, width: 837px;, width: 877px;... and you'll make it render as 100% width.
Demo
Website:
http://younani.com/finalsite/finalindex.html
My header aligns when the browser is not maximized. When I maximized it to moves and is not aligned. How can I align it so that it will never move. I want it to be in the exact same position as the rest of the content material underneath it
CSS:
#header {margin-left:50px; align: center;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#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);
}
figure{}
#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; box-shadow:inset 1px 1px 10px 1px #000000;}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" align="left:100px" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p>Buy THREE of the any vases and receive the fourth one FREE!</p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></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 Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
you are using margin-left:50px; use instead margin :0 auto;
#header {
margin: 0 auto;
width: 1150px;
}
what margin-left it does
so it will be 50px left form the browser and on difference width it will looks difference so the better approach is use margin:0 auto;
margin:0 auto makes always in center
Define your #header with or margin : 0 auto as like this
#header {
margin: 0 auto;
width: 1150px;
}
Results is
Your content should be wrapped in a container div that contains all of your content. it can be fixed width for consistency if that's what you're looking for, or fluid using other css properties to support that.
I am trying to put a header onto my website. I've tried numerous times I just cant jot down the correct way. When I put an image it wont fit into the size of the header(the rectangle where it says Younani Flower's). Why is this issue occuring? I have no left the area empty, because the image usually covers the page.
Website: http://younani.com/finalsite/finalindex.html
CSS:
#header {text-align: center;
}
#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;
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; }
#left,
#center,
#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; 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);
}
figure{}
#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; }
Homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="container" class="clearfix"><!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p></p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></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 Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
If you add the header background as follows it should work:
#header {
background-image: url(image_path);
}
If you remove the text inside, you will have to specify the dimensions of the header. Since the width is implicitly 100% for a block element, you'll only need to specify the height. In my browser the height with text is 81px.