CSS - Problem With Rounded Boxes (modules) In A Cms

Not sure whether this would be a CSS thing or a PHP application. But I'm working on a new site design that randomly shows a large photograph as a background to my portal site (1 photo randomly out of a library of 500 or so photos).

I want to allow my visitors to press a shortcut key to hide everything on the page except the page's background if they ever wanted to see what was peeking through the portal columns and around the sides of the page.

Is this possible? And if so, how?

i have got two areas created with css one above the other but there is a large white gap between i have tried playing arond with the CSS file but cant gt them closer together im still only learning css but i thought id be able to do this.... if someone could advise that would be really great...

here is the page so you can see what is happeneing
http://www.justtaps.com/test/admintemplate.php

and this is a link to the css file
http://www.justtaps.com/test/css/main.css

thanks in advanced to anyone who replies..

RF

Hi
I have these boxes which displays correctly in IE but when I view it in FF, the bottom grey line is gone
Click Here
Can someone someone give pointers as to whats happening
San

I am sure that you've seen these types of divs/boxes that people use on their webpage. almost everyone uses it

pretty much it's a div or a table cell where the cell has background colour and a thin border around it (usually lighter) for a nice effect. Then obviously within the box, there is text to be displayed.

I can't seem to get this!! I've tried using tables but what happens is that the border starts overlapping with the other cells and I don't have the effect I won't

what's the easiest way of implementing this type of design?

thanks!

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).

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;
}

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> 

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.

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

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.

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/

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;
}

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