|
CSS - Please Critique My Css. =)
Hi Guys,
I've been working on a site and building up a css document for it. I'm not a CSS expert (rather a noob), but everything in here seems to work for me. I tried to keep it organized too. I did the validation and only recieved one error. the error is below, followed by the code in question. I'm not sure how to fix it. Value Error : margin-right only 0 can be a length. You must put a unit after your number : 20 20 --------------- div#logo { float: left; position: relative; margin-right: 20;} -------------------------- Anyways, I was hoping someone could take a look at my css code and see if there are any red flags. Or if you have any ideas, etc. Like I said this all works for me, but I'd like to have some criticism if possible. I know the CSS is rather long but I have a lot of different tables, etc (that I will eventually replace with divs during an upcoming redesign). Code:
/*--- Generic Styles ---*/
#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:870px;
border: 1px solid #146eb4;
}
div#logo {
float: left;
position: relative;
margin-right: 20;}
body
{
background: #FFF; color: #000000;
font: .8em arial, helvetica, sans-serif;
margin: auto;
padding:0px;
}
a
{
color: #000000;
}
a img
{
border: 0px none;
}
p
{
color: #000000;
margin: 0 0 1em;
font: .85em arial, helvetica, sans-serif;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.smallboldtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
font-weight: bold;
}
.smallformvalidtext
{
font-family: arial, helvetica, sans-serif;
color: blue;
font-size: .7em;
font-weight: bold;
}
.smallformerrortext
{
font-family: arial, helvetica, sans-serif;
color: red;
font-size: .7em;
}
.smallactiontext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .75em;
font-weight: bold;
}
.mediumtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .9em;
}
.mediumboldtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: 1.1em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #FFFFFF;
font-size: .9em;
}
.headersearchlink
{
text-decoration:none;
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .95em;
}
.headersearchinput
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #146eb4;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #FFFFFF;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 2em;
}
#content h1
{
background: #fff; color: #146eb4;
font-size: 1.4em;
margin: 0 33% 1.25em -1em; padding: 0.4em 2em;
}
#content h1 b
{
color: #e87b02;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #146eb4;
font-size: 1.2em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #e87b02;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.adsearch
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.registration
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.login
{
border: 2px solid #e87b02;
width: 470px;
border-collapse: collapse;
}
table.membersearch
{
border: 2px solid #e87b02;
width: 415px;
border-collapse: collapse;
}
table.contactus
{
border: 2px solid #e87b02;
width: 415px;
border-collapse: collapse;
}
table.subdomaincontroller
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.editprofile
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.adentryform
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.adverificationform
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.singlephotoupload
{
border: 2px solid #e87b02;
width: 450px;
border-collapse: collapse;
}
table.photoupload
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.adview
{
border: 2px solid #e87b02;
width: 515px;
border-collapse: collapse;
}
table.adviewpod
{
border: 2px solid #e87b02;
width: 515px;
border-collapse: collapse;
}
table.photogrid
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.messages
{
border: 2px solid #e87b02;
width: 600px;
border-collapse: collapse;
}
/*--- Form Styles ---*/
.input
{
font: .7em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
.input:hover
{
border: 2px solid #146eb4;
background: #FFFFFF;
}
.button
{
font: 11px Arial, Helvetica, sans-serif;
background: #146eb4;
color: #102132;
margin-left: 12px;
margin-top: 3px;
margin-bottom: 2px;
}
.button:hover
{
border: 1px solid #f00;
background: #e87b02;
}
.select
{
font: 11px Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
}
/*--- image buttons
http://cssbutton.com/forms/
.button {
border: none;
background: url('/forms/up.png') no-repeat top left;
padding: 2px 8px;
}
.button:hover {
border: none;
background: url('/forms/down.png') no-repeat top left;
padding: 2px 8px;
---*/
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
border: 2px solid #e87b02;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #146eb4;
width: 100%;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #FFFFFF; color: #FFFFFF;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.0em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatisdetailsat h4{
margin: 0 0 0.5em; padding: 0.5em 0;
color: #000000;
border-bottom: 1px solid #FFFFFF;
font-weight: normal;
}
#whatisdetailsat p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #146eb4;
height: 15px;
}
#footer li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
font-weight: normal;
font-size: .85em;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #FFFFFF;
text-decoration: underline;
}
Similar TutorialsHey all, I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones. The URL Is h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e (no spaces) If you load it in firefox (3.5.9) it looks just like I want it to. If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening. If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that. If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you. After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-) Cheers, Golem |
|||||||