SitePoint Sponsor

User Tag List

Page 11 of 66 FirstFirst ... 7891011121314152161 ... LastLast
Results 251 to 275 of 1630
  1. #251
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well you could either look at SSI (server side includes) to include your menu on every page and then you only need one copy.

    As for the content appearing in the centre then you are limited to a)Frames (very bad) , b iframes (better), or c) just a normal page.

    If its only a small bit of content you could hide and show elements etc but that soon gets messy.

    Either way its not really a css question that I can help more with

    Paul

  2. #252
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK so i persevered and its finally getting there - with no tables and i think i have fixed the validation errors !

    Couple of questions if you have time ... example is at http://www.spikeopaths.org.uk/

    1) Looks fine in IE6 but in Opera 7.5 the menu and calendar boxes seem to be moved towards the centre (in IE6 they are aligned with the header)

    2) In the calendar section - the calday SPAN doesn't seem to be using the defined width so the right-hand columns aren't lined up !

    3) The search form DIV seems too big ? is there a way of specifying size etc (to be honest - not looked at this yet but any advice would be most welcome) - HAVE SORTED THIS - JUST ADDED margin:0px to the FORM

    4) Could you suggest another popular browser to have a quick check with ? (navigator maybe)

    Thanks for your help so far

    Steve
    Last edited by SteveBamford; Jun 24, 2004 at 06:43.

  3. #253
    SitePoint Enthusiast mike7896's Avatar
    Join Date
    Jun 2004
    Location
    New Bedford, MA
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Well you could either look at SSI (server side includes) to include your menu on every page and then you only need one copy.

    As for the content appearing in the centre then you are limited to a)Frames (very bad) , b iframes (better), or c) just a normal page.

    If its only a small bit of content you could hide and show elements etc but that soon gets messy.

    Either way its not really a css question that I can help more with

    Paul

    Paul,

    Thanks for pointing me in the right direction. Upon searching the forums, I discovered that quite a few people are looking for this solution. So, for anyone else looking for an answer, here's the info that helped me:

    http://www.sitepoint.com/article/save-hours-ssis

    And for anyone who uses PHP:

    Yes, SSI (Server Side Includes) is what you want. So if the site is PHP it is simply

    <? include ('menu-file.php');?>

    where menu-file.php is a single file that can be included anywhere on any php page.

    And if the pages are .html it is

    <!--#include virtual="menu-file.html" -->

    same deal, but call the parent pages with the extension .shtml

    and so on for other languages.

    That last bit was posted by gdape on May 11, 2004 here:
    http://www.sitepoint.com/forums/show...+side+includes

    Worked like a charm for me!

  4. #254
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for letting us know you got it sorted

    SSI 's are very useful.

    If you have DW you can use their template system which allows the update of all your pages through just changing the main template. However you still have to upload all the pages after you've changed them.

    Withh SSI you just upload the one file and away you go

    Paul

  5. #255
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Steve,
    ) Looks fine in IE6 but in Opera 7.5 the menu and calendar boxes seem to be moved towards the centre (in IE6 they are aligned with the header)
    I'll work through these as I get to them.

    Take the padding out of middle and put it in to contents

    Code:
    #middle		{border-width: 0px;}
    .contents{padding:15px;}
    Paul

  6. #256
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    2) In the calendar section - the calday SPAN doesn't seem to be using the defined width so the right-hand columns aren't lined up !
    Lined up with what? I'm not sure what I'm looking for.

    Anyway you can't define width for a span because its an inline element and won't accept widths. You need to use a block level tag such as <p>. etc or more semantically perhaps a list (ul, li etc).(you could turn the span into display:block and then itr would accept widths and give a linefeed but other tags will do that anyway )

    You shouldn't need breaks at all to make line feeds if you code correctly.

    Paul

  7. #257
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    4) Could you suggest another popular browser to have a quick check with ? (navigator maybe)
    These are what I use when testing:

    ie5
    ie5.5.
    ie6
    mozilla 1.2+
    firefox
    Opera7

    When I'm happy with those then I will work on minor browsers such as.

    Netscape 6.2
    (Maybe also ie5 mac. - but nothing works properly in that)
    Opera 6 (but not too bothered)

    Paul

  8. #258
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi Steve,

    I'll work through these as I get to them.

    Take the padding out of middle and put it in to contents

    Code:
    #middle		{border-width: 0px;}
    .contents{padding:15px;}
    Paul

    excellent - sorted - thanks !

  9. #259
    SitePoint Guru Amirsan's Avatar
    Join Date
    Jun 2004
    Location
    SCC
    Posts
    862
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there any simpler tutorials? This one is soo large and complicated. I read half way through and I was completely lost... can someone help me?

    anyone come on AIM; Emperor Amirsan

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

    Iv'e replied in your other thread so hopefully that will help you

    paul

  11. #261
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SteveBamford
    Thanks paul

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

    now wading through the zillions of errors !

    thanks for the tips

    Steve
    Hello - sorry to raise this again but the 3px job has come back (http://www.spikeopaths.org.uk/skills.php) - dunno what i did but i think i still have the fix in the css file ! could it be anything to do with adding the padding to the contents div rather than the middle div ?

    any ideas ??

    thanks

    steve

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

    If you're talking abot the space between the column and the content then that is also the 3 pixel jog.
    Try:
    Code:
    * html #left {margin-right:-3px}
    * html #right{margin-left:-3px}
    Paul

  13. #263
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If you're talking abot the space between the column and the content then that is also the 3 pixel jog.
    Try:
    Code:
    * html #left {margin-right:-3px}
    * html #right{margin-left:-3px}
    Paul

    sorted - thanks a bunch !!! think i have my format sorted out with SSI and other goodies - now to the content - thanks for all your help Paul !

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

    Footer jumps around in 3col format

    Hello - sorry but heres another strange one. Problem can be seen at http://www.spikeopaths.org.uk

    Happens in IE6 - but when i move the mouse over the menu links on the right - the footer jumps up into the middle column

    bizarre ! any ideas ?

    thanks

    steve

  15. #265
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Happens in IE6 - but when i move the mouse over the menu links on the right - the footer jumps up into the middle column
    Seems to be an ie bug caused by your links turning to bold on hover and upsetting the layout. If you take the bold out of the hover then the footer stays still.

    Haven't found a fix yet but I suspect its something to do with the bold stretching the layout so that ie looses positioning. I will have a play around with it later.

    Paul

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

    It looks as though you've gone back to tables lol

    Anyway in case you still need a solution I've just noticed you've been using my negative margin technique but you don't need to because you aren't using equalising columns.

    Your layout can be simplified a bit and the jumping footer will go away.

    Change the left and right styles to just this.
    Code:
    #left		  {float:left; width:150px; padding-left:0px; position:relative;}
    #right		 {float:right;width:150px; padding-right:0px;position:relative;}
    
    * html .contents {height:1%}
    * html #left {margin-right:-3px}
    * html #right{margin-left:-3px}
    Then just move the left and right elements out of the middle div by moving it downwards around the content.
    Code:
    	  <div id="middle"> 
      <div id=contents> 
    	  <H1>Welcome To The Spikeopaths !</H1>
    	  <IMG SRC="images/p_maintop1.jpg" alt="" align=left class=mainpagetop>
    The layout should be ok now.

    Sorry I didn't get back earlier but my computers been playing up all day.

    Paul

    BTW your table layout is showing some serious jumping when the left nav links are rolled over - so its not just css that has problems

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

    Another example of Paul's design in use

    Hello.

    Here is a version of Paul's 3 column that I adapted for my site. I put a bit of whitespace around the entire layout (without breaking it, me=CSS tard). I really like this layout.

    See it here.

    Paul, I do have a question though. Is there a way give your "Another 3 col" layout a, say, 10px margin all the way around (just to add whitespace) and still connect the r/l edges of the header and footer with a 1px solid border? I tried to to that, but was unable to and still maintain the look.

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

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

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

    Glad you found the layout useful and I like your layout

    Is there a way give your "Another 3 col" layout a, say, 10px margin all the way around (just to add whitespace)
    I would think if you changes the bits of code below then you should get close to what you want.

    Code:
    body {
    padding:0;
    margin:0;
    background:#FFFFFF url(images/ezoralbg.gif) repeat-y left top;
    color: #000000;
    border-left:10px solid white;
    border-right:10px solid white;
    }
    #outer{
    height:100%;
    min-height:100%;
    min-width:500px;
    background:transparent url(images/ezorarbg.gif) repeat-y right top;
    margin-bottom:-61px;
    color: #000000;
    }
    #footer {
    height:50px;
    clear:both;
    border-top:1px solid #FFF;
    border-bottom:10px solid #fff;
    background-color: green;
    color: #FFF;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:61px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    You can also do the same for header but there's white space there already in that design. You will probably have to tweak the margins and stuff in the left column as they will probably be put out a bit by the 10px border.

    e.g.
    Code:
    #left {
    position:relative;/*ie needs this to show float */
    width:200px;
    float:left;
    display:inline;/*fix for ie double margin-bug*/
    margin-left:2px;
    }
    * html #left {height:1%}
    The background images will probably need to be altered slightly to match up as well.
    Code:
    body {
    padding:0;
    margin:0;
    background:#FFFFFF url(images/ezoralbg.gif) repeat-y 10px 0;
    color: #000000;
    border-left:10px solid white;
    border-right:10px solid white;
    }
    example:
    http://www.pmob.co.uk/temp/ezora_whiteborder.htm

    I haven't had time to test it out fully but ie6 and firefox seem ok with it

    Hope that helps.

    Paul

  19. #269
    SitePoint Zealot Krieger's Avatar
    Join Date
    Dec 2003
    Location
    Nevada - USA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks much. I'll try that this weekend, and see how I well I do with it.
    Verwüstung rufen und des Krieges Hund' entfesseln!

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

  20. #270
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Philippines
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Was there a 4 column layout in here?
    I'm sort of lazy to go through all the pages again
    I'm looking for a 4 column layout with the last column, the 4th as the fluid one, and the first 3 are fixed width, with a footer that moves down ofcourse.

  21. #271
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Read the thread title.

  22. #272
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    What you are looking for is a two column layout, with the right column being fluid.

    Then you can use nested div's to split the fixed one into 3.

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

    I've just rone this very quickly as I've been busy but this should give you the idea.

    http://www.pmob.co.uk/temp/4_columns.htm

    You'll need to make bg images for the columns and repeat it on the body.

    Hope that helps.

    Paul

  24. #274
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello folks,

    I have one very urgent problem with 3 columns layout. I can't make left column to be the same height as right in Firefox In IE 6.0 looks great but when I test it on Firefox left column is not 100% height with other 2 columns. And I need to be 100% in height and filled with some color. Please help me with this because I don't want to use tables any more. This is my first step in tabless design so please give me some assistance to solve mentioned problem. Below is a links to html and css files.

    html file: http://www.damjanator.ch/css/layout.html
    css file: http://www.damjanator.ch/css/layout.css

    thanks in advance,
    Jazz

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

    The first thing you need to do is set the background of #middle by using the background of #wrapper otherwise you will not get full height columns is mozilla.

    Code:
    #wrapper {
    margin:0px;
    padding:0px;
    background : #CCCCCC url(http://www.damjanator.ch/css/images/left_column_bgd.gif) repeat-y left top;
    }
    Next you need to change your cleaner id to a class and change the code to this:
    Code:
    .cleaner {
    clear: both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    Then you need to add another clear to enable the outer columns to extend.
    Code:
    <div id="main"> 
    <div id="padder">Main Content</div>
    <div class="cleaner"></div>
    </div>
    <!-- Main content end here -->
    </div>
    <!-- Container end here -->
    <div class="cleaner"></div>
    </div>
    <!-- Wrapper end here -->
    <!-- Footer start here -->
    <div id="footer">Footer</div>
    <!-- Footer start here -->
    </body>
    </html>
    That should get it working. You obvously need to sort out the header when the screen is resized but I'm sure you are working on that.

    Hope the above helps

    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
  •