View Full Version : Center an image
BertJan
09-05-2007, 06:36 AM
Hello,
First my excuses for my bad english, I hope that you can follow it...
I've a problem with my theme. Maybe someone can help me.
The first picture here is a photo in landscape, he fills the whole page.
http://www.mysteries.sohosted.nl/photos/scene1.jpg
The second picture here is a photo taken in lenght.
http://www.mysteries.sohosted.nl/photos/scene2.jpg
My problem is that the last photo is aligned left and I would aligne this in the middle (center)
Can anyone help me with that?
This is a little piece of code from the image_template.html
Do i change the image position in the style.css or in the template?
<div id="image">
<img src="./images/<IMAGE_NAME>"> width= 800px; eight="<IMAGE_HEIGHT>px;">
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
</div>
Dennis
09-05-2007, 07:20 AM
Try this:
<div id="image">
<img style="text-align: center;" src="./images/<IMAGE_NAME>"> width= 800px; eight="<IMAGE_HEIGHT>px;">
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
BertJan
09-05-2007, 12:06 PM
I've tried the code, but still the same....
maybe can someone look at it?
You can find my gallery concept at: http://www.mysteries.sohosted.nl/photos/
Dennis
09-05-2007, 03:09 PM
Try this:
<div id="image">
<center><img src="./images/<IMAGE_NAME>" width="<IMAGE_WIDTH>px" height="<IMAGE_HEIGHT>px"></center>
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
</div>
The HTML had some errors.
BertJan
09-06-2007, 06:26 AM
Sorry, but that also did'nt work... :(
Sorry...
I've post the entire template in this post... maybe there is another error?
And could it be in the CSS-file?
<!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">
<title><SITE_TITLE> - <IMAGE_TITLE></title>
<!-- Link for RSS feed autodiscovery -->
<link rel="alternate" type="application/rss+xml" title="<SITE_TITLE> - RSS feed" href="/index.php?x=rss" />
<!-- Meta-Information -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="shortcut icon" href="favicon.gif" />
<link rel="stylesheet" type="text/css" href="./templates/xavtek/style_light.css" media="screen" title="light"/>
<link rel="alternate stylesheet" type="text/css" href="./templates/xavtek/style.css" media="screen" title="dark" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all" />
<!-- Scripts -->
<script type='text/javascript'>
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
</script>
<script type="text/javascript" src="templates/xavtek/styleswitcher.js"></script>
<script type="text/javascript" src="overlib/overlib.js"></script>
</head>
<body>
<div id="overDiv" align="left" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<BR>
<BR>
<BR>
<div id="container" style="width: 800px;">
<div id="content">
<div id="image">
<center><img src="./images/<IMAGE_NAME>"> width="<IMAGE_WIDTH>px" height="<IMAGE_HEIGHT>px"></center>
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
</div>
<h3><a href="#" onclick="flip('show_comments'); return false;">Klik hier voor details & reacties (<IMAGE_COMMENTS_NUMBER>) ▼</a></h3>
<div id="show_comments"><script language='javascript' type='text/javascript'>flip('show_comments');</script>
<BR>
<span class="image-title"><IMAGE_CATEGORY>- <IMAGE_TITLE></span><BR>
<div class="image-info"><IMAGE_NOTES><BR>
<BR>
<BUY_THIS_IMAGE>
<BR>
INFO : <EXIF_CAMERA_MODEL> | <EXIF_EXPOSURE_TIME> | <EXIF_APERTURE> | <EXIF_ISO> ISO | <EXIF_FLASH>
</div>
<BR>
<IMAGE_RATING_STARS>
<BR>
<div id="comments">
<BR><BR>
Reacties: <IMAGE_COMMENTS>
</div>
<BR>
<BR>
<div id="form_container">
<form method="post" action="index.php?x=save_comment" name="commentform" accept-charset="UTF-8">
<br />
<label for="name">naam : </label><br />
<input type='text' name='name' class='formfield' value='<VINFO_NAME>' id="name"/><br />
<label for="url">website : </label><br />
<input type='text' name='url' class='formfield' value='<VINFO_URL>' id="url"/><br />
<label for="email">email (niet zichtbaar) : </label><br />
<input class='formfield' type='text' name='email' value='<VINFO_EMAIL>' id="email"/><br />
reactie :
<textarea name='message' class='formfield' rows='10' cols='40'></textarea><br />
<br />
<input type='checkbox' value='set' name='vcookie' id="saveinfo" />onthoud me!
<div style="text-align: right;"><input type='submit' class='formbutton' value='voeg reactie toe'/></div>
<input type='hidden' name='parent_name' value='<IMAGE_NAME>' />
<input type='hidden' name='parent_id' value='<IMAGE_ID>' />
</form>
</div>
<div id="styleswitcher" style="width: <IMAGE_WIDTH>px;">
Nav : <a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"> <<</a> <a href="index.php"> ^ </a> <a href="index.php?showimage=<IMAGE_NEXT_ID>">>> </a>
<FAST_EDIT>
</div>
</div>
</div>
</div>
<div id="header" style="width: 800px;">
<a href="index.php">HOME</a> - <a href="index.php?x=browse">ARCHIEF</a> - <a href="index.php?x=about">ABOUT</a> - <a href="index.php?x=rss">RSS</a> |
<a href="#" onclick="setActiveStyleSheet('dark'); return false;"><img src="./templates/xavtek/style-white.gif" alt="Black"/></a>
<a href="#" onclick="setActiveStyleSheet('light'); return false;"><img src="./templates/xavtek/style-black.gif" alt="White"/></a>
</div>
<FAST_EDIT><BR>
</div>
</body></html>
jgrayson
09-06-2007, 04:50 PM
Try this:
<div id="image">
<img style="text-align: center;" src="./images/<IMAGE_NAME>"> width= 800px; eight="<IMAGE_HEIGHT>px;">
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
i'm pretty sure you need to put the text-align: center in the first div tag, not in the image tag...
try this:
<div id="image" style="text-align: center;">
<img src="./images/<IMAGE_NAME>"> width= 800px; eight="<IMAGE_HEIGHT>px;">
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
BertJan
09-07-2007, 07:30 AM
I've tried it...
and what do you think?
Again it did'nt work for me... :(
I WILL figure this out...
But thanks for the possible solutions!
codepoit
09-07-2007, 12:48 PM
i'm pretty sure you need to put the text-align: center in the first div tag, not in the image tag...
try this:
<div id="image" style="text-align: center;">
<img src="./images/<IMAGE_NAME>"> width= 800px; eight="<IMAGE_HEIGHT>px;">
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
I'm not the best with HTML and/or CSS, but it seems to me you would want to remove the 800px spec from the above code. Otherwise, the image box (for lack of a better term) will ALWAYS be 800px, no matter what size the actual image is...
jgrayson
09-07-2007, 03:19 PM
I'm not the best with HTML and/or CSS, but it seems to me you would want to remove the 800px spec from the above code. Otherwise, the image box (for lack of a better term) will ALWAYS be 800px, no matter what size the actual image is...
yup that's it. either take out the width: 800px; OR put the text-align in that tag:
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: 800px; text-align: center;">
vBulletin® v3.7.3, Copyright ©2000-2013, Jelsoft Enterprises Ltd.