CSS Navigation

HTML & CSS
21

Hello :). There are a few problems. One is that you use background-image to have the image shown, but the only valid value of that is to just have the url() there. You can’t include other stuff like the background-position. You need to change all the hovers there to background: instead of background-image to allow more values to show.

You also have the anchors moved off the screen via text-indent. Though just change the background property and we’ll work from there. I’m at college right now so I can only go by what my eyes see of the code.

22

Woo. The computers have chrome apparently.

SO make the background changes for the anchors, remove the text-indent on the #navigation li{}'s, and set these rules for the anchors as well :).

#navigation a {
display: block;
width: 100%;
text-indent: -999em;
}
23

:slight_smile: thank you for the help while you are in school! I have made your changes and 3 links seem to work but the last one doesnt seem to be working. Maybe its my numbers

24

I saw that happening as well, and I’d hazard a guess that the background position coordinates are off. Though I can’t be sure as of right now. Assuming the other code is exactly the same, I’d say the background-position is off :). You’re welcome. Come back if you can’t get that last link working.

25

All seems to be good! The rules you had me add… what did that do? just for my knowledge

26

Basically the display:block and the width made it so that:

  1. The entire block of the image would be a link (instead of where the text normally would be)
  2. The text (when the text-indent is applied), won’t cause the entire anchor to disappear off into the horizon (that is solved by the display:block)
  3. Moving the text-indent from the <li> to the <a> is needed because (if I remember right, it’s been a few hours) otherwise, the text wouldn’t disappear.
    :).
27

my woes continue it seems… but this time its getting things to align properly and for some reason i now have a scroll bar next to an image lol :confused:


#words_hdr {
	float:left;
	width:100px;
}

#samples_hdr {
	float:right;
	width:130px;
}

#block_content {
	overflow:auto;
	margin-bottom:20px;
}

#testimonial_items {
	width:550px;
	margin-right:5px;
	float:left;

}

#audio_column {
	float:right;
	width:355px;
}

.mini_testimonial_item {
	border:1px solid #001921;
	margin-bottom:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:normal;
	font-size:11px;
}

.mini_testimonial_item h2 {
	margin-bottom:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#66ccff;
}

.mini_testimonial_item .block_inside {
	background:none; background-color:#050505;
	padding:10px 10px 10px 10px;
}
.mini_testimonial_item .thumbnail { float:left; margin-right:10px; padding:3px; border:1px solid #68a3bc;}

everything was alright until i added the kind words header and the samples header

28

Sorry, I remember viewing this thread on my phone, while at work, but unable to post any response due to me not being able to test stuff.

Ignoring the fact you have invalid HTML (inline elements such as <span> wrapping around block content), the problem is that on .quote_block you set a height, and the child image in there you set the height exactly the same. No margins/paddings. Should be fine right?

Wrong. The vertical alignment for images, by default, is baseline, which allows inline text nodes to have room. If you set vertical-align:bottom; on the image, it’ll be forced to not sit a few pixels higher (thus making it too tall) and it will remove the scrollbar.

Though for very nitpicky reasons like this, it’s best to stick with overflow:hidden; instead of overflow:auto ;).

29

The first line of CSS makes the <A> element display as a block. I suspect that Ryan wanted to do this so that he could put a width on it (see next line, 100%). Inline elements cannot be given widths and so must be made as blocks if the developer wants to give them widths.

The second line gives it a width of 100%. I don’t know for sure, but I presume it’s to fill the parent that it’s in and so to not cause spacing or alignment or positioning errors or mishaps.

The final line is a method called the Fahrner Image Replacement method of…well…replacing images. Pretty much it shoves the text aside so that only the image is there, and the text disappears, although it still helps out Search Engines and Screen Readers. I’m sure there are other benefits to it, as well. It’s alright to shove the anchor tag aside because the hover effect that you’re employing (very pretty, and I would recommend a [url=http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/]CSS3 transition to improve UX for modern browsers?) is on the LI and not the A - meaning that you still get the hover effect, can use the Image Replacement, and still have text display.

~TehYoyo

30

Correct.

The second line gives it a width of 100%. I don’t know for sure, but I presume it’s to fill the parent that it’s in and so to not cause spacing or alignment or positioning errors or mishaps.

It won’t fill the full width without it.

31

Ok. I changed the span to a div, I also removed the height attribute altogether and it does display fine. My question to you is… Is that valid coding? Im still having a problem with the misaligned divs. Cant figure out why I cant get the div’s beside the headers to go underneath them.

32

To know if it’s valid coding, just go to the HTML/CSS validators :).

http://jigsaw.w3.org/css-validator

What are you talkingabout when you say misaligned divs? What’s misaligned :)?

33

where it shows kind words and audio samples. The blocks beside kind words I cant get to fall underneath and same with the swf audio samples to fall under audio samples header.

34

If you don’t want “Kind words” and the two blocks to be on the same line, you just need to unfloat the kind words. Remove float:left on “#words_hdr” :).

Actually scratch that. If what I understand is right you just want it to be like “two columns”. In which case, “#testimonial_items” just needs a “clear:right” to stop snagging onto the right float and sit underneath.