Thread: Another column

    #16
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Hi,

    Thank you very much for this interesting link.

    It generated the following CSS

    body {
    margin:0;
    padding:0;
    background-color: #000;
    }

    a:link, a:visited { color: #3A383F; text-decoration: none;}
    a:active, a:hover { color: #3A383F; text-decoration: none;}

    .header{
    width: 50%;
    left: 25%
    }
    .colmask{
    width: 50%;
    left: 25%
    }
    .colmid{ right: 20% }
    .colin{ right: 19% }
    .colleft{ right: 40% }
    .col1{
    width: 38%;
    left: 101%
    }
    .col2{
    width: 19%;
    left: 42%
    }
    .col3{
    width: 17%;
    left: 84%
    }
    .col4{
    width: 18%;
    left: 86%
    }
    .footer{
    width: 50%;
    left: 25%
    }
    .header{
    clear: both;
    float: left;
    position: relative;
    border-bottom: #000 1px solid;
    background-color: #b4d2f7
    }
    .colmask{
    clear: both;
    float: left;
    overflow: hidden;
    position: relative;
    background-color: #b4d2f7
    }
    .colmid{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7
    }
    .colin{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7
    }
    .colleft{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7
    }
    .col1{
    padding: 0px 0px 1em 0px;
    overflow: hidden;
    float: left;
    position: relative;
    background-color: #99ccff


    }
    .col2{
    padding: 0px 0px 1em 0px;
    overflow: hidden;
    float: left;
    position: relative;
    background-color: #99ccff
    }
    .col3{
    padding: 0px 0px 1em 0px;
    overflow: hidden;
    float: left;
    position: relative;
    background-color: #99ccff
    }
    .col4{
    padding: 0px 0px 1em 0px;
    overflow: hidden;
    float: left;
    position: relative;
    background-color: #99ccff
    }
    .footer{
    clear: both;
    float: left;
    position: relative;
    border-bottom: #000 1px solid;
    background-color: #b4d2f7
    }
    .bottom{
    clear: both;
    width: 100%;
    float: left;
    position: relative;
    background-color: #cdeb8b
    }
    body {
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    font-size: 90%;
    width: 100%;
    min-width: 600px;
    }


    and the following HTML

    <!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">
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>My Website</title>
    <link href="css/home_styles.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

    <div class="colmask">
    <div class="header">
    head
    </div>
    <div class="colmid">
    <div class="colin">
    <div class="colleft">
    <div class="col1">
    column 1
    </div>
    <div class="col2">
    column 2
    </div>
    <div class="col3">
    column 3
    </div>
    <div class="col4">
    column 4
    </div>
    </div>
    </div>
    </div>
    <div class="footer">
    footer
    </div>
    </div>






    </body>

    </html>

    The problem is that I am trying to make some spacing or distance between the columns. What do I need to type in there? Will appreciate you pin pointing me in the right direction. Thank you
  2. #17
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    I think I am giving up on this.
  4. #18
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    The problem with the column generator is that whenever I resize the IE window, it will change its size, it will become smaller.
  6. #19
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Hi,

    I changed my mind, I will never says never again. So I am not giving up

    Here is the work that I was able to come up with so far:

    CSS:

    body {
    margin:0;
    padding-top:5px;
    background-color: #000;
    }

    a:link, a:visited { color: #000; text-decoration: none;}
    a:active, a:hover { color: #000; text-decoration: none;}

    .header{
    background-color: #CD0021;
    width: 100%;
    height: 80px;
    padding-left: 220px;
    padding-bottom: 10px;
    font-size: 30px;
    color: #FFF;
    font-family: Times New Roman;
    }
    .colmask{
    width: 50%;
    left: 25%
    }

    .colmid{ right: 20% }
    .colin{ right: 19% }
    .colleft{ right: 40% }
    .col1{
    width: 38%;
    left: 101%
    }

    .col2{
    width: 19%;
    left: 42%;
    }

    .col3{
    width: 17%;
    left: 84%;
    }

    .col4{
    width: 18%;
    left: 86%;
    }


    .colmask{
    clear: both;
    float: left;
    overflow: hidden;
    position: relative;
    background-color: #b4d2f7;
    }

    .colmid{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7;
    }

    .colin{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7;
    }

    .colleft{
    float: left;
    width: 100%;
    position: relative;
    background-color: #b4d2f7;
    }

    .col1{
    width: 270px;
    float: left;
    position: relative;
    background-color: #3a383f;
    text-align: center;
    font-size: 13px;
    color: #fff;
    font-family: Tahoma;
    }

    .col2{
    width: 160px;
    height: 225px;
    float: left;
    position: relative;
    background-color: #cd8756;
    }

    .col3{
    width: 160px;
    height: 225px;
    padding: 0px 0px 1em 0px;
    float: left;
    position: relative;
    background-color: #99ccff;
    }

    .col4{
    width: 160px;
    height: 400px;
    padding: 0px 0px 1em 0px;
    float: left;
    position: relative;
    background-color: #99ccff;
    }

    .footer{
    clear: both;
    width: 100%;
    height: 40px;
    padding-top: 5px;
    background-color: #cd0021;
    font-size: 12px;
    text-align: center;
    font-family: Arial;
    }


    HTML:

    <!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">
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>My Website</title>
    <link href="css/home_styles.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

    <div class="colmask">
    <div class="header">
    Lorem ipsum dolor sit amet<br>Lorem ipsum dolor sit amet<br/>
    <p>Your Logo Here<p/>
    </div>
    <div class="colmid">
    <div class="colin">
    <div class="colleft">
    <div class="col1"><img border="0" src="images/Picture-Collection.bmp" width="270" height="314">

    <p>column 11<p/>
    <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet</p>
    <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    <p>Lorem ipsum dolor</p>

    </div>

    <div class="col2">
    column 12
    <p>Text Here</p>
    <p>.</p></div>
    <div class="col3">
    column 13
    </div>
    <div class="col4">
    column 14
    </div>
    </div>
    </div>
    </div>
    <div class="footer">
    2013</div>
    </div>






    </body>

    </html>


    The problem is that when I resize the browser window, it will shrink and everything looks bungled up.

    The other thing is that the column to the left side (which I colored brown) is far from where the picture in the middle is located. Column 13 is too close to the picture.

    I have also no idea how to get rid of the lighter blue behind the columns (which have a slightly darker blue) without adversely affecting the layout.

    Will appreciate your help. As a newbie I am always learning. Thank you.
  8. #20
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    scrap that.

    attached somewhere here is the dynamicdrive.com 3-column converted to a 4-column with 2 right columns. (change file extension to .html)

    I had to increase the overall width of the wrapper to accommodate the extra column [increased to 960px which is pretty standard width]
    Attached Files
    Last edited by DonR; June 17th, 2013 at 06:12 PM.
  10. #21
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    My dear friend, thank you very much. It worked beautifully.

    I have a question regarding the styling of the fonts, normally I would do it like this:

    #leftcolumn{
    float: left;
    width: 170px; /*Width of left column in pixel*/
    height: 700px;
    margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;

    #leftcolumn .update em{
    font-style: normal;
    color: #707070;
    text-decoration: none;
    }

    #leftcolumn .coming em{
    font-style: normal;
    font-weight: bold;
    color: #FFA74F;
    font-size:13px;
    text-decoration: none;
    line-height:300%;
    }

    In one column for example, I am using like different font sizes and colors. Is the above code the correct way of doing it?
  12. #22
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    anytime you are using the <em> tag, it is the same as setting it to be bold.

    So, I would say, no, that is not the "correct" way of doing it [since you are targeting the <em> tag].

    the way I would go about different font sizes is to create yourself 4 classes (.smfont, .medfont, .lgfont, .xlgfont) and give them each a font-size correspondent to what you think "small, "medium", "large", and "xtra large" font sizes should be. and then apply one of those classes when you need to change the font-size of that particular text...using the <span> tag and not the <em> tag [unless you are wanting to change font-size inside of an <EM> tag's text.
  14. #23
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Ok, let's see,

    this how I did now:

    <p class="text1"> International Web Designers</p>

    The CSS is:

    #contentcolumn .text1 {
    font-style: normal;
    color: #999966;
    text-decoration: none;
    font-weight: bold;
    font-size:10px;
    font-family: Arial;
    }

    Please let me know if this is correct. Thank you.
  16. #24
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Originally Posted by Aust79
    Ok, let's see,

    this how I did now:

    <p class="text1"> International Web Designers</p>

    The CSS is:

    #contentcolumn .text1 {
    font-style: normal;
    color: #999966;
    text-decoration: none;
    font-weight: bold;
    font-size:10px;
    font-family: Arial;
    }

    Please let me know if this is correct. Thank you.
    you only need to target the .text1 class itself, so, it can be used wherever you want, like this:

    .text1 {
    font-style: normal;
    color: #999966;
    text-decoration: none;
    font-weight: bold;
    font-size:10px;
    font-family: Arial;
    }

    and with your "text-decoration" rule, you should be able to use this class with an <A> link, also.

    <p class="text1"> International Web Designers</p>

    or

    <a href="#" class="text1" target="_blank">Your Link Text</a>

    "Your Link Text" should end up being styled the same as your "International Web Designers" text.
  18. #25
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Great. Thank you.

    I hope the one below example is ok. Will appreciate your feedback.

    In the HTML:

    <p class="links">Home <span class="update">Last update: May 30, 2013</span><p/>

    The CSS:

    .links{
    color: #999966;
    font-size: 10px;
    font-weight: normal;
    font-family: Tahoma;
    }


    .update{
    color: #707070;
    font-size: 10px;
    font-weight: normal;
    font-family: Tahoma;
    }
  20. #26
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    I have another question, I like to add bullet like dots before each text. I am attaching a picture to show you what I mean. What is the best way to achieve this? [IMG]image-2[/IMG]
  22. #27
  23. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    looks like you are starting to get the hang of it.

    altho, if you are creating a navigation, using <p> tags isn't the most common way to do so.
    that is what lists [<ul> <ol> <li>] and <a> tags are good for.

    EDIT: If you haven't done so already, I would suggest that you go through a few HTML and CSS tutorials to learn the basics before going any further.

    http://www.tizag.com/ is a good one to start with IMO.
    Last edited by DonR; June 18th, 2013 at 11:00 AM.
  24. #28
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    Thanks to your help I am beginning to get the hang of it.

    I wanted to insert a picture to show you what I am trying to accomplish but when I click on the image icon it does not display a window that allows me to browse

    Do you have an idea why? I use IE 10
  26. #29
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    24
    Rep Power
    0
    If I want to make the first letter of the word "Our" for example large do I do it like this:

    HTML:

    <span class="first-letter">O</span>ur

    CSS:

    .first-letter {
    color:#fff;
    font-size:large;
    }
  28. #30
  29. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    Originally Posted by Aust79
    If I want to make the first letter of the word "Our" for example large do I do it like this:

    HTML:

    <span class="first-letter">O</span>ur

    CSS:

    .first-letter {
    color:#fff;
    font-size:large;
    }
    yes, that should work fine.

IMN logo majestic logo threadwatch logo seochat tools logo