Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-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
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old September 12th, 2009, 12:30 PM
Registered User
 
Join Date: Sep 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Angry Chapter 11 Positioning

Hello,

I am new to the web design community. I am in the process of teaching myself with the help of (Beginning CSS 2nd edition). I have completed the code for Example ll-2 but nothing is displayed but text. The chapter is on relative and absolute positioning; is there some kind of hack I need? I have double and tripled checked my code and even opened the authors work with no success. can someone help please.

Thanks,
Reply With Quote
  #2 (permalink)  
Old September 12th, 2009, 12:48 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

Walk me through what you're doing step-by-step. What program are you using to create the files? How are you saving the files (what file name)? What browser are you using to preview your work? Have you turned on file extensions in your OS? When you load a file into your browser, what do you see in the address bar?
Reply With Quote
  #3 (permalink)  
Old September 12th, 2009, 12:58 PM
Registered User
 
Join Date: Sep 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi,

I am using HTML-Kit with IE 8. The filse are saved with the .htm extension. In the tool bar (C:\Users\jkendrick\Desktop\CSS book\Example_11-2.htm).
I am not sure if I turned on my file extensions.
Reply With Quote
  #4 (permalink)  
Old September 12th, 2009, 01:21 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

Pages 14 and 15 have instructions for turning on file extensions. If you aren't sure that you turned on file extensions, you may actually be making files with names like "Example_11-2.html.txt", which would cause text instead of rendered output.
Reply With Quote
  #5 (permalink)  
Old September 12th, 2009, 01:32 PM
Registered User
 
Join Date: Sep 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default File Extensions

Hi- I do have my extensions turned on just checked. I have been doing well up to this point, I don't understand why its not working.

body {
font: 12px sans-serif;
}

div {
background: yellow;
border: 1px solid black;
margin: 0 20px;
}

div#relative {
position: relative;
height: 20px;
}

p {
padding: 5px;
}

p#bottom-right {
margin: 0;
background: gold;
border: 1px solid crimson;
height: 50px;
width: 200px;
position: absolute;
bottom: 5px;
right: 5px;
}

p#offset {
margin: 0;
background: pink;
border: 1px solid crimson;
position: relative;
top: 10px;
left: 10px;
}

Here is the CSS code.
Reply With Quote
  #6 (permalink)  
Old September 13th, 2009, 03:59 PM
Registered User
 
Join Date: Sep 2009
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default All set!!

Hi - Richard

After posting back and forwards i decided today to try the excersize over which i did in notepad. i guess html-kit was kind of quirky yesterday. Doing the excersize in notepad worked out for me. Thanks for your help.
Reply With Quote
  #7 (permalink)  
Old April 24th, 2010, 11:27 AM
Registered User
 
Join Date: Apr 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default IE 8 and Windows 7

I have been working with your book, I have come across some bugs with these programs IE8 and with windows 7, or shall I say I am not sure. I am also using Microsoft Expression Web 3 as my text editor and posting. I have a basic understanding of web design but not an expert either. I am going through Chapter 11 doing the exercises and was doing the example before the summary, with Headers, footers, content, and left columm. Here is my Style sheet code too, also including the css code for IE6. along with the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test_1</title>
<link rel="stylesheet" type="text/css" href="test_1.css"/>
<!--[if]t IE 6]>
<link rel="stylesheet" type="text/css" href="test_1.ie.css"/>
<![endif]-->
</head>
<body>
<div id="heading">
<h1>Heading</h1>
</div>
<div id="container">
<div id="left">
Left Side Column.
</div>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
massa. Phasellus est eros, malesuada vel, tempus quis, pharetra at,
lacus. Ut sit amet libero. Aliquam erat volutpat. Morbi erat. Nunc et
purus vitae tortor sodales auctor. Nulla molestie. Pellentesque ante
mauris, tristique ac, placerat sit amet, placerat nec, ante. Vestibulum
interdum. Donec vitae tellus. Aliquam erat volutpat. Aenean dictum
dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
nulla pharetra dignissim. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aliquam cursus tortor eget diam. Pellentesque pellentesque turpis
sed erat. Duis non libero vel metus sollicitudin aliquet. Aenean neque. Nunc
eget quam a mauris vulputate laoreet. Mauris dictum, eros venenatis fringilla
vehicula, tortor augue dignissim ante, id imperdiet risus sapien at odio. Praesent
ligula magna, nonummy vitae, facilisis at, fermentum non, diam. Integer sit
amet ligula quis lectus bibendum porta. Aliquam neque ipsum, aliquet et, semper
vel, blandit ac, massa. Etiam porttitor justo id arcu. Ut ante lacus, rutrum id,
vehicula non, faucibus in, lorem. Integer eu ante ut mauris rhoncus molestie.
Aenean ut est et lectus tempor pharetra. Fusce sed nibh. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</p>
</div>
</div>
<div id="footer">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu massa. Phasellus
est eros, malesuada vel, tempus quis, pharetra at, lacus.
</p>
</div>
</body>
</html>

==================================================
body {
background: #FFFF66;
font: 12px sans-serif;
margin: 0;
padding: 0 20px;
}
div#heading,
div#container,
div#footer {
border: 1px solid black;
max-width: 1000px;
min-width: 600px;
background: rgb(244, 244, 244);
}
div#container {
position: relative;
margin: 0 auto;
}
div#heading {
margin: 10px auto -1px auto;
}
div#heading h1 {
margin: 5px;
}
div#left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
background: rgb(244, 244, 244);
padding: 5px;
border-right: 1px solid black;
}
div#content {
margin-left: 211px;
background: white;
border: 1px solid white;
padding: 10px;
}
div#footer {
margin: -1px auto 10px auto;
}
div#footer p {
margin: 5px;
}

==================================================

div#heading,
div#container,
div#footer {
width: expression(
documentElement.clientWidth >= 1000?
1000
:
(documentElement.clientWidth <= 600? 600 : "auto")
);
height: 1px;
}
div#left {
height: expression(
document.getElementById("container").offsetHeight - 12
);
}


==================================================
When I look at the code in IE8 it is all jumbled together. There is something I am doing wrong but then again I am new to this and well see what you think.
Reply With Quote
  #8 (permalink)  
Old April 24th, 2010, 12:50 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

I took a look at this in IE8 (both with and without compatibility view), Firefox, Opera, Safari and Chrome on Vista. they all showing the same result, and all looked correct.
Reply With Quote
  #9 (permalink)  
Old April 24th, 2010, 12:55 PM
Registered User
 
Join Date: Apr 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default Ok

Hi so what do you suggest I do for a hack to get it to work. Seeing that I am learning here and am new to all this.
Reply With Quote
  #10 (permalink)  
Old April 25th, 2010, 04:04 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

The code you posted checks out fine, which makes it difficult to tell why it isn't working for you. Can you give us a link to the website where you see it jumbled, or post it online if it's not already? That will let us take a look and compare if we're seeing the same thing you are.
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
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
Chapter 11 Moorish BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 11 June 4th, 2008 05:57 PM
chapter 11 figure 11-7 relative positioning pelopito BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 November 29th, 2007 06:11 AM
Chapter 11 mhanson BOOK: Professional VB 2005 ISBN: 0-7645-7536-8 0 July 10th, 2007 09:40 PM
Chapter 11 kappa3 Wrox Book Feedback 0 October 8th, 2003 12:21 PM



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


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