Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets 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 Search this Thread Display Modes
  #1 (permalink)  
Old September 4th, 2005, 04:47 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default Pure CSS Positioning Prob

I'm developing a Website for a local charity which must comply to XHTML Transitional standards. Because the site is mostly text based I have decided to use DIV and CSS for page layout.

The main content area has two columns (DIV's) which use Absolute positioning - contained with another DIV which uses Relative positioning to establish a containing block.

The query I have is if all my DIVs are stacked on top of each other, and it is only the DIVs contained within a DIV established as a containing block -Why do I now have to position every DIV that follows the positioned DIV to ensure it comes after it?

I realise that Absolute positioning remove object from the document flow - but these DIV are contained with a normal DIV with a position set as relative - so sure my DIV should stack normal?

I'm a little puzzled to why I need to position my footer DIV, surely the document flow would be normal??

XHTML 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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: safeline warwick :: for adult survivors of childhood sexual abuse</title>
<style type="text/css">
body { font-family: "Lucida Grande", Arial, sans-serif; font-size:10pt; color:#4D6E8E; }
div { width:650px; }
a:link { background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:visited { color:#ffffff; text-decoration:none; font-size:14pt; background-color:#4D6E8E; }
a:hover { background-color:#CC0066; color:#ffffff; text-decoration:underline; }
a:active {background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:link, a:visited, a:hover, a:active { padding: 2px 8px; }
#header { font-size: 8pt; }
#header_link { width:325px; float:left; text-align:left; color:#4D6E8E; padding-bottom:5px;}
#page_date {width:325px; float:right; text-align:right; color:#4D6E8E; padding-bottom:5px;}
#head_link {font-size: 8pt; background-color:#ffffff; color:#4D6E8E; text-decoration:none; padding:0px;}
#content { width:650px; position:relative; padding-top:15px;}
#sidebar { width:160px; position:absolute; top:0; left:0; padding-top:15px; }
#mcontent { width:480px; position:absolute; top:0; right:0; padding-top:15px; padding-left:10px; }
div a.slinks { font-size:12px; background-color:#CCFFFF; color:#4D6E8E; display:block; border-style:solid; border-color:#ffffff; border-width:2px;}
h1 { color: #CC0066; font-size: 32px; margin:0; }
h2 { font-size:18px; background-color:#ffffff; color:#CC0066; margin:0; }
h3 { font-size:14px; background-color:#ffffff; color:#CC0066; margin:0; }
h1, h2, h3 { vertical-align:top; }
strong { color:#CC0066; font-size:12pt; font-weight:bold; }
#sections { width:480px; position:relative; padding-top:10px; }
#forums { width: 235px; position:absolute; top:0; left:0; border-right: 1px dashed #4D6E8E; padding-right:5px; }
#services { width: 230px; position:absolute; top:0; right:0; padding-left:10px; }
hr { border-style:dashed; border-width:1px; border-color:#4D6E8E; }
#mcontent p { font-size: 12pt; }
#footer { background-color: #52BCEC; position:absolute; top:870px; padding-top: 10px; padding-bottom: 10px; }
#footer p { font-size: 8pt; text-align:center; color:#ffffff; }

</style>
</head>
<body>
<div id="header">
    <div id="header_link">You're Here:
    <a href="index.html" target="_self" id="head_link">Home Page</a>
    </div>

    <div id="page_date">
    <script language="JavaScript" type="text/javascript">
    <!--

    var m_names = new Array("January", "February", "March",
    "April", "May", "June", "July", "August", "September",
    "October", "November", "December");

    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + m_names[curr_month]
    + "-" + curr_year);

    //-->
    </script>
    </div>
</div>
<div id="safeline_logo">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="650" height="180">
    <param name="movie" value="flash/safeline-logo.swf" />
    <param name="quality" value="high" />
    <embed src="flash/safeline-logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="180"></embed>

  </object>
</div>
<div id="page_links">
    <a href="index.html" target="_self" title="home page">home</a>
    <a href="index.html" target="_self" title="information on how we got started">about us</a>
    <a href="index.html" target="_self" title="information for survivors of sexual abuse">survivors</a>
    <a href="index.html" target="_self" title="information for friends and family">friends &amp; family</a>

    <a href="index.html" target="_self" title="join our forum and post a topic">forum</a>
    <a href="index.html" target="_self" title="information of how to volunteer and support us">volunteer</a>
    <a href="index.html" target="_self" title="how to contact and find us">contact</a>
</div>
<div id="content">
    <div id="sidebar">
        <h3><img src="images/square.jpg" /> PAGE TOPIC LINKS</h3>

        <a href="index.html" target="_self" class="slinks">&gt;&gt; about us</a>
        <a href="index.html" target="_self" class="slinks">&gt;&gt; our services</a>
        <a href="index.html" target="_self" class="slinks">&gt;&gt; our support groups</a>
        <a href="index.html" target="_self" class="slinks">&gt;&gt; volunteer for us</a>
        <a href="index.html" target="_self" class="slinks">&gt;&gt; how to find us</a>

        <p><img src="images/phone-bar.jpg" /></p>
        <h3><img src="images/square.jpg" /> MEMBERSHIP</h3>
        <p>To become a member and supporter of our services<br />
          [click here]</p>
        <h3><img src="images/square.jpg" /> ANNUAL REPORT</h3>
        <p>

        <img src="images/pdf-img.jpg" id="pdf-img" />
        <br />To download a copy of <br />
          our annual report in PDF <br />format [click here] </p>
    </div>
    <div id="mcontent">
        <h1>WELCOME TO OUR WEBSITE</h1>
        <p>SAFELINE is a voluntary association based in the UK which has been established by people
        who were themselves sexually abused as children. </p>

        <p><strong>SAFELINE CAN HELP YOU to FEEL SAFE</strong></p>
        <p>Childhood Sexual Abuse is not something new it has gone on for generation upon
        generation and has been pushed "under the carpet" for years. </p>
        <p>Many survivors have suffered since they were children,
        wondering who can they tell? and will they be believed?
        </p>
        <p>You may have tried to tell people when you were younger
        and no one listened. You may sometimes feel dirty and
        guilty and also want to harm yourself. </p>
        <p>You can sometimes feel very small and that the world is
        a big hostile place with nowhere for you to be safe. </p>
        <p>You may lack confidence and have low self esteem. </p>


        <div id="sections">
            <div id="forums">
                <h2><img src="images/square.jpg" /> FORUMS</h2>
                <p>Share your views and gain support from other survivors of sexual abuse
                by contributing to one of our many discussion forums [more]</p>
            </div>
            <div id="services">

                <h2><img src="images/square.jpg" /> OUR SERVICES</h2>
                <p>We offer a number of support groups and services in your local area, discover
                how Safeline and other groups can help you [more]</p>
            </div>
        </div>
  </div>
</div>
<div id="footer"><p>Registered Charity No. 1070854 | Terms of Use | Website &copy; 2005 Safeline</p></div>

</body>
</html>


Gaz
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old September 4th, 2005, 04:49 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

The page this XHTML displayed can be viewed at:

http://www.mediamole.net/safe14/index.html

Gaz
Reply With Quote
  #3 (permalink)  
Old September 4th, 2005, 02:36 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Quote:
quote:Originally posted by socoolbrewster
I realise that Absolute positioning remove object from the document flow - but these DIV are contained with a normal DIV with a position set as relative - so sure my DIV should stack normal?
The relative DIV acts as a reference point for the positioning. It doesn't put the absolute boxes back in the flow and it doesn't "surround" them (if you don't give all boxes equal height, which wouldn't work here).

To just position boxes that come after the absolute ones doesn't work either since that would depend on the height of text blocks. Your blue bar is all over the place when the window is resized and the text size is changed.

--
http://yupapa.com
Reply With Quote
  #4 (permalink)  
Old September 7th, 2005, 07:49 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the tips. I discovered my problem. It was because I had nto defined the height of my containing blocks for the positioned elements.

Have done that it works fine now.

Having always worked with tables - it's taken a while to get used to using CSS and DIVs for layout.



Gaz
Reply With Quote
  #5 (permalink)  
Old September 7th, 2005, 08:01 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

No, I'm afraid that isn't the problem. You try to position everything based on the amount of space (in pixels) the text happens to need on your screen. The blue bar is still all over the place when the window is resized and the text size is changed. Sorry. :(

Look at the layout examples linked to from http://css-discuss.incutio.com/?page=CssLayouts . You should be able to find something useful.

--
http://yupapa.com
Reply With Quote
Reply


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
Pure CSS Menu Showing Behind Form Fields in IE kwilliams CSS Cascading Style Sheets 10 November 19th, 2007 10:25 AM
Pure CSS Scrollable Table with Fixed Header rupen CSS Cascading Style Sheets 4 June 4th, 2007 08:30 PM
Pure ASP Upload ozzii Classic ASP Professional 1 January 8th, 2007 06:41 PM
Link Display Prob using CSS in IE6 / Firefox socoolbrewster CSS Cascading Style Sheets 3 September 7th, 2005 11:07 AM
DIV - Centre Positioning Prob socoolbrewster CSS Cascading Style Sheets 3 June 5th, 2005 09:23 AM



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


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