CSS - Lock Flash Movie To Corner Of Screen...

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

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!

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

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

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>

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>

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?

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

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>

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>

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 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 developing a site that requires the navigation menu to have one rounded corner at the end on the home button. The default button state is created using a background image but I need it to also have a rollover effect on hover and also on focus (for the home page item only). I have tried to use CSS and curvy corners Javascript code to create the effect as I don't want to use images. However, I don't think the curvy corners script is picking up the div item that I want to apply the corner to.

The trouble is I have a number of div boxes on the site that also have rounded corners (3 rounded and 1 square). The CSS is working fine for these in all browsers apart from Opera but when it comes to the navigation it doesn't work properly in IE.

Here's the HTML for the menu:

Code:

<div id="menu">
	<ul>
	<li><a href="index.htm" class="home">Home</a></li><li><a href="#">Mortgages</a></li><li><a href="#">Life Assurance</a></li><li><a href="#">General Insurance</a></li><li><a href="#">Partnership Services</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li>
	</ul>
</div>
<br class="clearfloat" /> 

and here's the CSS:

Code:

#menu {
	background-image:url(images/menubg.png);
	height:24px;
	width: 100%;
	overflow: hidden;
	position:relative;
	float:left;
	}
	
#menu ul {font-size:11px; font-weight:bold; list-style:none;}
#menu li{ display: inline; margin: 0;}
#menu ul li a {float: left;
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 6px 15px 5px 15px; /*padding inside each tab*/
	border-right: 1px solid white; /*right divider between tabs*/
	color: white;
}
#menu li a:hover, #menu li a.focus {display: block; text-decoration:none; color:#445671; background-color:#d9e021;} /*background of tabs for hover state, plus tab with "focus" class assigned */

#menu li a.home:hover, #menu li a.homefocus { width:auto; text-decoration:none; color:#445671; background-color:#d9e021; border-right: 1px solid white;
/* Do rounding (native in Firefox and Safari) */
     -moz-border-radius-topleft:12px;
   	-moz-border-radius-topright:0px;
  	-moz-border-radius-bottomleft:0;
  	-moz-border-radius-bottomright:0px;
  	-webkit-border-top-left-radius:12px;
  	-webkit-border-top-right-radius:0px;
  	-webkit-border-bottom-left-radius:0px;
  	-webkit-border-bottom-right-radius:0px;
}

The CSS is in an external stylesheet, although I have also added the CSS for the rounded corner items to the header code.

The class 'homefocus' seems to work when applied to the a tag on the home page but the other class 'home' which should work on hover won't work in IE.

I'm sure it's something to do with the hover. Any ideas how I can make it work?