Thu, 2005-04-21 00:26
I'm having great difficulty centering the div containing "japan_s.png" in the below code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="Author" content="Neil E. Hodges" />
<meta name="Description" content="A site about the Kamakura Era" />
<link rel="stylesheet" type="text/css" href="kstyle.css" />
<title>index</title>
<script type="application/x-javascript" src="switch.js" />
<script type="application/x-javascript" src="unsupported.js" />
</head>
<body>
<div id="top">
<form id="switch" action="">
<fieldset>
<input type="button" onclick="ch('left');" id="toLeft" value="To Left" disabled="disabled" />
<input type="button" onclick="ch('right');" id="toRight" value="To Right" />
</fieldset>
</form>
<h1>Kamakura Era</h1>
</div>
<div id="sidebar" class="leftside">
<a href="index.php" title="Home">Home</a>
<a href="comments.php" title="Comments">Comments</a>
</div>
<div id="main">
<h2>Summary</h2>
<div class="center img">
<img src="images/Japan_s.png" />
<span>Map of Japan: <a href="http://oddens.geog.uu.nl/browse_result.php?category=3&limit_result=1000">Oddens Bookmarks</a></span>
</div>
<p>The Kamakura Era, or <ruby xml:lang="ja"><rbc><rb>鎌倉</rb><rb>時代</rb></rbc><rtc><rt>かまくら</rt><rt>じだい</rt></rtc><rtc><rt>Kamakura</rt><rt>Jidai</rt></rtc></ruby> is a time in Japan from about 1185 to 1333 C.E. It was marked by the the establishment of the Shogunate in 1192 by Minamoto no Yoritomo. The form of government was transitioning to become feudel, similar to the Middle Ages in Europe. Farming was the base of the economy, although manufactoring and trade with China played a role.</p>
<p>There was much chaos throughout these years. The main cause was the change in government. The ba*beep*u, as Minamoto called it, was losing its hold of power to the military form of government. His family also tried to overthrow him and gain rule themselves. Eventually, control was passed to the Hojo government. During this time, the Mongols attempted an invasion, but were defeated by a typhoon. Still, Japan put up many resources to defend against the attack, which weakened the economy. This eventually lead to the decline of the Hojo government, ending the Kamakura Era.</p>
</div>
<div id="bottom">A site by Neil E. Hodges</div></body>
</html>kstyle.css:@charset "UTF-8";
/* frames */
body {
margin:0;
background-color:rgb(255,255,255);
}
div#unsupported {
height:2em;
position:relative;
top:0;
left:0;
right:0;
width:100%;
border-bottom:0.5px solid rgb(0,0,0);
background-color:rgb(255,255,220);
}
.block {
display:block;
}
.hidden {
display:none;
}
div#unsupported form label {
font:normal normal 1em/2 'Sans-Serif';
display:block;
width:90%;
text-align:center;
text-decoration:none;
display:block;
}
div#unsupported form input.hide {
display:block;
width:1.2em;
height:1.2em;
font:bold normal 1em/1 'Latin Wide', 'Arial Black';
background-color:rgb(200,0,0);
color:rgb(255,255,255);
margin:0.4em 0.3em;
}
div#unsupported form input {
display:block;
float:right;
width:10%;
font:normal normal 1em/1 'Sans-Serif';
padding:0.5%;
}
div#unsupported form hr {
visibility:hidden;
height:0.5em;
width:100%;
clear:both;
}
div#top {
width:100%;
display:block;
border-bottom:2px solid rgb(0,100,0);
height:4em;
background-color:rgb(255,255,240);
margin:0;
}
div#top h1 {
display:block;
text-align:center;
font:bold italic 3em/1 'Lucida Calligraphy', 'URW Chancery', 'Times New Roman', 'Nimbus Roman No9 L', 'Serif';
width:80%;
height:100%;
margin:0;
vertical-align:middle;
color:rgb(250,200,50);
}
form#switch {
display:block;
float:right;
width:9%;
height:2.5em;
margin-top:0.5em;
margin-right:1%;
}
form#switch fieldset {
border:none;
padding:0;
margin:0;
}
form#switch fieldset input {
display:block;
margin:1%;
height:48%;
width:98%;
}
div.rightside {
float:right;
text-align:left;
padding:1% 3% 1% 1%;
border-left:1px dashed rgb(0,100,0);
margin:0 0 0 1%;
}
div.leftside {
float:left;
text-align:right;
padding:1% 1% 1% 3%;
border-right:1px dashed rgb(0,100,0);
margin:0 1% 0 0;
}
div#sidebar {
width:15%;
min-height:60em;
background-color:rgb(240,240,255);
margin:0;
z-index:0;
}
div#sidebar a {
color:rgb(150,0,50);
font:italic normal 1.1/1 'Nimbus Roman No9 L', 'Bitsream Charcter', 'Times New Roman', 'Computer';
text-decoration:none;
display:block;
padding:2%;
width:96%;
vertical-align:middle;
margin:0;
}
div#sidebar a:hover {
color:rgb(150,75,200);
font-weight:bold;
text-decoration:none;
border:0.5px solid rgb(150,75,200);
margin-bottom:1.5em;
}
div#sidebar a:visited {
color:rgb(50,75,150);
text-decoration:underline;
}
/* main */
div#main {
width:auto;
background-color:rgb(255,255,255);
margin:0;
}
div#main h2 {
color:rgb(0,100,200);
font:italic bold 2.5em/1.1 'URW Bookman L', 'Times New Roman', 'Courier New', 'Sans-Serif';
text-align:center;
text-decoration:underline;
margin-top:0;
}
div#main h3 {
color:rgb(175,0,50);
font:bold normal 1.75em/1.1 'Utopia', 'Lucida Handwriting', 'Serif';
text-indent:5em;
}
div#main p {
color:rgb(100,100,30);
font:normal normal 1em/1.2 'MS Mincho', 'Times New Roman', 'Nimbus Roman No9 L', 'Courier New', 'Sans-Serif';
text-indent:4em;
padding:0 1em;
margin:0.5em 0.5em;
display:block;
text-align:justify;
display:block;
width:auto;
}
div#main p:first-line {
color:rgb(125,125,45);
font-style:italic;
}
div#main p span:lang(ja), div#main ruby:lang(ja), div#main ruby:lang(ja) rbc rb, div#main ruby:lang(ja) rb, div#main ruby:lang(ja) rtc rt, div#main ruby:lang(ja) rt{
color:rgb(50,0,10);
font-weight:bold;
font-family:'Sans-Serif';
vertical-align:-0.5em;
}
/* comments */
div#main div.comment {
width:auto;
border-bottom:2px solid rgb(0,0,0);
}
div#main div.comment h3 {
color:rgb(0,0,50);
font:italic normal 1.5em/1.1 'Serif';
text-decoration:underline;
text-indent:3em;
}
div#main div.comment span.email, div#main div.comment div {
display:block;
width:100%;
margin:0.5em 0 0.5em 0;
text-indent:4em;
}
div#main div.comment a, div#main div.comment span.email {
color:rgb(0,50,0);
font:italic normal 1.1em/1.2 'Sans-Serif';
text-decoration:none;
}
div#main div.comment a:hover {
color:rgb(0,150,0);
border:1px solid rgb(0,150,0);
padding:0 0.1em;
}
div#main div.comment a:visited {
color:rgb(0,100,0);
text-decoration:underline;
}
div#main div.comment div span.rating {
border:2px solid rgb(0,0,0);
background-color:rgb(50,0,0);
}
div#main div.comment span.rating:hover {
padding:0.1em;
background-color:rgb(150,150,0);
}
div#main div.comment p, div#main div.comment p:first-line {
font:normal normal 1em/1.1 'Serif';
color:rgb(0,0,0);
margin:0.5em;
text-indent:none;
}
div#main form#post {
margin:0;
border-top:0;
padding:0 2%;
border-right:2px solid rgb(0,0,0);
border-bottom:2px solid rgb(0,0,0);
border-left:2px solid rgb(0,0,0);
}
div#main form#post div {
width:auto;
margin:0;
border-top:0;
display:table;
padding:0;
}
div#main form#post div fieldset {
width:auto;
display:table-row;
border:none;
margin:0 auto;
padding:2%;
}
div#main form#post fieldset#submit input {
width:10%;
display:block;
margin:0 auto;
padding:0;
}
div#main form#post fieldset#submit {
width:auto;
display:block;
border:none;
margin:0;
padding:1%;
}
div#main form#post div fieldset label {
display:table-cell;
width:auto;
text-align:right;
vertical-align:middle;
padding:0;
margin-right:1%;
white-space:pre;
}
div#main form#post div fieldset#title input, div#main form#post div fieldset#name input, div#main form#post div fieldset#email input, div#main form#post div fieldset#comment input {
display:table-cell;
width:auto;
}
div#main form#post div fieldset#rating div {
display:table-cell;
border:none;
}
div#main form#post div fieldset#comment textarea {
display:table-cell;
width:100%;
height:4em;
}
div#main form#post fieldset#submit label {
width:10%;
margin:0.1em auto;
display:block;
}
div#bottom {
width:100%;
display:block;
border-top:2px solid rgb(0,100,0);
height:4em;
background-color:rgb(255,255,240);
clear:both;
color:rgb(0,100,0);
text-align:center;
vertical-align:middle;
font:normal normal 1.3em/3.07 'URW Bookman L', 'Times New Roman', 'Serif';
margin:0;
}
div#main div.img {
border:0.5px solid rgb(0,0,100);
width:30%;
margin:0.5em auto;
padding:0;
}
div#main div.center {
display:block;
}
div#main div.left {
float:left;
border:0.5px solid rgb(0,0,100);
padding:1%;
}
div#main div.right {
float:right;
border:0.5px solid rgb(0,0,100);
padding:1%;
}
div#main div.img img {
margin:1% 1% 0.5% 1%;
width:98%;
}
div#main div.img span {
color:rgb(0,0,100);
font:normal normal 0.7em/1.1 'Serif';
display:block;
width:100%;
text-align:center;
margin-bottom:1%;
}
div#main div.img span a {
color:rgb(0,0,100);
text-decoration:underline;
}
div#main div.img span a:hover {
text-decoration:none;
font-weight:bold;
color:rgb(0,0,150); padding:1%;
}
div#main div.img span a:visited {
color:rgb(50,0,50);
} 
Thu, 2005-04-21 01:53
#1
Image Not Centering
:oops:
[edited, to avoid further embarrassment]
Thu, 2005-04-21 02:08
#2
Image Not Centering
Chris, are you sniffing the glue again? 
Quote:
div.img img adds to 101.5%. Which may not be what you want.
div#main div.img img {
  margin:1% 1% 0.5% 1%;
  width:98%;
}
That looks like 100% to me...
<div class="center img">
Quote:
Multiple classes is perfectly valid... with a space in between. is not valid, there shouldn't be a space in a class name
Thu, 2005-04-21 02:36
#3
Image Not Centering
ummmmm....
is this just me being stupid or does your CSS not contain any reference to the class
.center img
surely if you call it centerimg and declare some values for that in the CSS it will position it as you want?????
Thu, 2005-04-21 08:45
#4
Image Not Centering
I think he is using TWO classes, not an image of class center -
.img AND .center instead of the CSS rule .center img.
Thu, 2005-04-21 09:20
#5
Image Not Centering
Remove the XML prolog from the beginning of the page and drop your DTD down to a 1.0 strict, don't use 1.1 it's for pages that are sent as xml/xhtml and requires the prolog which will be throwing IE into Quirks mode.
Hugo.
Thu, 2005-04-21 09:27
#6
Image Not Centering
thepineapplehead wrote:
I think he is using TWO classes, not an image of class center -
.img AND .center instead of the CSS rule .center img.
can you do that?
i didn't realise you could declare two classes in a single html declaration
so just writing div class="center img" makes that item behave by the CSS rules of both classes?
Thu, 2005-04-21 10:57
#7
Image Not Centering
wolfcry911 wrote:
Multiple classes is perfectly valid... with a space in between.
That's something new for today.
Thu, 2005-04-21 21:36
#8
Image Not Centering
Hugo wrote:
Then I'd have to change so many things. Also, the XHTML+XML is only sent when the browser accepts it, via PHP. IE is the only modern browser that doesn't support proper CSS; Safari, Konqueror, Gecko browsers, etc all accept this code. (Also, IE's not accepting of "<script />" is fixed if any browser doesn't accept XHTML to become "<script></script>".)
Remove the XML prolog from the beginning of the page and drop your DTD down to a 1.0 strict, don't use 1.1 it's for pages that are sent as xml/xhtml and requires the prolog which will be throwing IE into Quirks mode.
Hugo.
As said, multiple classes are perfectly valid. I doubt multiple IDs are, but they'd be of little use.
Now, back to the subject: "Is there a way to center this image?"
Thu, 2005-04-21 23:34
#9
Image Not Centering
Apologies then, I hadn't realised that you were browser sniffing.
A link to the site might be helpful as I don't see off hand where your attempting to align the image the two classes don't appear to have any alignment rules. have you tried text-align:center on the .center .img classes ?
Hugo.
Fri, 2005-04-22 00:25
#10
Image Not Centering
http://kamakura.kenji-miyamoto.com/
I have tried text-align:center;.
Fri, 2005-04-22 01:09
#11
Image Not Centering
/* main */
div#main {
width:auto;
background-color:rgb(255,255,255);
margin:0;
margin-left:20%;
}
That's the only way i could get it to line up, it does leave a gap on the left of the main text .... don't know if that will spoil your layout?????
I think that it is placing it in the centre of the whole page as opposed to the centre of the right column
that works fine until you press the Right button in the top left corner - then it's stuffed again?
Fri, 2005-04-22 01:13
#12
Image Not Centering
Yeah, I need it to fit within the main div so it can move, etc.
Fri, 2005-04-22 01:22
#13
Image Not Centering
It is centered!
div#main div.img {margin:0.5em auto;}
And thats the style that does it.
The floated #sidebar, is well, floated. It doesn't count in the calculation of the horizontal space available to #main. #main has the whole width of the viewport available to it. Stick a border on #main to see what I mean (also remove the background-color from #sidebar so it shows through).
I think the following will give you what you are looking for.
div#main {float:right; width:80%;}
I am not sure why the width can't be 84% (as the sidebar is 15%+border), possibly there are some padding and margins around, but anyhow, as things are now, 80% will work, 81% won't.
Fri, 2005-04-22 02:33
#14
Image Not Centering
I added a couple classes for main, set the width in the ID as 80%, and medified the Javascript to switch them around. Thank you for the suggestion.
Fri, 2005-04-22 04:36
#15
Image Not Centering
I don't know how you want the accompanying text to appear, but here's a suggestion;
.center {
text-align: center;
}That will cause inline elements such as text and images to center themselves. Using the following xhtml will cause the image to center and the caption/link to be centered beneath;
<div class="center img">
<p><img src="images/Japan_s.png" /></p>
<p>Map of Japan: <a href="http://oddens.geog.uu.nl/browse_result.php\
?category=3&limit_result=1000"> Oddens Bookmarks</a></p>
</div> cheers,
gary
Fri, 2005-04-22 09:28
#16
Image Not Centering
Chris worked it out, you could also have given #main a margin left equal to the sidebar. This is why a link is helpful it's often far easier if we can see the site in action so to speak.
I would watch the use of padding overall, padding can present problems if not careful. The padding on div.leftside is preventing #main from accepting anything wider than 80%.
It may be worth reading through a few guides at P.I.E on float behavior.
Although the float and main div were functioning as they should it is not what is required when used as a layout tool.
Hugo.