Welcome to the JaguarPC Community
JaguarPC
Sales: (888) 338-5261
Support: (888)-551-3050
Results 1 to 5 of 5

This is a discussion on Layout help in the Shared & Semi-Dedicated forum
I have just finally got around to updating my site, its only been about a year or so... but anyway... having some layout problems, I ...

  1. #1
    JPC Member
    Join Date
    Mar 2002
    Posts
    8

    Layout help

    I have just finally got around to updating my site, its only been about a year or so... but anyway... having some layout problems, I can't figure out the best way to layout what I want. It is the header for my site and consists of two images on the left, two lines of text, two more images

    I want the whole header to center on the page, and I want the text centered both vert and horiz between the two sets of pictures. Any suggestions would be helpful.

    Thanks!

  2. #2
    the Windlord Gwaihir's Avatar
    Join Date
    Jun 2002
    Posts
    2,562
    Ehm.. got a rough sketch handy? I'm honing my CSS skills currently, so I wouldn't mind giving this one a go.

    Step 1 would be to put the whole thing in a <div id="header"></div> and center that from the style sheet.
    Last edited by Gwaihir; 06-08-2005 at 07:50 AM.
    Regards,

    Wim Heemskerk
    ---
    Visit MeCCG.net - Cardgaming in J.R.R. Tolkien's Middle-earth
    And Gwaihir.net - The Middle-earth CCG store

  3. #3
    JPC Member
    Join Date
    Mar 2002
    Posts
    8
    you can see the header here cory.goz.net, my css is very rusty.. ive got it pretty close to the way I want it, I just want the second row of text to move up, and the pictures to move in a bit so they are not at the edges.

  4. #4
    the Windlord Gwaihir's Avatar
    Join Date
    Jun 2002
    Posts
    2,562
    Ah; good to have that reference; I was thinking vertically:

    img1 img2

    textline1
    textline2

    img3 img4

    So, you've got:
    Code:
    <!-- header -->
    <div id="thumbnails">
    <div align="center">
    <img src="/randompic/coryandally/rotate.php" width="75" height="75" align="left" class="logoimg">
    <img src="/randompic/morgan/rotate.php" width="75" height="75" align="left" class="logoimg">
    <img src="/randompic/zoey/rotate.php" width="75" height="75" align="right" class="logoimg">
    <img src="/randompic/sophie/rotate.php" width="75" height="75" align="right" class="logoimg">
    	
    </div>
    <div id="title" align="center">
    <h1>Cory, Allyson, Morgan and Sophie</h1>
    <h2>"who wouldn't be interested in everything we do?!"</h2>
    </div>
    </div>
    <!-- end header -->
    -> Ok, first, I don't think those two inner divs are doing anything for you, so just remove them. As you're calling the thing "header" anyway, I suggest to call the div that too.
    -> Then, you aim for xhtml 1.0 strict, which means no deprecated lay out code is allowed, so all "align" and "center" stuff will have to move to the stylesheet. For this reason I put the images in two classes: one goes to the left, one to the right.
    -> A text alternative for each image is also mandatory (alt="lovely pic"), as is closing img tags with '/>'
    -> In the stylesheet, I removed the width line from #header; it didn't do anything, as you missed the ';' at the end of it, but looking at what it would do, I assumed it's better without it. This probably kept your margin settings from working as well.
    -> Now, to keep that second line of the text nicely in the "header box" and to keep FireFox from bringing the next line (the line + home, etc.) into it, just define a nice height for it.

    That gives us, xhtml:
    Code:
    <!-- header -->
    <div id="header">
    <img src="http://cory.goz.net/randompic/coryandally/rotate.php" width="75" height="75" class="logoimg1" alt="Cory and Allyson" />
    <img src="http://cory.goz.net/randompic/morgan/rotate.php" width="75" height="75" class="logoimg1" alt="Morgan" />
    <img src="http://cory.goz.net/randompic/zoey/rotate.php" width="75" height="75" class="logoimg2" alt="Zoey" />
    <img src="http://cory.goz.net/randompic/sophie/rotate.php" width="75" height="75" class="logoimg2" alt="Sophie" />
    <h1>Cory, Allyson, Morgan and Sophie</h1>
    <h2>"who wouldn't be interested in everything we do?!"</h2>
    </div>
    <!-- end header -->
    And CSS:
    Code:
    #header {
           margin-left: 0.5%;
           margin-right: 0.5%;
           height: 85px;
    }
    #header h1 {
           text-align: center;
           color: #a1b7e3;
           font-size: 25px;
           font-weight: bold;
    }
    #header h2 {
           text-align: center;
    }
    #header .logoimg1 {
           float: left;
    }
    #header .logoimg2 {
           float: right;
    }
    Last edited by Gwaihir; 06-08-2005 at 03:47 PM.
    Regards,

    Wim Heemskerk
    ---
    Visit MeCCG.net - Cardgaming in J.R.R. Tolkien's Middle-earth
    And Gwaihir.net - The Middle-earth CCG store

  5. #5
    JPC Member
    Join Date
    Mar 2002
    Posts
    8
    thanks! I have not done any CSS work in a while and could not wrap my head around it for some reason.

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
  •