SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: argh@css layout

  1. #1
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    argh@css layout

    having so much fun...

    http://hwy403.emmense.com

    I am going all CSS here. Please don't comment on the what is there of the site as this is not a review. Though I should say I need to reduce those imafge sizes now that I'm looking from an 800x600 screen! )

    I am having a very difficult time trying to get a text div positioned to the upper right white-space of the screen. Also totally lost as to how I can get rid of all the white space on the bottom.

    My problem, I think, is that I am using relative DIV's. It would be much better if I could use absolute within the container DIV, but it seems to begin it's positioning from the top left of the screen, not the container div. For every new relatively placed div/image, I have to do some fancy coordinating to get it in place....which is why I can't get the text div in place.

    I hope I'm making sense. Look at the source code from the linked site.
    Aaron Brazell
    Technosailor



  2. #2
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rejigged HTML layout (from the <body> tag down):
    Code:
    <body>
    <div class="body">
    
    	<div class="header">
    		<a href="http://www.hwy403.com"><img class="logo" src="images/transparentgif.gif"></a>
    	</div>
    	
    	<div class="navigation">
    		<table cellpadding="0" cellspacing="0" class="navigation">
    			<tr>
    				<td class="navspacer">&nbsp;</td>
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">The Highway</td>
    
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">Photos</td>
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">Events</td>
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">Scratchpad</td>
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">Values</td>
    				<td class="navitem" 
    					onmouseover="this.className='navover';" 
    					onmouseout="this.className='navitem';" 
    					onclick="window.location='#';">Mission403</td>
    				<td class="navspacer">&nbsp;</td>
    
    	</tr>
    		</table>
    	</div>
    	
    	<div class="container">
    		<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et 
    
    malesuada fames ac turpis egestas. Cras urna lectus, tempus non, fermentum at, semper sed, ante. In non odio quis nisl interdum tristique. Aenean eget 
    
    libero. Maecenas ut turpis. Sed tempus. Morbi posuere, dui ut pretium mollis, massa urna auctor purus, ut malesuada diam dui eget tortor. Nunc purus. Fusce 
    
    quis turpis. Donec rutrum commodo felis. Nunc turpis. Pellentesque faucibus. Quisque facilisis auctor arcu. Aenean in nulla. Donec vel urna. Nulla facilisi. 
    
    Aliquam tempus varius libero. Curabitur sit amet nunc id magna dictum nonummy.
    </div>
    		<div class="img1"><img src="images/student1.jpg"></div>
    		<div class="img2"><img src="images/student2.jpg"></div>
    		<div class="img3"><img src="images/student3.jpg"></div>
    		<div class="img4"><img src="images/student5.jpg"></div>
    		<div class="img5"><img src="images/student6.jpg"></div>
    		<div class="img6"><img src="images/student4.jpg"></div>
    		
    	</div>
    </div>
    </body>
    </html>
    The only CSS I changed:
    Code:
    .text 
    	{
    	float:right;
    	width:50%;
    	}
    Hope that helps!
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool. Just have to readjust the width I think, but that should be easy enough. Thanks.

    Have any ideas on the whitespace on the bottom?
    Aaron Brazell
    Technosailor



  4. #4
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably because you're using "position:relative" and a "top:-400px" (for example). When you position an element relatively, the object still takes up space in the document, all you have done is move it up. That's not very clear, but to put it simply: You may need to rethink the layout completely, or position the pictures absolutely.

    Not the answer you were hoping for, probably!
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that makes sense....but how do I position absolutely in relation to the body div? IOW, it needs to be centered. If I position absolutely I can't effectively do that....or can I?
    Aaron Brazell
    Technosailor



  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sketch
    that makes sense....but how do I position absolutely in relation to the body div? IOW, it needs to be centered. If I position absolutely I can't effectively do that....or can I?
    Your <div class="body"> would also have to be absolutely positioned. If you want it abs. positioned but still centered on page, you can use the negative margin hack to do so. However, this tends to not play nice on some Mac browsers, so be careful!

  7. #7
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there's no other way?
    Aaron Brazell
    Technosailor



  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Actually, I was wrong!
    So you can use an element with position: relative as a container for absolutely positioned elements.
    From http://www.oreillynet.com/pub/a/java..._pitfalls.html.

    This page is also a pretty good resource to learn about IE5/Mac rendering bugs.

    Add this to your CSS:
    Code:
    .body {
    position: relative;
    top: 0px;
    left: 0px;
    }
    That way, you don't remove it from the "flow" of your page, but it can be used as a container for your absolutely positioned elements.

    Also, not to nit-pick, but I'd think that having a rule for the <body> tag in addition to a class called "body" would get confusing down the road when your stylesheet gets larger.

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See this is what is driving me crazy. I read that link. Just as I thought, it is telling me that I CAN use a relatively positioned DIV as the basepoint for an absolute. So why is it when I absolutely position the image divs....inside the relatively positioned "container" div....inside the relatively positioned "body" div it actually positions from the upper left coner of the window? :\ That makes no sense to me.
    Aaron Brazell
    Technosailor



  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Sketch,

    This seems to get rid of the white space at the bottom, and works in Opera 7, IE6, and Firebird on Windows 2000. You'll have to test in other platforms/browsers though.
    Code:
    .container
    {
    text-align:left;
    position: absolute;
    top: 120px;
    left: 0px;
    width: 764px;
    height: 550px;
    overflow: hidden;
    background-color: white;
    border: 1px solid #000;
    }
    .body
    {
    width:764px;
    border:1px solid #000;
    background-color: #fff;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    top: 0px;
    left: 0px;
    }
    That's all I changed. See if that works out for ya.

    Edit:

    Sketch, I also think a lot of your problems stem from your partial DOCTYPE declaration, which throws browsers into quirks mode. Grab one of the HTML 4.01 DOCTYPEs from A List Apart if you want to use your CSS according to the spec, as results will vary wildly when browsers use their quirks instead of the standards.

  11. #11
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hadn't even set the DOCTYPE yet. That's just the default. Thanks for that.

    I'm going to hold off on a lot more changes unitl I can get home and use a proper editor and really concentrate. Thanks for the tip, Vinnie. It's just about right but I'm missing the 25px gap on the left and top. Like I said, I'll just have to work through it.
    Aaron Brazell
    Technosailor



  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sketch
    I hadn't even set the DOCTYPE yet. That's just the default. Thanks for that.
    No problem! I know this causes a lot of frustration when people read the CSS spec but don't have any DOCTYPE, or use the editor's default.

  13. #13
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sketch
    See this is what is driving me crazy. I read that link. Just as I thought, it is telling me that I CAN use a relatively positioned DIV as the basepoint for an absolute. So why is it when I absolutely position the image divs....inside the relatively positioned "container" div....inside the relatively positioned "body" div it actually positions from the upper left coner of the window? :\ That makes no sense to me.
    only skimming through this thread, a question: are your problems mainly in IE ? because IE is a right little [censored] when it comes to absolutely positioned elements inside containers...i had to battle with the same issue for quite a while, and found no workable solution for IE's faulty CSS "interpretation"...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  14. #14
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good question. I will answer that in due time when I have a chance to look at it closer. I was using both Firebird and IE last night while I was working on the layout and I noticed the funkiness but I'm not sure if it was in one or both browsers.

    Aaron
    Aaron Brazell
    Technosailor



  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by sketch
    See this is what is driving me crazy. I read that link. Just as I thought, it is telling me that I CAN use a relatively positioned DIV as the basepoint for an absolute. So why is it when I absolutely position the image divs....inside the relatively positioned "container" div....inside the relatively positioned "body" div it actually positions from the upper left coner of the window? :\ That makes no sense to me.
    You must be doing something wrong as that is the valid way to position. In the case of position:absolute, the containing block is the nearest ancestor element which has a value for the property position other than static. If there isn't an ancestor then the containing block is the root element of the document (effectively the html element (outside any marigns set on the body)).

    Here's a short example which may show you where you're going wrong as I haven't looked at your code yet.

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .outer {
     background-color: #FFFFCC;
     position: relative;
     left: 100px;
     top: 100px;
     height: 200px;
     width: 200px;
    }
    .inner {
     background-color: #99CCFF;
     position: absolute;
     height: 50px;
     width: 50px;
     right: 0px;
     bottom: 0px;
    }
    -->
    </style>
    </head>
    <body>
    <div class="outer">
    <p>Outer</p>
    <div class="inner">Inner</div>
    </div>
    </body>
    </html>
    You will see that the inner div is placed absolutely with reference to the top left corner of the outer div and not in relation to the body.

    This works in IE6, Mozilla 1.2+ Opera 6.03+ and Netscape 6.2+ and is perfectly valid and is in fact the way it should be accomplished. (I tried ie6 without a doctype and it still worked ok.)

    Hope this is of some use (if not can you post the exact code you are using to achieve this as I couldn't see it in your link.)

    Paul

  16. #16
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright it looks like the absolute positioning is working now. Maybe I got something skewed before.

    I'll be doing more work later.

    Thanks!
    Aaron Brazell
    Technosailor




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •