Need help styling charity site please?

HTML & CSS
1

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.


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

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; }

3

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

Take your pick. I know personally I’d make a new thread and encourage you to do the same :).

5

@mikehende

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

http://validator.w3.org/check?uri=http%3A%2F%2Fsilent-angels.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Forgot to mention - I like your angels :slight_smile:

6

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

Oh, I had thought that I would finish the site then go through each page and take care of all errors last?

8

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?