SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help styling charity site please?

    Hey guys, here's our Charity site:

    http://silent-angels.net/

    I had 6 pages in the Nav bar all evenly spread out with equal distance between each page name, now I added a 7th page [Success Stories] and this automatically added a second row, I tried adjusting the margin and padding values but not getting all 7 pages to fit horizontally in one line in the Nav bar, please see CSS code below, any help will be greatly appreciated, thanks.
    Code:
    body {
    background: #acacac; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FjYWNhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #acacac 0%, #ffffff 30%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#acacac), color-stop(30%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #acacac 0%,#ffffff 30%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #acacac 0%,#ffffff 30%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #acacac 0%,#ffffff 30%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(top,  #acacac 0%,#ffffff 30%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#acacac', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
    }
    
    
    
    #img2 {float: right;}
    
    
    a:link {
    color: #00f;
    }
    a:visited {
    color: #00f;
    }
    a:hover {
    color: #00f;
    }
    a:active {
    color: #00f;
    }
    
    #header2 {border-style: solid;
                      text-align: center;
                      background-color: #3A3737 ;
    }
                
    #header2 ul {margin: 0;
                          padding: 0;
                          
      }
    
    
    
    #header2 ul li a { text-decoration: none;
                                color: #F1E9E9;
                               padding: .25em 0; 
    }
    
    #header2 ul li a:hover {color: #FFF;
                                         background-color: #FF6600;
    }
    
    .clear { clear: both; 
    }
    
    #header2 ul {
    list-style-image: url('images/dot.gif');
    list-style-position: inside;
    }
    
    #header2 li {
    float: left;
    padding: 8px 16px 8px 8px;
    }
    
    #header2 li {width: 14%;
    }
    
    #img1 { float:left; margin-left:100px; }
    #img2 { float:right; margin-right:100px; }
    #img_logo { display:block; margin:0 auto; }
    
    #mainContent {border-style: solid;
                             border-width: thick;
                             width: 730px;
                             text-align: left;
                             float: left;
                             padding:10px;
                                               
    }
    
    #video {
      /* float: right;  remove this */
      display:  inline-block;
    }
    
    #wrapper {
        width: 1250px;     
    }
    
    #wrapper { margin: 0 auto; }
    
    #leftSidebar {
        margin-top: 12px;
    }
    
    #mainContent {
        margin-top: 12px;
    }
    
    #video {
                 margin-top: 5px;
                 border-style: solid;
                 border-width: thick;
                 width:360px;
                 height: 348;
    }
    
    #rightSidebar {
        margin-top: 12px;
    }
    
    #leftSidebar {float: left;
                          width: 220px;
                          
    }
    
    #rightSidebar {float: right;
                           width:  230px;
     }
    
    form { border: 3px solid #cc3300; }
              padding: 1px;
              color: #FFFFFF;
     }
    
    #signUpForm {
    font-size: 11px;
    font-family: helvetica, sans-serif;
    }
    
    #footer {text-align: center; 
                 color: #000; 
                 padding: 8px 16px 8px 8px;
                 clear: both;
    }
    
    .blue { color: blue;
                 font-weight:bold;
     }
    
    .galleryrow {
        clear: both;
    }
    .galleryimage {
        float: left;
        margin: 0 8px 16px;
        width: 150px;
    }
    .galleryimage p {
        margin: 8px 0;
        text-align:center;
    }

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    The width plus the padding is pushing the total width to more than the available space.

    Either change your width from
    #header2 li {width: 14%;
    }

    to
    #header2 li {width: 12%;
    }

    or change your padding from


    #header2 li {
    float: left;
    padding: 8px 16px 8px 8px;
    }

    to

    a #header2 li {
    float: left;
    padding: 8px 0px 8px 0px;
    }

    Either way would work - I'd probably reduce the padding, but that's just me....one other suggestion is for your sanity later all, I would suggest you combine those two lines into one element - it makes changing an element's style much easier when it's only in one place.

    #header2 li { float: left; width: 12%; padding: 8px 16px; }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much! I have a few other styling to do on the new page, shall I post all questions here in this one thread or create new threads for each question?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikehende View Post
    Thank you very much! I have a few other styling to do on the new page, shall I post all questions here in this one thread or create new threads for each question?
    Take your pick. I know personally I'd make a new thread and encourage you to do the same .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,806
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @mikehende

    Before posting your new questions try validating the webpage and eliminating the errors:

    http://validator.w3.org/check?uri=ht...Inline&group=0

    Forgot to mention - I like your angels

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think better I keep all things related to the site styling in one thread for future reference. Ok, please see this site here:

    http://www.wishuponahero.com/browsewish/?sort=all

    On our site, I created another page titled "Success Stories", I wish to use this page to post all causes we have helped in the past and wish to do listing in the same fashion as in the site above. What I am thinking is simply create a heading with the name of the cause eg. "Shane's Brain Surgery" then add a few lines of text below explaining Shane's predicament then use the [more] link to open up more text explaining how we were able to help Shane. I can create and style the Heading and text but how is the link to open up more paragraphs by clicking on the word "more" done please? Or if anyone has any better ideas, I'm all ears?

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    @mikehende

    Before posting your new questions try validating the webpage and eliminating the errors:

    http://validator.w3.org/check?uri=ht...Inline&group=0

    Forgot to mention - I like your angels
    Oh, I had thought that I would finish the site then go through each page and take care of all errors last?

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys, if you could please answer the question I had asked I will try it myself, question again was "How do use the [more] link to open up more paragraphs by clicking on the word "more" please?


Bookmarks

Posting Permissions

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