Menu
Hi everyone,
Here is the main html code i created:
[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>August70</title>
<link href=”page1/august1.css” media=”all” rel=”stylesheet” />
</head>
<body>
<div id=”upper_left”></div>
<div id=”upper_middle”></div>
<div id=”upper_right”></div>
</body>
</html>
This is the: “page1/august1.css” I wrote:
[CODE]
body
{
text-align:center;
font: 1em Lucida, Arial, sans-serif;
}
* {margin:0;padding:0;}
div#upper_left
{
background-image:url(upper_left.gif);
background-repeat:no-repeat;
float:left;
width:10px;
height:10px;
border: 3px solid #F00;
}
div#upper_middle
{
background-color:#bb9c63;
/*float:left;*/
width:120px;
height:10px;
border:3px solid blue;
}
div#upper_right
{
background-image:url(upper_right.gif);
background-repeat:no-repeat;
width:150px;
height:10px;
border:3px solid magenta;
}
At the page the browser loads (attached under the name “august1.gif”) the right corner graphic is located beneath the “left corner” graphic as seen at “august1.gif” attached.
I’d like the right corner to be located at the right side of the line so i remove the remark symbols from “div#upper_middle”. This time when i load the page the right corner is no more located beneath the “left_corner” graphic but it isn’t located at its right dise either, it disappears as seen at the attached screen shot (“august2.dif”).
Can anyone explain me please why did the right corner disappear ?
I would also like to ask another question: How do i locate that rounded corners line at the center of my page?
Thanks
[upl-file uuid=995e3a71-ecc0-4af3-8a50-33b238d07a88 size=376B]august1.gif
[upl-file uuid=7516447f-4ea2-430e-94e9-66ca5ee1f5e2 size=269B]august2.gif