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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13

Thread: Site layout

  1. #1
    Junior Member
    Join Date
    Mar 2006
    Posts
    8
    Member #
    12797
    I want my site to look like this. Would it be best to use css or tables. If somone could give me some help it will be very much appreciated.

    Header
    Bar with text aligned left and right
    Menu Content


    Bar with text aligned left and right
    Footer


    Thanks.

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    Anything can be made with CSS, but it's up to you. If you're not very familiar with it you could fall back on tables, or you could use it as a learning experience.

    I think a lot of people would say it's "best" to use CSS, though. And that's what I'll say.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    You can have a hybrid layout (tables and CSS) or a CSS layout (CSS only).

    There are plenty sites out there that can give you a head start on your CSS layout

    www.glish.com
    www.bluerobot.com
    http://www.thenoodleincident.com/tut...son/boxes.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

  5. #4
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    here is another cool site you might want to check out..
    it actually lets you generate CSS code.

    http://www.csscreator.com/version2/pagelayout.php

  6. #5
    Junior Member
    Join Date
    Mar 2006
    Posts
    8
    Member #
    12797
    I have used the csscreator website and it worked fine when i generated the css but now i have added content to it it isn't displaying correctly. The menu i have in the left column sinks to the bottom when i want it to stay at the top.
    Here is my css file
    /* generated by csscreator.com */
    html, body{
    margin:0;
    padding:0;
    }

    #pagewidth{ }

    #header{
    color: white;
    position:relative;
    height:100px;
    background-color: black;
    width:100%;
    }

    #leftcol{
    width:15%;
    float:left;
    position:static;
    background-color: #000000;
    }

    #maincol{background-color: #FFFFFF;
    float: right;
    display:inline;
    position: relative;
    width:85%;
    }

    #footer{
    color: white;
    height:100px;
    background-color: black;
    clear:both;
    }


    /* *** Float containers fix:
    http://www.csscreator.com/attributes/containedfloat.php *** */
    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix{display: inline-table;}
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */


    /*printer styles*/
    @media print{
    /*hide the left column when printing*/
    #leftcol{display:none;}
    #twocols, #maincol{width:100%; float:none;}
    }

    If need be i can post my code as well. I guess i need to align #leftcol somehow, but not sure how.
    Also how can i remove the boxes around images i use as links?

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    If you have this online it would help
    [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
    Junior Member
    Join Date
    Mar 2006
    Posts
    8
    Member #
    12797
    You can see it on www.ianluckraft.150m.com

    please ignore the advertising at the top

    thanks very much

  9. #8
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    I think this is what you need..you need to use a clear:left;

    Code:
    #leftcol
    {
    width:15%; 
    float:left; 
    clear:left;
    position:relative; 
    background-color:#669966; 
    }
    hope this helps.. good luck

  10. #9
    Junior Member
    Join Date
    Mar 2006
    Posts
    8
    Member #
    12797
    Thanks very much for that it has worked.
    The last thing for the moment - how do i remove the boxes around my images i have used as links. I know how to use "text-decoration: none" to remove the lines from under text links. Is there something similar or another way to use images as links

    Thanks again

  11. #10
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    your getting the blue border around your buttons because its an image ..
    for the blue border not to show up you have to add this to your image tag..

    border="0"
    There is a tutorial here that shows you have to make rollovers. maybe you could do something like that.

    http://www.webdesignforums.net/showthread.php?t=22807


Page 1 of 2 1 2 LastLast

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 02:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com