PHWinfo - Afficher un message - Re: Is it possible to keep centered an AP div intoanother div?

10/04/2008, 17h04

Thank you TC2112, your tip was excellent. And when using image instead of div,
text-align: center; of a parent div does the trick instead of auto margins.

[q]Originally posted by: Murray *ACE*
Personally, I think the whole approach is big trouble.[/q]

True, if I was doing it for a real project. But it was just a hypothetical
layout exercise for the sake of it while I was studding spry repeat region. For
a real project with such layout it is more practical to use fixed pixel sizes.
I played with that too and changed the styling like the code below. I removed
the spry code and manually repeated the block four times. Critics welcome, I
appreciate your suggestions.

<!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"
xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
</div>
</body>
</html>

10/04/2008, 17h04	#4
emil emil Messages: n/a Hébergeur:	Re: Is it possible to keep centered an AP div intoanother div? Thank you TC2112, your tip was excellent. And when using image instead of div, text-align: center; of a parent div does the trick instead of auto margins. [q]Originally posted by: Murray ACE Personally, I think the whole approach is big trouble.[/q] True, if I was doing it for a real project. But it was just a hypothetical layout exercise for the sake of it while I was studding spry repeat region. For a real project with such layout it is more practical to use fixed pixel sizes. I played with that too and changed the styling like the code below. I removed the spry code and manually repeated the block four times. Critics welcome, I appreciate your suggestions. <!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" xmlns:spry="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin-top: 0px; } #wrapper { width: 760px; margin-right: auto; margin-left: auto; } .blocks { float: left; width: 340px; margin-bottom: 15px; background-color: #CCCCCC; padding-left: 10px; margin-top: 15px; text-align: left; margin-right: 10px; height: 25em; padding-right: 10px; position: relative; margin-left: 10px; } #wrapper .blocks #pictures { text-align: center; bottom: 5%; position: absolute; width: 140px; left: 0%; padding-right: 10px; padding-left: 10px; } #image { background-color: #FF0000; height: 245px; width: 339px; margin-right: auto; margin-left: auto; } --> </style> </head> <body> <div id="wrapper"> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> </div> </body> </html>