Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results 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
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 8th, 2007, 07:07 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default question regarding multi-column.html of chapter 2

i'm trying to use your template for my website.

your layout is 1000 width + 1 border on each side, so total 1002.

i want to do 980 with no borders.  my multi-column.html and multi-column-ie.css is same as yours.  

i only change the multi-column.css
up until this point everything is fine
body {
    background: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
h1, h6 {
    margin: 0;
    font-weight: normal;
}
div#container {
    position: relative;
    min-height: 400px;
    border: 1px solid gray;
    background: red;
    max-width: 980px;
    min-width: 750px;
    margin: auto;
}
div#first-column,
div#third-column {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid gray;
    background: orange;
    width: 200px;
    margin: 3px;
}
div#first-column {
    left: 0;
}
div#third-column {
    right: 0;
}
div#content {
    margin: 3px 208px 3px 208px;
    background: lightgrey;
    border: 1px solid gray;
    min-height: 392px;
}
div#header,
div#footer {
    background: blue;
    padding: 3px;
    border: 0px solid gray;
    max-width: 974px;
    min-width: 744px;
    margin: auto;
}
div#header {
    border-bottom: none;
}
div#footer {
    border-top: none;
}



!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

but when i change the border to 0 in div#container, i get a huge white space between the header and the container.  basically your template only works when you have borderwidth = 1.  when borderwidth =0, it messes up,  could you provide some insight, mainly why.



btw, sweet book!
Reply With Quote
  #2 (permalink)  
Old June 8th, 2007, 07:24 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

maybe has to do with this

http://www.complexspiral.com/publica...psing-margins/

Reply With Quote
  #3 (permalink)  
Old June 8th, 2007, 07:27 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

oh also when you change the border to 0 for the content and left and right column, it behaves oddly, bottom doesn't line up.

Reply With Quote
  #4 (permalink)  
Old June 12th, 2007, 08:19 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

Yes, it sounds like margin collapsing.

You can change that to padding: 1px;, or remove the margins on the child elements of the container element.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #5 (permalink)  
Old June 13th, 2007, 06:44 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

thx for the reply, bah, im wondering if i should just go back to tables.

mike

Reply With Quote
  #6 (permalink)  
Old June 14th, 2007, 02:30 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

> hx for the reply, bah, im wondering if i should just go back to tables.

Why, exactly?

Things like margin collapsing may seem a little mysterious and ghostly at first, but once you understand what's going on, it's a piece of cake.

Here's what you need to do to axe the borders.
Code:
body {
    background: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
h1, h6 {
    margin: 0;
    font-weight: normal;
}
div#container {
    position: relative;
    min-height: 400px;
    background: lightgrey;
    max-width: 998px;
    min-width: 750px;
    margin: auto;
    padding: 1px;
}
div#first-column,
div#third-column {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 1px solid gray;
    background: rgb(240, 240, 240);
    width: 200px;
    margin: 3px;
}
div#first-column {
    left: 0;
}
div#third-column {
    right: 0;
}
div#content {
    margin: 2px 208px 0 208px;
    background: rgb(240, 240, 240);
    border: 1px solid gray;
    min-height: 394px;
}
div#header,
div#footer {
    background: rgb(240, 240, 240);
    padding: 3px;
    max-width: 994px;
    min-width: 744px;
    margin: auto;
}
div#header {
    border-bottom: none;
}
div#footer {
    border-top: none;
}
The HTML should look like this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <link rel='stylesheet' type='text/css' href='multi-column.css' />

        <!--[if lt IE 7]>
            <link rel='stylesheet' type='text/css' href='hack-columns-ie.css' />
        <![endif]-->
        <!--[if IE 7]>
            <link rel='stylesheet' type='text/css' href='hack-columns-ie7.css' />
        <![endif]-->
    </head>
    <body id='body'>
        <div id='header'>
           <h1>Header</h1>
        </div>
        <div id='container'>
            <div id='first-column'>
                Text in the first column.
            </div>
            <div id='content'>
                Text in the content column.
            </div>
            <div id='third-column'>
                Text in the third column.
            </div>
        </div>
        <div id='footer'>
            <h6>Footer</h6>
        </div>
    </body>
</html>
In the IE6 style sheet do this:
Code:
div#container {
    width: expression(
        document.getElementById('body').offsetWidth > 1000?

            // If the width of the body is greater than 1000 pixels
            // set the max-width to 1000

            1000
        :
            // If the width of the body is less than 1000, perform
            // another check.

            document.getElementById('body').offsetWidth > 750?

                // If the width of the body is greater that 750 pixels,
                // but less than 1000 make it auto.

                'auto'
            :
                // If the width of the body is 750 pixels or less,
                // make the min-width of the container 750 pixels.

                750
    );
    /* In IE, height behaves like min-height */
    height: 400px;
}
div#first-column,
div#third-column {
    height: expression(
        document.getElementById('container').offsetHeight - 10
    );
}
div#content {
    position: relative;
    top: 2px;
    height: 392px;
}
div#header,
div#footer {
    width: expression(
        document.getElementById('body').offsetWidth > 994?
            994
        :
            document.getElementById('body').offsetWidth > 744?
                'auto'
            :
                744
    );
}
And make a new style sheet for IE7:
Code:
div#content {
    position: relative;
    top: 2px;
}
And that should get it done.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #7 (permalink)  
Old June 15th, 2007, 11:08 AM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

thank you soo much i really appreciate you taking a few seconds out of your time to help me.

some more questions,
1. in chapter 1: tabs, the tabs stack over each other when the browser window is small. is there anyway for it to stay in one line? (like nowrap)

2. do you recommend using Edward Dean's IE7 or just hacking myself for a commercial website?

3. will you come out with any other books?

Reply With Quote
  #8 (permalink)  
Old June 15th, 2007, 11:50 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

> 1. in chapter 1: tabs, the tabs stack over each other when the browser window is small. is there anyway for it to stay in one line? (like nowrap)

Applying a minimum width to the container (the[list] wrapper in that case, I think) should do the trick. Use the CSS "min-width" property, look at the stickies on the forum here for a hack to do that in IE6.

> 2. do you recommend using Edward Dean's IE7 or just hacking myself for a commercial website?

It's up to you. Dean's "IE7" can cause you some performance hits, whereas direct hacking won't. For some things it can also cause some instability (e.g., cause IE to crash). Personally, these days, I stick with raw, direct hacks. I think his library is pretty cool though, which is why I present it as an option in the book. If his library were to evolve more and overcome some of these limitations I might reconsider that opinion. From what I've heard from him he's still working on it, but he hasn't released a new version for quite some time.

> 3. will you come out with any other books?

Wrox just published the 2nd edition of my first book, Beginning CSS: Cascading Style Sheets for Web Design. I rewrote about 80% of the material. It has greatly improved coverage of multi-browser development, and I talk about a lot of "raw" IE6 CSS hacking. It's also the first Wrox book to be published in color. :-)

http://www.amazon.com/exec/obidos/AS...tpwwwsmilin-20

I'm starting on my forth book relatively soon, but that won't be available till next year sometime.




Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote
  #9 (permalink)  
Old June 20th, 2007, 07:41 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

i dont mean to be picky but in your chapter 1 tabs, the regular one without images, its off by 1 pixel.



        ___________________
        |  |
        |  |
        |  |
--------a  -----------

the part where the letter "a" is, is where the pixel is missing.

mike


ps
bah the forum is not lining up my post correctly, but i hope you know what i mean
Reply With Quote
  #10 (permalink)  
Old July 2nd, 2007, 06:24 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to mikeni1225
Default

bump

Reply With Quote
Reply


Thread Tools
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
Multi Column - HTML printing problem ROCXY HTML Code Clinic 5 March 6th, 2008 09:53 AM
List Tool Multi Column? Vendlus BOOK: Professional SQL Server Reporting Services ISBN: 0-7645-6878-7 1 April 28th, 2006 06:39 AM
DataGrid Multi-Column pbyrum Classic ASP Professional 4 October 5th, 2005 06:02 PM
Multi column combo lists c_olinrb Access 4 July 21st, 2005 09:21 AM
multi-column combo myth12345 VB How-To 1 January 3rd, 2005 03:29 PM



All times are GMT -4. The time now is 05:55 AM.


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