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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating Columns in specific spots

    ok, it sounds odd but i want to create a small column or div with an image and text, i need four of them to line up, then four under that, and then another set of four.

    think jpeg gallery.
    only i need them to be in a specific spot.
    and they should be sort of fixed, a i guess jello style layout.


    i created a jpeg to go underneath them, as a template and to give the illusion of a drop shadow.

    now,

    i go it to work....sort of, my code looks like someone of severe mental disorder created it.

    it worked in safari, looks like absolute crap in IE7, and is slightly off in Firefox.


    if anyone has a way to do this...err the proper way.
    i've been up for days and nights, no sleep and getting pretty insane thinking about this.


    even if you could just point me in the right direction.



    Last edited by jonnythesaint; 10-23-2009 at 10:57 AM.

  • #2
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i think i can make png's with the shadow and then position them.

    could i do this with a container and list items??

    would i need to place the main image as the background of the container and could i center the unordered list inside the container and set parameters on the container?

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok here is what i got so far. this is just a tester.

    is there a way to position this on top of an image and have them both locked in position in a jello style layout?

    Code:
    <html>
    <head>
    <style type="text/css">
    div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    }	
    div.img img
    {
      display: inline;
      margin: 2px;
      border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
      text-align: left;
      font-weight: normal;
      width: 145px;
      margin: 2px 2px 2px 25px;
    }
    div.one
    {
      text-align: left;
      font-weight: normal;
      width: 120px;
      margin: 2px 2px 2px 2px;
      
    }
    .project  {
      font-weight:   bold;
    }
    
    #container {
      width: 800px;
      padding-bottom: 5px;
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div class="img">
     <a target="_blank" href="klematis_big.htm"><img src="images/vo.png" alt="Klematis" width="152" height="145" /></a>
     <div class="desc"><span class="project">Vaughan Oliver</span><br />poster series</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis2_big.htm"><img src="images/onebrick.png" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis3_big.htm"><img src="images/hellboy.png" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis4_big.htm"><img src="images/warning.png" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="152" height="145" /></a>
     <div class="desc"><span class="project">Vaughan Oliver</span><br />poster series</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="152" height="145" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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