CSS Positioning Help! (should be simple..)

bermanbp · 12-16-2005, 07:38 PM

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

mark87 · 12-16-2005, 07:50 PM

Hard to help really if you don't show some code! Here's what I normally use for rounded corners.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Rounded Corners. Snazzy Borders.</title>
<link rel="stylesheet" type="text/css" href="none.css" title="none" />

<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p { margin: 0 10px }
#xsnazzy h1 { font-size: 2.5em; color: #FFF; }
#xsnazzy h2 { font-size: 2em; color: #06a; border: 0; }
#xsnazzy p { padding-bottom: 0.5em; }
#xsnazzy h2 { padding-top: 0.5em; }
#xsnazzy { background: transparent; margin: 1em; }

.xtop, .xbottom { display: block; background: transparent; font-size: 1px; }
.xb1, .xb2, .xb3, .xb4 { display: block; overflow: hidden; }
.xb1, .xb2, .xb3 { height: 1px;}
.xb2, .xb3, .xb4 { background: #d4d4d4; border-left: 1px solid #08c; border-right: 1px solid #08c; }
.xb1 { margin: 0 5px; background: #08c; }
.xb2 { margin: 0 3px; border-width: 0 2px; }
.xb3 { margin: 0 2px;}
.xb4 { height: 2px; margin: 0 1px; }

.xboxcontent { display: block; background: #d4d4d4; border: 0 solid #08c; border-width: 0 1px; }
</style>

</head>

<body>

<div id="info">

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">
<h1>Snazzy Borders</h1>
<p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>
<h2>Rounded borders without images</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

</body>

</html>

bermanbp · 12-16-2005, 10:30 PM

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