SitePoint Sponsor

User Tag List

Page 41 of 66 FirstFirst ... 3137383940414243444551 ... LastLast
Results 1,001 to 1,025 of 1630
  1. #1001
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In the example you linked to the text color can simply be changed by applying the style to #left.

    It all depends on what and how you have styled the text in #outer originally. If you have something like #outer p {color:blue} then you would have to do similar for #left. e.g. #left p {color:blue}

    You must make sure the element you are targetting has the same or greater weight than the elements before. You can always add !important to the element in question so that it wins out but usually just supplying the correct weighting to the style will suffice.

    I'd need to see your section of code to give you a full answer

  2. #1002
    SitePoint Zealot DuncanM's Avatar
    Join Date
    Apr 2005
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    In the example you linked to the text color can simply be changed by applying the style to #left.

    It all depends on what and how you have styled the text in #outer originally. If you have something like #outer p {color:blue} then you would have to do similar for #left. e.g. #left p {color:blue}

    You must make sure the element you are targetting has the same or greater weight than the elements before. You can always add !important to the element in question so that it wins out but usually just supplying the correct weighting to the style will suffice.

    I'd need to see your section of code to give you a full answer

    Hi, Paul.

    Here's a link to the page on which I am working:

    http://www3.telus.net/thothworks/EigRSvaloCPP0.html

    #outer is styled color:black
    #left is styled color:blue

    However, all text displays as black.

    Regards,


    Duncan

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

    That's a nice link but its all gibberish to me

    e.g.
    Code:
    // EigRSvalo - Program for calculating the Eigenvalues ONLY of a N X N real, symmetric matrix.
    
    #include <iostream>
    #include <fstream>
    #include <cctype>
    #include <cmath>
    #include <new>
    #include <float.h>
    
    using namespace std;
    
    double pythag(double a, double b);
    void Echo(unsigned int N, double** matrix);

  4. #1004
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I'm having a little trouble with the center layout and alignment. I *think* the problem lies with the outer and footer areas, I just don't know how to fix it (I'm sure its something really small that your eyes will be drawn to).

    I'm also having a small problem with the way it looks in IE. The footer seems to want to make its way up the page.

    my html code is:
    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>New Center Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="center.css" rel="stylesheet" type="text/css" media="all" />
    </style>
    </head>
    
    <body>
    
    <div id="outer"> 
      <div id="header"></div>
      <img src="images/content_imagesmall.jpg">
      <div id="left"><h3>Get Your Game...</h3><img src="images/smallboxcover.jpg" style="float:left";>
      The rest of the content with details and stuff will go here. It will of course change depending upon what we've got on offer.
    	<br>
    	<br>
    	<p>More stuff about getting a hold of the game will be here. Competition questions and email address to send the answer to.
    	<h3>Have your say..</h3>
    	<p>I'm wanting to get polls going on the main page of the site. Creating a talking topic and link it to the forum.</div>
      <div id="center"><h3>Relegation Fighter Info!</h3>
    	<p>Check out the latest goings on in the clan by going to *insert link to forum here*. If you would like to become part of the clan you can leave your contact details on the sign up section and we'll be in touch!
    	<p><h3>Cool Title</h3> Filler text here and here and here and here and here and here and here and here and here and here and here and here and here and here and here and here.  </div>
      <div id="right"><h3>Get to know Worldwide Soccer Manager</h3>
      <p>If you're new to the game and you're a little overwhelmed by what you're seeing on your screen, panic no longer. Our indepth guide will get you into shape in no time - it'll be as familiar as walking the dog.
    	<h3>Title Here</h3>
    	<p>Listen up fool, these games kick butt, and Mr T wouldn't want you to disappoint him now would he? Put more filler text here. Blah blah blah</div>
      <div id="clearfooter"></div>
      <div id="footer">Yoo hoo is there any legal info here?</div>
    </div>
    </body>
    </html>
    css code:
    Code:
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    
    body {
    	padding:0;
    	margin:0;
    	background:#fff url(bigfade.jpg) repeat left top;
    	color: #000000;
    	text-align:left;
    	font-family: Verdana, Arial, Geneva, sans-serif;
    	font-size:small;
    }
    #outer{
    	height:100%;
    	min-height:100%;
    	width:700px;
    	background:#fff;
    	color: #000000;
    	margin:auto;
    	position:relative;
    }
    #outer p {padding-left:3px; padding-right:3px}
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header {
    	background:url(images/header_small.jpg);
    	height:65px;
    	margin-left:3px;
    	margin-right:3px;
    }	
    #left {
      position:relative;
      float: left;
      width: 220px;
      height: 300px;
      padding: 3px;
      background-color: #fff;
      border-right:1px dotted #bbb;
    }
    #right {
      position:relative;
      float: left;
      width: 222px;
      height: 300px;
      padding: 3px;
      background-color: #fff;
      border-left:1px dotted #bbb;
    }
    #center {
      float:left;
      width: 220px;
      height: 300px;
      padding: 3px;
      background-color: #fff;	
    }
    #footer {
    	position:absolute;
    	bottom:0px;
    	left:0px;
    	background:#fff;
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:x-small;
    	font-weight:normal;color:#888;
    	height:40px;
    	border-top:1px solid #ccc;
    	width:98%;
    	margin-left:1%;
    	margin-right:1%;
    }
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    Last edited by XiledWeb; Mar 6, 2006 at 19:08. Reason: include url

  5. #1005
    SitePoint Zealot DuncanM's Avatar
    Join Date
    Apr 2005
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Duncan,

    That's a nice link but its all gibberish to me

    e.g.
    Code:
    // EigRSvalo - Program for calculating the Eigenvalues ONLY of a N X N real, symmetric matrix.
    
    #include <iostream>
    #include <fstream>
    #include <cctype>
    #include <cmath>
    #include <new>
    #include <float.h>
    
    using namespace std;
    
    double pythag(double a, double b);
    void Echo(unsigned int N, double** matrix);

    Hi, Paul.

    I don't expect you to understand the C++ code posted on that page, but if you view the source code for that page, you should be able to see the style sheet (your two-column stylings).

    I cannot figure out how to give the line numbers on the left a blue colour, to distinguish them from the source code itself.

    -- Duncan

  6. #1006
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I don't expect you to understand the C++ code posted on that page
    lol - My brain wasn't in gear last night - sorry

    The answer is simple anyway - you just missed a semi-colan here:

    Code:
    #left {
     position:relative;/*ie needs this to show float */
     width:60px;
     float:left;
     margin-left:-59px;/*must be 1px less than width otherwise won't push footer down */
     left:-1px;/* line things up exactly*/
     color: blue;
    }
    It will work now

  7. #1007
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by xiledweb
    The footer seems to want to make its way up the page.
    You have set the left side to have a height of 300px only and therefore any content over 300 px height will be ignored by mozilla as though it wasn't there (even though it spills out of the div.) Remove the height or use min-height for mozilla instead and just give the height to ie6 and less (not ie7 as it doesn't work with either.)

    What as the other problem exactly?
    Code:
    #left {
      position:relative;
      float: left;
      width: 220px;
     /* height: 300px;remove this*/
      padding: 3px;
      background-color: #fff;
      border-right:1px dotted #bbb;
    }

  8. #1008
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B

    What as the other problem exactly?
    Check out the alignment between the header and main content area, it's off by several pixels. Unless it's my eyes...

  9. #1009
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Check out the alignment between the header and main content area, it's off by several pixels
    You'll have to be more specific as I can't see any problems with the header and the content but then of course I don't know what you want it to look like anyway

    The code is pretty simple with 3 floats across the page so theres not a lot to go wrong. I can't see any alignment issues as such.

    If you can explain where the alignment is out and exatly what the alignment should be then it may all become clear to me

  10. #1010
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The header image is about 4 to 5 pixels right of where image underneath it (and the rest of the content area) is.

  11. #1011
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,
    I am building a site based off of the 3 col centered demonstration. It is exactly what I needed and since I am fairly new to CSS design, it has been a fantastic building block.

    I had a problem but I just figured it out so this is just to say thanks.

    still-waiting
    Last edited by still-waiting; Mar 7, 2006 at 17:58. Reason: Grammer

  12. #1012
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The header image is about 4 to 5 pixels right of where image underneath it (and the rest of the content area) is.
    That was very difficult for me to spot until you actually pointed me to it

    There is nothing wrong with the code and the reason I saw nothing wrong because everything is exactly where you have placed it

    You have moved the header central in its container. The container is 700px and the header is 694px and you have moved the header to the left by 3px to bring it central.

    However the image under the header is also 694px wide and you have made no allowances to center that image so it sits to the left on the edge of its container as expected.

    The 3 floated columns of text are 682px wide which means they are 18px short of 700px and therefore there is a gap to the right.

    This is just simple housekeeping and you must be thorough in your application of sizes and positions .

    Give the image under the header a class and then give it a 3px left margin. Then add 9px left margin to #left which will bring all those columns central.

    e.g.

    Code:
    .pic{margin-left:3px}
    #left {
      position:relative;
      float: left;
      width: 220px;
      padding: 3px;
      background-color: #fff;
      border-right:1px dotted #bbb;
      margin-left:9px;
     display:inline;
    }
    Code:
    <div id="outer">
     <div id="header"></div>
     <img class="pic" src="http://www.americansportsgamer.com/t...imagesmall.jpg">
     <div id="left">
    Hope that helps

    Quote Originally Posted by still waiting
    had a problem but I just figured it out so this is just to say thanks.
    You're welcome

  13. #1013
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    That was very difficult for me to spot until you actually pointed me to it

    There is nothing wrong with the code and the reason I saw nothing wrong because everything is exactly where you have placed it
    Whew! Glad to hear it.


    This is just simple housekeeping and you must be thorough in your application of sizes and positions .
    .

    Point taken and duly noted. Thanks again Paul.

  14. #1014
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I have a problem. I just installed IE7 Beta 2 (yes I know it is beta )
    and it broke my ul based navigation. I attached a picture. I will work on getting my code up if someone else want's to give a shot at figuring it out. MS recommends removing hacks in preperation for IE7 so I commented all of the IE hacks 1 at a time and it didn't make any difference.

    still-waiting

    The picture on the left is IE7 and the right is FF 1.5
    Attached Images Attached Images

  15. #1015
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The picture on the left is IE7 and the right is FF 1.5
    Without seeing the code I can't really give any advice except to say that coding for ie7 at the moment is like trying to hit a moving target. You should be aware of the problems but don't specifically code for them yet as things will be changing considerably before ie7 makes it into the real world.

    It looks as though the font sizing is out for a start and you should check that you aren't offering ie7 any specific code yet. Are you working in standards mode because the * html is accepted in quirks mode and you may be giving ie7 stuff it doesn't need.

    You should also post in a new thread as others are more likely to see your post as this post will only be seen by subscribers etc

  16. #1016
    SitePoint Zealot DuncanM's Avatar
    Join Date
    Apr 2005
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lol - My brain wasn't in gear last night - sorry

    The answer is simple anyway - you just missed a semi-colan here:

    Code:
    #left {
     position:relative;/*ie needs this to show float */
     width:60px;
     float:left;
     margin-left:-59px;/*must be 1px less than width otherwise won't push footer down */
     left:-1px;/* line things up exactly*/
     color: blue;
    }
    It will work now
    That worked!

    Thanks, Paul.

    I can't believe I overlooked that mistake. Even more amazing: you found it so quickly (how did you do that?).

    -- Duncan

  17. #1017
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    how did you do that
    Years of practice lol

    (Oh - and the line underneath shows up in a different colour in DW when you miss something out above)

  18. #1018
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awsome thanks, I'm gonna try it out on my new website I'm making

  19. #1019
    SitePoint Enthusiast SТОRМ's Avatar
    Join Date
    Sep 2004
    Location
    Ukraine
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    I`ve used Paul`s examples to create a site for a client, it works in IE 5, 5.5 and 6, but it has serious problems with Firefox and Opera, didn`t test it in Netscape but I assume it has problems with it too. It validates as xhtml 1.1 though =) Here is a link. If someone will have any ideas about what`s wrong with this site I would be very glad to hear them.

    Thank you.
    Last edited by SТОRМ; Mar 12, 2006 at 12:12.

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

    If someone will have any ideas about what`s wrong with this site I would be very glad to hear them.
    The answer is simply that you used tables instead of css. if you are going to use that many tables then you may as well have done the whole thing in a table lol

    I don't usually debug table layouts because lifes too short and I don't use tables apart from tabular data anymore so my skills with tables have lapsed.

    However I'll make an exception and fix your layout allthough it has nothing to do with my layout at all

    The first problem is that you need to set the images to display:block so that they fit snug in the table cells otherwise thay are treated as text and room is left for non-existant descenders.

    Add this to your css:

    Code:
    img {display:block}
    The second problem is that you have added rowspan="0" which makes no sense to me and removing it fixes all the other issues in one go

    Remove this part in bold.
    Code:
    	  <td rowspan="0"><img src="http://www.eisen.ru/rus/media/image/..._part_over.gif" width="20" height="24" alt="" /></td>
    	  <td rowspan="3"><img src="http://www.eisen.ru/rus/media/image/...r_middle_1.gif" width="221" height="72" alt="" /></td>
    	  <td rowspan="3"><img src="http://www.eisen.ru/rus/media/image/...r_middle_2.gif" width="241" height="72" alt="" /></td>

    The third problem is that you have some weird characters appearing above the doctype and above the stylesheet which is killing the first style in the stylesheet (firefox only chows these characters.)

    Code:
    пї*
    {
     margin: 0;
     padding: 0;
    }
    The same appears above the doctype and in fact your page won't validate because of these problems.

    Quote Originally Posted by w3c
    Sorry, I am unable to validate this document because on line 96, 98 it contained one or more bytes that I cannot interpret as windows-1251 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
    Also as you are using an xhtml 1.1. doctype further reading is available here:

    http://dionidium.com/2003/09/00112

    That should fix your major issues with any luck

  21. #1021
    SitePoint Enthusiast SТОRМ's Avatar
    Join Date
    Sep 2004
    Location
    Ukraine
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul - you are the GOD !

    Your advices helped a lot, thank you very very much and if you don`t mind I would ask some more questions

    1) What can I use instead of tables for the images, maybe you can give me some links to tutorials or sites that are tableless but with a lot of images.
    2) This display: block thing broke my css rollovers (2 little flags on the top of the header) in IE and Opera, if you will open the site with IE or Opera and move you cursor to them they will flash instead of rollover, but everything okay with them in FireFox.
    3) Another little FireFox problem: if you will look at the footer you will notice that one part of it is on the left (an image called right_inborder_bottom), dunno what is causing this, everything is okay in IE and Opera.

    That`s it and about this little weird character - it appears becouse my webserver always sends header with windows-1251 encoding and I am using utf-8, I already wrote a letter to my hosting company and they told me that they will fix this on monday.

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

    1) For that header you could simply have used one div and 1 background image. There is little need to slice that image into many parts. You can place any rollovers like your flags absolutely into place on top of the image. You just set position:relative on the parent and create a local stacking context.

    2) You need to set the anchor to display:block also and give it a dimension.
    Code:
    #lseleng a, #lselrus a{display:block;height:16px}

  23. #1023
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    3)

    Put the bottom 2 images in a table of their own.
    Code:
       <table cellpadding="0" cellspacing="0">
    	<tr>
    	 <td><img src="http://www.eisen.ru/rus/media/image/...der_bottom.gif" width="16" height="18" alt="" /></td>
    	 <td><a href="#top"><img src="http://www.eisen.ru/rus/media/image/common/top_left.gif" width="18" height="18" alt="РќРРІРСЂС" /></a></td>
    	 <td colspan="2"><img src="http://www.eisen.ru/rus/media/image/...een_arrows.gif" width="414" height="18" alt="" /></td>
    	 <td><a href="#top"><img src="http://www.eisen.ru/rus/media/image/.../top_right.gif" width="18" height="18" alt="РќРРІРСЂС" /></a></td>
    	 <td ><img src="http://www.eisen.ru/rus/media/image/...der_bottom.gif" width="16" height="18" alt="" /></td>
    	</tr>
    	<tr>
       </table>
       <table cellpadding="0" cellspacing="0">
    	<td><img src="http://www.eisen.ru/rus/media/image/underwater/footer_1.gif" width="241" height="33" alt="" /></td>
    	 <td><img src="http://www.eisen.ru/rus/media/image/underwater/footer_2.gif" width="241" height="33" alt="" /></td>
    	</tr>
       </table>
    

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

    your 100% height won't work in mozilla because it will only be 100% high. (re-read my demo and see the faq on 100% for the why and wherefore )

    You will need to change the code as follows.

    Code:
    #outer
    {
     width: 802px;
     min-height: 100%;
     margin-left: auto;
     margin-right: auto;
     background-image: url(http://www.eisen.ru/rus/media/image/.../outerback.gif);
     position: relative;
    }
    * html #outer{height:100%;}
    #wrapper
    {
     width: 788px;
     margin-left: auto;
     margin-right: auto;
    }
    #footer
    {
     bottom: 0px;
     left: 216px;
     width: 482px;
     height: 51px;
     position: absolute;
    }
    it won't work in ie7 until they implement min-height.

  25. #1025
    SitePoint Enthusiast SТОRМ's Avatar
    Join Date
    Sep 2004
    Location
    Ukraine
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for everything Paul, it seems I own you a lot of beer

    Now everything looks perfect, well actually I had a problem with IE after I implemented your fix from last post, the problem was that if you resize a window - footer stays at the bottom but the whole site is not 100% high, but I fixed it with this:

    * html #wrapper { height: 100%; }

    Now it works, hope I did it right

    P.S. Ahh just checked site with IE 5.0 and those flag rollovers doesn`t work now, but in IE 5.5 everything is fine, but I think that`s not a big deal
    P.P.S. I will definitely try to remake this site without tables, thanks for everything again and good luck.


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
  •