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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    text-align:justify isn't working & DIVs overlapping..

    Hello, I believe my syntax is correct to do a text-align:justify- can you verify this? What did I do wrong?
    Look at the site www.DACATS.COM/index1.html. The main body of text should be "justified"... The css is as follows:

    .mainbox {
    clear:right;
    width:73%;
    margin:10px 15px 10px 10px;
    padding:20px;
    color:navy
    /* border:1px solid #000; */
    }

    .mainbox.p {
    text-align:justify;
    }

    Thanks
    DD
    Last edited by DaDuck; 08-14-2010 at 05:07 AM.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Code:
    .mainbox {
    clear:right;
    width:73%;
    margin:10px 15px 10px 10px;
    padding:20px;
    color:navy
    /* border:1px solid #000; */
    }
    
    .mainbox.p {
    text-align:justify;
    }
    The css you have is almost like this 'p.mainbox', which is saying that you want a <p> tag with a class name of 'mainbox' to apply the css to.

    To get it the way you want
    You can either do this:
    .mainbox p {text-align:justify;} just <p> tags that are in a class .mainbox will have justified text

    or

    .mainbox {text-align:justify;} all text will be justified within a class .mainbox

    ONE more thing:
    Try not to use color:navy and try for color:#324873
    Different browsers will render the 'navy' color differently.
    try this site if you are looking for different colors. kuler.adobe.com

    hope that helped
    Last edited by ch4sethe5un; 08-14-2010 at 04:22 AM.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, that made sense. I tried both methods and understand.. That's a good point about color as well... much thanks for this information.

    There's one other problem I haven't been able to solve yet.. I don't know if I should start a new post on it or do it here??

    If I resize smaller my browser window on dacats.com/index1.html, the right side DIV, mainbox, gradually moves closer to the left side DIV, menubox. At some point when the window gets small enough the 2 containers over lap and text intermingles- and looks bad.. I thought I could fix this with a clear: right (see code below), but it is still happening...
    What do I need to do to correct this???

    code here:
    .menubox {
    float:left;
    width:18%;
    margin:10px 15px 10px 10px;
    padding:20px;
    /* border:1px solid #000; */
    }

    .mainbox {
    clear:right;
    width:73%;
    margin:10px 15px 10px 10px;
    padding:20px;
    color:navy;
    text-align:justify;
    /* border:1px solid #000; */
    }

    .menubox ul {
    /*width was 150 not 250*/
    width:150px;
    padding:0;
    list-style-type:none;
    font: bold 16px 'Comic Sans MS' , Comic Sans MS;
    }

    .menubox li {
    background-color:#DDD;
    background-image:url(/images/new/m_test2.gif);
    margin:10;
    padding:2px 10px:
    border-width:1px:
    border-style:solid:
    border-color:#fff #666 #aaa #fff;
    }

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    You have clear:both; on the footer so the floating is 'reset'. No need for clear:right on the .mainbox
    Code:
    .menubox {
      float:left;
      width:250px; width was 18% 
      margin:10px 15px 10px 10px;
      padding:20px;
    /*  border:1px solid #000; */
    } 
    
    .mainbox {
      clear:right; <--dont use
      width:73%; <--dont use
      margin:10px 15px 10px 10px;
      padding:20px;
      color:navy;
      text-align:justify;
      /*  border:1px solid #000; */
    }
    I think this is what you want correct?(first link)
    http://www.maxdesign.com.au/articles...iquid-sample2/
    http://www.maxdesign.com.au/articles/liquid/
    Last edited by ch4sethe5un; 08-14-2010 at 05:32 AM.
    If i was of any help, dont forget to click the 'thank' button =]

  • Users who have thanked ch4sethe5un for this post:

    DaDuck (08-14-2010)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I modified my code to reflect your changes... Yes that is what I wanted..
    I don't really understand what is happening with this code or why?? But that is what I want...
    Last edited by DaDuck; 08-14-2010 at 06:31 AM.


  •  

    Tags for this Thread

    Posting Permissions

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