Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    66
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Question troubles centering.

    I have a page with a slide show and I don't seem to be able to get my page to center my slide show. I have tried the normal methods but they don't seem to be working.

    my page is
    http://robinsden.co.cc/services/photography/nature.php

    I also don't seem to be able to get it to act like it's part of the page. It seems to want to go over top of my footer.

    Any help provided would be appreciated, Thanks.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello robin9000,
    You have your slideshow absolutely positioned at top:0; right:0;

    Remove these bits highlighted in red -
    Code:
    <!--Content starts here-->
    <div align="center">
    <div class="setTitle">Nature</div>
    <div style="position: relative;" class="slideShow">
    <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1;" id="slide1" class="slides">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    66
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello robin9000,
    You have your slideshow absolutely positioned at top:0; right:0;

    Remove these bits highlighted in red -
    Code:
    <!--Content starts here-->
    <div align="center">
    <div class="setTitle">Nature</div>
    <div style="position: relative;" class="slideShow">
    <div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1;" id="slide1" class="slides">
    When I view my source code I seem to get the following:

    <!--Content starts here-->
    <div align="center">
    <div class="setTitle">Nature</div>
    <div class="slideShow">
    <div id="slide1" class="slides">
    <div class="slideTitle">Farmers Sunrise 1/4</div>
    <img src="../../Images/services/photography/nature/outdoors9.jpg" height="400" width="520" border="0" alt="" /> </div>

    Where do I find the code you are talking about? Thanks.
    My web site can be view here
    http://robinsden.com

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should actually have all your CSS in your sylesheets, as you also have stylesheets affecting your pages as well.

    CSS in the html is inline CSS and will overide any in the stylesheets

    anyway to your problem -

    Code:
    <!--Content starts here-->
    <div align="center">
    align="center" is norammly used in old style tables, and am not even sure it will work with a div.

    Try this
    Code:
    <div style="text-align: center; margin-left: 50%; margin-right: 50%">
    Should work over most browsers

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by robin9000 View Post

    Where do I find the code you are talking about? Thanks.
    Oops, looks like it's getting that from one of those jquery js files.

    You can grab the .slideShow and center that though.
    Add the bit highlighted in red to your slideshow.css file -
    Code:
    .slideShow {
                   background-color: #c5a665;
                   text-align: center;
                   margin-bottom: 10px;
                   padding: 5px;
    width: 512px;
               }
               .slides {
                   position: relative;
                   z-index: 1;
                   display: none;
               }
               .setTitle, .slideTitle {
                   font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
               }
               .setTitle {
                   color: #FFFFFF;
                   font-size: 14px;
                   font-weight: bold;
                   }
               .slideTitle {
                   color: #000000;
                   font-size: 12px;
               }
               .controls {
                   position: relative;
                   z-index: 10;
               }
               #slide1 {
                   display: block;
               }
               
               img {
                   border: outset 1px #999999;
               }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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