SitePoint Sponsor

User Tag List

Page 5 of 66 FirstFirst 1234567891555 ... LastLast
Results 101 to 125 of 1630
  1. #101
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Matt,

    When you float an element the floated element must come before the content you want to float around.

    Therefore you just need to change the order of your html.
    Code:
    <div id="container"> 
      <div id="header">
    	 <div id="datebar"><!--#include file="javascript/datebar.js" --></div>
       <div id="headerlogo"><img src="images/websitelogoface.gif" /></div>
      </div>
    </div>
    The date must come first as a floated element only floats on the level it is on. It won't rise up above the content above it.

    Paul

  2. #102
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi r2d2,

    I've only looked at this quickly as I am just off out and I will look later if this doesn't solve your problem

    To get the full width top border just move the clear header up in the html to this position.
    Code:
    <div id="outer"> 
    	<div id="clearheader"></div>  <!-- to clear header -->
      <div id="left">
    Then remove the 72px padding from the left and right columns and it should look fine.

    Yes Ie is a pain with the extra pixels. You can give the #centrecontent a float which should reduce the padding but I don't think you'll need it if you follow the above instructions.

    Alternatively you will just have to even the padding up to match mozilla using the child selector or star selector.

    Hope that helps.

    Paul

  3. #103
    SitePoint Guru r2d2's Avatar
    Join Date
    Dec 2003
    Location
    In my van, fool!
    Posts
    647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you're a genius! The first suggestion worked nicely, thanks.

  4. #104
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Great design. I noticed that on your links when I mouse over a box pops up with an
    image. Is it possible to do something like that with a text box. For instance, a
    word and then on mouse over it gives you a box with a definition of the word?
    If so, how do I do that?
    Thanks,
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  5. #105
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Yes you can pop up a message but you have make the word a link as ie only understands hover on links.

    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    div#tips a  {
     text-decoration:none;
     border-bottom:2px solid green;
     color: #FF0000;
    }
    div#tips a:hover {
     color: #666666;
     background: #FFFFCC;
     text-decoration: none;
    }
    div#tips a span {display: none;}
    div#tips a:hover span {
     display: block;
     position: absolute;
     left: 10%;
     width: 200px;
     padding: 5px;
     margin: 10px;
     z-index: 100;
     color: #0000CC;
     background: #FFFFCC;
     font: 10px Verdana, Arial, Helvetica, sans-serif;
     text-align: center;
     border: 1px solid #666666;
     text-decoration: none;
    }
    div#tips p {position:relative}
    </style>
    </head>
    <body>
    <div id="tips"> 
      <p><a href="#"> <strong>Mouse over here </strong><span>(Message 1 ) </span></a></p>
      <p><a href="#"> <strong>Mouse over here </strong><span>(Message 2 ) </span></a></p>
      <p><a href="#"> <strong>Mouse over here </strong><span>(Message 3 ) </span></a></p>
      <p><a href="#"> <strong>Mouse over here </strong><span>(Message 4 ) </span></a></p>
      <p><a href="#"> <strong>Mouse over here </strong><span>(Message 5 ) </span></a></p>
      <p></p>
    </div>
    </body>
    </html>
    The span is hidden initially and then on hover it is displayed. IE (again) has some problems in that you need to change some attributes on hover otherwise the effect doen't take place.

    If you keep close to my example then it should work for you if you change anything.

    Paul

  6. #106
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. I haven't had time yet to
    try this, but will do so within the next couple
    of days. I will let you know how it works.
    Basic
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  7. #107
    SitePoint Zealot TCJeter's Avatar
    Join Date
    Jun 2002
    Location
    Anchorage, AK
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,

    Thanks loads for the 3-column layout! I am using a modified version of it for a current site update, but had a question about how (I have) the header setup.

    In IE6 everything is hunky-dory, but in Firebird the header image I am using gets displaced downward about 15px. I was wondering anyone could take a look at my example and see what I can do to get around the displacement?

    Any help appreciated - thanks.
    -TC

  8. #108
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Paul, thank you, it worked like a charm. Here is the
    test page I used it on:
    http://www.pspublishing.com/test/text-popup.html

    I have been looking for how to do this for a long
    time. Thank you, thank you.
    Basic
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  9. #109
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI Tc
    Any help appreciated - thanks.
    -TC
    It's the default margins on the h2 heading tag that mozilla applies by default.

    Try this:
    Code:
    h2#subtitle {margin: 0}
    I like your use of my layout - send me the url when you are finished as I want to link to pages that have used the layout as examples (if you don't mind that is).

    Paul

  10. #110
    SitePoint Zealot TCJeter's Avatar
    Join Date
    Jun 2002
    Location
    Anchorage, AK
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bam!

    Try this:
    Code:

    h2#subtitle {margin: 0}
    Like a charm!
    Thanks Paul - I'll send that link soon. I'm working on sorting out the PHP/MySQL facets right now, but should be there in a week or so.

    Thanks again!
    -TC

  11. #111
    Add new title here.. john's Avatar
    Join Date
    Jul 1999
    Location
    Amsterdam, The Netherlands
    Posts
    259
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Hi Paul,

    I have been trying to get this http://www.pmob.co.uk/temp/3colcentred_2a.htm layout aligned left instead of centered. I can't get it working. Any suggestions?

    John

  12. #112
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Just take out the margin-autos and the text align in the body.

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

    css
    Code:
    html, body {height:100%}
    body {
     padding:0;
     margin:0;
     min-width:760px;
     background-color: #F2E3EE;
     background-image:  url(images/centredbg.jpg);
     background-repeat: repeat-y;
     background-position: left center;
     color: #000000;
    }
    #outer{
     height:100%;
     min-height:100%;
     width:758px;
     border-left:1px solid #000;
     border-right:1px solid #000;
     color: #000000;
     text-align:left;
     margin-bottom:-52px;/* make room for footer */
     position:relative;
    }
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #innerwrap {/* enables content first */
     float:left;
     width:628px;
    }
    #header{
     position:absolute;
     top:0;
     left:0;
     width:758px;
     height:70px;
     background:#FF0000;
     border:1px solid #000;
     overflow:hidden;
     color: #000000;
     z-index:100;
    }
    #left {
     position:relative;/*ie needs this to show float */
     width:130px;
     float:left;
     padding-top:72px;/*needed to make room for header*/
     padding-bottom:32px;/* needed to make room for footer */
    }
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:3px;padding-right:2px}
    #right {
     position:relative;/*ie needs this to show float */
     width:130px;
     float:right;
     padding-top:72px;/*needed to make room for header*/
     padding-bottom:32px;/* needed to make room for footer */
    }
    #footer {
     width:758px;
     clear:both;
     height:50px;
     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 */
    }
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    #centrecontent {
     width:498px;
     float:right;
     padding-top:72px;
     padding-bottom:32px;/* needed to make room for footer */
    }
    * html #ieclear {width:100%;height:52px} /* for ie to clear footer */
    Note that the three column colours are all done with a bg gif. This was because of the centring. However if you refer to the main 3col demo you will be able to have the outer columns coloured normaly (but they will have to be the same colour) and the centre column a different colour. Then one of the columns can be coloured differently using a repeating bg gif.

    Hope that helps.

    Paul

  13. #113
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I tried the 3-column layout and my header keeps winding up
    at the bottom. What am I doing wrong? here is the page
    http://www.pspublishing.com/test/3col-org-swrl.html
    Let me know if you need to see the css, I retyped your code I thought
    just like you had it except for I changed the colors. I like to retype
    that way I have to concentrate on what the code is saying.

    Thanks for your help,
    Basic
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  14. #114
    SitePoint Zealot basicwebus's Avatar
    Join Date
    Jul 2003
    Location
    Missouri
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, I found the problem. I had put /# for a comment instead of /*
    Works fine now.
    Basic
    After the third time of reading the instructions,
    it finally soaks in to my thick skull.



  15. #115
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question on '3 col layout with equalising columns and footer"

    Hi Paul. Great stuff this.

    I have a question about your '3 col layout with equalising columns and footer': is it possible to have a background image on BOTH of the left and right columns?

    I know you can place a background image in the left, as the demo on your site shows, but I was hoping to put a background image in both columns.

    The site I made (for some friends) is here, and I want to put a graphic as background in column 'right' and 'left'.

    Thanks again for the great design Paul.
    Last edited by Krieger; Mar 7, 2004 at 11:37.
    Verwüstung rufen und des Krieges Hund' entfesseln!

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

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

    I have been using the 2 col centred layout for a new site, but is there a way to display the mainnav exactly where it displays now, but so that the content appears before the mainnav in the structure?
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  17. #117
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Kreiger,
    I want to put a graphic as background in column 'right' and 'left'.
    I've just played around with this and you will need to add another wrapper to the whole layout to get another bg image. You can't use the right float because it won't hold the 100% height when the screen expands lengthwise.

    Heres an example and all the code is in thead as usual for you to look at.

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

    You may need to test it on the other browsers mentioned but I've tested it on ie6 and firebird and it seems ok.

    Hope that helps.

    Paul

  18. #118
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI Pacman,

    If you float the maincontene as well then you can move it to first in the html. There is an example of a three column layout in the demos that has content first.

    Heres the layout applied to one of the simpler 2 col layouts (not 100% height).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
     margin:10px;
     padding:10px;
     background:#FFF;
     color:#000;
     text-align:center;/*centre for ie5 */
    }
    #container {
     width:750px;
     background:#D1DCE9;/*this colour will be left column colour */
     margin:auto;/* centre for compliant browsers*/
     text-align:left;
     border:1px solid #000;
    }
    #header {
     height:50px;
     border-bottom:1px solid red;
     background:#ffffCC;
     text-align:center;
    }
    #left {
     margin-left:-169px;/*must be 1 pixel less than width */
     float:left;
     width:170px;/* this width is the same as the margin on #middle */
     position:relative;
    }
    #left p {padding-left:5px}
    #middle {
     border-left:1px solid red;
     border-right:1px solid red;
     background:#6FACD0;/* background colour of right column */
     margin-left:170px;/*this is the space for the left column */
    }
    * html #middle {height:1%}/* combat ie's 3 pixel jog */
    #footer {
     clear:both;
     border-top:1px solid red;
     border-bottom:1px solid red;
     height:50px;
     background:yellow;
     text-align:center;
    }
    h1,h3,p {margin-top:0}
    #rightfloat {float:right;width:575px}
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="header"> 
    	<h1>Header</h1>
      </div>
      <div id="middle"> 
      <div id="rightfloat">
     <p>2 column layout with borders and 2 column colours (no background images 
    	  required). Either column can be the longest and the columns will equalise.</p>
    	<p>Middle Content : Middle Content : Middle Content : Middle Content : Middle 
    	  Content : Middle Content : Middle Content : Middle Content : Middle Content 
    	  : Middle Content : Middle Content : Middle Content : Middle Content : Middle 
    	  Content : Middle Content : Middle Content : Middle Content : Middle Content 
    	  : </p>
      </div>
      <div id="left"> 
    	<p>Left Content : Left Content : Left Content : Left Content : Left Content 
    	  : Left Content : </p>
    	<p>Left Content :</p>
    	<p>Left Content :</p>
    	<p>Left Content :</p>
    	<p>Left Content :</p>
      </div>
      <br style="clear:both" />
    </div>
    <div id="footer"> 
      <h3>Footer | <a href="3colfixedtest_4.htm">Back to Main Demo</a> | Footer</h3>
    </div></div>
    </body>
    </html>
    Hope that's what you wanted.

    Paul

  19. #119
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    I was not clear in my original message. I actually want a graphic background for all three center columns.

    But...

    With minimal changes, one of your other templates did the job just fine. I found that I could use a single graphic in the body container and it filled both side columns while allowing for a different background in the outer container.

    You can see the effect here.

    It works great. I'll keep tweaking the one mentioned above (with the extra wrapper) to see if I can use a separate background for all three 'middle' columns.

    Thx much.
    Verwüstung rufen und des Krieges Hund' entfesseln!

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

  20. #120
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Yes the left and right columns use the background of the body so you can apply one image to the body to do both.

    The centre column colour is from the element #outer so applying a background to that should give you your middle column bg.

    You won't need the wrappwer div unless you want a different side image.

    The page seems to be taking shape - let me know when it's finished as I might link to pages in this thread that have used it (if you don't mind that is).

    Paul

  21. #121
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *
    Great idea. I'll post here when the site is rolled out. I'm writing some php for the back end, so it will be a few days yet.

    I thinks it's a good way to show off your technique, and how it can be adapted.
    Verwüstung rufen und des Krieges Hund' entfesseln!

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

  22. #122
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - I'll have a play around with the centred layout later.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  23. #123
    SitePoint Member
    Join Date
    Jan 2004
    Location
    Canada
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for sharing the css layouts... I intend to use one of these soon

    Just a few notes...

    Konqueror doesn't like any of the footers unless the footer is relative...

    Konqueror cannot render the `3col layout with content first` properly. It places the left column farther down (as if there were many <br />'s) making the upper most part of the left column level with the lowest part of the middle column. I would hazard a guess that Safari exhibits this also as it's renderer is based on Konqueror's....

    It's too bad the `content first` one didn't render properly, as that layout degraded nicely in a text browser...

    Thanks again

  24. #124
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks for the notes on Konqueror but I had suspected that mac browers may have problems with some of the layouts.

    Cheers

    Paul

  25. #125
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, this thread is an incredible resource.

    Excellent work, 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
  •