...

View Full Version : Alignment of <p> and <img />



evilguru
12-25-2009, 06:33 PM
Hi all,

I have a couple of unique CSS alignment questions.

The first is how one can specify that a <p> should be center aligned if the text inside of the <p> spans only a single line and justified otherwise.

The second is as follows. The main body of my page is 66ex and center aligned, giving nice wide margins in most browsers. Inside of the body I have an image, center aligned, that is often wider than 66ex in most browsers. As a consequence it spills into the right margin -- as if it were left aligned. How can it be made to overflow into both the left and right margins (so although it is still wider than the text it appears to be center aligned).

I am unsure if either of these two problems are solvable using just CSS -- but as they are not crucial I have no problem using CSS3 -- so any future-standards compliant solution would suit me fine.

Regards, Freddie.

met
12-25-2009, 07:21 PM
The first is how one can specify that a <p> should be center aligned if the text inside of the <p> spans only a single line and justified otherwise.


can be achieved by having two classes..

something like this is best achieved using some scripting language ..



#pseudo
if $some_str is shorter than 20 chars {
<p class="center">...</p>
} else {
<p class="justify">..</p>
}


66ex? not familiar with the measurement.

you can center an image by using:



<div align="center"><img .. /></div>


might be confused..can you post a link

Excavator
12-25-2009, 09:01 PM
you can center an image by using:



<div align="center"><img .. /></div>




That's deprecated code. Try this for centering both your 66ex wide layout and wider image -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#wrap {width: 100%;}
.container {
height: 150px;
width: 66ex;
margin: 0 auto;
background: #999;
font-size: 0.8em;
}
#photo {
height: 266px;
width: 950px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<!--end .container--></div>
<img src="your/wide/image.jpg" alt="description" width="950" height="266" id="photo" />
<div class="container">
<!--end .container--></div>
<!--end wrap--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum