SitePoint Sponsor

User Tag List

Page 10 of 66 FirstFirst ... 678910111213142060 ... LastLast
Results 226 to 250 of 1630
  1. #226
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    Greenville, SC
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul, that does help, a ton. Here is the final layout: http://www.cyberpatch.net/jonas/sced...ceda_home.html

    Works on IE, Netscapes 6 & 7, Mozilla, and firefox. I have a strange little bug on the navbar however in ie 5.5 .

  2. #227
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    have a strange little bug on the navbar however in ie 5.5 .
    ie5.5 has funny margins on lists so the following code should siort it out.

    Code:
    .menu_master_ul {
     padding:0px; 
     margin:0;
     border:0px solid black; 
     width: 147px;  
    }
    * html .menu_master_ul {margin-left:-16px;ma\rgin-left:0 }
    Paul

  3. #228
    SitePoint Enthusiast
    Join Date
    Jan 2004
    Location
    Cali
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I used your 3 column design for my website and I have a question.

    The page looks fine at a 1024x768 screen resolution, but when I go any lower, the center drops under the menu buttons.

    Any idea?

    My site : http://www.trafficazine.com

    Css: http://www.trafficazine.com/trafficazinestyle.css

    Thanks,
    Eric
    Last edited by eric996; May 10, 2004 at 03:24.

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

    The centre content drops down because you have made the bottom table too wide (100% +25% margin each side). This causes the centre to drop too early. (Look in firebird and you will see that the table goes off the screen).

    The second problem is that the google add is 468px wide and once the container is reduced to that size the float will drop (in iE) to try and make room. This is a problem with floats in ie and its best not to use images that are too large.

    These couple of tweaks will solve the table problem and allow the page to get a bit smaller before it drops.

    Code:
    .examplebox {
    font: normal normal bold 90% Arial, Helvetica, sans-serif;
    color: #CCCCCC;
    background: #006699;
    border: 3px ridge #075d74;
    padding: 4px;
    text-align: center;
    width:49%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    }
    #ad {
    margin-left:-50px;
    margin-right:-50px;
    text-align:center;
    margin-top:10px;
    }
    * html #left {margin-right:-3px}
    The html below in bold should replace the content that you have there already. So find the right place the (non bold bit) and replace all the content bewteen with the code in bold below.
    html
    Code:
    	 section, or become a subscriber by submitting your information below. </p>
    	<div style="text-align:center">
    <div class="examplebox"> 
    	<table width="100%" border="0" align="center" cellpadding="2">
    	 <tr> 
    		<td align="left" valign="middle"> <table width="95%" border="0" align="center" cellpadding="2" cellspacing="3" >
    			<tr> 
    			 <td align="left" valign="top"> <p class="examplebox" style="width:100%"> YES, Please 
    				 Subscribe Me To: <br>
    				 <br>
    				 <font color="#FFFFFF"><b><u>The TrafficaZine Online Marketing 
    				 Newsletter</u></b> </font> <br>
    				 <br>
    				 Where I can get tons of useful tips and tricks to advance and 
    				 better my online business. <br>
    				 <br>
    				<form method="post" action="http://www.autoresponsewizard.com/cgi-bin/maxuseradmin.cgi" >
    				 <table width="50%" border="1" cellpadding="4" cellspacing="1" align="center" bgcolor="#CCCCCC">
    					<tr> 
    					 <td width="100" valign="top" bgcolor="#006699"> <div align="right">Name</div></td>
    					 <td width="150" valign="top" bgcolor="#006699"> <input type="text" name="firstname" size="30" maxlength="50"> 
    					 </td>
    					</tr>
    					<tr> 
    					 <td width="100" valign="top" bgcolor="#006699"> <div align="right">E-Mail</div></td>
    					 <td width="150" valign="top" bgcolor="#006699"> <input type="text" name="email" size="30" maxlength="50"> 
    					 </td>
    					</tr>
    					<tr> 
    					 <td colspan=2 bgcolor="#006699"> <center>
    						 <p> 
    							<input type="hidden" name="function" value="customer2">
    							<input type="hidden" name="un" value="traffica">
    							<input type="submit" name="Submit" value="Subscribe">
    							<br>
    							<font color="#FFFFFF" size="2">By subscribing to the 
    							TrafficaZine Online Marketing publication, you agree 
    							to receive both in-house and third party advertisements 
    							from sponsors and supporters. </font> </p>
    						</center></td>
    					</tr>
    					<tr> 
    				 </table>
    				</form></td>
    			</tr>
    		 </table></td>
    	 </tr>
    	</table>
    </div>
    </div>
    	<p id="ad"> 
    	 <script type="text/javascript"><!--
    That should make the page behave better. If you are going to use large images in the centre then you may be better off using the content first version from my demo which floats the centre first and so it won't drop (but the side column might dtrop which isn't so noticable).

    You should also keep your code tidy as you go and keep running it through the validator to fix errors as you go. In a couple of places you have wrapped tables inside <P> tags which is not allowed.

    I also note that you are using a partial doctype which means ie works in quirks mode. While this is ok you should be aware that the box model hack doesn't work for ie in quirks mode. it works for ie5 and 5.5. but not for ie6.

    Hope that helps.

    Paul

  5. #230
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi Paul,

    I have decided to give up on trying to create my own 3 column layout and use yours instead:

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

    Anyway my question was would it be possible to give this layout margins on the left and right, say about 50 pixels (or 5% ) on each side and have the a 5 pix border on the left and right? And that space on each side get a different background colour to the columns themselves?

    I would appreciate some quick advise to get me on the right track.

    Thanks a lot

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

    Probably the easiest way would be to create a bg gif with the borders and spaces already on it.

    Something like this example:

    http://www.pmob.co.uk/temp/ezora.htm

    The column uses this background gif:

    http://www.pmob.co.uk/temp/images/ezoralbg.gif

    This is the simplest approach. You could mess about with body padding/margins to create the space but the gif would be simpler.

    Hope that helps but shout if you want something more specific.

    Paul

  7. #232
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Probably the easiest way would be to create a bg gif with the borders and spaces already on it.

    Something like this example:

    http://www.pmob.co.uk/temp/ezora.htm

    The column uses this background gif:

    http://www.pmob.co.uk/temp/images/ezoralbg.gif

    This is the simplest approach. You could mess about with body padding/margins to create the space but the gif would be simpler.

    Hope that helps but shout if you want something more specific.

    Paul
    This will work perfectly.

    You are a legend, Thank you so much

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

    Here you go Paul...

    PaulO'B...
    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
    Paul,
    Well, it's been a little while longer than I thought it would be, but I wanted to let you know that I got my site up and running - feel free to link to it.

    Two other questions about minor tweaks:
    As you can see at the bottom of the footer (in IE - on any of the pages) there is about 1-2px worth of a gap that you can see the content 'behind' the footer...any tips on how I might go about fixing this?? In Firefox it shows just fine.

    Also, whilst viewing the site in Firefox, I noticed that my 'specials' section to the right is shifted slightly to the left - just enough to cover the vertical border - any thoughts on that one?

    To be honest, I think I edited the core just beyond the point of no return (my current skill level) and need help getting it back in line.

    Thanks again for this layout - I really appreciate it.

    -TC

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

    Ir has a re-draw rounding problem on the bottom of the window however your problem can be fixed to some extent because you have set the incorrect line-hieght in the footer.

    Code:
    #footer {
     font-size:10px;
     line-height:25px;
     width:100%;
     clear:both;
     height:25px;
     border-top:2px solid #039;
     background:#d6d6c6;
     color: #039;
     text-align:center;
     position:relative;
    }
    Then make sure the negative margin-bottom in outer is set to 27px (25px height + 2px borders).
    Code:
    #outer{
     height:100%;
     min-height:100%;
     margin-left:140px;
     margin-right:130px;
     background:#fff;
     margin-bottom:-27px;
     color: #000000;
     border-right:1px solid #BB421C;
     border-left:1px solid #BB421C;
     background-image:url(http://www.exploretours.com/images/compass_fade.jpg);
     background-position:bottom right;
     background-repeat:no-repeat;
    }
    The table in the right column needs to be a bit smaller so reduce the size slightly.
    [code]
    <div id="right">
    <p><strong>Related Info/strong></p>
    <table width="95%" align="center" bgcolor="#eeeeee">
    <tr bgcolor="#d6d6c6">
    <td width="100%" height="22" align="center"><strong>Special Offers/strong></td>
    </tr>
    <tr>
    <td bgcolor="#f8f8f8" width="100%" style="border-bottom:1px solid #BB421C; font-size:11px;" align="left" onMouseover="this.style.backgroundColor='#d6d6c6'" onMouseout="this.style.backgroundColor='#f8f8f8'"><a href="#"><font size="2">Specials!</font></a><br />
    <p>Watch this section for upcoming specials!</p></td>
    </tr>
    </table>
    </div>
    [code]

    Note that the table cannot be wrapped in a p tag because it is a block level element and you will either have to wrap it ina div or apply margins to it directly (if needed).

    You may also want to run your page through the validaor now that you're almost there as there are a lot of simple errors creeping in that can easily be fixed to produce a valid page.

    Glad you found the layout helpful and good work in producing your page and thanks for letting me link etc

    Paul

  10. #235
    SitePoint Zealot TCJeter's Avatar
    Join Date
    Jun 2002
    Location
    Anchorage, AK
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sir. I will apply these changes and test. I had brought that right-hand table all the way down to 96% width before, but didn't go any further.

    Thanks again,
    -TC

    PS - where do have these links posted? I'd like to take a peek at others who have implemented this design - thnx.

  11. #236
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    where do have these links posted
    I'm saving them up and then they will go on the demo page. (Most of them are in this thread aready though )

    Paul

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

    Just to let you know I've moved server, so the tool is now at this address:

    <snip> Link removed as its not current </snip>

    It is now at v2.55d and is bug free as far as I know!




    Trevor
    Last edited by Paul O'B; May 15, 2009 at 03:50. Reason: link removed as its's not working
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  13. #238
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV's within header DIV

    Hello all,

    I would like to position other DIVs within my header DIV. e.g. a horizontal bar along the bottom of the header

    when i do this - it seems to get put in the container DIV rather than the header

    the only way i have got this to work is to specify an absolute position but this isn't really what i want (relative doesn't work)

    you can see what i mean in http://uk.geocities.com/spikoowner

    any ideas ??

    thanks

    steve

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

    I'm not sure what you mean you can just position the header in the flow or use relative to move it away from those absolutely placed search boxes and things.

    I think you have confused things because you have given your div and id of #header and also the header an id of #header. This has pushed the red bar down by 2 x 80px (the height of #header) which may be why you thought it was being placed in the container.

    Note that you are not supposed to use and ID more than once uniquely. If you need it more than once then it should be a class.

    However I don't think you need the id in the h1 tag anyway. Change the css to this.
    Code:
    #headerbar	 {height:10px; padding:0px;margin:0;position:relative;top:10px;}
    and the html to this:
    Code:
    	<h1 class="logo">Spikeopaths<span class="logo2">Volleyball Club</span></h1>
    That should do what you want.

    Also note that you can't put id's into the closing div tag of any element. Use html comments if you need to remember what the closing div relates to (outside the closing tag not inside it).

    Once last thing - You really should use a doctype as you've just made it very difficult to make this cross browser friendly. If you look in firefox you will see that you already have a lot of work to do to tidy it up etc.

    Hope that helps.

    Paul

  15. #240
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Paul

    yeah the #header in the H1 tag was a typo ! doops ! Thanks

    regarding the headerbar - To explain a bit better what i am after ......

    I would like to position the #headerbar so it is at the bottom of the #header (so if i make the header bigger it stays at the bottom). The #search and #flags I would like to position absolutely but ideally within the #header (e.g. so i make it wider they stay at the right hand edge)

    Have removed the ID's fdrom the </div> tags - and will investigate DOCTYPE (any pointers welcome!)

    Sorry about these basic questions but as you can tell - i'm just starting to explore the world of CSS !

    Thanks again for the advice

    Steve

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

    Well if your element doesn't have a set height then the element you want at the bottom should just follow the content without any positioning at all. You can of course keep them apart using margins etc.

    If your element has a set height and you want to place something at the bottom then you will need to place it there absolutely. This removes it from the flow so you need to make sure the content above doesn't overwrite it.

    This can be accomplished in various ways but perhaps the easiest is too add some padding to the bottom of the parent element that is the same height as the absolutely placed element which will allow it to be prtected from being overwritten.

    Heres a quick example.
    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">
    #outer {
     width:30%;
     padding-bottom:30px;
     position:relative;
     color:red;
     background-color: #D1DCE9;
    }
    #stayatbottom {
     position:absolute;
     bottom:0;
     left:0px;
     height:30px;
     line-height:30px;
     width:100%;
     color:#ffffcc;
     background:blue;
     text-align:center;
     overflow:hidden;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <p>This is the content : This is the content : This is the content : This is 
    	the content : This is the content : This is the content : </p>
      <div id="stayatbottom">I'm at the bottom of this div</div>
    </div>
    </body>
    </html>
    Hope that gives you some ideas

    Paul

  17. #242
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been looking over the code for awhile now, messing around with things, and trying to duplicate it to help me understand, but I still can't figure out what part of this page causes the columns to equalize.

    http://www.pmob.co.uk/temp/2columnce...equalising.htm


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

    In that particular example the column effect is created by a repeating background gif here.
    Code:
    #content {
    border: 1px solid #000;
    padding: 0;
    background-image: url(images/navbg.gif);/*this is the background colour of the left column */
    background-repeat: repeat-y;
    background-position: left top;
    }
    and the right column colour is the background colour here:
    Code:
    #container {
    width: 670px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: #829CC8;/* this is the background colour of the right column */
    border: 1px solid #000;
    text-align:left;
    }
    The image is as wide as the column needs to be and is repeated down the left side of the container. Basically its as simple as that.

    The container holds two floats which stretch the outer containers bottom border when any one of the floats is the longest. Because the background of the left column is a repeated gif you always get a full length column colour. The background of the right column is just the normal background colour of the container.

    The actual floated columns themselves have no bg colours of their own otherwise they would mess the effect up.

    This is the simplest way to achieve two equalising column colours and is completely hack free. If you look at my other two column demos there are examples that don't even need bg images but are a little more complicated to use.

    We can simplify it further here:

    You have an outer (#content) that contains two floats. The left side of the #content could have a repeating bg gif that is as wide as the left float. The rest of the content (right column) is just the bg colour of the element.

    You then just put your floats inside and you get the illusion of 2 columns. If you were to colour the floats then you would see that they don't stretch full height but just expand to their content. However since we have already coloured the columns then the floats don't need to be coloured.
    Code:
    #content {
    background-color: #829CC8;/* this is the background colour of the right column */
    border: 1px solid #000;
    padding: 0;
    background-image: url(images/navbg.gif);/*this is the background colour of the left column */
    background-repeat: repeat-y;
    background-position: left top;
    }
    #left {
    float:left;
    border-right:1px solid #000;
    width:199px;
    }
    #right {
    float:left;
    width:465px;
    border-left:1px solid #000;
    margin-left:-1px;/* makes border line up with #left border */
    }
    Whole simplified page example :
    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">
    #content {
    background-color: #829CC8;/* this is the background colour of the right column */
    border: 1px solid #000;
    padding: 0;
    background-image: url(images/navbg.gif);/*this is the background colour of the left column */
    background-repeat: repeat-y;
    background-position: left top;
    width: 670px;
    margin-left: auto;
    margin-right: auto;
    }
    #left {
    float:left;
    border-right:1px solid #000;
    width:199px;
    }
    #right {
    float:left;
    width:465px;
    border-left:1px solid #000;
    margin-left:-1px;/* makes border line up with #left border */
    }
    </style>
    </head>
    <body>
    <div id="content"> 
    <div id="left"> 
    	<p>This is the left content text.</p>
    	<p>The background colourof this colums is a repeated image along thebackground 
    	 y-axis of the container.</p>
    	<p>The right border of this float is merged with the left border of the right 
    	 content to appear as one continuous border.</p>
    	<p>This is the left content text.</p>
    	<p>This is the left content text.</p>
    	<p>This is the left content text.</p>
    	<p>This is the left content text.</p>
    	<p>This is the left content text.</p>
    </div>
    <div id="right"> 
    	<p>This is the right content text.</p>
    	<p>Any column can be the longest and the columns will equalise.</p>
    	<p>This is the right content text.</p>
    	<p>This is the right content text.</p>
    </div>
    <div style="clear:both"></div>
    </div>
    </body>
    </html>
    (The three column examples use completely different techniques.)

    Hope that makes it a bit clearer.

    Paul

  19. #244
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does make things clearer. I couldn't get it to work when making my own because I didn't see the importance of a background image. Thanks.


  20. #245
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Minor problem with centre column

    Hello, i am using the 3 col example (nice work !) but have a minor issue with the centre column.... (Viewed in IE6)

    when the contenst of the centre column get longer than the left hand column - the centre column seems to get slightly wider

    e.g. http://www.spikeopaths.org.uk/maps.php

    i guess i'm nissing something obvious but any advice woould be gratefully received

    also - any general feedback on the html/css structure would be good if anyone can spare a few minutes

    Thanks

    Steve

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

    I think you're talking about the 3 pixel jog in ie and this can be fixed by also adding this css at the end of the stylesheet.
    Code:
    * html .contents {height:1%}
    You already have it on #middle but sometimes its also needed on inner containers as well.

    Regarding your page you have designed it basically for ie because you have used a partial doctype without uri. This puts ie6 into quirks mode and uses the broken box model (as ie5 and 5.5. do all the time in any mode).

    Therefore all padding and borders will be contained within an elements width but in compliant browsers padding and borders are added to the width. This means your display will be incorrect in those browsers unless you take care of it.

    You should always run your css and html through the w3c's validators to pick out any errors such as typos and bad coding. Unfortunately you have 325 errors in your page but most are simple missing quotes etc but some are incorrect nesting that may affect more compliant browsers.

    Its always worth having valid code as there is more chance of it working correctly and is easier to debug.

    In your css you have missed the units (px) off a couple of items and mozilla will treat the measurement as zero and ie will guess that you meant pixels.

    Once you've tidied that up you will have a much more reliable page and it will be easier to manage. Try not to mix the case of the elements as it looks messy and is hard to debug. I always keep evertyhing in lower case because I use xhtml and I now dislike any html that is in upper case and I think it looks messy (IMHO).

    The look of your page is fine though

    Hope the solution above helps with your page and good luck with tidying the html up

    Paul

  22. #247
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul

    yep it was the 3px jog.....sorted !

    now wading through the zillions of errors !

    thanks for the tips

    Steve

  23. #248
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Light the blue touch paper ..........

    Hello again - well have corrected the errors as indicated by the validator but the page now looks a bit dodgy ! slightly in IE6 but pretty random in Opera 7.5

    Any pointers gratefully received !

    As an aside - it seems to require a lot of effort to make the 3 column effect look the same in all browsers. Would it not be easier to have 3 column table as the container for my page instead of all the divs etc??? (this is where the blue touch paper bit comes in as i'm sure this is very non-CSS !)

    e.g. something like ......

    <div>HEADER GOES HERE<//div>
    <table>
    <tr><td>COLUMN 1</td>
    <td>COLUMN 2</td>
    <td>COLUMN 3</td>
    </tr>
    </table>
    <div>FOOTER GOES HERE</div>

    just a thought !

    also - is there a free resource (web site) which would indicate what the page looks like in each browser (saves me installing each one and checking the page)

    thanks

    steve

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

    You are free to use tables but you'll get no help from me as I can never get them to work and I only use them for tabular data. I have more problems with tables than any css design I've ever done

    Try these links for checking out browsers although you'll have to pay for some.

    http://www.browsercam.com/
    http://www.danvine.com/icapture/
    http://www.danvine.com/iecapture/
    http://www.anybrowser.com/

    The easiest option is to download as many browsers as you can.

    http://www.skyzyx.com/archives/000094.php

    http://browsers.evolt.org/

    Paul

  25. #250
    SitePoint Enthusiast mike7896's Avatar
    Join Date
    Jun 2004
    Location
    New Bedford, MA
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a nav menu

    Hey, I've been messing around with this 3-column design to eliminate tables and frames entirely from my site, and so far it works great! You can't tell the difference between my old design and my overhaul.

    One small problem...

    I need a way to have a nav menu with nested submenus in the left column and do it in a way that I don't need to change EVERY page on my site every time I need to change the menu. Also, when a user clicks on a menu item, the content should appear in the center column.

    I am using dynamicdrive.com's "switch menu" for the navigation.

    Cany anyone help?

    -Mike


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
  •