SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy positioning totally messed up.. i ruined something

    .. but i cant figure out what.
    Sure, my positioning is not the best, if anyone can tell me how to do it better without having to totally redo the site, now that would be great

    Anyway, here the problem:

    as it is supposed to be

    as it is NOT supposed to be

    Explaination:
    I have a perfectly working layout, but I need to add things. First I added some breadcrumbs/pathway which will be filled in by my CMS later.
    Then I decided I'd redo the menu to a simple box that holds ordinary text and not a list - because my CMS (mambo) will add text and not lists I think)

    The breadcrumbs worked ok.. although i noticed that my content was pushed down due to the relative positioning (yes/no? hehe) I cant quite remember why I didnt use absolute - maybe because of the max width and the margin to the right window border? Yes, I think that was it.

    Anyway, when I started playing with the menu things went really really ugly.
    First it was OK, I only made a box called #mainmenu that had the same attributes as the old #mainmenu definition. Then I went about removing the list and replacing it with ordinary text.

    Everything went *ugh*

    As everyone can see in that example I have two simple lines of text in a <p> tag (it doesnt work without the <p> tag either) and below the old list. Just because of the two single test lines the whole area to the right is nudged down.

    I tried positioning absolute, but that only made things worse.

    so..



    any pointers or fixes?

    Soo many thanks in advance...
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  2. #2
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Why cant you put the Menu into:
    <div id="menu-background"></div>
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You will need to absolutely place the left menu otherwise the flow will affect the res of the page.

    Also never use relative positioning to move objects into place because it just won't work and you will be chasing gaps around the page all day long.

    When you move an element using relative positioning you are in fact moving it in relation to itself but the space it previously occupied is preserved. That means all the other elements on the page still think its where it was and will avoid the gap it left behind.

    I'm not quite sure where you are going with this layout but I would just put the crumbs content and footer in the flow (statically positioned) and absolutely place all those other little bits.

    Something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Pax Pacis</title>
    <style>
    /** Thanks to some very friendly souls at Sitepoint! */
    html, body {margin:0;padding:0;}
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #CDCDCD;
    }
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #373633;
    margin: 5px;
    }
    body {
    background: #A5A4A0 url(http://www.dreamlab.cc/imagevault/images/left_bar.jpg) repeat-y left top;
    }
    #menu-background {
    height: 744px;
    left: 0px;
    top: 0px;
    background: url(http://www.dreamlab.cc/imagevault/images/paxpacisbg.gif);
    position: absolute;
    width: 384px;
    }
    #header-background {
    height: 42px;
    left: 0px;
    top: 10px;
    background: url(http://www.dreamlab.cc/imagevault/images/top_bar.jpg);
    position: absolute;
    width: 100%;
    }
    #header-divider {
    height: 1px;
    left: 0px;
    top: 159px;
    background: url(http://www.dreamlab.cc/imagevault/images/line.jpg);
    position: absolute;
    width: 100%;
    overflow:hidden; /** because otherwise IE wont render the 1px */
    }
    /* rounded up for replacement (mamob left column content) */
    #mainmenu {
    position:absolute;
    top:240px;
    width:140px;
    background-color:transparent;
    border:none;
    z-index:100;
    color: #CDCDCD;
    border: none;
    overflow: auto;
    text-align:left;
    }
    ul, li {
    padding-left:10px;
    margin:0;
    list-style-type:none;
    }
    /* round up end */
    #showcase {
     top: 62px;
     left: 355px;
     position: absolute;
     width: 300px;
     height: 80px; 
     background-color: #A5A4A0;
     overflow: auto;
     border-left: dashed #969289 1px;
     z-index:100; /* needed to hide quotes */
    }
    #quotes {
     top:100px;
     right: 20px;
     position: absolute;
     width: 200px;
     height: 80px; 
     text-align: right;
     z-index:1; /* needed to hide quotes */
    }
    #crumbs {
     margin-top:175px;
     margin-left: 250px;
     margin-right: 20px;
     width: expression(document.body.clientWidth > 860 ? "500px": "auto");
     max-width: 500px;
     height: 25px; 
     text-align: left;
    	position:relative;
     z-index:100;
    }
    #content {
     position: relative; 
     margin-top: 20px;
     margin-right: 20px;
     margin-left:205px;  
     margin-bottom:20px; 
     width: expression(document.body.clientWidth > 860 ? "600px": "auto");
     max-width: 600px;
     z-index: 1;
     background-color: #A5A4A0;
     border-left: dashed #969289 1px;
     border-right: dashed #969289 1px;
    }
    #footer {
     position: relative;
     padding: 10px;
     margin-top: -50px;
     margin-left: 210px; 
     margin-right: 20px;
     width: expression(document.body.clientWidth > 860 ? "600px": "auto");
     max-width: 600px;
     text-align: center;
     z-index:100;
    }
    #clearfooter{clear:both;height:70px;} /*needed to make room for footer*/
     
    
    </style>
    </head>
    <body>
    <!-- all the background images -->
    <div id="crumbs">test test test test test test test test test test test testtest 
      test testtest test testtest test test test testtest testtest testtest test</div>
    <!-- mambo main content -->
    <div id="content"> 
      <p>This here will hold all the main content from the menu and of course the 
    	webboard.<br>
    	Only problem remains: IE doesnt accept the max width :(<br>
    	<br>
    	Border remains around the Mambo Content<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	Stretching test.. seems to work </p>
    </div>
    <!-- footer right here -->
    <div id="clearfooter"></div>
    <div id="footer">designed by and the likes + of course, the referrer to mambo 
    </div>
    <!-- Here is the problem... -->
    <div id="mainmenu"> 
      <p>test<br>
    	test</p>
      <ul>
    	<strong>Menu</strong></li> 
    	<li>Test</li>
    	<li>Simple Text</li>
    	<li>Selection</li>
    	<li>no more</li>
    	<li>graphics</li>
      </ul>
    </div>
    <!-- user1 and user2 positioned content: spotlight/quote -->
    <div id="showcase"> <img style="float: left; margin: 5px;" src="http://www.dreamlab.cc/imagevault/images/line.jpg" width="75" height="25" border=0 alt=""> 
      <p>Artist-, Game-, Article Spotlight with (if desired) very small thumbnail. 
    	As shown in the placeholder.<br>
    	Will be included through mambo if possible (*prays*) Styles will also be included 
    	in the .css This border is most likely just for kicks. Border or not.. border 
    	or not.. if I can find one that suits the style in general (maybe in a good 
    	color) then the border will stay.<br>
    	Should the content itself not be included through mambo, then that means the 
    	spotlight will only be visible on the main page. No big deal though.<br>
    	Content for this will be <i>hand picked</i> to ensure quality.</p>
    </div>
    <div id="quotes"> 
      <p><i>random quote...</i></p>
    </div>
    <div id="header-background"></div>
    <div id="header-divider"></div>
    <div id="menu-background"></div>
    </body>
    </html>

    I know thats probably not right but it should be in some order that you can adjust it. static elements are first in the html and the absolute elements can come afterwards. I've found that if you put absolutely placed elements first in the html then it can upset the positioning.

    Paul

  4. #4
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This cleared up alot of my positining questions.. for some reasons it took me that long to understand relative and absolute.

    Thanks Paul

    I worked on it and it seems to be looking good now.
    Plus, I dont think I'm gonna make the same mistake again
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.


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
  •