SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Image position

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image position

    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

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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" />
    <!--[if IE]>
    <link rel="stylesheet" href='explorergallery.css' type="text/css" media="screen, projection" />
    <![endif]-->
    </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.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •