SitePoint Sponsor

User Tag List

Page 48 of 66 FirstFirst ... 3844454647484950515258 ... LastLast
Results 1,176 to 1,200 of 1630
  1. #1176
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    You're welcome

  2. #1177
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    who uses mozilla besides developers? my site statistics show 95 percent of my visitors are on internet explorer.

  3. #1178
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It does depends on the site to some degree but if you take any bank of statistics you will see that mozilla cannot really be ignored.

    http://www.upsdell.com/BrowserNews/stat.htm

    Although statistics can vary wildly they at least do show trends and wherever you look the usage of firefox is going up so it really should be taken into account.

    However, you obviously need to research your own stats and accomodate the visitors you have the best you can and then decide whether to support the minor browsers that visit to your site.

    This is an approach recommended by Eric Meyer.

    http://meyerweb.com/eric/thoughts/20...are-dont-care/

  4. #1179
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chrisOBrien
    who uses mozilla besides developers? my site statistics show 95 percent of my visitors are on internet explorer.
    Be careful in your conclusion. There are browsers out there that will tell you they are IE, but aren't.
    Ed Seedhouse

  5. #1180
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    content moving

    How would u go about fixing the code, so that the text in the middle or the content does not move when you make the page smaller and larger, so that all the content on the page stays where it is no matter the size of the window.

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

    I'm not quite sure what you mean.

    If you wanted a fixed width layout then use one of the fixed width versions then nothing will move at all.

    If you are referring to the content dropping when the screen is re-sized smaller then you could use a min width to hold the screen open before it breaks. You would need to use an expression for ie. There is already an example here:

    http://www.pmob.co.uk/temp/min-max-3col.htm

    Or if you just want to cure the float drop in ie then you could use the content first version which is a little more complicated but doesn't suffer from float drop.

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

    With nearly all fluid layouts there will come a point when the layout will break as that's what flluid layouts do. If you want a fixed width layout then there are examples in the demo.

    Hope that's what you meant

  7. #1182
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi I have a bit of a problem with a site that I am working on and I am trying to get to grips with css.

    The problem is I need to have a footer at the end of my content, I have the footer outside of the container which is set for a faux column on the right I managed to get it to look OK in ie6 but the fuaux colomn will not work in fire fox since I changed the body height to 70% to keep it inside the browser.

    These are the only two browsers which I am worried about for this project as next time I will try and use this technique I am only looking for a quick fix if there is one.

    Links:
    http://www.smartmediacom.co.uk/euro
    http://www.smartmediacom.co.uk/euro/css.htm

    Many Thanks

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

    You haven't cleared the floats:

    Code:
    		<h4>UK EUROTEMPS is a Registered member of REC</h4>
    	</div>
    <div style="clear:both;height:1px"></div>
    </div>
    <div id="footer">
    	<div class="footertext">Uk EURO TEMPS 2006</div>
    </div>
    </body>
    </html>
    (inline styles forexample only)

    See the faq on floats for other less obtrusive ways to clear floats.

    Hope that helps

  9. #1184
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a centered version of this available? i know it kind of is but i keep breaking it

  10. #1185
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Did you mean fixed width centred.
    e.g.

    http://www.pmob.co.uk/temp/3col-centred-template6.htm
    http://www.pmob.co.uk/temp/3col-centred-template.htm

    Or did you mean something else?

  11. #1186
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah thatwas it thanks,

    do you have to use ther bg image to keep the columns equal in length?

  12. #1187
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    think so - tis called a faux column - good article on this here:

    http://alistapart.com/articles/fauxcolumns/

  13. #1188
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    HI,

    You haven't cleared the floats:

    Code:
    		<h4>UK EUROTEMPS is a Registered member of REC</h4>
    	</div>
    <div style="clear:both;height:1px"></div>
    </div>
    <div id="footer">
    	<div class="footertext">Uk EURO TEMPS 2006</div>
    </div>
    </body>
    </html>
    (inline styles forexample only)

    See the faq on floats for other less obtrusive ways to clear floats.

    Hope that helps

    Thanks for this

  14. #1189
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Did you mean fixed width centred.
    e.g.

    http://www.pmob.co.uk/temp/3col-centred-template6.htm
    http://www.pmob.co.uk/temp/3col-centred-template.htm

    Or did you mean something else?
    Hi Paul it's me again
    I don't think that those new 3 cols template are listed on your "menu page" and in general that page isn't so easy to read and to search for a particular template or css thing. Anyway those css template are awesome and it would be nice to have a great menu with all your templates listed

  15. #1190
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Paul it's me again
    Yes, you're right and I never really thought the page would get this much traffic and is in dire need of an upadate. As you say I have better examples that are not linked on that page and I will get around to documenting then and updating the code to cater for ie7 (although most of it does already work fine in ie7 and there are only minor fixes needed.)

    I will need to spend a little more time on it that I did before because I just really used it as a dumping ground for ideas and didn't really care how it looked

    I just have a few projects for other people to finish first and then its my turn

  16. #1191
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Yes, you're right and I never really thought the page would get this much traffic and is in dire need of an upadate. As you say I have better examples that are not linked on that page and I will get around to documenting then and updating the code to cater for ie7 (although most of it does already work fine in ie7 and there are only minor fixes needed.)

    I will need to spend a little more time on it that I did before because I just really used it as a dumping ground for ideas and didn't really care how it looked

    I just have a few projects for other people to finish first and then its my turn
    ok great

  17. #1192
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice job, Paul! Is there anyway to change one of the 2 side columns colors? Is it possible to make one of the columns not and extension of the background?
    David A. -- Hand coder
    Get Firefox


  18. #1193
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Page in question is HERE.

    The headshot is set to "float: right;" but I can't get it to align itself to the top of the "#content" div; the image is aligning itself to the right, but is remaining below the end of the body copy. Anyone?

  19. #1194
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by musicman77
    Is it possible to make one of the columns not and extension of the background?
    In the full height and full width version you need the body background for the column colours. You can use an image on the body (either right or left to have another column colour). The problem with the 100% high version is that you can't nest extra elements because you lose the 100% height. You basically have one shot at 100% height which means you can't use extra nestings to supply the extra colours.

    If you don't want the full height example then you can have 3 column colours as in this example because you don't have to worry about preserving the height.

    http://www.pmob.co.uk/temp/3col/3col-percent-01.htm

    Is that what you meant ?

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

    Floated content must come first in the html before the static content that you want it to align with. Otherwise all floats would end up floating out the top of the monitor no matter where they were.

    Move the float above the text that you want to wrap with.

    Code:
    		</div>
    				<div id="homephotos"><img src="http://www.northshoredesign.com/billiefitzpatrick/images/headshot_black.jpg" alt="Billie Fitzpatrick" /><br />
    		</div>
    <div id="copy">It is my promise as a collaborator and writer to work closely with my clients/authors to understand the nature of their work and/or life. I listen to their voices; I take in their stories and experiences. I then work as a facilitator guiding the organizational process, gathering information, researching, and creating the authorís voice
    			on the page; this step enables me to find the best way for each authorís information to be presented so that it reaches the bookís target audience. In this way, I take my expertise in book organization and structure and match it to an authorís distinctive voice and point of view, creating a book that is uniquely the authorís own.</div>
    	</div>

  21. #1196
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The links are not working. I need to see how this is coded so I could apply it to my next website. 3 column CSS is cool!

  22. #1197
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Jonzal,

    Floated content must come first in the html before the static content that you want it to align with. Otherwise all floats would end up floating out the top of the monitor no matter where they were.

    Move the float above the text that you want to wrap with.
    Now I feel silly.
    Thanks, Paul. Helpful as always.

  23. #1198
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    The links are not working. I need to see how this is coded so I could apply it to my next website. 3 column CSS is cool!
    The servers down for maintenance bute heres the basic code.

    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" />
    <link href="3col.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    * {margin:0;padding:0}
    p{margin-bottom:1em}
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    
    body {
    	background:#f2f2f2 url(leftcolbg.jpg) repeat-y left top;
    	color: #000000;
    }
    #outer{
    	margin-left:130px;
    	margin-right:130px;
    	background:#F8E7EC;
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	margin-bottom:-52px;
    	color: #000000;
    min-height:100%
    }
     
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	background:#FF0000;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    }
    #left {
    	position:relative;/*ie needs this to show float */
    	width:130px;
    	float:left;
    	margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
    	z-index:100;
    	left:-2px;
    }
    #left p, 
    #right p {padding:3px}
    
    #right {
    	position:relative;/*ie needs this to show float */
    	width:130px;
    	float:right;
    	margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
    	left:2px
    }
    
    #footer {
    	width:100%;
    	clear:both;
    	height:50px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background-color: #FF8080;
    	color: #000000;
    	text-align:center;
    	position:relative;
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
    #centrecontent {
    	width:100%;
    	float:left;
    	position:relative;
    	z-index:1;
    	margin:0 -1px;/* moz fix*/
    }
    
    html>body #minHeight{float:right;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
    
    
    </style>
    <!--[if IE]>
    <style type="text/css">
    * html #outer{	height:100%;}
    #minHeight {display:none}
    #left {margin-right:-3px;}/*3px jog */
    #right {margin-left:-3px;}/*3px jog */
    * html #footer {
    	height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    }
    #centrecontent {margin:0}
    
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="minHeight"></div>
    <div id="outer">
    	<div id="clearheader"></div>
    	<!-- to clear header - you could use padding-top instead on the three main elements-->
    	<div id="left">
    		<p>left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : </p>
    	</div>
    	<div id="right">
    		<p>Start Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : Right content goes here : </p>
    	</div>
    	<div id="centrecontent">
    		<!--centre content goes here -->
    		<p>There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer. However
    			if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. The difference can be made up with padding etc.</p>
    		<p style="text-align:center"><strong>For a full explantion follow this<a href="3colfixedtest_explained.htm"> link</a></strong></p>
    	</div>
    	<div id="clearfooter"></div>
    	<!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer">Footer </div>
    <div id="header">Header - No column longest - footer at bottom of window.</div>
    </body>
    </html>

  24. #1199
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Stumped again.
    Page in question is HERE.

    Looks perfect in everything I've tested except IE6.
    In IE6, the pullquote and body copy in the center well are pushed down the page so that they sit beneath the left and right floats (nav and headshot/signature, respectively). Anyone know why? Far as I can tell, I've done the math right.

  25. #1200
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,
    Quote Originally Posted by jonzal
    Stumped again.
    Its the 3 pixel jog on static content next to a float which makes the middle section too big to fit.

    Add this hack then read the explanation in the faq on floats
    /* mac hide \*/
    * html #pullquote,
    * html .copy {height:1%;width:auto}
    /* end hide*/



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
  •