Image position

**suscitatio** · Sep 17, 2006 02:56

Hi I just started to learn css a couple of days ago so hopefully this is a simple problem I have overlooked. I have managed to create a image gallery similar to the lightbox one in the link below.

http://www.cssplay.co.uk/menu/lightbox.html

It works well enough, I can hover over an image enlarging it and click it to take me to a full size version of it.

As with the example once I have clicked an image it appears in the browser as a .JPG document aligned to the left and top of the page.

Short of creating a .html page for every image is there a simple method using css to align the image to the center of the page instead?

Thank you

**elduderino** · Sep 17, 2006 04:24

Hi,

Could you post some code. You can center things very easily on a page but we'll need to see how you've put your page together first.

**suscitatio** · Sep 17, 2006 05:37

Sure no problem, here is the style sheet code:

{border: 0;
margin: 0;
padding: 0;}

body {font: vernada;
font-size: 12px;}

p {text-align: center;}

h1 {font: vernada;
font-size: 38px;
color: #b3ab79;
letter-spacing: 2px;
text-align: center;
font-weight: normal;}

/*---------------------------------------------------------------------------------------*/

div.cent {text-align: center;}

div.breaker {width: 800px;
height: 10px;}

div.breaker2 {width: 800px;
height: 45px;}

div.wrapper {width: 808px;
text-align: center;
margin: 0 auto;}

/*----------------------------------------------------------------------------------------*/

ul.navbar {padding: 0px;

margin: 0px;
border: 0px;
font: 12px Verdana;
list-style-type: none;
text-align: center;}

ul.navbar li {display: inline;
margin: 0;
color: black;}

ul.navbar li a {display:block;
float:left;
text-align:center;
text-decoration:none;
width:100px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;}

ul.navbar li a:visited {color: #2d2b2b;}

ul.navbar li a:link {color: #2d2b2b;}

ul.navbar li a:hover {background-color: #b3ab79;}

ul.navbar li a:active {color: black;}

ul.navbar li.selected a {position: relative;
background-color: #b3ab79;
color: black;}

/*-----------------------------------------------------------------------------------------*/

ul.gallery {cursor: default;
width: 700px;
list-style: none;}

ul.gallery a {cursor: default;}

ul.gallery a .preview {display: none;}

ul.gallery a:hover .preview {display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;}

ul.gallery img {background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;}

ul.gallery li {background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;}

ul.gallery .preview {border-color: #000;
width: 150%;
height: 150%;}

/*---------------------------------------------------------------------------------------------*/

Here is the code to one of my html pages:

<!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" xml:lang="en">
<head><title>Bosnia</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head><link rel="stylesheet" href='gallery.css' type="text/css" media="screen, projection" />

</head>

<body>

<h1>Bosnia</h1>

<div class="wrapper">

<ul class="navbar">

<li><a href="index.html">Home</a></li>
<li class="selected"><a href="bosnia.html">Bosnia</a></li>
<li><a href="canada.html">Canada</a></li>
<li><a href="croatia.html">Croatia</a></li>
<li><a href="cyprus.html">Cyprus</a></li>
<li><a href="italy.html">Italy</a></li>
<li><a href="sweden.html">Sweden</a></li>
<li><a href="usa.html">USA</a></li>
</ul>

<div class="breaker">
</div>

<ul class="gallery">
<li>
<a href="images/bosnia/mostar.jpeg"><img src="images/bosnia/mostar.jpeg" alt="description" width="105" height="140" /><img src="images/bosnia/mostar.jpeg" alt="description" class="preview" /></a>
</li>
<li>
<a href="images/bosnia/river.jpeg"><img src="images/bosnia/river.jpeg" alt="description" width="105" height="140" /><img src="images/bosnia/river.jpeg" alt="description" class="preview" /></a>
</li>
</ul>
</div>
</body>
</html>

Hope that helps.

**elduderino** · Sep 17, 2006 07:22

Hi,

You will need to provide styling specifically for linked page containing the single image. If we could see the source code for that page then it'll be easy to get it centered horizontally and vertically the way you want.

**suscitatio** · Sep 17, 2006 07:59

At the moment the page displaying the single image is just a jpeg image displayed in the browser so hasn't any html source code behind it (the code posted previously is currently all my code). For example like this one: http://www.cssplay.co.uk/menu/lbox/landscape1.jpg.

If that makes sense at all? can the image be centered in the browser by modifying my existing .css/.html page or is it necesary to create another html page to display the image centered?

thank you, apologies in advance if my explanation is confusing

**elduderino** · Sep 17, 2006 11:36

Ahhhh i see what you're saying! Sorry a little slow today! I not too sure if you can style that without another html page.

You could try and get at it by specifying:

Code:

img { margin-left: xxxpx;}

which should style it but may require you to set margin-left: 0; on some of the images in your gallery if they do not have more specific rules concerning their margins already applied to them.

for instance if you applied the img rule above in your css and it affected your gallery images then you could set this:

Code:

ul.gallery li a img { margin-left: 0;}

which would override the img rule set earlier. Hope that makes sense. Give it a go and let me know

**suscitatio** · Sep 18, 2006 04:18

Thanks for the reply, gave it a try this morning, unfortunately the code does only effect images in the gallery and not how the single image displays. Nevermind though i'll just have to create another html page to display the image on and do it that way.

Thanks again, appreciate your help.

User Tag List

Thread: Image position

Thread Tools

Display

Image position

Bookmarks

Bookmarks

Posting Permissions