Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: CSS Help

  1. #1
    New Coder
    Join Date
    Dec 2005
    Location
    NYC
    Posts
    49
    Thanks
    4
    Thanked 1 Time in 1 Post

    CSS Help

    Hi,

    I am simply trying to create the ever-so-common rounded box. I have to use images supplyed to me. I am having trouble lining up the bottom image (a strip as wide as the box with rounded-corners) at the bottom of the box if the content inside the box is too short. I have the bottom image as a separate div placed after a fixed height div. It wants to place the image right after the content and then continue to run the other div further below.

    please help! Thank you in advance.

    b

    HTML:

    <div id="poll">
    <input type="hidden" name="question1Id" value="118">
    <h1>Question?</h1><input type="radio" name="q1Choice" value="432" class="firstPollAnswer">Yes<br /><input type="radio" name="q1Choice" value="433">No<br /><input type="radio" name="q1Choice" value="434">Not sure<br /><div class="pollResults"><a href="/content/polls/1/111982?uri=pollresults.htm" onclick="s_objectID='MyPolls_results';return showlink(this, 'normal', page_name + '_MyPolls_results');">View Results</a></div><input class="voteButton" type="image" onclick="s_objectID='MyPolls_vote';return showlink(this, 'normal', page_name + '_MyPolls_vote');" alt="submit" src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/button_vote.gif"></div>
    <div id="pollBoxBottom">
    <img src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/transparent.gif" width="1" height="1" border="0" alt="">

    </div>
    </form></div>
    </div>

    CSS:
    /* =POLL DIVS & STYLES
    ------------------------------------------------------- */
    #pollBox {
    float: left;
    margin-top: 12px;
    width: 300px;
    height: 150px;
    color: #7C2900;
    background:url(images/bg_poll.jpg) no-repeat;
    background-color: #EAD5C4;
    font-size: 70%;
    padding: 0px;
    }

    * html #pollBox {
    float: none;
    margin-top: 10px;
    }

    .firstPollAnswer {
    margin-top: 0px;
    }

    * html .firstPollAnswer {
    margin-top: -5px;
    }

    .voteButton {
    margin-top: 2px;
    }

    #pollBox a {
    color: #7C2900;
    }

    #pollBox h1 {
    color: #7C2900;
    }

    #poll {
    padding: 0 10px 0 15px;
    margin: 0;
    }

    .pollResults {
    background: url(images/icon_arrow_poll.gif) 0px 2px no-repeat;
    position: relative;
    top: 0px;
    float: right;
    padding-right: 10px;
    padding-left: 8px;
    margin: 5px 0 0 0;
    }

    #pollBoxBottom {
    position relative;
    background: url(images/border_poll_bottom.gif) bottom no-repeat;
    height: 11px;
    width: 300px;
    margin: 0px;
    padding: 0px;
    }


    I need to use that border_poll_bottom.gif which is a strip with the two bottom rounded corners.

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you attach the images you are using?

  • #3
    New Coder
    Join Date
    Dec 2005
    Location
    NYC
    Posts
    49
    Thanks
    4
    Thanked 1 Time in 1 Post

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    #poll {
    margin: 0;
    padding: 0;
    }
    
    #pollBox {
    float: left;
    margin-top: 12px;
    width: 275px;
    height: 150px;
    padding: 0 10px 0 15px;
    color: #7C2900;
    background:#EAD5C4 url(images/bg_poll.jpg) no-repeat;
    font-size: 70%;
    }
    
    .firstPollAnswer {
    margin-top: 0px;
    }
    
    .voteButton {
    margin-top: 2px;
    }
    
    #pollBox a {
    color: #7C2900;
    background:none;
    }
    
    #pollBox a:hover {
    text-decoration:none;
    }
    
    #pollBox h1 {
    color: #7C2900;
    margin:0;
    padding:20px 0;
    }
    
    .pollResults {
    background: url(images/icon_arrow_poll.gif) 0px 2px no-repeat;
    position: relative;
    float: right;
    padding-right: 10px;
    padding-left: 8px;
    margin: 5px 0 0 0;
    }
    
    #pollBoxBottom {
    background: url(images/border_poll_bottom.gif) no-repeat;
    height: 11px;
    width: 300px;
    line-height: 0px;
    font-size: 1px;
    clear: both;
    position:relative;
    }
    
    </style>
    </head>
    
    <body>
    <form id="poll">
    	<div id="pollBox">
    		<input type="hidden" name="question1Id" value="118">
    		<h1>Question?</h1>
    		<input type="radio" name="q1Choice" value="432" class="firstPollAnswer">Yes<br />
    		<input type="radio" name="q1Choice" value="433">No<br />
    		<input type="radio" name="q1Choice" value="434">Not sure<br />
    		<div class="pollResults"><a href="/content/polls/1/111982?uri=pollresults.htm" onclick="s_objectID='MyPolls_results';return showlink(this, 'normal', page_name + '_MyPolls_results');">View Results</a></div>
    		<input class="voteButton" type="image" onclick="s_objectID='MyPolls_vote';return showlink(this, 'normal', page_name + '_MyPolls_vote');" alt="submit" src="http://a876.g.akamai.net/7/876/1448/v00002/images.com/wwwimages/webmdportal/images/button_vote.gif"></div>
    		<div id="pollBoxBottom">&nbsp;</div>
    	</div>
    </form>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •