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.
Related
I have two div's the first one with a zig-zag bottom border and an image should be on both div's, the image always go behind the zig-zag border. i tried the z-index property but it did not work. can someone help with this issue? or is there any another approach to draw the zigzag border ?thanks in advance.
#d-wrapper {
background-color: #950051;
}
#d-wrapper * {
margin:0;
padding:0;}
#d-wrapper div.sep {
min-height: 200px;
padding: 32px 0;
}
#d-wrapper div > * {
margin: 0 40px;
}
#d-wrapper .zig-zag-bottom{
margin: 32px 0;
margin-top: 0;
background: #1ba1e2;
padding: 32px 0;
}
#d-wrapper p,
#d-wrapper h1{
font-size:2em;
text-align:center;
color:#fff;
font-family:"PT Sans Narrow", "Fjalla One", sans-serif;
font-weight:900;
text-shadow:1px 1px 0 #1b90e2, 2px 2px 0 #1b90e2, 3px 3px 0 #1b90e2, 4px 4px 0 #1b90e2, 5px 5px 0 #1b90e2;
}
#d-wrapper div.sec-dev p,
#d-wrapper div.sec-dev h1 {
text-shadow:1px 1px 0 #888, 2px 2px 0 #888, 3px 3px 0 #888, 4px 4px 0 #888, 5px 5px 0 #888;
color: #fff;
}
#d-wrapper h1{
font-size:4em;
}
#d-wrapper .zig-zag-bottom:after{
background:
linear-gradient(-45deg, transparent 16px, #1ba1e2 0),
linear-gradient(45deg, transparent 16px, #1ba1e2 0);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 22px 32px;
content: "";
display: block;
width: 100%;
height: 32px;
position: relative;
top:64px;
left:0px;
}
#d-wrapper p{
text-align: center;
}
p {
text-align: center;
}
<div id="d-wrapper">
<div class="zig-zag-bottom">
<h1>Title 1</h1>
<p>Content 1</p>
<img src="https://images.vexels.com/media/users/3/131677/isolated/preview/5517f3c8facf7ff407aaa7752c00e8a5-paintbrush-tool-by-vexels.png" alt="Smiley face" width="160px" height="180px" style="margin-bottom: -150px;">
</div>
<div class="sec-dev">
<h1>Title 2</h1>
<p>Content</p>
</div>
For z-index to work, the element needs to be non-static.
Along with z-index try applying position: relative on the image.
I was working on my website and suddenly I have encountered a problem, I don't want to set a a height to my pagewrap div but then it's not displaying correctly, I want it to be displayed full scrren. I will post the link to the image, and in the pic you will see a grey box I want it to be displayed full screen.
here's the link:
http://i62.tinypic.com/1428t47.png
here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div id="pagewrap">
<div id="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="sidebar">
<div class="widget">
<ul>
<li style="border-top:0 !important;">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>
<div class="contenu">
<div class="post clearfix">
<h1 class="post-title">Acceuil</h1>
<br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>
</div>
</div>
</div>
</body>
</html>
Here's my CSS:
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
float: left;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
/************************************************************************************
Contenu
*************************************************************************************/
.contenu{
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0;
padding: 0;
/*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
font-family:stainy;
font-size:46px;
text-align:center;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
Let me know if this is what you were after:
http://jsfiddle.net/9yVTt/
Here's what I did:
Removed float:left from #sidebar & .contenu
Set both of them to inline-block, and vertical-align:top
I also gave .contenu a margin-left of -4px to make up for the inline-block space bug
CSS
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
/************************************************************************************
Contenu
*************************************************************************************/
#sidebar,
.contenu{display:inline-block; vertical-align:top;}
.contenu{
background: #fff;
margin: 30px 0 30px -4px;
padding: 20px 35px;
width: 600px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0;
padding: 0;
/*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
font-family:stainy;
font-size:46px;
text-align:center;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}
i want that login and sign up link or button should remain fixed at the top right position of the browser window with in the wrapper div. but when i change the browser window size the button gets disappear or comes over the header.
HTML Code
Having a login_bar div section which has a ul list and then the header div section
<div id="wrapper">
<div id="login_bar" style="text-align: right">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div id="header">
</div>
</div>
CSS file
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:150px;
}
#header{
width:1000px;
background-image:url('../images/hf1.jpg');
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}
#login_signup{
float:right;
}
#login_signup > li{
float:left;
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inlineblock;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;
box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}
#login_signup li span{
font-size: 12px;
display:inlineblock;
}
#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;
color:#006666;
}
Both the div section is inside a wrapper div which is in the center
#wrapper{
width:1000px;
min-height:600px;
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}
Currently, you're using position: fixed and right:150px; for your login_bar, you need to change the right value to 0px to fix it at the right side:
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:0px;
}
as well as remove padding-right: 30px; of your list:
#login_signup > li{
float:left;
padding-right: 30px; /* <-- Remove this */
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
Demo
Note: I'm not sure this is what you want, so feel free to ask for more clarifications.
I tested your original setup and it seems to work correctly (at least from how I understood your question). Tested it in IE, Firefox and chrome and looks good... below the css the html file I used:
<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="login_bar" style="text-align: right">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div id="header">
test
</div>
</div>
</body>
</html>
test.css:
#wrapper{
width:1000px;
min-height:600px;
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:150px;
display:inline-block;
}
#header{
width:1000px;
background-image:url('../images/hf1.jpg');
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}
#login_signup{
float:right;
/*display:inline; */
}
#login_signup > li{
float:left;
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inline-block;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;
box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}
#login_signup li span{
font-size: 12px;
display:inline-block;
}
#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;
color:#006666;
}
If you were previously having issues in IE, you may have just forgotten to add <!DOCTYPE html> on top of the html file...
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.
I set up a smaller gallery of pictures in my web proj website:
http://younani.com/finalsite/gallery.html
To me the way the pictures sit do not look like nice. Is there a way to put borders inbetween the pictures and around it. Make it look more organize? I tried to border it but it just moved the pictures all over the script and I wasnt able to put borders in between.
CSS:
#header {
margin: 0 auto;
width: 1150px;
}
#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;
}
#center2 img
{
opacity:0.5;
-webkit-transition: opacity 1s linear;
}
#center2 img:hover
{
opacity:1.0;
-webkit-transition: opacity 1s linear;
}
#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; }
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" /></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="center2"><img src="Meadowthistle.jpg" height="113" width="150" alt="" /> <img src="saffron.jpg" height="113" width="150" alt="" /> <img src="dahlias.jpg" height="113" width="150" alt="" /> <img src="bachelorbutton.jpg" height="113" width="150" alt="" /> <img src="hrysanthemum.jpg" height="113" width="150" alt="" /> <img src="PinkLily.jpg" height="113" width="150" alt="" /> <img src="pinkroses.jpg" height="113" width="150" alt="" /> <img src="RectifiedFlowers.jpg" height="113" width="150" alt="" /> <img src="rhodendron.jpg" height="113" width="150" alt="" /> <img src="gazaniadaisy.jpg" height="113" width="150" alt="" /> <img src="GreenFlower3.jpg" height="113" width="150" alt="" /> <img src="nellwerner.jpg" height="113" width="150" alt="" /> </div>
<!-- Right Column -->
<div id="right">
<p><strong><span style="text-decoration: underline;">Meaning of Flower Colors</span><strong></strong></strong></p>
<p>Pink Caring</p>
<p>Purple Royalty</p>
<p>Red Declaration of love</p>
<p>Yellow Hopelessly in love</p>
<p>Violet Faithfulness</p>
<p>Red & White Unity</p>
<p>Bronze Excitement</p>
<p>Blue loyalty</p>
<p>Green Growth</p>
<p>Orange Warmth</p>
<p>Indigo Emotions</p>
<p>White Purity</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>
Try this css
#center2 a img {
border: 2px solid red;
height: 100px;
margin-top: 4px;
vertical-align: top;
width: 125px;
}
Results is
try
#center2 > a {
border: 2px solid red;
display: block;
width: 150px;
}
CSS
#center2 img {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
border: solid 2px #F0FF49;
float: left;
margin: 6px;
}