CSS - Attaching A Picture To The Bottom Right Hand Corner Of A Wrapper

Hello all i have this site here -> http://forum.prxa.info/index.php

I am trying to create a box to the right of the logo right up near the end of the page to contain some text, can anyone help me out?

Thanks!

friends
i have table..
that table corner must be in the curve form..
i dont know to do..
plz send the links for my problem


curve edge is my output..
for that related css link plz



thanks in advance

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, you would have already seen one of my newbie topics here today, and here is another one. I need to put a image in the corner of an absolutly positioned div. I don't know how to do that. It would be in the upper left-hand corner.

Any suggestions?

Perhaps I should pick up a CSS book, is there one that you reccomend.

Thanks,
-Sam

Hello

I did try, search, change samples from this forum, ( found one about to place a image down at left ).

I need a image on the right side at the bottom of a container with text. The text should float arround ( left and above ) the image. Simple target to say, but even with samples from some books and this forum, I can't get it to work.

How to let work on the left or right top alligned, I did wrote a working sample.
Please can anybody help me out.

I've only recently started teaching myself CSS and have been playing around with various techniques. The problem I'm having is that for some reason, there is a little box in the top left part of the page. Its link is the same as the link in my header, but it follows the behaviors of my navigation links. This doesn't make any sense to me since the two should be completely separate from each other. So the problems are that there is this little box in the top of the screen that shouldn't be there and why is it behaving the same as my navigation links. Here's a screenshot of what I'm talking about:

Screenshot

And I know the colors and page look horrible, I'm just playing around with things now.

Here's my CSS code:
Code:

body{ 	background: #000000 url('BG.gif') repeat-y 50%; 	background-attachment: fixed; 	padding: 0; 	margin: 0; 	z-index: 1; }  #container{ 	width: 800px; 	margin: 0 auto; 	text-align: left; 	padding: 0; }  #header{ 	padding: 0; 	margin: 0; }  #header h1{ 	text-indent: -99999px; 	background: #AAEECC; 	height: 125px; 	width: 800px; 	padding: 0; 	margin: 15px 0 0 0; }  #header img{ 	border: 0 none black; }   #navigation{ 	background: blue; 	height: 35px; 	border: 2px white solid; 	-moz-border-radius: 12px; 	z-index: 1; }  #navigation ul{ 	list-style: none; 	margin: 0; 	padding: 5px 300px; 	font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif; 	z-index: 1; 	-moz-border-radius: 2px; 	border: 1px black solid; }  #navigation li{ 	color: white; 	padding: 2px; 	z-index: 1; 	display: inline; 	text-align: center; 	float: left; } #navigation a{ 	z-index:1; 	text-decoration: none; }  #navigation a:link, a:visited{ 	background: #DD33AA; 	padding: 5px; }  #navigation a:hover, a:active{ 	padding: 20px; 	background-color:#7A991A; }  #content{ 	padding: 10px; 	text-indent: 15px; 	background: #333000; 	min-height: 250px; 	width: 630px; 	color: #ffffff; 	float: left; 	margin: 5px auto auto 5px; 	-moz-border-radius: 45px; 	border: 2px white solid; 	-moz-box-shadow: 10px 10px 2px #999; 	z-index:2; }  #left{ 	width: 105px; 	padding: 10px; 	-moz-border-radius: 15px; 	border: 2px white solid; 	min-height: 270px; 	float: left; 	background: #FA3333; 	z-index:2; }  #clear{ 	clear: both; } #footer{ 	width: 780px; 	background: #A82921 50%; 	padding: 4px 10px; 	text-align: center; 	margin: 0 auto 0 0; 	clear: both; 	position: relative; 	opacity: .8; }

And here's the HTML code:
Code:

 <body>  <div id="container">  	<div id="header"> 		<a href="http://www.yahoo.com"><h1>My Site</h1></a>	 	</div>  	<div id="navigation"> 		<ul> 		<li><a href="http://www.google.com">Home</a></li> 		<li><a href="http://www.google.com">Page 2</a></li> 		</ul> 	</div> 	 	<div id="left">Left side</div> 	 	<div id="content"> 		Content goes here 	</div> 	<div id="clear"></div> 	<div id="footer"> 		Footer 	</div>  </div>  </body>

Hi,
I have 5 images to display in my rounded corner. It works fine but i can't resize the whole image below 350px in height.The width seems fine for what i want about 140px. The height sizes of the side,trc,brc image are all 120 px each and total 360px. If I set the height to below 350 then i get the bottom chopped off with squarish corners. Why can't this image resize itself because i specify in % size?

Code:

div#t3 {

	height:350px;
     background: url(../images/tlc.jpg) top left no-repeat;
	color: black;

    width: 100%;
}

div#tr {
 height:10%;
  background: url(../images/trc.jpg) top right no-repeat;


	}
	
 div#mr{
    height: 80%;
       height: 100px%;
  background: url(../images/side.jpg) top right repeat-y;

	}


 div#ft {

  height:10%;
  
    background: url(../images/blc.jpg) bottom left no-repeat;

    }

 div#ft2{
    height:100%;
     height:50px;
  background: url(../images/brc.jpg) bottom right no-repeat;

}


//html

<div id="t3">
<div id="tr">
</div>
<div id="mr">

  gdfgdg<br>fsdfds<br>asdasdasdasdasdasd

</div>
<div id="ft">
<div id="ft2">
</div>
</div>
</div>

Thanks so much for taking the time to read my question.

I have a rounded corner that isn't working. For now, I have a red corner, so that it stands out and I know it's position.

I would like the right side to look the same as the left side of the contentheaderbox (this is where the page title goes like Home, or Contacts, or Site Map).

Not sure how to do this, I've run out of ideas. I have no where to post it, so I've attached the files.

Thanks for the help.

Brad

Hi, I'm still trying to learn CSS. Using CSS instead of tables really increases the versatility of the page, but, don't the graphics suffer? I'm trying to make a 3column layout which resizes according to the resolution. I've made it, but IMO it would look more appealing if I could make the corners curved as in... the menu box corners and the content space corners. Is there anyway to do this?

I copy code to make a rounded corner and test it with my images

It is a mess as I get 1 image out of 4 displaying and i did get the names correct.

How do I assemble cut my image sizes for this? I create a rounded corner in Gimp and cut it up.

I am ANNOYED at the time spent doing this.
Images enclosed and here is code i use from

http://www.vertexwerks.com/tests/sidebox/

Code:

<html>
<head>

<style type="text/css">
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

body { background-color:Green  }

.sidebox {
	margin: 0 10; /* center for now */
	width: 27em; /* ems so it will grow */
	background: url(wbright2.png) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(whright2.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(whleft2.png) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;

}
.boxbody {
	background: url(wbleft2.png) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}

</style >
<title>
</title>
</head>
<body><h1>It works!</h1>
<div class="sidebox">
	<div class="boxhead"><h2>Test Headline</h2></div>
	<div class="boxbody">
		<p>This is a short sample paragraph.</p>
		<p>And another onsdasdadsadsadsadsadsadsad
		asdsadadsaffffffffffffffffffffffffffffff dsdsf sdfdsf sdfdsf sdfsdf sdfsd 
		sdfffffe.</p>
	</div>
</div>
<br />

asSADSADSAD
<img src="whleft2.png" />

</body></html>

I have searched around, but nothing has yet fixed my problem. I have a table. I want one of the cells to have a white background, a black border and rounded corners. However, when I try to place the curve images in the corner, they jump to the corners of the table and not the cell. Can anyone spot my mistake/guide me to a higher level of understanding? Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div.RedTable {
                position: relative;
                width: 700px;
                min-height: 500px;
                background-color: #8B0000;
                border: 2px solid black;
            }
                td.ContentWindow {
                    position: relative;
                    background-color: white;
                    border: 2px solid black;
                    padding: 10px;
                    margin: 10px;
                }
                    img.WindowULCorner {
                        position: absolute;
                        top: -2px;
                        left: -2px;
                    }
                    img.WindowURCorner {
                        position: absolute;
                        top: -2px;
                        right: -2px;
                    }
                    img.WindowLLCorner {
                        position: absolute;
                        bottom: -2px;
                        left: -2px;
                    }
                    img.WindowLRCorner {
                        position: absolute;
                        bottom: -2px;
                        right: -2px;
                    }
        </style>
    </head>
    <body>
        <div class="RedTable">
            <table summary="" width="100%">
                <tr>
                    <td class="ContentWindow">
                        <img class="WindowULCorner" src="images/white_UL.gif" alt="" />
                        <img class="WindowURCorner" src="images/white_UR.gif" alt="" />
                        <img class="WindowLLCorner" src="images/white_LL.gif" alt="" />
                        <img class="WindowLRCorner" src="images/white_LR.gif" alt="" />
                            
                        filler text 1
                    </td>
                    <td style="width: 35%;">
                        filler text 2
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

I am trying to attach 4 rounded images to a box, I have read hundreds of guides but non that seem to help. The problem I think is that I have set the size of the box rather than letting the amount of text written in it define the size. The idea is that the white box (mainarea) will have 3 different colour boxes inside it, but herein lies another problem. They are not inside the box they are merely on top of it, is this a problem. At the moment I have one corner (bottom left) positioned perfectly. My problem is the other 3. As you can see I have removed all the previous attempts to do this. Please someone help I think my hair is falling out!

CSS

Code:

body { 
 background-image: url(bg2.png); 
 background-repeat: repeat; 
}

#image1 {
 position:relative;
 width:650px;
 height:125px;
 background-image: url(banner.png);
 margin-left: auto;
 margin-right: auto;
}

#navi {
 position:relative;
 top:20px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:50px;
 background-image: url(navibg.png);
 /*background : #ffcc66 url(bg_navPrimaryShadow.gif) repeat-x 0 100% */
 }

#mainarea {
 position:relative;
 top:40px;
 margin-left: auto;
 margin-right: auto;
 width:650px;
 height:480px;
 background:#ffffff url(cornerbtlft.png) 0 100% no-repeat;
 }


#box1 {
 position:absolute;
 top:250px;
 left:200px;
 width:600px;
 height:150px;
 background-color:#ffcc66;
 }

#box2 {
 position:absolute;
 top:420px;
 left:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }
 
#box3 {
 position:absolute;
 top:420px;
 right:200px;
 width:280px;
 height:275px;
 background-color:#ffcc66;
 }

#leftlg {
 position:absolute;
 top:230px;
 left:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#rightlg {
 position:absolute;
 top:230px;
 right:17px;
 width:140px;
 height:500px;
 background-color:#ffffff;
 }
 
#footer {
 position:relative;
 height:70px;
 }

HTML

Code:

<body>
<div id="image1"></div>

<div id="navi"></div>


<div id="mainarea"></div>
<div id="topleft"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="leftlg"></div>
<div id="rightlg"></div>
<div id="footer"></div>


</body>

in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE.
I wish to contain all div tags together, Would appreciate help.

Hi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this?

the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css

Any help is appreciated.

Thanks