SitePoint Sponsor

User Tag List

Page 8 of 66 FirstFirst ... 4567891011121858 ... LastLast
Results 176 to 200 of 1630
  1. #176
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi mike,

    This is the latest one:
    http://www.pmob.co.uk/temp/3colfixe...luidheader1.htm

    Paul
    Paul,

    For some reason that link didn't work, but I assume this is what you were talking about:

    http://www.pmob.co.uk/temp/3colfixed...uidheader1.htm

    Thanks...Mike

  2. #177
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    In your latest layout with the fluid header and subheader...you set manegative marging at -131px, is this to account for the border you applied to the outer div?

    I am liking this layout, it seems very straightforward....i may have to accept the repeating gif or same column colors...very very nice....

    I am also thinking this cannot be adapted to content first, which doesn't matter too much to me, its kinda an icing on the cake thing....

    Again, very nice, straightforward layout.

    Thanks....Mike

  3. #178
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike
    Yeah that was confusing.

    Nevertheless, that is exactly what I am looking for. In your design can the left and right columns (the pink ones in your gif) have different colors? Also, will you have a similar sidebar intrusion for the footer? That is something that would work for what I am envisioning for my home page.

    Also, would it be possible to modify your layout to have a fluid center column?

    I know your tool won't do it now, but if I used the tool to get the base design, could I get it converted to a fluid design?

    Thanks...Mike
    Hi Mike,

    I'll take the questions in no particular order!

    I discussed the fluid width center column earlier in this thread, probably only a couple of posts ago. As Paul has already observed too, a fluid center column width means a fluid width (usually 100% page width with fixed left and right column widths). this means a fluid height is needed for the header.

    This, in turn, means it cannot be content first (source-ordered). Having pondered on this for some while, I have come to the conclusion that this would be too hard to convert the layout I have to. Moreover, the fluid design is more flexible from the point of view of number of columns, and which one is fluid width. All-in-all, not ideal for a tool like mine.

    In the end, you can't please all the folk all the time.

    Now, to the design as it is now. Attached is an actual screenshot (50% size) of the tool in action. As you can see, intrusion all over the place!

    That feature is now done and dusted. I will upload the revised tool later tonight (in a few hours where I live ).

    So, yes, it can do footers too. And different heights on each side.

    What it cannot do, is have different colors for the left and right sidebars (columns).

    To do this, you would need an image. Not a very big image, and you would need to tweak it a bit because of a bug in Opera, but the tweaked version would work OK in the other browsers.

    What's next?

    1. Optional 4 Floating boxes in the side columns (top left, bottom left, top right and bottom right) which I envision folk will use for search boxes, dates, file last modified, etc. Coupling these with the header and footer intrusion, you can make a quite neat design.
    2. Option to separate the header from the body (have background in between).
    3. Multiple borders (e.g. black outer, next white, then a color, then content inside)
    4. Drop shadow effect to the content area

    And that's it. I expect to have this done within a week (ish).

    I move on to making template designs with it and I will put an area on the form to make these from there. I have a few I want to do already, but then it will be open house for requests.





    Trevor
    Attached Images Attached Images

  4. #179
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mike
    In your latest layout with the fluid header and subheader...you set a negative marging at -131px, is this to account for the border you applied to the outer div?
    Hi Mike,

    Sorry the link didn't work must have copied it wrong. Yes the negative margins for the headers take into account the borders.

    As the headers are fluid height they have to come in the html in the correct order because they have an unknown height.

    If you want content first you will have to use the absolutely positioned headers version and uses two bg gifs for the columns instead of using negative margins. But of course this will mean that the headers will not be able to be fluid and expand with text.

    The only way to get content first is by placing any elements that should go above it using position:absolute. Of course this means that they effectively take up no space so you have to make space for then and also ensure that they remain a fixed height. That's the only way it works.

    The benefits of a fixed design like Trevors is that you acn do this witout worrying because the design is fixed width and content will not move. It also avoids the float drop that you get in fluid designs and is sometimes unavoidable because that's what floats do.

    It all depends which type of layout works best for your design. My layout is best for lots of text because it flows very nicely but if you add large images you may encounter float dropping in some situations.

    Hope that helps.

    Paul

  5. #180
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    It all depends which type of layout works best for your design. My layout is best for lots of text because it flows very nicely but if you add large images you may encounter float dropping in some situations.

    Hope that helps.

    Paul
    Paul,

    Actually you make a pretty good point. The pages that I will be using this layout for, will for the most part have on average a 400px wide image in the content area. In some instances it will be text, but maybe I should actually throw some of the larger images in to see if the float drop is a problem.

    I was already kicking around the idea of using a non fluid home page since there will be quite a few images on the home page.

    I have already started editing your latest layout to fit my stuff in. I can deal with not having the content first, and i may try out both right and left columns with the same color. You layout is just too robust to pass up for some silly things. Of course, now that you brought up the float drop issue I may have to rethink my fluid layout, although i could probably add a minimum width the alleviate any float drop.

    Maybe a fluid layout with a minimum width of 750 or 800 px. I know I found a minimum width hack for IE at one time.

    Thanks for the thoughts....Mike

  6. #181
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Hi Mike,


    In the end, you can't please all the folk all the time.

    Now, to the design as it is now. Attached is an actual screenshot (50% size) of the tool in action. As you can see, intrusion all over the place!

    That feature is now done and dusted. I will upload the revised tool later tonight (in a few hours where I live ).

    So, yes, it can do footers too. And different heights on each side.

    What it cannot do, is have different colors for the left and right sidebars (columns).

    Trevor
    I don't think the screenshot made it up yet. I am beginning to rethink my fluid layout, and I am looking forward to seeing the sidebar intrusions for both the headers and footers. I am also beginning to like the same color for both right and left columns.

    I will definitely check everything out when you get it posted.

    Again, amazing job.........Mike

  7. #182
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    The float drop is a problem mainly in ie where a large element will try and position itself under a float even though there is no where for it to go and ends up just dropping down the page. Whether its a real bug or not is hard to say but mozilla doesn't drop the element when theres no where else for it to go.

    Sometimes you can get around it by putting the element in a float of its own and this stops it dropping but doesn't work on all occasions. I need to find time to test this out a bit more as it has annoyed me for a while, not just with my layout but with floats in general.

    In some cases a min-width js solution for ie is justified as it doesn't really matter if some browsers don't understand it as they just get the normal layout.

    I still prefer full screen layouts but fixed width layouts are easier to manage.It's probably a case of what works best for you

    Paul

  8. #183
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    4 column layout question

    Quote Originally Posted by Paul O'B
    Hi Mike,

    I still prefer full screen layouts but fixed width layouts are easier to manage.It's probably a case of what works best for you

    Paul
    I think I am going to make your last layout work for me, and for now try to get the min-width fix in.

    BTW, how would you like me to acknowledge you on my site. Do you want me to link back somewhere, or anything like that.

    Oh, also, will the way you implemented the subheader on this layout work with your 4 column layout, only the header would be over the last 3 columns.

    Mike

  9. #184
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Oh, also, will the way you implemented the subheader on this layout work with your 4 column layout, only the header would be over the last 3 columns.
    Well the 4 column layout is just the same as the 3 column layout except that the bg gif is coloured to make two columns and then the left column is split into 2 floats.

    You should be able to use the same techniques of dragging the negative margin to the left as well as the right. You will just have to position it accordingly.

    Theres no need to link to me just a mention in the code will do

    If you can't work the 4 column layout out then just shout and I'll take a look.

    Paul

  10. #185
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike

    Just in case you were looking for it, don't. I haven't uploaded the 2.55a version because I found a couple of bugs (one with v2.55 affecting Mozilla and Opera, now fixed) and a few with the intrusion feature. I've marked them for tidying up in the morning.

    I found a better way of doing the bottom margin on the design, so that's done too.

    I'll probably add a feature or two before uploading later tomorrow.




    Trevor

  11. #186
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i think i found the cause of the problem

    Quote Originally Posted by Paul O'B

    If you can't work the 4 column layout out then just shout and I'll take a look.

    Paul
    Thanks....I will look into that a little later tonight...In the meantime I have been populating your layout and ran into a goofy problem:

    http://www.evolutionmsport.com/monday/FINAL/mike2.php

    As you narrow the window, the right column text falls off the background and into the center content area. Is this the nature of the beast or did i make a typo somewhere. After looking at it, I think my header is screwing something up.

    I have also been playing with the layout by doug and it looks like your subheader methodology will work well, I just cant seem to get the 100% height figured out.

    SEE MY LAST POST I FIGURED OUT MY DOUG LAYOUT

    Thanks....Mike
    Last edited by EvM-Mike; Apr 26, 2004 at 18:01.

  12. #187
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Hi Mike

    I'll probably add a feature or two before uploading later tomorrow.

    Trevor
    I will check back tomorrow...I am stuck spinning my wheels on other things, buyt at least some of it is sinking in.

    Thanks....Mike

  13. #188
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    browser update

    Quote Originally Posted by EvM-Mike

    I have also been playing with the layout by doug and it looks like your subheader methodology will work well, I just cant seem to get the 100% height figured out.

    Thanks....Mike
    Paul,

    Here is the doug layout with your sub-header methodology:

    http://www.evolutionmsport.com/monday/FINAL/doug100.php

    I got the 100% height working by messing with the outer and wrapper divs. The only problem is with IE, in IE 5.01 there seems to be extra space at the bottom of the columns before the footer. Mozilla and netscape seem to be ok.

    All in all it looks pretty good.


    Thanks....Mike
    Last edited by EvM-Mike; Apr 26, 2004 at 20:23.

  14. #189
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    I'm surprised that both those pages you have above are even rendering at all lol

    You need to do a massive tidy up as you have tags all over the place. You have style sheets in your body as well as another doctype and extra body and html tags and missing closing tags.

    Until that's tidied up you won't really know what's happening as any number of things could be wrong.

    I think you have the subheader too wide anyway as you are getting a scrollbar in mozilla.

    Your previous designs seemed to be better structured .

    Paul

  15. #190
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    I'm surprised that both those pages you have above are even rendering at all lol

    Your previous designs seemed to be better structured .

    Paul
    All the content areas are actually php includes, so the version I am looking at seems to be nice and clean. I think it gets messy when you start including things. Plus the things I am including are just to fill space so they may be rough.

    I think the inclusion of the menubar is cluttering things up as well. I still have to separate the css and javascript out of it.

    Here is a clean version of it:

    http://www.evolutionmsport.com/monday/FINAL/clean.html

    In IE 5.5 SP1 and IE 5.0 it has extra padding at the bottom between the footer. IE 5.5 SP2 ang 6.0 seems fine.

    Let me know if this looks any better. I think its pretty clean.

    Thanks...Mike

  16. #191
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    I can see what you're doing now The problem is that it won't work I'm afraid

    You can't add another wrapper to the 100% outer as this will confuse all browsers. The wrapper named outer will be 100% high plus the height of the header and footers which will make the page too long.

    If you refer to my examples you will see that the whole page is contained within outer except for the footer. #outer has a negative margin to allow the footer to slip into place and a clearfooter div is employed to stop text going behind the footer.

    This is the only way this technique works for 100% height and will not work in the format you have I'm afraid. (unless you go for something like a 90% high page and a 10% footer etc).

    If you make those changes then the layout will work ok

    If you look at my examples you will see that they work in ie5 with no problems.

    Paul

    BTW (you also need to reduce the subheader negative margin by 1px to get rid of the scrollbar)

  17. #192
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Mike,

    I can see what you're doing now The problem is that it won't work I'm afraid

    If you make those changes then the layout will work ok

    If you look at my examples you will see that they work in ie5 with no problems.

    BTW (you also need to reduce the subheader negative margin by 1px to get rid of the scrollbar)
    OK I have been playing around a little. Will this work?

    http://www.evolutionmsport.com/monday/FINAL/clean.html

    I just have to push the text in the center column a little. I think if I use the formatting of your centrecontent, it should clean it up.

    Thanks....Mike
    Last edited by EvM-Mike; Apr 27, 2004 at 07:10.

  18. #193
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No it won't work:

    Use this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>EvM - Doug Page</title>
    <link href="common/EVM-text.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="common/screen.css" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body { 
     margin: 0; 
     padding: 0; 
     color: #000; 
     background-color: #fff; 
     text-align: justify; 
     font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; 
     font-size: 86%; 
     min-width: 700px;
     width:expression(document.body.clientWidth < 700 ? "700px" : "100%" ); 
     }
    
    #outer {
     height:100%;
     min-height:100%;
     border-left: 150px solid #D2E7F9;  /* left column width */
     border-right: 150px solid #f9f8d2; /* right column width */
     background-color: #FFFFFF; /* center column colour */
     margin-bottom:-40px;
     }
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #left {
     width: 150px;			  /* left column width */
     margin-left: -150px;	   /* _negative_ left column width */
     float: left; 
     position: relative; 
     z-index: 10;
     margin-right: 1px;
     }
    * html #left {margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
    #right {
     width: 150px;			  /* right column width */
     margin-right: -150px;	  /* _negative_ right column width */
     float:right;
     position: relative; 
     z-index: 11;
     margin-left: 1px;
     }
    #footer {
     background-color: #9ccaf2;	/* header and footer colours */
     border-top: 2px solid #FFF;
     border-bottom: 2px solid #FFF;
     position: relative; 
     z-index: 13;
     height:36px;
     clear:both;
     }
    #inner { 
     margin: 0; 
     width: 100%; 
     }
    #center { 
     width:100%;
       float:left;
     position: relative; 
     z-index: 12;
     margin: 0 -8px 0 -2px; 
     }
     
    #clear { clear: both; }
    /* Mozilla code */
    #outer > #inner { border-bottom: 1px solid transparent; }
    #right p { padding-left: 10px; }
    #header{
     margin-left:-150px;
     margin-right:-150px;
     background:#9ccaf2;
     position:relative;
     border-top: 2px solid #FFF;
     border-bottom: 2px solid #FFF;
    }
    * html #header {height:1px}/* ie needs this*/
    #header2{
     margin-right:-150px;
     background:#f9f8d2;
     color:black;
     position:relative;
     border-left:2px solid #fff;
     border-bottom:2px solid #fff;
    }
    * html #header2 {height:1px}/* ie needs this*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles */
    * html #footer {/*only ie gets this style*/
     \height:40px;/* for ie5 */
     he\ight:36px;/* for ie6 */
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header"> 
    	<p>This is the header</p>
      </div>
      <div id="inner"> 
    	<div id="left"> 
    	  <p>This is the left menu</p>
    	</div>
    	<div id="header2"> 
    	  <p>This is the SubHeader</p>
    	</div>
    	<div id="right"> 
    	  <p>This is the right menu</p>
    	</div>
    	<div id="center"> 
    	  <p>This is the content area</p>
    	</div>
    	<div id="clearfooter"></div>
      </div>
    </div>
    <div id="footer"> 
      <p>This is the Footer menu</p>
    </div>
    </body>
    </html>


    Paul

  19. #194
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's your last piece of code amended to work
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>EvM - Doug Page</title>
    <link href="common/EVM-text.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="common/screen.css" type="text/css"></link>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body { 
     margin: 0; 
     padding: 0; 
     color: #000; 
     background-color: #fff; 
     text-align: justify; 
     font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; 
     font-size: 86%; 
     min-width: 700px;
     width:expression(document.body.clientWidth < 700 ? "700px" : "100%" ); 
     }
    #outer {
     height:100%;
     min-height:100%;
     width:auto;
     border-left: 150px solid #D2E7F9;  /* left column width */
     border-right: 150px solid #f9f8d2; /* right column width */
     background-color: #FFFFFF; /* center column colour */
     margin-bottom:-62px;
     }
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #left {
     width: 150px;			  /* left column width */
     margin-left: -150px;	   /* _negative_ left column width */
     float: left; 
     position: relative; 
     z-index: 10;
     margin-right: 1px;
     }
    * html #left {margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
    #right {
     width: 150px;			  /* right column width */
     margin-right: -150px;	  /* _negative_ right column width */
     float:right;
     position: relative; 
     z-index: 11;
     margin-left: 1px;
     }
    #inner { 
     margin: 0; 
     width: 100%; 
     }
    #center { 
     width:100%;
       float:left;
     position: relative; 
     z-index: 12;
     margin: 0 -8px 0 1px; 
     }
     
    #clear { clear: both; }
    /* Mozilla code */
    #outer > #inner { border-bottom: 1px solid transparent; }
    #right p { padding-left: 10px; }
    #header{
     margin-left:-150px;
     margin-right:-150px;
     background:#9ccaf2;
     position:relative;
     border-bottom:1px solid #000;
    }
    * html #header {height:1px}/* ie needs this*/
    #header2{
     margin-right:-150px;
     background:#f9f8d2;
     color:black;
     position:relative;
     border-left:2px solid #fff;
     border-bottom:2px solid #fff;
    }
    * html #header2 {height:1px}/* ie needs this*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    #footer {
     clear:both;
     height:60px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     background-color: #66adea;
     color: #000000;
     text-align:center;
     position:relative;
    }
    * html #footer {/*only ie gets this style*/
     \height:62px;/* for ie5 */
     he\ight:60px;/* for ie6 */
    }
    #clearfooter{clear:both;height:60px;}/*needed to make room for footer*/
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles */
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="header">
    	<p>Fluid Header</p>
      </div>
      <div id="left">
    	<p> Left COlumn</P>
      </div>
      <div id="header2">
    	<p>Sub Header<br>
    	  <br>
    	</p>
      </div>
      <div id="right">
    	<p>Right content</p>
      </div>
      <div id="center"> center content</div>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer">Footer - Footer </div>
    </body>
    </html>
    Hope that helps.

    Paul

  20. #195
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    No it won't work:



    Paul
    Damn.....I'll learn this stuff yet...Thanks for the code. I will roll my stuff into it tonight and see if it still looks good.....

    Thanks....Mike

  21. #196
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Here's your last piece of code amended to work

    Hope that helps.

    Paul
    Paul,

    Thanks for this code. I added in all my stuff and cleaned up the menu files and the like. Now I have one slight problem in IE6. When you make the window narrow, the text is the right column moves while the colored column stays.

    http://www.evolutionmsport.com/monda...L/Mike-427.php

    I think this only happens in IE6, can this be fixed. I was wondering if the header image was keeping the outer box from moving.

    Thanks.....Mike

  22. #197
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    Your right ist the header image that's stopping the page in ie6.

    You can get around it by placing theiamge absolutely and enclosing it in a div of the same height.
    Code:
      <div id="header" ><div style="height:72px"><img style="position:absolute;left:0;top;0" src="http://www.evolutionmsport.com/monda...eader-2004.gif" width="760" height="72" border="0">
    </div><!-- EvM Menu bar  -->
    <div class="menuBar"
    Also take out that inline style on the menubar div that says width:100% as it is fiving you a horizontal scrollbar because menubar has padding etc. It's not needed anyway as far as I can see.

    Paul

  23. #198
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tested it

    Quote Originally Posted by Paul O'B

    You can get around it by placing theiamge absolutely and enclosing it in a div of the same height.


    Paul
    Paul,

    Thanks for the help. So is the div that contains the image just relatively placed? then the absolute positioning of the image is taken from the container div?

    Or is the absolute position from the page itself. The reason I ask is because the center box of my page will contain images that are around 400px wide and I am wondering if they will cause similar problems.

    I added this to my code it works perfect. Would it be safe to assume I should do this for most images, or at least the larger ones?

    Also, the drop down menus are going under the subheader and are semi-transparent. At first I thought this was just a z-index thing, but I looked at my css and the menu divs have an index of 100 and 101. I stripped all the others. Is it a z-index thing??

    Thanks...Mike

  24. #199
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,
    I have been watching this thread because I
    am trying to figure out how to design using CSS.
    I hate using all the tables tags and am hoping
    this will solve the problem.
    I just went to your site and it looks great.
    I did find that when I hover over the menu bar
    across the top, the items drop down behind the
    subheader and rest of the page.
    I used IE 6.0 /sp1 (full description 6.0.2800.1106 XPSP2.030422-1633)
    Thought you might want to know what I see.
    Seems like the rest works great! Good job.
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  25. #200
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,

    The header image is placed absolutely in relation the the header div because the header div is position:relative. However it makes no difference as the header div is the first thing on the page anyway

    The 72px high surrounding div is just so that the next element starts below the image. We could have given the following element a margin top to clear the image but mozilla has a margin:top bug and we would have had to work around that anyway.

    You'll just have to see how your images hold up in the centre as if you absolutely place them then you will need to make room for the content to flow around them which will be difficult if they are supposed to be floating etc.

    I haven't looked at the drop down images yet, but i will shortly

    I notice you have typed the recent additions incorrectly so you need to re-type them the same as my post above (and ALSO take out that 100% as mentioned above ).

    Paul


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
  •