SitePoint Sponsor

User Tag List

Page 16 of 66 FirstFirst ... 612131415161718192026 ... LastLast
Results 376 to 400 of 1630
  1. #376
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B: At first thank you for your good work! I used some of your code to make a website. I cannot post the URL because itīs not finished yet.

    And Iīm working on a second one. Itīs a three column layout with this structure:

    header
    left
    right
    center
    footer

    It works fine. I added a menu and it still works fine exept in IE6 on windows xp.

    When I hover a navigation element the hole menu jumps to the right. And the right column to the left. Very strange behaviour.

    Maybe somebody finds the mistake: http://gtownbeats.com/footer/index.php

    oerdec//

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

    That fluid column example is a bit shaky at the best of times i'm afraid due to ie's stupid handling of the negative margins etc.

    The problem in your example is caused by changing the background colour on a:hover of that navlist. When you take out the bg color on hover it works ok. This is obviously a bug in ie that causes it to lose its positioning. Resizing the window makes the div jump back again.

    You could set the nav to position:absolute which seems to cure the bug.
    Code:
    #navi {
      border:1px solid black;
      width:100px;
      position:absolute;
    }
    However this means that if you want any text to follow the nav in that column then you will have to keep it in the same absolutely placed div etc (which will cause problems if its longer than page height). Or just put a margin-top on the following content in the same way that the header is avoided.

    I do have a more stable example here of fluid columns here:

    http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm

    but I think the effort would be wasted when a table can do this so much easier (and better) .

    Sorry I couldn't offer something more substantial but I shall keep looking for an answer to this bug

    Paul

  3. #378
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, it works!

    and I donīt see problems with longer text under the navigation:

    I have put a <div id="left-content"> under the <div id="navi">

    with this css:

    #left-content {
    padding-top:150px;
    }

    just take a look: http://gtownbeats.com/footer/index.php

  4. #379
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that should work as you have allowed the space so all should be ok

  5. #380
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,

    I have a little problem with my new layout. All looks perfect in IE but Firefox add double margin below header and at the end of page. Why? Please help mw with this.. Here is a link to my page.

    thanks man,
    Jazz

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

    You just need to set the appropriate images to display:block:
    Code:
    img {display:block}
    You will need to make it more specific if you are going to have inline images on your page. But you will see that the above does fix the problem

    I note you are using the xml prologue so take care with the broken box mode as ie6 will use the broken box model when using the xml prologue as it trips quirks mode accidentally.

    Paul

  7. #382
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I need to use "box model" hack, right? No problem Paul I'll use mentioned method

    Also can you tell me which of this 2 syntaxes are best for use, for example form#form_id or just #form_id or ul#ul_id or just #ul_id?

    thanks,
    Jazz

  8. #383
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also can you tell me which of this 2 syntaxes are best for use, for example form#form_id or just #form_id or ul#ul_id or just #ul_id?
    Well theres little difference really except that when you define something like div#idname then that id will only be valid when its on a div. It just makes it specific to divs. Its a bit like overkill for id's as they are unique to the page and can only be used once anyway. div#idname will carry more weight in terms of specifity if there were any conflicting issues but I can't think of an example right now

    With classes you can define a class just for divs or use the same class for paragraphs but with a different style e.g.div.style or p.style but you would be able to define style differently for both. Although that might make things a little confusing and you could just use another class anyway although there are some cases where you may want to use it.

    Paul

  9. #384
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your answer Paul

    best,
    Jazz

  10. #385
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hereīs the website it talked about: http://bloodybaronrecords.com/

    Itīs a two column design with footer. Iīm not resposible for the content. =) I just made the design and coding.

    Thanks to Paul again!

    oerdec//

    ps: If there are any errors please let me know.

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

    I notice a litlle problem in ie6 in that the right column has dropped down below the left column.

    This is because you have put too many stars *************** in the html where you have used it as an underline and made it too wide. Take 2 stars out of each line and also add this code to fix ie's 3 pixel jog.

    Code:
    *************************************************************************************/
    #content {
     float:left;
     width:427px;
      padding:0px 15px;
    }
    * html #content {margin-right:-3px}
    /* news
    *************************************************************************************/
    #news {
    margin-left:457px;
    background-color:#fff;
    padding:0px 15px;
    }
    * html #news {
    height:1%;margin-left:454px;
    }
    That should get it back on track

    Paul

    (You might also want to sort out the box model problems for ie5 and 5.5. as I notice you have widths and padding on some elements.)

  12. #387
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a shame that when most people convert from table layout to CSS the first thing they want to do is copy a table layout. I've always tried to avoid the problem altogether and use designs that suit CSS more than they suit the table layouts of old.
    I'd like to know what CSS layouts you are talking about that would fit the reqs of a fluid content design and requires no hacks (CSS suited).

  13. #388
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by subnet
    I'd like to know what CSS layouts you are talking about
    The designs as mentioned in my quote :

    specifically:
    Quote Originally Posted by me
    and use designs that suit CSS more than they suit the table layouts of old.
    What I was referring to was using css for the things its good at and avoiding copying existing table design and table characteristics. e.g. avoid equalising columns, and elements that have their height or width dependent on some other element. Tables just do that too well and css struggles with those and few other concepts (in IE that is as mozilla is quite capable of replicating table behaviour) .

    e.g. In a table you can have a number of cells across the screen each with an image. When you resize the screen smaller then the table stops shrinking at some point and a horizontal scrollbar appears and you have scroll to view the image. Very difficult to see if you have a small screen as you have to keep scrolling sideways.

    However if the images had simply been floated across the screen thay would keep reforming and flowing until you had a screen width of 1 image wide. This would be viewable on almost any screen size.

    Thats what I would call using css to its adavantage and using its strengths rather than its weaknesses.

    that would fit the reqs of a fluid content design and requires no hacks
    I don't think I mentioned no hacks anywhere

    However saying that, there are many css designs can be done without hacks if you know what you want and know how to go about it the right way. The problems usually comes (and I hear it often here) in that "the client wants it exactly like that - they drew it themselves". Although the customer is always right ( but really most of the time he is wrong lol) and thats where a good designer should lead the client into better design for the web. The web isn't graphic design theres much more that needs to be taken into account.

    If you can make design changes to suit the way css works then things become much easier as you are not always fighting over bugs and hacks.

    Having said that, I still think its ok to use hacks when theres no other way around as long as you stick to the tried and tested methods.

    Have a look at this little test I set to create a layout without using any classes or ids at all (its just for fun)

    http://www.sitepoint.com/forums/show...est+css+skills

    If you want more examples then there is obviously the oft quoted zen garden which shows the power of css but not specifically the fluid aspect.

    Hope thats answered your question but I fear it hasn't

    Paul

  14. #389
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, it's just that I've read several articles about the dangers of tables and how they were not meant to be used as layout devices except with tabular data, so I decided to switch (in the past two weeks mind you). The problem is, CSS doesn't accomplish the layout task either, or at least not simply. Was CSS meant for just style markup, and the layout left to the modern advanced programmer?

    Edit: I tried to switch to CSS five years ago, but browser support was as bad as it is NOW!

  15. #390
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol -Its always hard at first and I don't blame a lot of people for getting fed up with css initially. Theres the differing browers support and the browser bugs to put up with for a start.

    Then theres the broken box model, quirks mode, standards mode and almost quirks mode to contend with as well.

    The learning curve is rather steep and often seems unrewarding when something you are familiar with could do the job more easily.

    However CSS is designed for layout, its just that a few browsers got it wrong. There are countless things that css can do and perhaps a handful it can't (do very well). On the other hand tables can only do the same old table things (which they do very well) but you're still stuck with a table or heaven forbid nested tables.

    Once you get over the initial shock of nothing working as you expected you will get to like the ease with which your pages can be maintained. The clean looking code that is so much easier to read through and identify. The leaner pages up to 50% smalerl in weight which results in faster loading and happier visitors.

    The fact that you can change all 100 pages of your site instantly by changing one style sheet. There are so many good things about css but most people dwell on the bad things and the things it gets wrong.

    Edit: I tried to switch to CSS five years ago, but browser support was as bad as it is NOW!
    I think you'll find things have improved a bit since then. Firefox, OPera7 have great support and work very well. A lot of people are turning to firefox and I think that IE's share of the market will gradually slow down and start to fall.

    Its quite possible to write css that will work on over 95% of browsers whic is probably a lot more than have js enabled and people aren't shy of using that.

    Why not start simply. Use a basic table to hold your layout but try everything else in css. Sometimes a table is the only answer for some techniques and sometimes its not. I would never say you should never use a table but I would say try not to use a table if possible.

    I think I've droned on enough now anyway

    Paul

  16. #391
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, thanks for taking the time to reply. I haven't abandoned CSS, I'm just trying to change my layouts to fit it more.

  17. #392
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to learn this...

    i've been playing with '3colfluidtest_3' to se if i could change the width of the columns to L=1%, C=20% and R=79% and i think i got it to work, but the content in the right column still wraps as if it were ony 20% (as in the original).

    i'd post here what i have changed so far to see where i went wrong, but i don't know how to make it post to that it puts the code in a separate box. do i click the 'wrap code tags...' option?

    also, i have highlighted everythign in different colours and matched up the CSS and HTML, but i cannot find anywahere where it specified the 'centercontent' div, even though the HTML clearly calls it up.

    thank you in advance for assistance :-)

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

    To put code in your post just select the text and then click the code tags.

    That layout with the fluid columns is a bit tricky at the best of times but I feel its unlikely to work with a 1% left column. I'm not sure what you could put in the 1% unless it was just for spacing and then another method might be better.

    The problem is with your measurements. As your centre column is basically only 20% wide then to fill the rest of the screen up the right column would need to be about 4 times the size of its parent (the centre column).

    So dimensions something like these would be needed.

    Code:
     
    #right {
     position:relative;/*ie needs this to show float */
     width:399%;
     float:right;
     margin-right:-398.9%;/*must be .1% less than width otherwise won't push footer down */
     padding-top:72px;/*needed to make room for header*/
    }
    However thats untested so check carefully.

    If you could explain exactly what you required (and what is supposed to happen) then I might be able to offer a different solution or advise against using this if it doesn't fit the bill. The negative margin techniques work well in some cases and not very well in others (especially the all fluid version) so I'd need to see what you had planned.

    Hope that helps.

    Paul

  19. #394
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks! i'll give that a try and then post again later (with code) if i still have troubles.

    basically it is an online newsletter with a small vertically repeating graphic in the leftmost column, the next, or center column is a solid background with room for a callout from the article, and the last, or right column is the article itself. i need theoclumns to equalize (background image repeat and background colour fill) according to how long the article is.

    and i really don't need a footer but i figured i'd just make it 1px high with everything invisible...

  20. #395
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yeehaaa! or, the mess i now have ;-)

    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>3 col layout with equalising columns and footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    
    html, body {height:100%}
    body {
    	padding:0;
    	margin:0;
    	background:pink url(leftcolfluidbg.jpg) repeat-y left top;
    	color: #000000;
    }
    #outer{
    	height:100%;
    	min-height:100%;
    	margin-left:2%;
    	margin-right:80%;
    	background:#0038a8;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	margin-bottom:-52px;
    	color: #000000;
    	text-align:center;
    	text-color:#FFFFFF;
    	font-weight: bold;
    	font-style: italic;
    	
    }
    * html #outer {position:relative;} 
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	background:#FFffff;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    }
    #left {
    	position:relative;/*ie needs this to show float */
    	width:2%;
    	float:left;
    	margin-left:1%;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:72px;/*needed to make room for header*/
    	background-color: #ef2b2d;
    }
    
    #left p {padding-left:0x;padding-right:0px}
    #right p {padding-left:18px;padding-right:2px}
    
    #right {
     position:relative;/*ie needs this to show float */
     width:99%;
     float:right;
     margin-right:-98.9%;/*must be .1% less than width otherwise won't push footer down */
     padding-top:72px;/*needed to make room for header*/
     background-color:#FFFFFF;
     text-align:left;
     text-color:#000000;
     font-weight: normal;
    }
    
    * html #left {margin-left:-1.9%;padding-bottom:50px;ma\rgin-left:-1.9%}/* for ie6 must be less than 20%!! -  it still treats it as 20% even though its 32%*/
    * html #right {margin-right:-98.9%;padding-bottom:50px;ma\rgin-right:-19.9% }/* for ie6 must be less than 20%*/
    
    #footer {
    	width:100%;
    	clear:both;
    	height:1px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background-color: #FF8080;
    	color: #000000;
    	text-align:center;
    	position:relative;
    }
    * html #footer {/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/
    * html #minHeight{margin-bottom:-50px;} 
    
    </style>
    </head>
    <body>
    <div id="minHeight"></div> 
    <div id="outer"> 
      <div id="left"> 
        <p>.</p>
      </div>
      <div id="right" style="position: absolute; top: 141px; left: 152px; width: 152px; height: 1414px; z-index: 1"> 
    <h1>Article Title(Heading 1) 
    </h1>
    <p>By Joe Author*  
    </p>
    <p>June 2004 
    </p>
    <p><span style="font-style: normal; font-weight: 700">This paragraph is bolded. Here's some boring sample text: Caviar, metropolitan sheer expensive doctoral penthouse five-star monogram caviar butler ladies five-star bonds wine.</span>
    <span style="font-style: normal; font-weight: 700">University ballroom on polo sterling town home sport. Fashion using wealth diamond European dynasty silk rare, rich high-rise ambassador luxury.  
    </span></p>
    <h2>This template is constructed using CSS layout</h2>
    <p><span style="font-style: normal">Diplomatic theatre first-class status sapphire investments. Metropolitan private imported presidential cruise portfolio panoramic diamond aristocratic. Vacation guests yacht impressive politically echelon travel. Gem fine theatre brilliant club gentlemen purebred, pedigree town home, upper lifestyle, five-star presidential club fine. 
    </span></p>
    <p><span style="font-style: normal">Here's a sample bullet list: 
    </span></p>
    <ul>
    	<li><span style="font-style: normal">cultured, caviar expensive, in penthouse 
    	</span></li>
    	<li><span style="font-style: normal">Silk board private, gifted with impressive, ambassador 
    	</span></li>
    	<li><span style="font-style: normal">first-class status sapphire investments 
    	</span></li>
    </ul>
    <p><span style="font-style: normal">Authors, notice that these are regular bullets, not a 2-column table with bullets in one row and items in the other. 
    </span></p>
    <h2><span style="font-style: normal">Another subtitle using Heading 2</span></h2>
    <p><span style="font-style: normal">Opera tailored grande, estate, cultured, caviar expensive, in penthouse, cutlery grand opulent polo. Silk board private, gifted with impressive, ambassador, impressive.  Stock market bonds accredited champagne status, ambassador cultured, symphony, doctoral ambassador ballroom elegant sterling.</span></p>
    		<hr width="90%" color="#ff5252" noShade>
    		<p>&nbsp;</div>
      <div id="clearheader"></div>
      <!-- to clear header -->
      <div id="centrecontent"> 
        <!--centre content goes here -->
        <p>to the left goes a small, vertically repeating image, or, alternatively, the red colour i have sepcified. i used a'.' as content to make the div show. 
    	in this column goes the article callout, usually about 100-200 characters in length, it should be white in colour, which did not take.</p>
      </div>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    
    <div id="footer"><p>this is the footer, i do not need a footer but i can include it as i an 'invisible (no background or border) item to make the equalizing work.</p></div>
    
    <div id="header">newsletter nameplate, navigation/search, 
    and volume/issues numbers all go within the header div.<br />
    </div>
    
    </body>
    </html>
    but it is a better idea of what i am trying to get. is there any way to attach a screenshot to a post...the insert picture icon requires a URL.

  21. #396
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    This layout would be easier (and more stable) if your 1% and 20% columns were fixed width and only the 80% right column was a fluid width.

    Before I look at it do you need the 1% and 20% columns to be fluid widths?

    Paul

  22. #397
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fluid vs. fixed widths

    i just checked and yes, the table-based document i am tryign to recreate does specify percentages.

    ideally i would like to solve the issue using all fluid widths, but, i think that the left (red) column could be a fixed width of, say for the sake of layout, 4px. then the others could be percentages approximating 20 and 80, yes?

    a related query: since i am new to CSS i am not sure what the target of the following markup is, specifically, what are the functions of the prefixes '* html' and 'html>body':

    Code:
    * html #outer {position:relative;} 
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    thanks you again for your help, in the meantime, i am still experimetnign with things here. even if i don't get lucky and hit the solution (probably by accident if i do), at least i'll get the practice :-).

  23. #398
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    thanks you again for your help, in the meantime, i am still experimetnign with things here. even if i don't get lucky and hit the solution (probably by accident if i do), at least i'll get the practice :-).
    Thats the best way to learn. Just keep trying things and eventually it starts making sense

    The child selector (>) isn't recongnised by IEPC and is often used to hide things from IE.

    The universal selector (*) when concatanated with (html) is called the star selector hack and is the opposite of the child selctor hack. That is it will only give styles to IE. (Read the FAQ thread on the broken box model for more info).

    Although I have commonly used both techniques, I now prefer just to use * html to give styles to ie only and not interfere with other browers at all. (The child selector (>) is occasionally read in error by ie5 so I choose not to use it anymore. It seems that if you use leave whitespace around the child selector then ie5 reads the last part of the style.)

    Your 4px red border would need to be a repeating background image to get the full length column and then you could basically have a two column layout. Their may be a simpler solution if you use one background image for the left column and red border as well but I'll have to just do some testing to see.

    I'll get back to you later, unless you've worked it out meantime.

    Paul

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

    This is about the best I could come up with

    It has a red border to the left followed by a 20% fluid column and then an 80% fluid rest of page.

    http://www.pmob.co.uk/temp/2colfluidlayout.htm

    You will need to test this thoroughly as I cannot guarantee that this method will work for all browsers (it definitely won't work in ie5 mac but should at least be usable).

    It seems to work ok in ie5, 5.5. and 6, firefox, Opera6 and NN6.2,. (there may be minor differences but it's basically the same).

    The header and footer can be removed if you want but just change the negative margin-bottom in #outer to whatever height footer you use and also set the clearfooter to the height of the footer. (Those three work together i.e. footer height, negative margin-bottom in #outer and clearfooter).

    The red border down the side is a repeated image on the body so you can't give background colours to elements on top otherwise they will hide it. The blue left column colour also comes from the background color set in the body. The right column background comes from the background set in outer. If you need to change colours then change them in the elements that I have indicated above. This is because the elements with the content in sit on top of these background colours.

    Again I can't guarantee that you won't run into any problems as I haven't tested this fluid layout fully and it does use what may be called advanced techniques. However it seems to work as it is but of course this may change once content has been added.

    Hope its of some use anyway.

    Paul

  25. #400
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    woohoo!!!!

    wow, that would work, too. i see where you have de-mac'd it, but i plan to look at it from home tonight anyway just to see what happens :-).

    here is what i came up with pbased on the '3columnfluid_simple_1' version:

    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>3colequalsimpleLEARNING2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    
    body {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: verdana arial helvetica 'sans serif':
    }
    
    #containermain
    {
    	width: 95%;
    	margin: 10px auto;
    	align: center;
    	background-color: ef2b2d;
    	background-image: url('redstripe.gif');
    	background-repeat: repeat-y;
    	border: 1px dashed #000
    }
    
    #header
    {	
    	height: 50px;
    	width: 100%;
    	background: #ffffff;
    	padding-bottom: 12px;
    }
    
    #nameplate
    {
    	height: 54px;
    	background-image: url("my%20images/nameplateplaceholder.gif");
    	background-repeat: no-repeat;
    	background-position: left bottom;
    }
    
    #nameplate h1
    {
    	font-size: 10pt;
    	margin-top: 12px;
    	line-height: 130%;
    	font-weight: normal;
    	color: #919693;
    	text-align: right;
    	text-position: middle
    }
    
    #navsearch
    {
    	margin-top: 45px;
    	margin-bottom: 25px;
    }
    
    #logo
    {
    	height: 38px;
    	background-image: url("my%20images/logoplaceholder.gif");
    	background-position: left center;
    	background-repeat: no-repeat;
    	margin-top: 5px;
    	padding-bottom: 18px;
    	border-bottom: 3px solid #ef2b2d;
    	margin-bottom: 12px;
    }
    
    #logo h1
    {
    	font-size: 8pt;
    	margin-top: 16px;
    	font-weight: normal;
    	color: #919693;
    	text-align: right;
    }
    #left {
    	float:left;
    	width:3%;/* must be greater than than margin */	
    	margin-left:-1%;/* must be less than width */
    	border: 1px dashed #00ff00;
    	position:relative;
    }
    
    #right {
    	margin-right:-355%;/* must be less than width */
    	float:right;
    	width:410%;/* must be greater than than margin */
    	background-color:#ffffff;
    	border: 1px dashed #00ff00;
    	color: #000000;
    	padding-left:18px;
    	position:relative;
    }
    
    #middle {
    	background:#0038a8;
    	color:#000000;
    	margin-left:1%;
    	margin-right:80%;
    	border: 1px dashed #ff00ff;
    }
    
    * html #middle {height:1%;position:relative;}/* combat ie's 3 pixel jog */
    
    #footer {
    	clear:both;
    	height:1px;
    	text-align:center;
    }
    
    a:link       { text-decoration: none; color: #0000FF }
    a		     { text-decoration: none; color: #0000FF }
    a:hover      { text-decoration: none; color: #FF0000 }
    a:active     { text-decoration: none; color: #FF0000 } 
    
    body         { font-family: Verdana; background-color: rgb(255, 255, 255); font-size: 10pt; 
                   text-align: Justify; color: #29298c }
                   
    table        { font-family: Arial; font-size: 10pt; text-align: Justify; color: #29298c }
    
    h1           { font-family: Arial; font-size: 14pt; color: #29298c; margin-top: 0; 
                   margin-bottom: 0 }
                   
    h2           { font-family: Arial; font-size: 12pt; line-height: 100%; color: #29298c; 
                   font-weight: bold; margin-top: 20; margin-bottom: 2 }
                   
    h3           { font-family: Arial; font-size: 10pt; color: #29298c; font-weight: bold; 
                   margin-top: 35; margin-bottom: 6 }
                   
    h4           { font-family: Arial; font-size: 10pt; color: #29298c; font-style: italic; 
                   font-weight: bold; margin-top: 0; margin-bottom: 0 }
                   
    h5           { font-family: Arial; font-size: 10pt; color: #29298c; font-weight: bold; 
                   margin-top: 0; margin-bottom: 0 }
                   
    .by-line     { font-family: arial; font-size: 10pt; color: #29298c;}
                   
    .numbering   { list-style-type: decimal; margin-top: 15; margin-bottom: 15 }
    
    .pullquote   { color: #ffffff; font-family: arial; font-size: 10pt; font-style: italic;
    		       font-weight: bold; text-align: center; margin-top: 175px; margin-left: 18px; margin-right: 18px;}
    
    </style>
    </head>
    <body>
    <div id="containermain"> 
      <div id="header">
        <div id="nameplate"> 
    	    <h1> 
    	     Gem fine theatre brilliant club gentlemen <br>
    			purebred, pedigree town home 
    		</h1>
    	</div /* end nameplate */>	
    	<div id="navsearch">
    		<p align="center">
    			<input type="button" onclick="blur();window.print();return false;" value="     Print     " name="Print" style="font-family: Arial; font-size: 8pt">&nbsp;&nbsp;
    	        <input type="button" onclick="document.location.href='/news/techorizonshtm/homepages/index.htm';" value=" Front Page " name="HomeButton" style="font-family: Arial; font-size: 8pt">&nbsp;&nbsp;
    	        <input type="text" name="SearchString" size="20">&nbsp; <input type="submit" value="   Search   " name="SearchButton" style="font-size: 8pt; font-family: Arial">&nbsp;
    	        <input type="button" onclick="document.location.href='mailto:korb, ursula?subject=TECHorizons%20Feedback';" value="Feedback" style="font-size: 8pt"></p>
    		</p>
    	</div /* end navsearch */>	
    	<div id="logo"> 
    	    <h1>Volume 7 Issue 3 Third Quarter, 2004
    	    </h1>
    	</div /* end logo */>	
    
      </div>
      <div id="middle"> 
        <div id="left"> 
          <p>:
          </p>
        </div>
        <div id="right"> 
          <h1>Article Title (Heading 1) 
    </h1>
    		<h1 class="by-line">&nbsp;</h1>
    		<h1 class="by-line"><span style="font-weight: 400"><i>By Michelle*  
    <br>
          June 2004</i></span></h1>
    		<h1 class="by-line"><i>&nbsp;</i></h1>
    		<p><b>This paragraph is bolded. Here's some boring sample text: Caviar, metropolitan sheer expensive doctoral penthouse five-star monogram caviar butler ladies five-star bonds wine. University ballroom on polo sterling town home sport. Fashion using wealth diamond European dynasty silk rare, rich high-rise ambassador luxury.  
    		</b></p>
    		<h2>This template is constructed using CSS layout </h2>
    		<p>Diplomatic theatre first-class status sapphire investments. Metropolitan private imported presidential cruise portfolio panoramic diamond aristocratic. Vacation guests yacht impressive politically echelon travel. Gem fine theatre brilliant club gentlemen purebred, pedigree town home, upper lifestyle, five-star presidential club fine. 
    		</p>
    		<p>Here's a sample bullet list: </p>
    		<ul>
    			<li>cultured, caviar expensive, in penthouse </li>
    			<li>Silk board private, gifted with impressive, ambassador </li>
    			<li>first-class status sapphire investments </li>
    		</ul>
    		<p><i>Authors, notice that these are regular bullets, not a 2-column table with bullets in one row and items in the other. 
    		</i></p>
    		<h2>Another subtitle using Heading 2 </h2>
    		<p>Opera tailored grande, estate, cultured, caviar expensive, in penthouse, cutlery grand opulent polo. Silk board private, gifted with impressive, ambassador, impressive. Stock market bonds accredited champagne status, ambassador cultured, symphony, doctoral ambassador ballroom elegant sterling. *8
    		</p>
              <hr width="90%" align=center noshade color="#FF5252">
        	<p><br>
    		<i>*Michelle is a brilliant marketing 
    		communications professional.</i></p>
            <p class="MsoNormal" align="left"><i>You can reach Michelle at [email 
    		here].</i> &nbsp;
            </p>
          <p>&nbsp;</div>
        <p>&nbsp;</p>
        	<p class="pullquote">Cutlery grand opulent polo. Silk board private, 
    		gifted with impressive, ambassador, impressive. Stock market bonds 
    		accredited champagne status, ambassador cultured, symphony.<br style="clear:both" />
      </div>
      <div id="footer">
        <h3></h3>
      </div>
    </div>
    </body>
    </html>
    dashed outlines are for reference purposes and will be removed.

    UPDATE: i think it is all fixed!! i have replaced the code above with the latest version.

    there are placeholder images for the nameplate, logo and red stripe down the left, unfortunatley, they do not show . i have used a red background colour to fill the void in the left-most column.

    thank you paul, for all you help...(i forgot to look at the new example online last night, i'll do so tonight.)

    one question on the coding. i see once again that you call up a 'centrecontent' div...is this a reference to the * html style for a #centercontent with a height of 1%...in other words, an IEPC thing?

    (END OF UPDATE)

    this is too fun!

    p.s. if anyone sees any extraneous code in ther, feel free to tell me what and where (and why, so i can learn more) and i shall remove it. i have only IEPC6 and IEMAC 5.x, so any compatibility issue reports will be appreciated as well.
    Last edited by mtouchette; Oct 6, 2004 at 08:41. Reason: problem solved, sharing new results.


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
  •