16 replies [Last post]
Kenji Miyamoto
Offline
Regular
Last seen: 15 years 26 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

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&amp;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);
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Not Centering

:oops:

[edited, to avoid further embarrassment]

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image Not Centering

Chris, are you sniffing the glue again? Laughing out loud

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:
is not valid, there shouldn't be a space in a class name
Multiple classes is perfectly valid... with a space in between.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 14 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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?????

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 14 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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?

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Image Not Centering

wolfcry911 wrote:
Multiple classes is perfectly valid... with a space in between.

That's something new for today. Laughing out loud

Kenji Miyamoto
Offline
Regular
Last seen: 15 years 26 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

Image Not Centering

Hugo wrote:
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.
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>".)

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?"

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kenji Miyamoto
Offline
Regular
Last seen: 15 years 26 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

Image Not Centering

http://kamakura.kenji-miyamoto.com/

I have tried text-align:center;.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 14 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

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?

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Kenji Miyamoto
Offline
Regular
Last seen: 15 years 26 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

Image Not Centering

Yeah, I need it to fit within the main div so it can move, etc.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Kenji Miyamoto
Offline
Regular
Last seen: 15 years 26 weeks ago
Joined: 2005-04-20
Posts: 37
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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&amp;limit_result=1000"> Oddens Bookmarks</a></p> 
</div> 

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me