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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout questions

    hello,
    I have a basic grasp of x/html and css but have a couple of questions regarding layout.

    First: How can I best create a structure within a centre content div that holds small images, with captions. Each image/caption to be a link to another page.
    Although my page has currently only got two such images, I want to ultimately have a grid of them.

    Second: How can i best centralise an embedded object, in my case an embedded flash/youtube object.
    I can think of ways, ie a container tag of some sort, but I'm not sure what would be best

    Thanks for any advice..

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    For the images/caption

    try somting like:

    HTML:
    Code:
    For each img put in:
    <div class="photowrap">
      <div class="photo">
      <img src="...your image">
      </div>
    <p> your caption </p>
    
     -------IMG TWO--------
    
      <div class="photo">
      <img src="...your image">
      </div>
    <p> your caption </p>
    
    
    ----IMG THREE -----
    
      <div class="photo">
      <img src="...your image">
    
    <p> your caption </p>
    </div>
    
    -----ECT------
    CSS
    Code:
    .photowrap {
    float:left;
    width: "your photos widths";
    additional style, padding, margins ect...
    }
    
    .photo img {
    any formating you want here, borders, padding ect...
    }
    
    .phototwrap p {
    any formating you want here, borders, padding ect...
    }
    Last edited by srule_; 07-10-2007 at 04:23 PM.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I hope you're using the correct method to embed your flash/youtube object? The flash satay method works wonders and is cross browser compatible, however, for accessibility purposes and in order to create nice, semantic code, it's a better idea to use something like SWFObject to embed you video via javascript, and then have an HTML backup, in case the user has disabled flash on their computer (such as a link to the actual video).

    To center it, give it an id, or class if you want multiple videos and in your CSS use text-align center on that div. Should work...
    Last edited by ahallicks; 07-12-2007 at 01:42 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the help!

    srule: using that as my starting point I've gotten to this:

    html
    Code:
    <div id="centercontent">
    
    <div class="photowrap">
      <div class="photo">
       <a href="/animations/curse.html">
        <img src="/media/SEA_DISC/site/testing/curseThumb.jpg" />
         <p>Alien Curse</p>
       </a>
      </div>
    
    
    
    <div class="photowrap">
      <div class="photo">
       <a href="/animations/tentacle.html">
        <img src="/media/SEA_DISC/site/testing/myTentacleThumb.jpg" />
         <p>Tentacle Test</p>
       </a>
      </div>
    css:
    Code:
    .photowrap {
    float:left;
    height:141px;
    width: 120px;
    }
    
    .photo img {
    border:1px solid grey;
     padding-left:5px;
    }
    
    .photowrap p { margin:0px 10px 10px 10px;
    color:#990099;font-family: Arial Rounded MT Bold;
    }
    this works great (i am testing locally hence the seadisc, and not using apache, just looking at the files)
    ...except it seems to have put the equivalent of a line break between my two images. They are now arranged in a column rather than side by side, can you tell me where I'm going wrong?

    Also the photo border doesn't show up, even if i change it to high contrast pink. The text links aren't using the sites link css, but I've got an idea how to solve that once the imgs are looking right.

    Thanks for any ideas anyone posts..

  • #5
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahallicks:
    Thanks, I've had a quick look at SWFObject, and will try it out once I have sorted my grid of image/links problem out.

  • #6
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This method of setting up a grid of image/links just isn't working. I've tried uploading it to my webhost, but there is still a line break or equivalent between the images. I've tried playing with the code, but can only think that there is something major missing, or wrong that i just can't see:

    http://www.alternicity.com/animations/animation.html

    html:
    Code:
    <div id="centercontent">
    
    <div class="photowrap">
      <div class="photo">
       <a href="/animations/curse.html">
        <img src="/animations/images/curseThumb.jpg" />
         <p>Alien Curse</p>
       </a>
      </div>
     </div>
    
    <div class="photowrap">
      <div class="photo">
       <a href="/animations/tentacle.html">
        <img src="/animations/images/myTentacleThumb.jpg" />
         <p>Tentacle Test</p>
       </a>
      </div>
    </div>
    
    
    <br>
    
    <p>.</p>
    
    </div>
    css:
    Code:
    .photowrap {
    float:left;
    height:141px;
    width: 120px;
    }
    
    .photo img {
    border:1px #282828;
     padding-left:1px;
    }
    
    .photowrap p { margin:0px 10px 10px 10px;
    color:#990099;font-family: Arial Rounded MT Bold;
    }
    Can anyone see any blunders? Or suggest another method? Is a grid of images tabular data..should I be using a table?

  • #7
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Seem to have sussed part of it out...
    If your interested:

    css:
    Code:
    .photowrap {
    float:left;
    
    }
    
    .photo img {
    height:41px;
    width: 120px;
    border:1px #282828;
     padding-left:1px;
     padding-right:1px;
    }
    
    .photowrap p { margin:0px 10px 10px 10px;
    color:#282828;font-family: Arial Rounded MT Bold;
    }
    Image dimensions were wrong (141 instead of 41) and dimensions were appiled to the photowrap class rather than the photo class.

    Is there a way to make a centrecontent div a minimum depth?

  • #8
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by grhino View Post
    Is there a way to make a centrecontent div a minimum depth?
    Depth? Are you coding in 3D? Amazing!

    If you mean a minimum height, then yes... min-height: works in Firefox and IE7 I believe. But for IE6 you will need a conditional statement that uses just height: as IE6 automatically expands div given a set height, if the content within is larger than the dimensions given.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #9
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again!
    I've managed to temporarily solve this one with a bunch of <br> tags, while I work on my emergent problems...
    I seem to have broken my right content div completely, border and position are gone, the content just floats beneath the left content div.

    As for ie compatability... the site is at the moment mainly to educate myself and my sons, so I may look up a way to redirect ie users to a standards compliance article somewhere or a firefox download page. Its all too much to think about without thinking about the ie problems. This is as difficult as 3d animation..
    mind you i doubt very much my pages come anywhere near compliance themselves yet!
    Last edited by grhino; 07-12-2007 at 08:10 PM.


  •  

    Posting Permissions

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