...

View Full Version : Could this be done more efficiently?



mumford
02-24-2005, 04:34 PM
Hi

I got this layout from css creator slightly adapted http://www.smstraveller.com/test-css.htm

I noticed in the css styles generated it has some hacks in there for NN4, the thing is I am not bothered how the layout looks in NN4, could someone look at the css and see what code could be stripped out, but still have the appearance look the same.

It just seems to me that this layout could be alot simpiler, what do you think?

Could i acheive what i what but more efficiently?

thanks for any help

rmedek
02-24-2005, 09:37 PM
To tell the truth it looks pretty efficient to me. Some of the hacks look like they are targeting IE as well, so I wouldn't mess around too much with that.

There are one or two places where you can combine attributes (like the color on the hx tags) but overall I don't see that many places where you would want to strip things out.

Maybe a CSS zen master will step in here with some more ideas but for now I'd say you're okay.

mumford
02-25-2005, 09:41 AM
Thanks for the reply, I hope I can get some more feedback

ronaldb66
02-25-2005, 11:23 AM
I would hardly call myself a CSS Zen Master, but a quick inspection didn't reveal any opportunities for great improvements; just minor tweaks, really.

I'd say, do a test page with some content (Lipsum will do) and a design approach; maybe we can offer some ideas.

rmedek
02-25-2005, 09:11 PM
I would hardly call myself a CSS Zen Master...
Would you settle for "Zen Advisor"? Your level of patience in these forums never fails to amaze me... That's worth a Zen something. :)

bradyj
02-25-2005, 09:44 PM
The only thing you could do to simplify would be to use semantic code instead of divs to style it. Example being, instead of a div for #header, cannot it not just be an h1, with:


h1{
height:274px;
width:100%;
background-color:#D0FFFF;
}


If not, then the div content within the header should definately be an actual html semantic character (paragraph, list, defintion list, etc. - something other than a div or a span).

Stuff like this:


<div id="inner">
<div id="leftcol" >
<div class="content"> Left Column </div>
</div>
<div id="maincol" >
<div class="content"> Main Content Column </div>

</div>
<div id="rightcol" >
<div class="content"> Right Column </div>
</div>

<div class="clr"></div>
<!-- close inner and outer -->
</div>


Could be:


<ul>
<li>
<h2> Left Column </h2>
</li>
<li>
<h2> Main Content Column </h2>

</li>
<li>
<h2> Right Column </h2>
</li>

</ul>


You could put a class/id on each li for the custom background, then clear the ul to get rid of the other div. Same for the footer (get rid of the inner #content, make it actual html semantic; then clear it without the clearing div).

Why the #wrapper and the #pagewidth? Couldn't the wrapper styles go for the body element, and then the page width is the only container? Like:


body{
background: white url(images/bground-wrapper.gif) repeat-y center top;
}


...then #pagewidth would be the center?

mumford
02-26-2005, 03:44 PM
the reason for the wrapper div is i will be placing a bground image within the body, html class which is not refrenced in the example I posted, and I also need a bground image (the shadwo effect you see) in the wrapper

Interesting points you make, do you have any examples where the markup is how you suggested?

AaronW
02-26-2005, 04:16 PM
I disagree on the three columns being a list. I'd say they're divisions. I suppose depending on what he puts in them for content it's kind of up in the air.

mumford
02-26-2005, 04:32 PM
both columns will have some sort of content, but the columns don't have to equalise thinking about it, so what would you recommend?

bradyj
02-28-2005, 12:23 AM
I disagree on the three columns being a list. I'd say they're divisions. I suppose depending on what he puts in them for content it's kind of up in the air.

Lists are divisions of content, but I agree that's up to arguement.

mumford, give coding it a shot and see if you come up with the same look, smaller - that would be easier than examples. I'm surprised you guys' are brushing it off, when the possibility of simplifying so many divs would be more useful, and easier to code.

Example of the h1 without a div wrapper (http://www.bodyecologydiet.com).

I just changed the bottom three columns on my home page (http://www.dotfive.com) to reflect a list floated left, as columns instead of divs. Id's were used for the borders of the elements, as this is an old site I haven't touched in a while, the code in the CSS could be improved and simplified, but I'm shooting for 2.0.

Jalenack
02-28-2005, 01:27 AM
I'd say its pretty clean how it is...its only a 2.5kb file...here are some small things you can do:


.content{padding:5px;} /*padding for content */

Do you really need to have that comment? seems pretty obvious if you ask me.

You've got a ton of bonus whitespace...the indented css adds a lot of extra characters...as do the comment divisions..that may just be a personal thing.


/* -------------------------------------------------------------------
P A G E - E L E M E N T S
---------------------------------------------------------------------- */

I'd make that

/************** Page Elements ***************/


IMO, its actually easier to see and looks nicer and is about half the bandwidth.



a:link, a:active, a:visited{
color:#003366;
text-decoration:underline;
}
a:link{
color:#000066;
}
a:active{
color:#000066;
}
a:visited{
color:#000066;
}
a:hover{
color: #0000CC;
}



uhh, what? why do you declare the colors once and then override them. In anycase you can simplify the colors as you did on other parts of the css (example: #0000CC changes to #00c)

Hope this helps

mumford
02-28-2005, 10:24 AM
thanks, i'm going to re-code it using floats as my columns will not need to equalise now, let you know how i get on



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum