Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9

Thread: Graphics & CSS

  1. #1
    thw
    thw is offline
    Junior Member
    Join Date
    Apr 2004
    Posts
    16
    Member #
    5809
    Hi guys, I'm fairly new to web designing and I'm currently trying to create my first site.

    I was laying out a page using tables and came up with a design like so:

    http://home.iprimus.com.au/ehtsui/route414/main.htm

    After learning about css, I'm now trying to convert it to a css based design.

    I manage to use absolute positioning so that two images in my title now looks like so:

    http://home.iprimus.com.au/ehtsui/ro...ng/testing.htm

    But I'd like the contents of the page to be in the centre, like the original layout. What can I do?

  2.  

  3. #2
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    add this to your css
    Code:
    #wrap {
       margin: 0 auto;
    }
    and your html should look like this
    Code:
    <body>
    
    <div id="wrap">
    
    <a href="../main.htm"><img src="../images/logo.gif" border="0" class="logo" /></a>
    <img src="../images/description.gif" class="description" />
    
    </div>
    
    </body>
    hth
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  4. #3
    thw
    thw is offline
    Junior Member
    Join Date
    Apr 2004
    Posts
    16
    Member #
    5809
    Still the same... did I do something wrong?

    http://home.iprimus.com.au/ehtsui/ro...g/testing2.htm

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Code:
    <style type="text/css">
    body {
    	background-color: #98AAB5;
    	margin: 0;
    	padding: 0;
    	}
    img.logo {
    	float: left;
    	margin: 0;
    	width: 210px;
    	}
    img.description {
    	float: right;
    	margin: 0;
    	width: 194px;
    	}
    #wrap {
    	margin: 0 auto;
    	width: 770px;
    	}
    </style>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    thw
    thw is offline
    Junior Member
    Join Date
    Apr 2004
    Posts
    16
    Member #
    5809
    Although my problem is still not solved, thanks for the answers, karinne. The #wrap gave me some idea. I'm now working and see if I can figure out the solution with some divisions.

    Worst come to worst, I'd stick in some good old tables.

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    what?!?! the code i gave you works!

    http://www.karinne.net/route414.html
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    what karinne is suggesting is you wrap all of your content inside of a <div> with an ID set to wrap.
    HTML Code:
    <html>
    .
    .
    .
    <body>
    <div id="wrap">
    .
    . All of your content
    . wil be inside <div="wrap"></div>
    .
    </div>
    </body>
    </html>
    Then in your css have #wrap with these properties. Note: you must have the width set for #wrap for this to work.
    HTML Code:
    #wrap {
    width: 500px; /*whatever width you want, make sure it does not interfere with other widths, etc..*/
    margin: 0px auto; /*this is the property thats actually doing the centering, do not adjust the values, also pay attention for any other rules that might overwrite this property*/
    }
    This WILL work if done properly. There are other more complicated ways to achive this effect.

    Note: If done accordenly, you will notice that as your browser window becomes narrower your site will not 'catch' onto the left side of the viewport, but instead dissapear. There is a hack that works, if you also define the border property for #wrap it will prevent it from doing that. Add this to the #wrap property above.
    HTML Code:
    border: 1px solid #fff; /* #fff is shorthand for white, use whatever your background color is.*/


  9. #8
    thw
    thw is offline
    Junior Member
    Join Date
    Apr 2004
    Posts
    16
    Member #
    5809
    Oh it does indeed. Thanks for clearing up karinne & glyakk (esp karinne). It was just that when I was previewing it with IE6, and the whole thing still sticks to the left side.

    But if I open the page with other browsers that I've got (opera, navigator & firefox), it turns out the way it should be.

    Is this normal?

    But then... your page turns out fine in all browsers... but I just can't find the difference between the two. :dead:

    *FINALLY found out the reason for it!! Even though I don't quite understand why. It's just that Dreamweaver automatically create this:

    <?xml version="1.0" encoding="utf-8"?>

    as the first line of the page and it stuff up the layout. Can someone explain that line to me?

  10. #9
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Dreamweaver puts that line at the top of all xhtml documents that it creates.. Its SUPPOSED to be there on all XML documents to be valid XML(XHTML is XML that behaves like HTML).

    However, IE6 does not like anything above the <DOCTYPE>. So if anything, including the 100% valid <XML> tag is there the browser will go into quarks mode. Basicly the browser starts having sezures, (AKA behaves like IE5.5) Many things start to go screwy, including this.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com