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%;
}
Related
I'm trying to move my nav menu down. It's currently being 75% covered by the admin bar http://3v3rivals.tk
I want to move the nav menu just below the admin bar, with little to no space between the two. I may need to move the header down a bit also.... How would I go about moving my nav menu down?
/************************************************
Main Navigation
************************************************/
#nav-logo {
float: left;
padding: 8px 10px;
max-width: 100px;
}
#nav-main-wrapper {
border-bottom: 1px solid #444;
-ms-box-shadow: 0 4px 10px -3px #000;
-moz-box-shadow: 0 4px 10px -3px #000;
-o-box-shadow: 0 4px 10px -3px #000;
-webkit-box-shadow: 0 4px 15px -5px #000;
box-shadow: 0 4px 10px -3px #000;
float: left;
margin-bottom: 1px solid #888;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 2000;
}
#nav-main {
color: #fff;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
margin: 0 auto;
text-transform: uppercase;
width: 960px;
height: 50px;
}
ul.nav-main a {
color: #fff;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 2px 2px 1px #000;
-ms-text-shadow: 2px 2px 1px #000;
-o-text-shadow: 2px 2px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px #000;
}
ul.nav-main .menu-item-home {
background: url(images/nav-sep.png) no-repeat right bottom !important;
}
ul.nav-main .menu-item-home a {
color: #fff !important;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #000 !important;
-ms-text-shadow: 1px 1px 1px #000 !important;
-o-text-shadow: 1px 1px 1px #000 !important;
-webkit-text-shadow: 1px 1px 1px #000 !important;
text-shadow: 1px 1px 1px #000 !important;
}
ul.nav-main a:hover {
text-decoration: none;
}
#nav-main-left {
float: left;
position: relative;
width: 810px;
}
ul.nav-main {
display: inline;
float: left;
position: relative;
max-width: 710px;
}
ul.nav-main li {
background: url(images/nav-sep.png) no-repeat right bottom;
display: inline;
float: left;
position: relative;
}
ul.nav-main .current-menu-item,
ul.nav-main .current-post-parent {
background: #eee url(images/nav-bg.png) repeat-x bottom;
}
ul.nav-main li:hover {
background: #eee url(images/nav-bg.png) repeat-x bottom !important;
}
ul.nav-main .current-menu-item a,
ul.nav-main .current-post-parent a {
color: #000;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff;
-ms-text-shadow: 1px 1px 1px #fff;
-o-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
text-shadow: 1px 1px 1px #fff;
}
ul.nav-main li:hover a {
color: #000 !important;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff !important;
-ms-text-shadow: 1px 1px 1px #fff !important;
-o-text-shadow: 1px 1px 1px #fff !important;
-webkit-text-shadow: 1px 1px 1px #fff !important;
text-shadow: 1px 1px 1px #fff !important;
}
ul.nav-main li ul {
display: none;
}
ul.nav-main li:hover ul {
background: #ddd url(images/striped-bg.png);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 0 3px 7px -2px #333;
-ms-box-shadow: 0 3px 7px -2px #333;
-o-box-shadow: 0 3px 7px -2px #333;
-webkit-box-shadow: 0 3px 7px -2px #333;
box-shadow: 0 3px 7px -2px #333;
display: block;
padding: 5px;
position: absolute;
left: 0px;
top: 50px;
width: 150px;
}
ul.nav-main li:hover ul li {
background: #eee;
position: relative;
}
ul.nav-main li:hover ul li a {
float: left;
padding: 8px;
width: 134px;
}
ul.nav-main li:hover ul li:hover,
ul.nav-main li:hover ul li:hover.current-menu-item {
background: #fff !important;
}
ul.nav-main li:hover ul li ul {
display: none;
}
ul.nav-main li:hover ul li:hover ul {
display: block;
margin: 0;
position: absolute;
left: 150px;
top: -5px;
width: 150px;
}
#nav-mobi {
display: none;
overflow: hidden;
}
#nav-mobi select {
border: 1px solid #2d2f31;
border-radius: 3px;
color: #fff;
float: left;
margin: 10px;
padding: 0 30px 0 5px;
width: 300px;
height: 30px;
-webkit-appearance: none !important;
}
#nav-search {
float: right;
padding-top: 9px;
position: relative;
text-align: right;
width: 150px;
}
#searchform {
float: left;
position: relative;
}
#searchform input {
background: url(images/search-icon.png) no-repeat right;
border: 0;
border-bottom: 1px solid #666;
border-radius: 2px;
-moz-box-shadow: 0 2px 10px -2px #000 inset;
-ms-box-shadow: 0 2px 10px -2px #000 inset;
-o-box-shadow: 0 2px 10px -2px #000 inset;
-webkit-box-shadow: 0 2px 10px -2px #000 inset;
box-shadow: 0 2px 10px -2px #000 inset;
color: #aaa;
float: left;
font: 12px/12px helvetica, arial, sans-serif;
margin: 0 0 10px;
padding: 9px 0 9px 10px;
width: 140px;
height: 12px;
}
#searchform #search-button {
border: none;
float: left;
}
#searchform #s:focus {
outline: none;
}
you are using fixed position on you nav which means that it is at the very top no matter what. I think what's confusing you is that when you see the website it looks all messed up but when a non admin sees it it is fine. If you have a lot of users that will see the admin bar then you will need to use some wp logic to see if the user is logged in as an admin and if so that "top" attribute will need to be like 75px or however tall the admin bar is. Also if you want a quick dirty fix there is a plugin that hides the admin bar.
JSFiddle
HTML
<div class="Progress">
<div class="Step">
</div>
<div class="Tri-Fwd"></div>
</div>
CSS
.Progress .Step {
float:left;
width:140px;
height:40px;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
box-shadow: inset 0px 0px 5px 1px rgba(21,139,204,1);
border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
-webkit-border-top-left-radius:6px;
border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
-webkit-border-bottom-left-radius:6px;
}
.Progress .Tri-Fwd {
float:left;
border-top: 20px solid transparent;
border-left: 20px solid;
border-bottom: 20px solid transparent;
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
box-shadow: inset 0px 0px 10px 2px rgba(21,139,204,1);
}
Reference Image
The Problem
I'm trying to make a CSS only only step-by-step progress however I am having problems with my inner box shadows.
ADVANCED
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background: linear-gradient(#fff, #ccc);
margin: 40px auto;
border: 1px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden;
box-shadow: inset 0px 0px 2px #333, 0 0 1px #333;
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 30px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
background: linear-gradient(#f6e6b4 0%, #ed9017 100%);
}
menu li:before, menu li:after{
content: '';
position: absolute;
}
menu li:before{
top: 5px;
width: 30px;
height: 30px;
transform: rotate(45deg);
right: -13px;
box-shadow: 2px -2px 1px 0px #BABABA;
background: linear-gradient(135deg, #f6e6b4, #ed9017);
}
menu li.active{color: white}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
menu li:not(:nth-child(1)){margin-left: -4px; padding-left: 40px}
<menu>
<li>Stage 1</li>
<li class=active>Stage 2</li>
</menu>
THE BASIC
*{box-sizing: border-box; padding: 0; margin: 0}
menu{
background-color: #ccc;
margin: 40px auto;
border: 2px solid orange;
border-radius: 4px;
max-width: 480px;
overflow: hidden
}
menu li{
position: relative;
list-style: none;
display: inline-block;
padding: 10px 4px 10px 20px;
font-size: 20px;
line-height: 20px;
margin: 0;
box-shadow: -2px 0 0 orange;
background-color: orange
}
menu li:before, menu li:after{
content: '';
position: absolute;
top: -2px;
border-bottom: 22px solid transparent;
border-top: 22px solid transparent
}
menu li:before{
border-left: 20px solid #ccc;
left: 100%;
}
menu li:after{
border-left: 20px solid orange;
left: 98%;
}
menu li:nth-child(1){z-index: 2}
menu li:nth-child(2){z-index: 1}
<menu>
<li>Stage 1</li>
<li>Stage 2</li>
</menu>
Look at my login-form (enter link description here.
I don't know why, but the Text-Field is not as large as the login-field -10px left and right (margin).
What did I wrong?
I hope you can help me, Thanks!
Codes:
Markup:
<div class="sidebar">
<div class="widget">
<h1>Login</h1>
<form class="login_form">
<p>
<label for="auth_id">Auth-Id:</label>
<input id="auth_id" type="text" name="auth_id">
</p>
<p>
<input type="submit" value="Login" class="submit">
</p>
</form>
</div>
</div>
CSS:
.sidebar {
float: left;
width: 200px;
}
.sidebar .widget {
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #0b145f;
margin-left: 20px;
background-color: #f8f8fe;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.8), 0px 3px 0px -2px rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,0.8), 0px 3px 0px -2px rgba(0,0,0,0.1);
}
.sidebar .widget h1 {
font-family: 'Quicksand';
margin: 13px 10px 5px;
padding-bottom: 10px;
border-bottom: 1px dotted #0b145f;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
margin-bottom: 10px;
}
.sidebar .widget p {
margin: 0;
padding: 0;
}
.sidebar .widget .login_form label {
margin: 10px 10px 0 10px;
display: block;
}
.sidebar .widget .login_form input {
margin: 10px 10px 0 10px;
padding: 10px;
}
You need to give the input its own width, right now it is inheriting the width of the form and when you added the padding and margin it pushes it outside the container.
.sidebar .widget .login_form input {
margin: 10px 10px 0 10px;
padding: 10px;
width: 70%;
}
I use span inside div to simulate whole div as a link. It works well on Chrome & FF, but in IE, it doesn't.
I use an imported font (awesome font) to make appear an icon on the main div (with "before" statement in css). The div appears to be clickable just a little before and just a little after the icon. In FF and Chrom, the whoole icon is clickable... How to make it work in IE?...
css:
.tiremenuadmin{
font-family: 'fontawesome';
display: block;
font-size: 30px;
text-shadow: 0px 0px 7px #000000;
padding: 7px;
float: right;
width: 46px;
text-align: center;
margin: 7px 7px 0 0;
background-color: #364f71;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
cursor: pointer;
opacity: 0.7;
}
.tiremenuadmin:before{
content: "\F013";
}
.menuadmin{
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: bold;
color: #677889;
text-shadow: 1px 1px 0 #FFFFFF;
}
.enveloppe_menuadmin{
left: 50%;
margin-left: -10px;
margin-top: -70px;
width: 486px;
height: 50px;
position: fixed;
background: #364f71;
z-index: 100;
padding: 10px 12px 10px 10px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}
.align_menuadmin{
left: -50%;
}
.cover_admin{
background: #364f71;
float: right;
width: 79px;
height: 8px;
left: 418px;
position: absolute;
}
.env_menuadmin{
width:100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f3f3f3;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.adminmenu, .adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_4, .adminmenu_5, .adminmenu_6, .adminmenu_7{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontawesome';
}
.adminmenu_00{
position: relative;
float: left;
height: 21px;
padding: 14px 15px 15px 15px;
font-family: 'fontello-home';
font-size: 21px;
top: 1px;
}
.adminmenu_0, .adminmenu_1, .adminmenu_2, .adminmenu_3, .adminmenu_5, .adminmenu_6, .adminmenu_7 {
border-left:1px solid #fff;
border-right:1px solid #d6d6d6;
}
.adminmenu_00{
border-right:1px solid #d6d6d6;
}
.adminmenu_4{
border-left:1px solid #fff;
}
.adminmenu_0:before{
content: "\F007";
}
.adminmenu_00:before{
content: "\E0E0";
}
.adminmenu_1:before{
content: "\F085";
}
.adminmenu_2:before{
content: "\F0E0";
}
.adminmenu_3:before{
content: "\F059";
}
.adminmenu_4:before{
content: "\F011";
}
.adminmenu_5:before{
content: "\F0C1";
}
.adminmenu_6:before{
content: "\F15C";
}
.adminmenu_7:before{
content: "\F055";
}
.adminmenu_1 span, .adminmenu_2 span, .adminmenu_3 span, .adminmenu_4 span, .adminmenu_5 span, .adminmenu_6 span, .adminmenu_7 span, .adminmenu_0 span, .adminmenu_00 span {
position: absolute;
width: 100%;
height: 50px;
right: 0px;
top: 0;
z-index: 1000;
}
.adminmenu:hover, .adminmenu_00:hover, .adminmenu_0:hover, .adminmenu_1:hover, .adminmenu_6:hover, .adminmenu_7:hover, .adminmenu_2:hover, .adminmenu_3:hover, .adminmenu_4:hover, .adminmenu_5:hover{
color:#7D92A7;
}
html:
<div class="enveloppe_menuadmin" style="opacity: 1; margin-top: -15px;">
<div class="align_menuadmin">
<div class="env_menuadmin">
<div class="menuadmin">
<div class="adminmenu_00"><span></span></div>
<div class="adminmenu_0"><span></span></div>
<div class="adminmenu_1"><span></span></div>
<div class="adminmenu_5"><span></span></div>
<div class="adminmenu_2"><span></span></div>
<div class="adminmenu_6"><span></span></div>
<div class="adminmenu_7"><span></span></div>
<div class="adminmenu_3"><span></span></div>
<div class="adminmenu_4"><span></span></div>
</div>
</div>
<div class="tiremenuadmin" style="opacity: 1;"></div>
<div class="cover_admin"></div>
</div>
</div>
Demo: http://jsfiddle.net/namkc/
Found:
<div class="adminmenu_00"><span></span></div>
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.