Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0
This is the forum to discuss the Wrox book ASP.NET 2.0 Website Programming: Problem - Design - Solution by Marco Bellinaso; ISBN: 9780764584640
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 28th, 2009, 11:52 AM
Authorized User
 
Join Date: Mar 2009
Posts: 75
Thanks: 16
Thanked 1 Time in 1 Post
Default CSS glitch of main layout

How can I solve this problem:

[img=http://img19.imageshack.us/img19/7249/35576837.th.jpg]

(This is a layout up till chapter 5, I know that in next chapters there is some javascript code that fix this)

Is there a way to solve this without using javascript?
  #2 (permalink)  
Old March 28th, 2009, 02:18 PM
Friend of Wrox
Points: 546, Level: 8
Points: 546, Level: 8 Points: 546, Level: 8 Points: 546, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2009
Location: Portland, OR
Posts: 105
Thanks: 3
Thanked 20 Times in 19 Posts
Default

Yevi,

This does not require javascript to correct. There are some definite problems with the <div> tag hierarchy and CSS with TBH. This is one of the first things I abandoned/changed with the sites I've built from the TBH code.

I would suggest visiting Mathew James Taylors excellent site with freely available layouts (3-column, 2-column; percentage widths, pixel widths and em widths). View the page source for the layout(s) that intersts you, or use the stacked column layout, which uses all the others.

Based on Jimi's comments about my exisiting site I'm using a 2-column layout for a site I'm working on. 2-column right menu for the header and 2-column left menu for the body. The side columns are fixed width and the main columns are dynamic.

Also, keep in mind these are basic layout frameworks. As you add more graphics, and layers of graphics you will need to place them inside their own div tags inside the correct layout panel to achieve the look and layout you want. My headers often have 3-4 layers of graphic elements; starting with a backgound color or repeated image slice, an image, a tranparent title/logo (gif or png) and the main menu. It can take a long time getting everything just the way you want, but it's just CSS and div tags.

The nice thing about going this route is that all the columns are always the same height, no overflow (the problem with TBH) and no shifting of sections that your image shows with the footer.

Good Luck.


Steve
The Following User Says Thank You to Steve S For This Useful Post:
yevi (March 28th, 2009)
  #3 (permalink)  
Old March 28th, 2009, 04:01 PM
Authorized User
 
Join Date: Mar 2009
Posts: 75
Thanks: 16
Thanked 1 Time in 1 Post
Default

Thank you.

p.s. who is Jimi? :)
And can you give me a link to your site?

Last edited by yevi; March 28th, 2009 at 04:05 PM..
  #4 (permalink)  
Old March 28th, 2009, 04:34 PM
Friend of Wrox
Points: 546, Level: 8
Points: 546, Level: 8 Points: 546, Level: 8 Points: 546, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2009
Location: Portland, OR
Posts: 105
Thanks: 3
Thanked 20 Times in 19 Posts
Default

Jimi is jimibt, a frequent poster to this forum, you can see his profile here and the thread to his comments about my site here

You can see my site Comuter Scribe here and one I recently put up for a client Vintage Fly Fisherman, both of these sites are using the 3-column liquid layout and are based on the TBH n-tier code.


Steve

Last edited by Steve S; March 28th, 2009 at 04:37 PM..
  #5 (permalink)  
Old March 28th, 2009, 04:37 PM
Authorized User
 
Join Date: Mar 2009
Posts: 75
Thanks: 16
Thanked 1 Time in 1 Post
Default

http://matthewjamestaylor.com/blog/perfect-3-column.htm
Seems to be prefect, though i don't understand (and this is exists in TBH) why do we need colmid and colleft divs?
  #6 (permalink)  
Old March 28th, 2009, 04:43 PM
Friend of Wrox
Points: 546, Level: 8
Points: 546, Level: 8 Points: 546, Level: 8 Points: 546, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2009
Location: Portland, OR
Posts: 105
Thanks: 3
Thanked 20 Times in 19 Posts
Default

The multiple nested divs are to ensure that as one column grows, they all do, this is to ensure equal height of all columns to the tallest column, otherwise things get ugly on the page

A rule of thumb I follow is, when in doubt add another layer of divs.



Steve
The Following User Says Thank You to Steve S For This Useful Post:
yevi (March 28th, 2009)
  #7 (permalink)  
Old March 28th, 2009, 05:58 PM
Friend of Wrox
 
Join Date: Mar 2007
Location: Creetown, UK
Posts: 488
Thanks: 2
Thanked 11 Times in 10 Posts
Default

Quote:
Originally Posted by Steve S View Post
Yevi,

This does not require javascript to correct. There are some definite problems with the <div> tag hierarchy and CSS with TBH. This is one of the first things I abandoned/changed with the sites I've built from the TBH code.
Steve
steve,

definately a good choice in looking at those mjt templates, that guy does cut to the heart of the matter and gets the job done. i particularly like the fact that he 'observes' the need to 'promote' the seo elements and pushes the content div to 'pole' position. it's that attention to detail (that reflects a deeper understanding of the enitre seo process) that can make or break the success of a site, no matter how 'cute 'n' flashy' it looks.

i actually feel a bit 'bad' about some of my observations on your site as they were totally partisan and altho' in the spirit of positive critique, on second reading, they sound a bit like a 'know all' ranting on as if 'he's' got it all figured. i can assure you, i too welcome exactly the same criticism on all work, both recent and past...

anyway, some good pointers there for both yevi and the rest of us...

cheers
__________________
jimi

http://www.originaltalent.com
The Following User Says Thank You to jimibt For This Useful Post:
yevi (March 29th, 2009)
  #8 (permalink)  
Old March 29th, 2009, 10:51 AM
Authorized User
 
Join Date: Mar 2009
Posts: 75
Thanks: 16
Thanked 1 Time in 1 Post
Default

Steve S,

Using this template http://matthewjamestaylor.com/blog/u...ail-pixels.htm

How do cancel/modify the padding of the central column?
  #9 (permalink)  
Old March 29th, 2009, 02:20 PM
Friend of Wrox
Points: 546, Level: 8
Points: 546, Level: 8 Points: 546, Level: 8 Points: 546, Level: 8
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Feb 2009
Location: Portland, OR
Posts: 105
Thanks: 3
Thanked 20 Times in 19 Posts
Default

Hi yevi,

I have not used this particular layout, for my three column work I've used the percentages layout, but I'll see what I can do.

This is the heart of the CSS of the link you provided. Notice the code in blue for the .holygrail .col1 with the authors comments.

Code:
	/* holy grail 3 column settings */
	.holygrail {
	    background:#ff9;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-200px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:400px;         	/* Left column width + right column width */
        background:#FFD8B7;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:200px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:0 215px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:170px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:15px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:170px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:45px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }
Each side column is 170 pixels wide with 15 pixel padding for a total side column width of 200 pixels. The center column padding is also 15 pixels. So, if you change the .holygrail .col1 margin value from 215 down to 200 it would elimnate all center column padding and if you increase it above 215 it would increase the padding. With only the right padding specified it applies to both sides, I believe, if you set margin to 0 215 0 215 you should be able to adjust each center column padding independently.

To change the column widths you would change the 200px entries, but this would also affect the center column padding too. When dealing with CSS and multi-column layouts I've found it is like dealing with linked rubber bands your never sure what a change in one place will affect another place. I oftern use 2 pixels borders of different colors and styles to more easily see what affects my changes have; when I get it the way I want I then remove the visible borders, often only commenting them out in case I want to make additional tweaks.

Good Luck


Steve
  #10 (permalink)  
Old March 29th, 2009, 04:46 PM
Authorized User
 
Join Date: Mar 2009
Posts: 75
Thanks: 16
Thanked 1 Time in 1 Post
Default

Once again, another great explanation of yours.

I liked the border coloring trick! It makes it easier to orientate.
Still, i find css very complex to understand.
I think the best way for me to understand it is by playing with numbers and observing the effect.
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Css layout not work well in Firefox kumiko CSS Cascading Style Sheets 0 March 31st, 2008 10:27 AM
CSS Layout DeadMeatGF CSS Cascading Style Sheets 2 November 5th, 2005 03:23 PM
Is CSS the best for making website layout?? DSteven CSS Cascading Style Sheets 3 August 23rd, 2005 05:45 AM
CSS layout issue Groundhog1248 CSS Cascading Style Sheets 1 March 2nd, 2005 09:13 AM
CSS Layout Divs Truce77 PHP How-To 2 March 29th, 2004 07:29 PM



All times are GMT -4. The time now is 04:27 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.