Issue with mysterious spacing below horizontal menu

HTML & CSS
1

Hey everybody
This my first post and hopefully i can get some insight on what is causing my issue.

have a bit of an issue with a navigation I’m trying to build. the end result should look like this

But of course its not coming out the way i need it when coding. here is a jsfiddle link to view the html and css jsfiddle link

Which gets me this result

and of course that looks nothing like my initial psd design.

Any ideas of what may be causing it? this thing has me stopped in my tracks. GRRRRRRRRRRRRRR

Thanks in advance for any help

Mike

2

Hi CreativeFly. Welcome to SitePoint. :slight_smile:

Do you have a live link for this? JSFiddle is hopeless IMHO. It lacks a lot, especially in this case, and I find it near impossible to work with.

To be honest, with a layout like this I’d suggest using sliced images laid over text. Otherwise it will be tricky to say the least to get a layout like this to work nicely over the wide range of browsers out there.

3

ralph.m

Thanks for the welcome. unfortunately i’m working on this locally until its completely finished,I will be converting it a wordpress theme. as far as sliced images are you referring to the border at the bottom of the menu?

4

No, I was referring to the menu items. You can code them in plain HTML and then absolutely place an image over the top of them. It’s quite valid and accessible, and would allow the menu to appear the way you want with less hassle—as that’s a somewhat tricky layout, and may be more trouble than it’s worth to get it right in every browser.

Here’s an example of the image replacement technique I mean:

Navigation Image replacement

5

ralph.m
so by using the navigation image replacement method this will solve the mysterious space below the menu? also if i go the route of use the image replacement i would like to use png’s since the background will be hard to line up perfectly to look seamless, is that possible since the png’s are transparent? and im assuming i can still just use a normal div border to accomplish the border that runs the length of the header.

6

Because I don’t have a real working example, I’m not certain what’s causing that. It’s basically a separate issue, but should be easy to solute.

also if i go the route of use the image replacement i would like to use png’s since the background will be hard to line up perfectly to look seamless…

But it’s just a background image with a bit of noise, by the look of it, so placing that in the nav images should be seamless. The advantage of that is that the text can be on screen but hidden, in case images don’t load.

7

What the devil are all those DIV for? 90% of your DIV are unneccessary. Just say what things ARE. H1 and UL are perfectly good block level containers, there is NO reason to be wrapping extra tags around them!

Really this:


<div id="pageWrapper">

	<h1>
		Stitch Connect Clothing
		<span></span>
	</h1>
	
	<ul id="socialMenu">
		<li>
			<a href="#">
				<img src="img/plusIcon.png" alt="Google Plus" />
			</a>
		</li><li>
			<a href="#">
				<img src="img/twitIcon.png" alt="twitter" />
			</a>
		</li><li>
			<a href="#">
				<img src="img/faceIcon.png" alt="facebook" />
			</a>
		</li>
	</ul>
	
	<ul id="mainMenu">
		<li>
			<span>01</span>
			<a href="#">Home</a>
			Get Started
		</li><li>
			<span>02</span>
			<a href="#">About</a>
			Who Are We?
		</li><li>
			<span>03</span>
			<a href="#">Blog</a>
			Get Connected
		</li><li>
			<span>04</span>
			<a href="#">Contact</a>
			Connect With Us
		</li>
	</ul>
	
	<a href="#" id="shoppingBag">
		View <span>Shopping Bag</span>
	</a>

Is what I’d have for markup there. I’m on the road right now with the lappy, but when I get back at my workstation I’ll show you how I’d approach putting that together with some CSS.

A LOT of your problems is overthinking the number of div, and slapping classes and ID’s on everything when you don’t need to… though other issues include failing to state your line-heights, going as small as 9px on a font (which is uselessly and illegibly small for many users), putting presentational images in your HTML (they aren’t content, they don’t go in IMG), and a host of other issues.

8

Back in the shop, ok, here’s what I came up with:

Stitch Connect Clothing

as with all my examples the directory:
Index of /for_others/creativeFly

is open for easy access to the bits and pieces.

I took a few liberties, like widening the border on the shopping to match the menu, narrowing the layout to 976px so it actually fits a 1024 wide display (which made the menu a tight squeeze), and tossing in a few hover states. I also didn’t go overboard on color matching, so you may have to tweak that. Tested working all the way back to IE 5.5 (which loses the text-transform:uppercase – oh noes), and has graceful degradation for CSS off, images off, or a combination of the two.

Though on the whole the layout suffers badly from “But I can do it in photoshop” – because drawing some goofy picture in a paint program before you even have semantic markup of content or a layout built in CSS has ANYTHING to do with building an accessible website. Pretty much it’s putting the cart before the horse, which is why you’re stuck with a fixed-width design in the first place.

I would forget about trying to have the H1 rub up against the menu, slide the social icons left, move the cart link up next to those, then put the menu on the right – which would free up enough room to make a semi-fluid layout from 768 to 976 or even larger (I usually say 68 to 70em these days). That way you’re not alienating netbook users… Of course with the semantic markup I provided, you could also easily do media width targets for handheld as well… feeding it a whole different layout for narrow screens.

Just something to think about – hope this helps.

9

Beautiful work, Jason. :slight_smile:

10

deathshadow60

Thanks for the break down, i guess i was really over thinking it. I’m assuming your a big fan of the 960 grid system ha ha. i’m coming to realize it really has alot of limitations and restrictions. i’ll look over the files and take that into note with future projects. again really appreciate the help. also do have any recommended sites to read up on?
Mike