...

View Full Version : CSS is bugging! Layout is messed...



mnkhaki
10-24-2011, 03:11 PM
Ok, so I am dumbfounded. I thought I had it - but apparently not.

http://jafferyacademy.org/index-beta.php

The code is below, I want the section that says "main stuff here"and "right stuff here" to be centered with their respective DIV's, and that they are further placed within a container that has a shadow... hope it makes sense.

Where is this code wrong? Please help! :(




/* CSS Document */

/* ---------------- general ---------------- */

body {
font-family: arial, hevetica, sans-serif;
font-size:12px;
color:#666666;
background-color:#ffffff;
line-height:1.5em;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#999999;
font-stretch:semi-condensed;
line-height:1.5em;
}

/* ---------------- typography ---------------- */

a:link {
color:#cfcfcf;
text-decoration:none;
}
a:visited {
color:#cfcfcf;
text-decoration:none;
}
a:hover {
color:#669900;
text-decoration:none;
}
a:active {
color:#999999;
text-decoration:none;
}

/* ---------------- HEADER AREA ONLY ---------------- */

#headerbox {
position:relative;
margin:auto;
width:100%; /* formerly 100% */
height:180px;
display:block;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0a5a0a, endColorstr=#669900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0a5a0a), to(#669900));
}

#header {
position:relative;
width:1100px;
height:auto; /* orig 130 */
top:10px;
margin-left:auto;
margin-right:auto;
}

#header .logo {
position:absolute;
left:10px;
top:0px;
}

#header .link {
position:absolute;
right:10px;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#F5f5f5;
}

#header .title {
position:absolute;
top:40px;
float:right;
right:5px;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
color:#F5f5f5;
}

/* ---------------- NAVIGATION SECTION ---------------- */

#navbar {
z-index:100;
width:100%;
height:auto;
margin:auto;
position:relative;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5f5f5f, endColorstr=#2b3033);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5f5f5f), to(#2b3033));
}

#navbar .menu {
width:1100px;
margin-left:auto;
margin-right:auto;
}

/* ---------------- MAIN PAGE / INFO SECTION ---------------- */

#containerrow {
position:relative;
margin:auto;
width:100%; /* formerly 100% */
display:block;
}

#container {
position:relative;
width:1100px;

-moz-box-shadow:0px 3px 10px 5px #999999; /*left offset, top offset, blur, spread, color */
-webkit-box-shadow:0px 3px 10px 5px #999999;
box-shadow:0px 3px 10px 5px #999999;
}

#content {
font-family: arial, hevetica, sans-serif;
font-size:12px;
color:#666666;
background-color:#ffffff;
line-height:1.5em;
width:830px;
float:left;
margin:25px 10px 25px 10px;
}

#contentright {
width:230px;
float:right;
margin:25px 10px 25px 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ffffff;
}


/* ---------------- footer ---------------- */


#bottomcontainer {
clear:both;
position:relative;
margin-top:220px;
width:100%px;
padding-top:25px;
background-color:#0a5a0a;
border-top:thick #333333 solid;

background-image:-moz-linear-gradient(#669900, #0a5a0a);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#669900), to(#0a5a0a));
filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#669900, endColorstr=#0a5a0a);
}

.footer {
position:relative;
width:100%;
margin:auto;
padding-top:20px;
height:75px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-align:center;
}

/* ---------------- FONTS ---------------- */

.maintitle {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#333333;
line-height:1.5em;
}

/* ---------------- GENERAL ---------------- */

.myimage-left {
margin:4px;
float:left;
}

.myimage-right {
margin:4px;
float:right;
}

Excavator
10-24-2011, 03:45 PM
Hello mnkhaki,
Maybe something like this?

/* ---------------- MAIN PAGE / INFO SECTION ---------------- */

#containerrow {width: 100%;}
#container {
width: 1100px;
margin: auto;
padding-top: 25px;
overflow: auto;
font-family: arial, hevetica, sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;

-moz-box-shadow:0px 3px 10px 5px #999999; /*left offset, top offset, blur, spread, color */
-webkit-box-shadow:0px 3px 10px 5px #999999;
box-shadow:0px 3px 10px 5px #999999;
}
#content, #contentright {text-align: center;}


See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

mnkhaki
10-24-2011, 04:35 PM
Excavator - thank you SO much! It seemed to work quite well.

Now comes the interesting part. I will try and figure out; if not, I hope you don't mind me asking away :).

Thanks for the tutorial too.

mnkhaki
10-24-2011, 04:38 PM
OK here we go.. the background where the slider images are had a gradient. I removed the images DIV because of the above problem, but now that the above is solved, it wiped out the linear gradient.... where may I tweak that?

Excavator
10-25-2011, 03:26 AM
Keep in mind the slider has it's own CSS (as I used includes), but I don't see where the conflict is, or may be.

There is no css styling .maingallery in what I see online at http://jafferyacademy.org/index-beta.php

Notice I use the . that denotes a class? If your CSS is styling an id then it has a # in front of it and won't affect the class you use in your website.

Does that make sense?

To fix it, try making your CSS style a .maingallery or change your markup to an id like this - div id="maingallery"

mnkhaki
10-28-2011, 09:59 AM
Hey - sorry for the delay in responding, but thanks a whole lot! It works well now, can move on to building it. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum