SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Ok, I Am Fried - Need CSS Assistance From A Pro

    To anyone that can assist, thank you (for real). I am fried from trying to read, review, test, and search for a solution. And in the end, I know it will be that I overlooked something, so let me say in advance, my apology for my oversight.

    I am trying to edit a CSS file on this site: http://www.tacticalgearnews.com/

    On the sidebar is a newsletter signup, I simply can't get it to work, I got other parts of the site to, but that one... I just don't get it.

    It is aligned to the left where I want it, even with the bullet points of other sidebar locations, but its not filling out. We are wanting the input box and buttons to match the styles of the search bar at the top. Black background input box, green button with white text.

    The CSS file has all the existing information in it, but I cant seem to get it?

    Can anyone (and please do this in a simple manner if you want to assist) show me what I did wrong (then I again I removed all the errors), or show me what code to put there. I am mentally exhausted, and do not like to burden others with issues like this.

    The code for the newsletter and search are this:

    PHP Code:
    /* Newsletter */
    .newsletter {float:leftbackground:#222222; margin:-10px 0px 20px 0px;}

    /* Top Panel - Here is Navigation and search box*/
    #toppanel    {width:920px;}

    /* Navigation in Top Panel*/
    #navigation    { float: left; position:relative; z-index:99;}
    #navigation ul    { font-weight: bold; font-size:14px; text-transform:uppercase; list-style: none; }
    #navigation li    { position:relative; float: left;}
    #navigation li a    {color: #FFF; text-decoration: none; float: left; padding:15px 15px 15px 15px; letter-spacing:0.6px; }
    #navigation .main_category {background-image: url(../images/navigation_hover.gif); background-position:top center; background-repeat: no-repeat;}
    #navigation .active    { background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
    #navigation li.current-menu-item { background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
    #navigation li.current_page_ancestor { background: url(../images/navigation_active.gif); background-position:top center; background-position:0px 10px; background-repeat:no-repeat;}
    #navigation ul li ul    { position:absolute; top:50px; left:0px; display:none;    list-style-type: none; list-style-image:none; list-style-position:outside; width:230px; }
    #navigation ul li ul li a    { color:#FFF;    padding: 15px 0 15px 36px; width:194px; }
    #navigation li a.odd    { background:#2b2b2b url(../images/navigation_dot.gif);    background-repeat:no-repeat; background-position:18px 23px; text-transform:uppercase; }
    #navigation li a.even    { background:#222 url(../images/navigation_dot.gif);    background-repeat:no-repeat; background-position:18px 23px; }
    #navigation li a.odd:hover, #navigation li a.even:hover    { background:#444 url(../images/navigation_dot.gif);    background-repeat:no-repeat; background-position:18px 23px;    }

    /* Search in Top Panel*/
    #search    {float:right; height: 30px; margin:10px 0 0 0; }
    #search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;background: #1f1f1f url(../images/search_icon.png); background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; color: #FFF;    border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
    #search input.field:focus {background:#2b2b2b url(../images/search_icon.png); background-position:top right; background-repeat:no-repeat;}
    #search input.submit {width:70px; height:30px; background: #595d42;    color:#FFF;    font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;} 

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Your newsletter <div> is floated, which means that its parent element doesn't surround it. I don't see why it needs to be floated. Try just taking the float off, and it should behave as you want it to.

    (You could also do with running your code through the W3C Validator - it's full of errors, and that just isn't acceptable if you're saying it's XHTML Strict - and tidying up your CSS file, it's quite staggeringly bloated!)

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I fixed the float, and that fixed the background. Now I just need to figure out how to make the input box and buttons like the search ones up top. Haven't been able to fix it so far.

    Any ideas?

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TGN View Post
    Thank you, I fixed the float, and that fixed the background. Now I just need to figure out how to make the input box and buttons like the search ones up top. Haven't been able to fix it so far.
    Piece of cake. The styling around the search box is applied with #search, so you just need to repeat it for #newsletter and you're done.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wait, do I add another line called #newsletter or put the settings under the existing .newsletter

  6. #6
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't figure this out, its just not working for me.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TGN View Post
    Wait, do I add another line called #newsletter or put the settings under the existing .newsletter
    At the moment, you haven't got any styling on the form controls in <div id="newsletter">. You'll need them to be slightly different, eg you won't want the magnifying glass icon, and the positioning of the buttons needs to be different, so you'll need to set up new styles for
    #newsletter input[type=text] { ... }
    #newsletter input[type=submit] { ... }
    copying the relevant bits from your search form styling.

    Oh yes, and you'll need to include an action for the form as well.

  8. #8
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, let me see if I can try out what your saying, trying to learn this.

  9. #9
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hows that look?

  10. #10
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, its almost flawless. But I cant get the two buttons to be the exact width of the input box. Any ideas? This is the code as it stands right now, you can see the input box is slightly longer then the two boxes below it.

    PHP Code:
    /* Newsletter */
    .newsletter {background:#222222; margin:-10px 0px 30px 0px;}
    .newsletter input[type=text] {font-family"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;background#454545; width: 290px; padding:10px; outline: none; font-size: 13px; color: #FFF; border: none; z-index: 1; height:16px; float:left; padding-right:0px;}
    .newsletter input[type=submit] {width:142pxheight:30pxbackground#595d42;    color:#FFF;    font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:10px 5px 0px 1px;} 

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TGN View Post
    Well, its almost flawless. But I cant get the two buttons to be the exact width of the input box. Any ideas? This is the code as it stands right now, you can see the input box is slightly longer then the two boxes below it.

    PHP Code:
    /* Newsletter */
    .newsletter {background:#222222; margin:-10px 0px 30px 0px;}
    .newsletter input[type=text] {font-family"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;background#454545; width: 290px; padding:10px; outline: none; font-size: 13px; color: #FFF; border: none; z-index: 1; height:16px; float:left; padding-right:0px;}
    .newsletter input[type=submit] {width:142pxheight:30pxbackground#595d42;    color:#FFF;    font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:10px 5px 0px 1px;} 
    In the [type=submit] declaration, if you take off float:left; and change the right margin from 5px to 12px, that should do the job.

  12. #12
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, that made the buttons stack on top of each other, and not side by side.

  13. #13
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TGN View Post
    Ah, that made the buttons stack on top of each other, and not side by side.
    Hmm, maybe I changed something else as well when I was playing around with it. Try changing the margin values until they line up as you want...

  14. #14
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    In the [type=submit] declaration, if you take off float:left; and change the right margin from 5px to 12px, that should do the job.
    @Stevie: Just a question. Why taking the float out? I just tried it and the butons lining up nicely. Is there a reason why you would take that out? Just curious.

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,275
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Normally, most browsers treat inputs as either inlines, or inline-blocks (seems to depend on the browser). So most of the time, so long as there's room, they'll stack up side by side anyway. Assuming they are next to each other and not wrapped individually in blocks or something.

    So normally one shouldn't need to float inputs... Though the large right margin they both have may have forced one below the other. Setting the right margin to 6px let them both sit side by side.

    Ideally you'd only set margin on the first one, so that you could make them exactly match the width of the input. You could do that using some fancier CSS, but it wouldn't work in IE6, if you care.

    .newsletter form p:last-child input {
    margin: 10px 0 0;
    }
    .newsletter form p:last-child input:first-child {
    margin-right: something like 12px maybe... play with it;
    }

    Would be less CSS if you put a class on the first submit button though.

  16. #16
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by donboe View Post
    @Stevie: Just a question. Why taking the float out? I just tried it and the butons lining up nicely. Is there a reason why you would take that out? Just curious.
    As a general rule, I would say "don't float anything you don't need to". Although, to be fair, that would apply to any positioning style. There's no need to float those elements, so why do it? All that happens is that you set yourself up for rendering bugs, particularly in older browsers. Keep it as simple for yourself as you can!

  17. #17
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok woah, so what changes do I need to make as it sits right now? Sorry guys, I read all your stuff, and now am not sure what to do to it lol.

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,275
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Try reducing the right margin on the submits to 6px and go from there.

    I agree with StevieD re floating and positioning... you have the least amount of code if you start with document flow default (how things will sit natually before you position them) and then add on little changes as necessary.

  19. #19
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How does that look guys?


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
  •