Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Rounded Corners Box Help
Old 12-04-2010, 10:44 AM Rounded Corners Box Help
Novice Talker

Posts: 8
Trades: 0
I used the code generated from here: http://www.neuroticweb.com/recursos/...8&fondo=a7b6e3

It works fine whenever I place the code on it's own page, but whenever I place the code in my layout. The top of the box doesn't show up.

Layout code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arcade Demand - Free Online Games, Your Favorite Games at Your Demand!</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
<!--

function roll(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

//-->
</script>
</head>

<body>

<div id="wrapper">

<div id="header">
<div id="head1"></div><a href="#home"><div id="logo"></div></a></div><div id="head2"></div>
</div>

<div id="menu">
<div id="menu1"></div><a href="#home" onmouseover="roll('home', 'images/arcade_hover_05.jpg')" 
onmouseout="roll('home', 'images/arcade_05.jpg')"><div id="home"><img name="home" src="http://www.webmaster-talk.com/images/arcade_05.jpg" width="48" height="37" /></div></a><div id="spacer1">
</div><a href="#allgames" onmouseover="roll('allgames', 'images/arcade_hover_07.jpg')" 
onmouseout="roll('allgames', 'images/arcade_07.jpg')"><div id="allgames"><img name="allgames" src="http://www.webmaster-talk.com/images/arcade_07.jpg" width="84" height="37" /></div></a><div id="spacer2">
</div><a href="#action"onmouseover="roll('action', 'images/arcade_hover_09.jpg')" 
onmouseout="roll('action', 'images/arcade_09.jpg')" ><div id="action"><img name="action" src="http://www.webmaster-talk.com/images/arcade_09.jpg" width="59" height="37" /></div></a><div id="spacer3">
</div><a href="#strategy" onmouseover="roll('strategy', 'images/arcade_hover_11.jpg')" 
onmouseout="roll('strategy', 'images/arcade_11.jpg')"><div id="strategy"><img name="strategy" src="http://www.webmaster-talk.com/images/arcade_11.jpg" width="78" height="37" /></div></a><div id="spacer4">
</div><a href="#adventure" onmouseover="roll('adventure', 'images/arcade_hover_13.jpg')" 
onmouseout="roll('adventure', 'images/arcade_13.jpg')"><div id="adventure"><img name="adventure" src="http://www.webmaster-talk.com/images/arcade_13.jpg" width="88" height="37" /></div></a><div id="spacer5">
</div><a href="#sports" onmouseover="roll('sports', 'images/arcade_hover_15.jpg')" 
onmouseout="roll('sports', 'images/arcade_15.jpg')" ><div id="sports"><img name="sports" src="http://www.webmaster-talk.com/images/arcade_15.jpg" width="61" height="37" /></div></a><div id="spacer6">
</div><a href="#puzzle" onmouseover="roll('puzzle', 'images/arcade_hover_17.jpg')" 
onmouseout="roll('puzzle', 'images/arcade_17.jpg')" ><div id="puzzle"><img name="puzzle" src="http://www.webmaster-talk.com/images/arcade_17.jpg" width="60" height="" /></div></a><div id="spacer7">
</div><a href="#other" onmouseover="roll('other', 'images/arcade_hover_19.jpg')" 
onmouseout="roll('other', 'images/arcade_19.jpg')"><div id="other"><img name="other" src="http://www.webmaster-talk.com/images/arcade_19.jpg" width="56" height="37" /></div></a><div id="menu2"></div>
</div>

<div id="content">

<div id="submenu">
<div id="submenu1"></div><div id="submenu2">Welcome to Arcade Demand, the best place to play free online games!</div><div id="submenu3"></div>
</div>

<div class="rbroundbox">
	<div class="rbtop"><div></div></div>
		<div class="rbcontent">
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
		</div><!-- /rbcontent -->
	<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

</div>

</div>

</body>
</html>
Stylesheet

Code:
body{
	background-color: #a7b6e3;
	margin: 0px;
}
#wrapper{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#header{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#head1{
	float: left;
	background-image: url(images/arcade_01.jpg);
	backround-repeat: none;
	width: 36px;
	height: 144px;
}
#logo{
	float: left;
	background-image: url(images/arcade_02.jpg);
	background-repeat: none;
	width: 334px;
	height: 144px;
}
#head2{
	float: left;
	background-image: url(images/arcade_03.jpg);
	backround-repeat: none;
	width: 630px;
	height: 144px;
}
#menu{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#menu1{
	float: left;
	background-image: url(images/arcade_04.jpg);
	width: 202px;
	height: 37px;
}
#home{
	float: left;
	background-image: url(images/arcade_05.jpg);
	width: 48px;
	height: 37px;
}
#allgames{
	float: left;
	background-image: url(images/arcade_07.jpg);
	width: 84px;
	height: 37px;
}
#action{
	float: left;
	background-image: url(images/arcade_09.jpg);
	width: 59px;
	height: 37px;
}
#strategy{
	float: left;
	background-image: url(images/arcade_11.jpg);
	width: 78px;
	height: 37px;
}
#adventure{
	float: left;
	background-image: url(images/arcade_13.jpg);
	width: 88px;
	height: 37px;
}
#sports{
	float: left;
	background-image: url(images/arcade_15.jpg);
	width: 61px;
	height: 37px;
}
#puzzle{
	float: left;
	background-image: url(images/arcade_17.jpg);
	width: 59px;
	height: 37px;
}
#other{
	float: left;
	background-image: url(images/arcade_19.jpg);
	width: 56px;
	height: 37px;
}
#spacer1{
	float: left;
	background-image: url(images/arcade_17.jpg);
	width: 60px;
	height: 37px;
}
#spacer1{
	float: left;
	background-image:url(images/arcade_06.jpg);
	width: 9px;
	height: 37px;
}
#spacer2{
	float: left;
	background-image: url(images/arcade_08.jpg);
	width: 9px;
	height: 37px;
}
#spacer3{
	float: left;
	background-image: url(images/arcade_10.jpg);
	width: 9px;
	height: 37px;
}
#spacer4{
	float: left;
	background-image: url(images/arcade_12.jpg);
	width: 9px;
	height: 37px;
}
#spacer5{
	float: left;
	background-image: url(images/arcade_14.jpg);
	width: 9px;
	height: 37px;
}
#spacer6{
	float: left;
	background-image: url(images/arcade_16.jpg);
	width: 9px;
	height: 37px;
}
#spacer7{
	float: left;
	background-image: url(images/arcade_18.jpg);
	width: 9px;
	height: 37px;
}
#menu2{
	float: left;
	background-image: url(images/arcade_20.jpg);
	width: 202px;
	height: 37px;
}
img{
	border: 0px;
}
#content{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#submenu{
	width: 990px;
	margin-left: auto;
	margin-right: auto;
}
#submenu1{
	float: left;
	background-image: url(images/arcade_22.jpg);
	width: 9px;
	height: 25px;
}
#submenu2{
	float: left;
	background-image: url(images/arcade_23.jpg);
	background-repeat: repeat-x;
	width: 971px;
	height: 25px;
	padding-top: 4px;
	text-align: center;
	font-family: Arial;
	font-weight: bold;
	font-size: 10pt;
	color: #FFFFFF;
}
#submenu3{
	float: left;
	background-image: url(images/arcade_25.jpg);
	width: 9px;
	height: 25px;
}
/* set millions of background images */
.rbroundbox { background: url(images/nt.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 990px; }
Please help me fix this issue. It is really urgent! All the content for my website is going to be in the rounded corner boxes.

Last edited by cheesemaker; 12-04-2010 at 10:45 AM..
cheesemaker is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 12-04-2010, 10:50 AM Re: Rounded Corners Box Help
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
why not use CSS3 for this and accept that older browsers will see a square box?
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 12-04-2010, 10:55 AM Re: Rounded Corners Box Help
Novice Talker

Posts: 8
Trades: 0
All the boxes need to be rounded, I don't really care about the older browsers. They are barely used nowadays. But this doesn't even work in the latest version of google chrome. Please explain more about CSS3? I don't read up much on improving my CSS, as I am mainly a PHP programmer, but money is tight, so I needed to code this layout myself.
cheesemaker is offline
Reply With Quote
View Public Profile
 
Old 12-04-2010, 10:58 AM Re: Rounded Corners Box Help
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
can you put a link to the site where your page is live?
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 12-04-2010, 10:59 AM Re: Rounded Corners Box Help
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
read about it here:

http://www.css3.info/preview/rounded-border/
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 12-04-2010, 11:34 AM Re: Rounded Corners Box Help
Novice Talker

Posts: 8
Trades: 0
Thanks for the link.

I tried using CSS3. Still not working, has to be the layout code.

Last edited by cheesemaker; 12-04-2010 at 02:03 PM..
cheesemaker is offline
Reply With Quote
View Public Profile
 
Old 12-04-2010, 01:54 PM Re: Rounded Corners Box Help
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
you've got to clear your floats.

http://www.webmaster-talk.com/css-fo...you-clear.html
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 12-04-2010, 02:03 PM Re: Rounded Corners Box Help
Novice Talker

Posts: 8
Trades: 0
Thank you so much! I fixed it
cheesemaker is offline
Reply With Quote
View Public Profile
 
Old 12-04-2010, 02:19 PM Re: Rounded Corners Box Help
edgray's Avatar
Super Moderator

Latest Blog Post:
Frantic
Posts: 4,264
Name: Sugarcane Gray
Location: Hell, Southern Spain
Trades: 0
you're welcome. Once the site is finished, post it in the reviews section for everyone to see!
__________________

Please login or register to view this content. Registration is FREE
- a project in video and sound.

Please login or register to view this content. Registration is FREE
"Absolute Rubbish, an insult to the blues." - NME.

Please login or register to view this content. Registration is FREE
- Come use our agency :)
edgray is offline
Reply With Quote
View Public Profile Visit edgray's homepage!
 
Old 12-04-2010, 02:24 PM Re: Rounded Corners Box Help
Novice Talker

Posts: 8
Trades: 0
Alright, will do.
cheesemaker is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Rounded Corners Box Help
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.79946 seconds with 12 queries