Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Warped Template

  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Thanked 0 Times in 0 Posts

    Warped Template


    I've recently got to work on a new Web Template, I'm trying to add two images (of flags) into the header, but once this is done it knocks the content out of whack.

    The website is: www.joannaporter.com

    Can anyone help explain why this is happening, I'm really new to all this and so a little tip off here or there would be lovely!


  2. #2
    Regular Coder
    Join Date
    May 2009
    Thanked 1 Time in 1 Post
    where is that code from ?

    The "isi" class must have the same positionning as the top and bottom div

  3. #3
    New Coder
    Join Date
    Jul 2008
    Thanked 4 Times in 4 Posts
    Try this. Replace:

    <img src="flags/esp.jpg" alt="Lengua espaņol" align="right" height="25"
     width="40" /><img src="flags/eng.jpg" ;alt="English language"
     align="right" height="25" width="40" />

    <div align="right"><img src="flags/esp.jpg" alt="Lengua espaņol" height="25"
    width="40" /><img src="flags/eng.jpg" alt="English language" height="25" width="40" /></div>

  4. #4
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Thanked 15 Times in 15 Posts
    try adding this

    #content .isi {
      background: #ECF1B1 url(images/loadfoo_layoutv2_cut_08.gif) repeat-y center;
      margin: auto;
      margin: 0 0px 0 14px;
      padding: 0 0 0 50px;
      width: 840px;
    adding the margin: auto should center your div on the page u may also want to do the same for the rest of your divs and also giving them a set width to be sure everything is working properly all the time

    also not sure why you have a semi-colon here but u should prolly remove it and put the </ul> tag b4 the image coding since they r not a listed item of the unordered list but just slapped into it and throwing it out of whack my guess is that is the problem right there

    <img src="flags/eng.jpg" ;alt="English language"
     align="right" height="25" width="40" /></ul>
    Last edited by godofreality; 10-20-2009 at 08:04 AM.

  5. #5
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    Thanked 727 Times in 721 Posts
    The flags are not the problem here. Removing the flags entirely from your html does not sort the text alignment in .isi.

    On the alignment, I don't think there's anything too far off with the css. I think your html is wrong. You have a #wrapper div which is centred, unlike anything else. This div is, however, only enclosing #header, everything else is outside it.

    I think you have too many </div> statements at line 21. Remove one of these and put it right at the bottom before your </body> tag.

    With no other changes this sorts out your middle alignment.

    Re the flags themselves, at the moment you do have an errant semi-colon as others have indicated, but you also have the flag <img> tags within the <ul> tags for your menu.

    If the flags are to be part of your menu then wrap the <img> tags with <li> tags like the rest of the menu, and remove the align="right" attribute.

    If not they just need to be outside the <ul> tags. No need to wrap them with divs.

    Hope that makes sense.
    Last edited by SB65; 10-20-2009 at 01:04 PM.


Tags for this Thread

Posting Permissions

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