SitePoint Sponsor

User Tag List

Page 6 of 66 FirstFirst ... 23456789101656 ... LastLast
Results 126 to 150 of 1630
  1. #126
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I am finiding this example wery useful in my current project.

    Thank you very much

  2. #127
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Just going back to post #118, I've tinkered with the 2 col centred layout (100% height) so that the content comes directly after the header in the HTML.

    Here's the code - just wondered if I have done this correctly? (BTW, I've only tested in IE6 and Moz1.5):

    Code:
    html, body {height:100%}
    
    body {
    		margin: 0;
    		padding: 0;
    		font: x-small arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    }
    		
    html>body #container {height:auto;}
    
    #container {
    		margin: 0 auto;
    		width: 730px; 
    		height:99.8%;
    		min-height:100%;
    		text-align: left;
    		background: #CEE0E1 url(images/toddbg.gif) repeat-y right top;
    		border-left: 1px solid #a1a1a1;
    		border-right: 1px solid #a1a1a1;
            position:relative;
    		}
    html>#container {height:auto}		
    #mainheader {
    		position:absolute;
    		left:0;top:0;
    		height: 160px;
    		width:100%;
    		background-color: #fff;
    		border-bottom: 1px solid #e6e6e6;
    		z-index:1;
    }
    #header {
    		height: 125px;
    		width:100%;
    		background-color: #D1DCE9;
    		margin: 0px 0px 5px 0px;
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6;
    		position:relative;
    		z-index:2;
    }
    #mainnav {
    		width:100%;
    		height: 20px;
    		background-color: #f5f5f5;
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6;
    		position:absolute;
    		top: 132px;
    		z-index:2;
    }
    		
    #sidebar {
        float: right;
        margin-top: 30px;
    		width: 150px;
    		padding:5px 0;
    		}
    
    #content {
    		float: left;
    		margin-top: 30px;
    		width: 560px;
    		padding:5px 0 ;
    		}
    #content p, #sidebar p, #mainnav p, #header p,#footer p  {margin:0 5px 5px 5px}		
    #footer	{
    		position:absolute;
    		bottom:0;
    		width:100%;
    		height: 24px;
    		background-color: #f5f5f5;
    		border-top: 1px solid #e9e9e9;
    		}
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	background:#fff;
    	position:relative;
    	border-bottom: 1px solid #e6e6e6;
    }
    
    #clearfooter {height:27px;width:100%;clear:both}
    .blank , .blank2 {
    	position:absolute;
    	left:547px;
    	width:7px;
    	height:0px;
    	overflow:hidden;
    	border-top:	1px solid #fff;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #fff;
    }
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="2columngray.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container"> 
      <div id="mainheader"> 
        <div class="blank2"></div>
        <!-- for decoration only -->
      </div>
      <div id="header"> 
        <p>Header content goes here</p>
        <p><a href="2col_left.htm">Left </a>column Longest</p>
        <p><a href="2col_right.htm">Right</a> column Longest</p>
        <p><a href="2col_main.htm">No</a> column longest</p>
        <p><a href="http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back</a> to main 
          3 column demo</p>
      </div>
    
    	<div id="content"> 
        <p>Footer stays at the bottom of the window unless the content is longer then 
          it stays at the bottom of the document.</p>
        <p>Footer stays at the bottom of the window unless the content is longer then 
          it stays at the bottom of the document.</p>
      </div>
      <div id="sidebar"> 
        <p>Sidebar content goes here : Sidebar content goes here : Sidebar content 
          goes here : Sidebar content goes here : Sidebar content goes here : Sidebar 
          content goes here : Sidebar content goes here : Sidebar content goes here 
          : Sidebar content goes here : Sidebar content goes here : Sidebar content 
          goes here : Sidebar content goes here : </p>
      </div>
        <div id="mainnav"> 
        <p>Navigation</p>
      </div>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
      <div id="footer"> 
        <div class="divider1"></div>
        <div class="blank"></div>
        <!-- for decoration only -->
        <p>Footer Content</p>
      </div>
    </div>
    </body>
    </html>
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  3. #128
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, almost works in the IEs.

    Your info was actually invaluable. I almost have this fixed... two issues remain, one serious, the other trivial.

    Serious: It's fine when the window is large enough to show all photos in the center fully... but shrinking it results in overlap between the center content and the right column.

    On Safari, Netscape it's working fine... shrinking the window starts to hide the center content with a 10px space between the clipping edge and the divider.

    Comparison: Regular vs Photo

    Trivial: (I hope)... on Mac IE, content that's long enough results in dividers that aren't.

    Comparison: Regular vs Long

    Please tell me this doesn't happen in PC IE 5 as well.

    There's also a Small version but I'm pretty confident that's working ok.

    CSS is at http://www.devilbearsolutions.com/te...est/styles.css

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

    I've had a quick look and it seems to be working ok in ie5 and firefox except the navigation element isn't showing in the middle of the page.

    If you still want it in the page then move it to the end of the html but berfore the last closing div of the whole page.

    Code:
    	<p>Footer Content</p>
      </div>
       <div id="mainnav"> 
    	<p>Navigation</p>
      </div>
    </div>
    If you want to get the vcntent higher you could mess about with absolutely placing the header as well and that could also go last in the html. You jus need to make sure the absolute elements don't overflow but that shouldn't be difficult on a fixed width layout.

    Paul

  5. #130
    SitePoint Addict DevilBear's Avatar
    Join Date
    Oct 2001
    Location
    Hades
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... wrong thread, Paul?

  6. #131
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example of Paul's 3 column layout adapted for a specific user:

    3 column layout example.

    The site is still under construction - since I'm so pathetically slow at php. In any case you can see an adaptation of his layout. I place an image bg behind the right and left columns, as well as a different bg image behind the main content area (div id=outer). It was a very straightforward process to add the graphics, as well as resize the header/footer to suit the needs of my 'clients'.

    Thx for the help along the way Paul.
    Verwüstung rufen und des Krieges Hund' entfesseln!

    My Site
    My first php/MySQL project -->Thanks Sitepoint members

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

    First let me commend you on a fine job. I have been wrestling with a similar layout for the past two months. Many a time I have almost slipped back into tables, but I am just too stubborn. Now I will follow your design as the basis for my site, with a few tweaks.

    First, I am looking to create a 2 column layout with a header and footer, then in the second (right) column I want to nest in a 3 column layout. I also want everything to expand properly. Each area should also have an individual color definition. My first attempts can be seen here.

    http://www.evolutionmsport.com/template-home2.html

    http://www.evolutionmsport.com/phptest/thurs2.php

    That will be my home page, then I am planning to use your three column layout (w/content first) for the secondary pages, but what I wanted to do was under the header I wanted to put a sub header over the center and right columns.
    Something similar to this.

    http://www.evolutionmsport.com/phptest/thurs.php

    Keep in mind all this is working code so it is sloppy. But am I asking too much of DIVs for these layouts. I was also toying with the border property to separate all the areas with a white space. Is that a bad practice.

    Nevertheless, can my ideas be accomplished. The secondary pages of the website are basically your 3 column layout, but what is the best way to add the subheader.

    For the main page, does nesting multi column divs in divs become too cumbersome.

    Thanks.....Mike
    Last edited by EvM-Mike; Apr 5, 2004 at 21:23. Reason: added content first

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

    Sorry if this reply doesn't offer full solutions but I am just preparing to go away for a week so I'm in a bit of a rush.

    Anyway I've just knocked up this example of a subheader straddling 2 columns:

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

    It would have been easy but ie won't let you set an absolute elements width by defining right and left co-ordinates so it 's impossible to have an absolute element thats 100% wide minus one column width in ie.

    The solution is to give moz the simple solution and ie the more convoluted solution. For ie I had to float an element with a 100% width of the centre column and then drag it right by 131 px to move over the right column. However this made it too short for the centre column so I added 131px padding to expand the 100% element and then placed another absolute element inside so the padding didn't take effect. (I shouldn't think ie5 will like this so you will need to work out another solution maybe for that).

    The result works in ie6 and firefox but I haven't had time to de-bug in other browsers.

    The other tweaks were to add top padding to the right column to clear the absolute element and a clearsub div to make room in the centre column.

    Regarding your multi column nested layout I'm not sure this is possible as I don't think you will be able to get the 100% height formula to work on inner elements. It only seems to work on the first element in the html (gecko browsers anyway). You may be able to fiddle something with background images but again the fluid width will probably defeat this.

    I'm sorry I didn't have more time to go through this properly but if you still want help I'll be back in a weeks time.

    Paul

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

    Thanks...I am just heading out to some training, but I will check out the layout tonight...I am out of town as well, so I plan to play around with a few thgings and maybe by next week I could have my attempt on paper. Maybe then you could give it a quick look.

    Again thanks for the help, it is greatly appreciated.

    Thanks...Mike

  10. #135
    SitePoint Member
    Join Date
    Apr 2004
    Location
    :P
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do u get each column with a different background? i cant seem to do it check my site at- http://www.geocities.com/b4igogetmyowndomain/index.htm

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

    From the look of that page you do look absolutely confused .

    You can give any element a background colour or image by specifying it in the css for that element.
    e.g.
    Code:
    #test {
     background: #fff url(img.gif) repeat top left;
     height: 95px;
     width: 50%;
    }
    The problem is when you want 100% high elements and for that I will refer you to my demo in this thread where there is a better explanation. Suffice to say this is not and easy task and only works in certain situations.

    I suggest you read the thread thoroughly and try to understand the concepts so you can apply them to your layout.

    As there is very little to go on in your page I can't really offer any suitable code yet except to say that you need to tidy your html up. (You have 2 body tags in your code.)

    From the look of your code you seem to be looking for a 2 column layout so I suggest you check out the 2 col layouts in my demo (see the link in the first post of this thread).

    If you are going to use absolute positioning for your menu (which is fine to do) just be aware thet you will then be unable to have a footer underneath the whole page as an absolute element is removed from the flow and will not influence other elements. The alternative is to float the menu instead.

    Hope this helps a bit

    Paul

  12. #137
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul/Everyone,

    but if you still want help I'll be back in a weeks time
    I have spent the past week reviewing your various pages and think I may be able to get everything I need to work to a point. I have created two pages that basically look the same. One of them is based on the design you came up with for me:

    http://www.evolutionmsport.com/test/evm-paul.php

    While the other is a variant of my original page, which I think is based on “Big Johns” approach:

    http://www.evolutionmsport.com/test/evm-john.php

    Both seem to work fine in Explorer, but the “paul” pages runs into problems on Netscape 7.x. If you start making the page smaller the left and right columns creep up on you. Is this something I screwed up in the process of tweaking your page?

    Both pages are very similar. I will post the DIV code and leave the rest out.

    The Paul Page:

    <body>
    <div id="outer">

    <div id="left"><?php include ("left.html") ?></div>

    <div id="right"><?php include ("right.html") ?></div>

    <div id="clearheader"></div> <!-- to clear header -->

    <div id="centrecontent"> <!--centre content goes here -->

    <div id="subheader">
    <div id="subinner">Sub Header</div>
    </div>

    <div id="clearsub"></div>
    <?php include ("content.html") ?>

    </div>

    <div id="clearfooter"></div> <!-- to clear footer -->

    </div><!-- end outer div -->

    <div id="footer"><?php include ("footer.html") ?></div>

    <div id="header"><?php include ("header.html") ?></div>

    </body>

    The John Page:

    <body>

    <div class="wrapper">

    <div class="header"><?php include ("header.html") ?></div>

    <div class="outer">

    <div class="inner">

    <div class="left"><?php include ("left.html") ?></div>

    <div class="center">
    <div class="bh"><p>this is the body header</p></div>
    <?php include ("content.html") ?>
    </div>

    <div class="right"><?php include ("right.html") ?></div>

    <div class="clear"></div>

    </div>

    </div>

    <div class="footer"><?php include ("footer.html") ?></div>

    </div>

    </body>

    From what I can deduce, the methods are similar. The one difference is that the “John” page uses border width and color to define the right and left columns. On the John page I use a relative div and top margin heights to fit the sub header in. So with the John page I do not need an image to fill one of the columns; however, since border width is used for defining the columns, you need to get creative to add the white border to show separation between the various areas.

    On the Paul page, I guess you need to just play around with some of the various values to make sure nothing gets lost behind the footer.

    Can someone let me know if any of these pages “Blows up more than the other”. I am new to this and I think I have successfully hacked my way through it.

    Since both pages have various fixes in them, is one more robust than the other.

    BTW...I can send you the CSS files if it makes it any easier.

    TIA….Mike

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

    Good job there on both those pages.

    The problem with the columns not being full length in netscape 7/mozilla is because you have over-ridden the background property here:
    Code:
    html, body {
    background-color: #FFF;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }
    The background colour on the html element is over-riding the definition further down the page here:
    Code:
    body {
    padding:0;
    margin:0;
    	background:#FFFFCC url(http://www.evolutionmsport.com/test/leftcolblue.jpg) repeat-y left top ; 
    color: #000000;
    }
    Either define the bg colour just for the body element and not the html element or add the html element to my definition like so.
    Code:
    html, body {
    padding:0;
    margin:0;
    	background:#FFFFCC url(http://www.evolutionmsport.com/test/leftcolblue.jpg) repeat-y left top ; 
    color: #000000;
    }
    There are actually very few hacks at all in my page and so its pretty robust. The hacks that are in there won't affect other browsers and are mainly cosmetic.

    You could avoid the float drop in the centre column if you used the content first approach as here:

    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    But it does make it a bit more complicated to work with.

    The footer calculations are necessary for the 100% footer which big johns original demo didn't have (although he has borrowed my code for his new demo using 100% height). The clear footer only needs to be as high as the footer itself (or slightly smaller) and this just stops text from going behind it. (The footer code is only needed if you want 100% footer when the page is smaller than 100%.)

    The layout has been tested in the browsers mentioned and seems pretty robust. IE5 mac doesn't like the 100% height but apart from that it's pretty good.

    Your other page is good also and I think you'll find that the layout is dougs (Douglas Livingstone) who pioneered the technique of using the borders of an element to provide solid colours and then floating the column in the border.(http://www.redmelon.net/tstme/3cols2/noborder.htm)

    As you mention this method doesn't allow for any borders on the columns or the centre content which is where my layout scores better but both are useful depending on the situation.

    I think the main problems with either layout will be float dropping where large images are used and the content first approach gets around this by putting the centre column first so that if anything drops then it will be a side column.

    Hope that helps.

    Paul

    Edit:


    You do realise that the second layout (not mine) doesn't have 100% height? e.g. footer at the bottom of the window unless content is greater when it will sit at the bottom of the document.

    Also I notice you have inserted tables into the layout which really rather defeats the purpose of the layout in the firt place lol. You could easily get rid of the tables. You need to tidy that code up a bit as well as it is all <br> everywhere which looks unsightly and is bad practice. Use lists or paragraphs and style them accordingly.

    Just thought I'd mention it while I remembered

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

    You are right, the other layout is Douglas Livingston's. I was surfing around so much I got confused. So he will get the credit.

    I thought I was using your content first page, but I was mistaken. I will try to use the content first page and work the sub-header into it. Now on your layout if I add a 2 px border to say the bottom of 100px header i would just make 102px spacer, right??

    Using Doug's layout is hokey when creating the borders between the boxes, and yours makes more sense. I guess there is no way to get around using the repeating image to color one of the columns on your, is there? The only reason I ask is I am trying to set my page up to allow for color themes. Worst case scenario is I could just create a bunch of jpegs with varying color, but it would be easier to enter the hex. Could I nest another div ito one of the columns and use that to color it?

    I am not sure what you mean about float drop-down, but i think you are referring to the divs getting flakey once the page is too narrow. I am not overly concerned with that. If the page is that small you shouldn't be reading it.

    I also realize that Doug's layout does not fit to 100% of the page. I can go either way on that, but I do like the 100% better.

    Let me see if I can fix up your content first page, with my subheader and get all the colors working.

    As for the menu bar. I know that needs work. I copied it from a site. It will actually be a drop down menu, but I removed the dropdowns for now. Once I get my this layout strainghtened out I am going to look for a php drop down menu that uses all divs. I think brainjar.com has a decent one.

    My content areas will be driven by a variable, the left menu will be dynamically generated with a php script and the subheader will have a breadcrumb script i wrote in it.

    Then I will attack the home page which will have a 3 column layout nested into 2 columns. I have a working copy I can post later tonight if you are interested.

    Again, thanks for all of your help.

    Mike

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

    I modified your "content first" layout and came up with this:

    http://www.evolutionmsport.com/test/paul1.php

    It looks nice, but there is still the issue of a repeating image for the color, but then again the content does come first. I think I also fixed the column color issue, per your instruction. I added the subheader stuff but dont quite understand it. I get the general gist of it, but when you size the window it flickers a little. At this point I am pretty pleased with everything. I just want to put a minimom width hack into it.

    I also modified the latest version of Doug's page and came up with this:

    http://www.evolutionmsport.com/test/doug.php

    I added a 100% height to the Wrapper class and it seems to fill the page, but I am not sure it is that simple. It seems to display properly in mozilla and IE. I also added a subheader similar to the one in your page, but I simplified it a bit. This page needs no images for color, but the content does not come first. I tried to edit it, but I am having trouble floting one of the divs.

    Nevertheless, this is where I am at. I will probably post the pages on a testing board to hash out any problems. From what I can see I have to decide whether content first is better than no image dependency on color. Unless I could modify Dougs page to have content first.

    Thanks....Mike

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

    I launched (less than an hour ago) the (significantly) revised css site creation tool that makes the css page layout for the user, if they want a 2 or 3 column design with header and footer.

    It was made with considerable help from Big John, you and Allan Smith (thanks guys).

    Find the link toward the bottom of this page (but please read the notes first):

    [edit: new address]

    http://209.216.241.33/ctindex.php

    I've posted a separate thread asking for folks to give it a go and see if it works





    Trevor
    Last edited by ClevaTreva; May 19, 2004 at 04:10.

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

    I added a 100% height to the Wrapper class and it seems to fill the page, but I am not sure it is that simple. It seems to display properly in mozilla and IE
    The 100% height is not as simple as that and in fact you are not getting 100% height as the page will collapse smaller if content is less than 100% high. You need to read the explanation on my site about 100% as it is fully documentedhow to achieve it. Basically set html,body to 100% and then set outer to 100% with min-height 100% and then the auto hack for moz.

    You are also getting a horizontal scrollbar in dougs layout in firefox but thats something you've added and nothing wrong with his layout. (I haven't had time to look for it but it will be a width thats overflowing and should be easy enough to find.)

    Both layouts look fine to me and I don't think there's much to choose between them in this situation. I'm sure dougs layout could be changed to content first by floating the elements in the same way as my demo. The basics of it are to wrap the centre and left floats in an outer wrapper that is floated left and the centre content is floated right inside it and the left floated left. The far right column is then just floated right outside the wrapper.

    I didn't really notice much flicker in my layout but you may want to mess around with adding a negative right margin to the left and right floats (for ie only e.g. * html #left (margin-right:-3px). This is a fix for the extra padding ie has on floats and may be causing the page to display incorrectly. (It's just one of those play around and see situations.)

    You may also want to look at Trevors link above which has a whole bunch of solutions to the same problems (and it does it all for you .

    Hope that helps anyway.

    Paul

  18. #143
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Quote Originally Posted by trevor
    launched (less than an hour ago) the (significantly) revised css site creation tool
    Great work Trevor I've had a quick look and it looks excellent. I'll have a play around with it later But I'm sure it will work fine with the amount of time you've put into this.

    Paul

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

    I was looking at trevors generator, it is full of nice comments. I will look into this a little later. I have also had a chance to look at both my pages in a few more browsers.

    Both pages have the subheader offset to the right in IE 5.5. In Netscape 7.0 and 7.1 the subheader is offset to the left and covering the left column of the Paul Layout. I am thinking I may have just transcribed something incorrectly.

    I was messing with the content first on the doug page but it just got too late. I also noticed the Doug page does not expand to the full height as I have it now. I will look into your CSS and see if I can apply it to dougs page. Then I will move on to find a nice drop down menu.

    Thanks again for the comments...

    Mike

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

    in IE 5.5. In Netscape 7.0 and 7.1 the subheader is offset to the left and covering the left column of the Paul Layout.
    I haven't got time to check at the moment but in the original demo I did for you I had to give moz a different slice of code to IE. I wonder if you've missed that out subsequently. (Have a look at the subheader link post somewhere above this).

    I would think that ie5 would have problems with my original solution and may need hacking. The problem is the adding of padding to the 100% element which ie5 and 5.5. will add inside the element due to their broken box model.

    I'm out this evening so it will have to wait until tomorrow before I get around to checking ie5 and 5.5. but i'm sure the probplem will be the broken box model in those browsers.

    Paul

  21. #146
    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 out this evening so it will have to wait until tomorrow before I get around to checking ie5 and 5.5. but i'm sure the probplem will be the broken box model in those browsers.

    Paul
    Yeah I figure it was something like that. I am not overly concerned with IE 5.5, but I will try to get it to work. Even if it is offset to the right the page is still OK, its not horribly broken.

    Thanks...Mike

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

    As expected the broken box model of ie5 and 5.5. stops the subheader from working properly.

    It could be fixed for them but would need a handful of hacks. You could add a float in the subheader div and float it left with a negative margin and this would give you the extra width into which you place an absolutely placed element.

    You would then need to hide the appropriate code from ie6 (and vice versa ie5) which you could do with the backslash hack.

    You would probably have to loose the white border on the bottom though.

    If you want the code for this let me know (but it won't be that pretty lol).

    Paul

  23. #148
    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,

    If you want the code for this let me know (but it won't be that pretty lol).

    Paul
    Paul,

    I may need the code. I am still wrestling with the subheader. In a perfect world I would like it to span both the center and the right columns. If you fill the subheader with text it wraps at the edge of the center column. I can live with this, but I am trying to get it to wrap at the edge of the right column.

    Maybe I can get this straight over the next day or so.

    Thanks....Mike

  24. #149
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Mike,
    If you fill the subheader with text it wraps at the edge of the center column
    You could just stretch the subinner like this:

    Code:
    * html #subinner {
     position:absolute;
     left:0;
     top:0;
     width:122%;
     height:60px;
     overflow:hidden;
    }
    It's not perfect but works

    I was just going to look at the ie5 problem again so I'll get back to you.

    Paul

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

    This code will make ie5 look better but I'm not really happy with it.
    Code:
    /*##########################*/
    * html #subheader {
     background:#ffffcc;
     border-bottom:2px solid #fff;
     height:60px;
     margin-right:-155px;
     float:right;
     width:100%;
     position:relative;
     padd/ing-left:157px;
     display:inline;
    }
    html>body #subheader {
     background:#ffffcc;
     border-bottom:2px solid #fff;
     height:60px;
     left:0px;
     position:absolute;
     right:-151px;
     overflow:hidden;
    }
    * html #subinner {
     position:absolute;
     left:0;
     top:0;
     width:500%;
     w/idth:122%;
     height:60px;
     overflow:hidden;
    }
    html>body #clearsub {height:64px}
    * html #ie5fix {
     float:left;
     position:relative;
     width:157px;
     background:#ffffcc;
     height:60px;
     margin-left:-157px;
     display:inline;
     d/isplay:none;
    }
    * html #clearsub {clear:both}
    html:
    Code:
    	  <div id="subheader"> 
    		<div id="ie5fix">
       <div id="subinner">Sub Header </div>
    	   </div>
    	  </div>
    With your layout you may be better off loosing the 100% height and then all your headers can have fluid heights instead of being fixed height and overflow:hidden. It all depends what you put in the headers I suppose.

    Hope this gives you some ideas anyway.

    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
  •