CSS - Creating A Re-usable Quote Box...similar To A Rounded Box

Hello all,

Can anyone advise what the best way to add an "Add to Quote" button and forms, similar to a shopping cart but we don't need the capability to take money. Prices are rapidly changing and a lot of our transactions are business to business. Is this something I can implement myself with a basic knowledge of html and css or does it go beyond that?

http://www.abrametal.com
http://www.abra-metal.com

Best Regards,
Colin

Hi,

I have created a component which is wrapped inside a div element. Is it possible to set the border of the div element similar to the borders shown by default for a select drop down?

thanks and regards,
Sim085

Hello all-
I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark:

"This is Headline 1"
"This is Headline 2 and When It Wraps,
the First Line Falls under the Quote Mark"

Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark.

Is it possible to use a character, i.e., the quote mark, as a list marker?
Thanks in advance...

- Tom Tedeschi

Okay, so I've been trying to figure out the easiest way to make a layer with rounded corners in CSS. I used the 4 corner image way (as opposed to using JavaScript, or a single scalable image).

The problem isn't my "main" layer, it's that I have two layers within that "main" layer that need to be positioned correctly (a "navbar" and "content").

The "navbar" I have as float: left, and the same for the "content." Long story short, the "content" window (that also has rounded corners) goes all the way to the right of the "main" layer. I want there to be a margin on the right, but if I put one, the "main" layer messes up big time and goes past the original width it was at.

Anyone got an answer to my problem (unlikely, since I didn't explain it very well I don't think) or a simple tutorial I can do?

Here's what I want (LINK).

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

How all the divs are rounded in this css ????

I am looking at the images and none f them has any image of a rounded corner ?


Code:

body {
	margin: 10px 0;
	padding: 0;
	background: #FFFFFF url(images/img00.gif) repeat-x;
	font: normal small Georgia, "Times New Roman", Times, serif;
	color: #6B6B6B;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #3787DE;
}

h1, h2, h3 {
}

h4, h5, h6 {
}

p, ul, ol, blockquote {
	margin-top: 0;
	line-height: 160%;
}

blockquote {
	font-style: italic;
}

a {
	text-decoration: none;
	color: #3787DE;
}

a:hover {
	text-decoration: underline;
	color: #990000;
}

img {
	border: none;
}

/* Header */

#header {
	width: 760px;
	height: 101px;
	margin: 0 auto; 
	background: url(images/img01.gif) no-repeat;
}

#header h1 {
	float: left;
	padding: 25px 0 0 20px;
	letter-spacing: -3px;
	font-size: 3.4em;
}

#header h2 {
	float: right;
	padding: 43px 20px 0 0;
	letter-spacing: -1px;
	font-size: 2em;
}

#header a {
	text-decoration: none;
}

/* Content */

#content {
	width: 720px;
	margin: 0 auto;
	padding: 20px;
	background: url(images/img02.gif) no-repeat;
}

/* Posts */

#posts {
	float: left;
	width: 320px;
}

.post {
}

.post .title {
	letter-spacing: -1px;
	font-size: 2em;
}

.post .posted {
	margin-bottom: 20px;
	font-size: .8em;
}

.post .story {
}

.post .meta {
	height: 50px;
	padding: 8px 0 0 10px;
	background: url(images/img09.gif) no-repeat;
	font-size: .8em;
}

/* Archives */

#archives {
	float: left;
	width: 180px;
	padding: 0 0 0 20px;
}

/* Search */

#search {
	float: right;
	width: 180px;
}

#search form {
	margin: 0 0 12px 0;
	padding: 0;
}

#search #textfield1 {
	width: 155px;
}

#search #submit1 {
	display: none;
}

/* Pages */

#pages {
	float: right;
	width: 180px;
}

/* Categories */

#categories {
	float: right;
	width: 180px;
}

/* Blog Roll */

#blogroll {
	float: right;
	width: 180px;
}

/* Orange Box */

.obox {
}

.obox .heading {
	height: 27px;
	padding: 4px 0 0 10px;
	background: url(images/img03.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #FF6500;
}

.obox .content {
	padding: 10px;
	background: url(images/img04.gif) no-repeat;
}

.obox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.obox li {
	padding-left: 15px;
	background: url(images/img05.gif) no-repeat left center;
}

.obox a {
	color: #FF6500;
}

/* Green Box */

.gbox {
}

.gbox .heading {
	height: 27px;
	padding: 4px 0 0 10px;
	background: url(images/img06.gif) no-repeat;
	letter-spacing: -1px;
	font-size: 1.4em;
	color: #09881C;
}

.gbox .content {
	padding: 10px;
	background: url(images/img07.gif) no-repeat;
}

.gbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbox li {
	padding-left: 15px;
	background: url(images/img08.gif) no-repeat left center;
}

.gbox a {
	color: #09881C;
}

/* Footer */

#footer {
	width: 760px;
	margin: 0 auto;
	padding: 60px 0 0 0;
	background: url(images/img10.gif) no-repeat;
}

#footer p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: x-small;
}

Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that.
So i hope there is someone out there with some good idea.

Thanks in advance.

Hey, searched so don't give me crap.

I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } )

I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
html {
    height: 100%;
    overflow: scroll;
}
body {
    font-family: tahoma, arial, sans-serif;
    font-size: 11px;
    background: #DEDEBA;
    margin: 0px 0px 0px 0px;
    color: #DEDEBA;
}
input, option, select, textarea {
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 11px;
}
.search {
    margin: 0px;
    padding: 5px 5px 5px 7px;
    width: 366px;
    height: 24px;
    float: right;
}
.input-search {
    width: 259px;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    background: #DEDEBA;
    border-color: #666666;
    float: left;
    text-shadow: 808080;
    color: #808080;
}
</style>
    <script type="text/javascript" src="webfunctions.js"></script>
</head>
<body>

            <div class="search">
     <form action="search.php" method="post" style="display:inline;">
            <div>
<input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" />
<input type="image" src="images/search.gif" /></div>
</form>
</div> 

Thanks for reading my question

Here is the link to the two pages in question.

http://www.pierced.ca/Kelly/cardsRound.htm http://www.pierced.ca/Kelly/indexRound.htm

I know my images for the rounded corners aren't round, that's not the problem. My problem is the positioning of the images.

When I view the pages using IE, the "Menu" images line up perfectly, and it's just the bl.jpg and br.jpg images on the "Info" section that don't.

When I view the pages using FireFox, the bl.jpg and br.jpg images on the "Menu" section are off.

Any words of wisdom to get both to work?

Thanks again,

Brad

What is the best way to make your element corners rounded with CSS? I'm kind of looking for a good tutorial.

Am having a problem with turning a design into a tableless layout.
I've attached the part of the layout I'm trying to code and this is the code I'm using:

xhtml Code:
Original - xhtml Code <div class="content"> <div class="bar">Devshed Rocks the socks of oneself</div> <div class="leftcon">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. 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.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. 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 lu ptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div> <div class="rightcon">Hey</div> </div>

  
    <div class="content">
        <div class="bar">Devshed Rocks the socks of oneself</div>
        <div class="leftcon">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. 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.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. 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 lu ptatum zzril 
        delenit augue duis dolore te feugait nulla facilisi.</div>
        <div class="rightcon">Hey</div>
    </div>

And here is the css:

css Code:
Original - css Code .content { width:570px; float:right; margin-top:20px; background-color:#CCCCCC; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; } .leftcon { width:450px; padding:5px; float:left; border-right:1px solid black; background-color:#FFFFFF; padding-left:15px; background-image:url(images/cornerbot.jpg); background-repeat:no-repeat; } .bar { background-color:#66CC00; font-size:12pt; padding:10px; padding-left:15px; background-image:url(images/corner.jpg); background-repeat:repeat-y; }

  

 .content {


 width:570px;


 float:right;


 margin-top:20px;


 background-color:#CCCCCC;


 font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;


 }


  


 .leftcon {


 width:450px;


 padding:5px;


 float:left;


 border-right:1px solid black;


 background-color:#FFFFFF;


 padding-left:15px;


 background-image:url(images/cornerbot.jpg);


 background-repeat:no-repeat;


 }


  


 .bar {


 background-color:#66CC00;


 font-size:12pt;


 padding:10px;


 padding-left:15px;


 background-image:url(images/corner.jpg);


 background-repeat:repeat-y;


 } 

The corner image simply won't line up with the bottom half of the corner which I have as the left floated background image. Anyone able to point out what I'm doing wrong or perhaps offer another solution?

Thanks

Hi,

Does anyone know of a way to do the effect of rounding corners (see attached image) in CSS?

As you'll see in the image, I just want 1 pixel to be offset and be in a different colour for each corner of my box.

I have copied this tutorial, but my divs are not showing rounded, but still square. http://www.sitepoint.com/article/ro...-css-javascript Tut link

Can anyone see what I've done wrong?

I have attached a screenshot as the webpage is located on a protected server. The header is what I'm trying to make round. I have stroked it in black to show you

My html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Test Rounded Div</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="container" align="center">
  <div class="header">
   <div>  <!-- upper left corner-->
     <div> <!-- bottom right-->
       <div> <!-- bottom left -->
         Header
       </div>
     </div>
   </div>
  </div>
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="footer">Footer</div>
 </div>
</body>
</html>

My CSS:

Code:

div.header {
  width: 200px;
  background: #4095BF url(img/blue_top_rt.gif) no-repeat top right;
}

div.header div {
  background: transparent url(img/blue_top_left.gif) no-repeat top left;
}

div.header div div {
  background: transparent url(img/blue_bottom_rt.gif) no-repeat bottom right;
}

div.header div div div {
  background: transparent url(img/blue_bottom_lt.gif) no-repeat bottom left;
  padding: 15px;
}

www . gameyin . com

It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help?

Hi

I'm trying to match the overhead menu element of a Coppermine theme to a phpBB style. I've just run into a few problems and I was wonding if anyone could help please?

Coppermine here - http://www.brummiesfans.com/coppermine
phpBB3 here - http://www.brummiesfans.com/main/

Where I would like some help please is in getting the menu bar to have the same rounded corners as in phpBB3. What I have tried to do is to use the CSS from phpBB3, but on this occasion, it has
not worked. The code is shown below. I don't have a problem in Firefox, Safari or Chrome, as there is code in place to sort the rounded corners out in CSS, however I need the missing piece put into place for IE, and this is where I need help.

In phpBB3 the div classes are called "corners-top" and "corners-bottom".

The relevant graphics files have also been copied across. (e.g. www.brummiesfans.com/coppermine/themes/brummies/images/corners_right.png)

If someone can suggest how the matter can be fixed then I'd be very grateful.

The relevant bits of the template.html and style.css file wordings follow, which hopefully will be of help.

TEMPLATE.HTML
Code:

		<div class="navbar">

			<span class="corners-top"><span></span></span>

            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
                <!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>

			<span class="corners-bottom"><span></span></span>	
		</div>

STYLE.CSS
Code:

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}


span.corners-top {
	background-image: url("images/corners_left.png");
}

span.corners-top span {
	background-image: url("images/corners_right.png");
}

span.corners-bottom {
	background-image: url("images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("images/corners_right.png");
}

div.headerbar span.corners-top {
    background-image: url("images/corners_left2.png");
}

div.headerbar span.corners-top span {
    background-image: url("images/corners_right2.png");
}


span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

Thanks in advance for any assistance.

Martin