Other CSS help needed

I'm not sure where best to post this but I need a little help. I have a website for a school project that I run (some of you may have come across us before as I post about the project in modding): http://horizon.qmgs.walsall.sch.uk

The content for the site is growing fast and we need to add a good menu to enable us to break it up a little whilst making it easy to navigate.

I have found what I am looking for and have customised it to suit the new structure we wish to adopt using html but I'm at a loss with CSS as I've not studied it before (I've signed up for Code Academy's course though so by the end of the year I should be starting to find my feet).

Here's what I have so far:
https://drive.google.com/file/d/0BzzNtGFOhwOJOHJNVmlfSTN3UEE/edit?usp=sharing

The issues are:
1) The Youtube and Twitter buttons I wish to add are subjected to the same margins as text which pushes them out of the bottom. Is there a way of writing a seperate style for the picture buttons so that the images fit in the menu bar?
2) How do I get rid of the black line at the end of the twitter button so that the right hand side of the bar finishes in the same rounded fashion that the left-hand side begins?

Any help you can offer will be greatly appreciated!

 

I can't see the code as GDrive is being an arse however I'll proivde what help i can -

Yes, precisely how would depend on how it's coded, but most likely you would do it as a class, like so, in the css

Code:

.picturebutton {
*margin/padding css here*
}

and would be called in the HTML like so -

Code:

<div class="picturebutton"> Blah </div>

This can be done with [again depending on how you've done the HTML] with the :last-child or :last-of-type pseudo-classes, the pages linked to give examples of how each one works...

 

Thank you for your reply.
I packed all of the code/image elements of this menu in a zip file and linked to it in my first post. To get access to the code & images, click the google drive link, there is a download button (an arrow) at the top of the page in the centre.

 

Hi

I don't have the time to fix it all for you, but to get you started...

Add this to your css:

Code:

#cssmenu ul li.socialImg a{
	background:red;
	padding:0px;
}

And change the last two list items like this:

Code:

<li class="socialImg"><a href='#'><span><img src="youtubeicon.png" /></span></a></li>
<li class='last socialImg'><a href='#'><span><img src="uhmw.png" /> Twitter</span></a></li>

You'll see the padding around the links disappear because the socialImg class overrides that set on the anchor tag. You'll also see a red background so you know it's working!

I'm assuming you can change the HTML right? If not then read this:

http://css-tricks.com/almanac/selectors/n/nth-last-child/

And adapt it so that it's something like like:

Code:

#cssmenu ul li:nth-last-child(2) a,#cssmenu ul li:nth-last-child(1) a{
	background:red;
	padding:0px;
}

And use this with the existing HTML.

It's a bit of an unclean hack but it'll work. There's probably a neater way to do this, I'm not the CSS guru I once was.

Either way you'll need to adapt the CSS to do what you want. You may want a bit of padding, you may want to v-align the text.

Good luck.

PS. Is astro physics something you're looking to get into, or is this just a cool project you're involved in? I only ask because my other half is in that field* and it's a cool field.

*She claims to be a rocket scientist but she's really a Spaceship Commander... well I claim she's a spaceship commander when in reality she commands science packages on four spaceships and leaves the commanding of the actual 'ship' satellites for someone else to worry about.

 

Thanks for this! I really appreciate the help. I'll let you know how I get on.