SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34

Thread: CSS Navigation

  1. #26
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    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.
    .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  2. #27
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    #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

  3. #28
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #29
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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 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

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #31
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #32
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    To know if it's valid coding, just go to the HTML/CSS validators .

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

    What are you talkingabout when you say misaligned divs? What's misaligned ?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #33
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Canada
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •