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 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Could this be done more efficiently?

    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
    Last edited by mumford; 02-24-2005 at 04:55 PM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, I hope I can get some more feedback

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Zen pupil

    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.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ronaldb66
    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.

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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:
    Code:
     		<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:
    Code:
     		<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:
    Code:
    body{
     background: white url(images/bground-wrapper.gif) repeat-y center top;
    }
    ...then #pagewidth would be the center?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #7
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    both columns will have some sort of content, but the columns don't have to equalise thinking about it, so what would you recommend?

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AaronW
    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.

    I just changed the bottom three columns on my home page 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.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd say its pretty clean how it is...its only a 2.5kb file...here are some small things you can do:

    Code:
    .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.

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

    Code:
    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
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #12
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

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