Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: CSS Columns

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    CSS Columns

    WEBSITE LINK

    Alright, how can I make like one side of the content area, and another side? Like split it in half. Put stuff on one side, put stuff on the other side.

    CSS:
    Code:
    body {
    font-family: FANTASY;
    background-color: #000000;
    font-size:100%;
    }
    
    #container {
    width: 700px;
    margin:43px auto 0;
    }
    
    #header {
    width: 700px;
    height: 99px;
    background-image:url(images/1.png);
    margin: -24px auto;
    }
    
    #logo {
    width: 400px;
    height: 74px;
    background-image:url(images/logo.png);
    margin: -83px auto;
    }
    
    #nav {
    background-image:url(images/1.png);
    height:34px;
    margin: 85px auto;
    padding-top:11px;
    width:700px;
    }
    
    #content {
    width: 687px;
    height: 350px;
    background-image:url(images/content.jpg);
    margin: 3px auto;
    float: right;
    border-style:solid;
    border-color:#636363;
    }
    
    #menu {
    list-style:none outside none;
    margin:0 70px;
    }
    
    
    #menu a {
    background:url(images/menuLink.gif) no-repeat scroll left bottom transparent;
    color:#AFAFAF;
    float:left;
    font-size:15px;
    height:31px;
    padding-left:5px;
    position:relative;
    text-decoration:none;
    }
    
    #menu a span{
    background:url(images/menuSpan.gif) repeat scroll right bottom transparent;
    display:block;
    height:27px;
    margin:0;
    padding:4px 15px 0 10px;
    }
    #menu a:hover{background: url(images/menuLink.gif) top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url(images/menuSpan.gif) top right;}

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    With floats?

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    One guy did it before but I don't know how he done it, he made like to sides of the content page.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    I don't really understand that.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Then I'm not sure what to tell you. That is a CSS layout with 2 fixed columns. He has the html and the CSS. We aren't here to just give you code or change yours without you even trying. What have you tried?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Honestly, do you know how to right click on a page and click "view source"? That will show you exactly how the page is coded. This is BASIC stuff that you should be learning on your own, not having ppl here write code for you. View source code and study the html and CSS. Go to w3schools and study the tutorials there. Write your own code and then play and play and play around with things. Change CSS rules and view how it looks, then change it again and see what changed. Thats the only way to learn.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Be nice.
    If you don't understand basic CSS and HTML, we can't really provide you that much help.
    You can learn this from various places; I favoured HTMLDog, but W3Schools is good too.
    Once you have a decent understanding of CSS, revisit the page Aero gave you and have another go.
    If you're not a web designer and don't intend to learn, on the other hand, I suggest you hire somebody.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Sorry I apologize if I sounded rude. That wasnt my intent. I was just trying to strongly suggest he apply some good ole fashioned hands on trial and error and research so that he would learn the basics. As you pointed out Apostropartheid, if he doesnt understand or if he isnt learning the basics, there's not much ppl here can do to help him. Again, sorry if I sounded rude.

    and btw, I think I suggested some good books for Decker to purchase as well in one of his other posts, but here they are again:

    HTML and XHTML 5th Edition Comprehensive by Carey, Patrick
    Dreamweaver CS3 The Missing Manuel by McFarland

    even if you're not using dreamweaver, it has very comprehensive chapters and tutorials on html and css. They are not expensive and are very easy to work through with tutorials and example files you can download and work yourself.
    Last edited by teedoff; 09-08-2010 at 03:57 PM.

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    This is an example of what i'm wanting to do (just something I did in paint, was too lazy to open photoshop):


  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is a lot of help to be found here.

    Use the Search facility. Single words are quite useful for that.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Decker, you can go to this site suggested by Aerospace and copy all the code and paste it in your text editor or whatever you are using to write html. Its exactly the same page design as you are wanting with the exception of not having the navigation under the header. You can add that div as well.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •