Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Exclamation CSS is bugging! Layout is messed...

    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!

    Code:
    /* 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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mnkhaki,
    Maybe something like this?
    Code:
    /* ---------------- 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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mnkhaki (10-24-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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"
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hey - sorry for the delay in responding, but thanks a whole lot! It works well now, can move on to building it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •