p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 (http://p2p.wrox.com/forumdisplay.php?f=337)
-   -   Chapter 11 Positioning (http://p2p.wrox.com/showthread.php?t=76151)

jkendrick September 12th, 2009 11:30 AM

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,

richard.york September 12th, 2009 11:48 AM

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?

jkendrick September 12th, 2009 11:58 AM

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.

richard.york September 12th, 2009 12:21 PM

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.

jkendrick September 12th, 2009 12:32 PM

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.

jkendrick September 13th, 2009 02:59 PM

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.[:)]

bill140 April 24th, 2010 10:27 AM

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.

PeterPeiGuo April 24th, 2010 11:50 AM

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.

bill140 April 24th, 2010 11:55 AM

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.

chroniclemaster1 April 25th, 2010 03:04 PM

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.


All times are GMT -4. The time now is 11:23 PM.

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