PDA

Click to See Complete Forum and Search --> : centeralizing floating divs with expandable text

walidaly
11-19-2005, 12:12 AM
hi!
this is the html code I'm trying to use on error pages using php scripts..so, I'd like to use a tableless design thus, printing a long url into a floating div which is inside a limited width div breaks the page design.
this is it with a table
<!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=windows-1256">
<STYLE TYPE="text/css">
<!--
#container{
padding-top:15%;text-align:center;
}
#container table{
padding: 0;
margin: 0;
text-align: left;
margin-left: auto;
margin-right: auto;
}

.url{
padding-left:14px;
}
.rightdiv{
padding-left:20px;
}


-->
</STYLE>
</head>
<body>
<div id="container">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td style="padding-right:20px;"><img src="error.gif" alt="Error!" width="95" height="90" /> </td>
<td class="rightdiv"><h1>404 : We couldn't find the page </h1>
<div class="url">http://www.site.com/error-url</div></td>
</tr>
</table>
</div>
</BODY>
</HTML>

imagen the "http://www.site.com/error-url" url becomes "http://www.site.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX"
knowj
11-19-2005, 04:47 AM
you could use:
#container
{
padding-top:15%;
left:10%;
width:80%;
}

which would set it to be stretch to 80% of the page 10% from the left leaving another 10% on the other side making the div layer centered

you can change the % to vary what size you want.

sorry if this is insulting your intellegence but it's how iv done mine
ray326
11-19-2005, 10:40 PM
You could also use overflow:hidden on the div and let it just chop off the string.

<!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=windows-1256">
<STYLE TYPE="text/css">
<!--
#container {
padding-top:15%;
text-align:center;
}
img {
display:block;
width:95px;
height:90px;
float:left;
}
.url {
width:80%;
margin: auto;
padding-left: 100px;
overflow: hidden;
}

-->
</STYLE>
</head>
<body>
<div id="container">
<img src="error.gif" alt="Error!" width="95" height="90" />
<h1>404 : We couldn't find the page</h1>
<div class="url">http://www.site.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX</div></td>
</div>
</BODY>
</HTML>