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 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Formatting problems!

    Hello!

    I was wondering if someone could take a look at my css code on this page and tell me where I'm going wrong. I'm vary wary of using the float tag because I just find everything goes all over the place, so have tried to work around it where possible. The only problem is now I've used a daft -280 margin on my <h1> and I can't get my image to display next to the <h1>, plus I need to put text underneath, but don't want to attempt this until everything else is sorted out.

    The page can be found at: http://www.thelock.co.uk/site

    Any help would be greatly appreciated, I haven't done this in a while and I'm a bit rusty!

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Try adding float:left to your div #navcontainer, and eliminating the margin-top attribute of your #center_content h1 css.

    By adding float:left you allow other elements to exist in the same line, assuming you have enough width for those elements.

    To get text under the image, simply wrap it in a <p> tag </p>, which has built-in line breaks.

    Gary

  • Users who have thanked garydarling for this post:

    cazeroline (09-21-2007)

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that! It all works great now! Except...my text. The words are supposed to go under the title and wrap around the image, but can't it to work I don't think I explained that part so well in my first post!!

    Also, I seem to be having to reload once it's loaded because not everything is displaying first time...what's that all about?

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh and...can someone let me know if it displays o.k in Firefox & IE on Windows?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Oh myÖ As Iím looking at it to give you some suggestions I tend to clean up everything because Iím finding more and more things that can be improved. Well, Iím bucking up myself and get to the actual problem at first:

    Iíd encourage you to put all the main content (that excludes the navigation) into one container. That will make that whole float model stuff easier:
    Code:
    <div id="header"><img src="sofas.jpg" alt="Sofa Image" /></div><!--sofa image-->
    <div id="navcontainer">
      <ul id="navlist">
        <li><a href="#" title="Business Consultancy Services">Business Consultancy Services</a></li>
        Ö
        <li><a href="#" title="Testimonials">Testimonials</a></li>
      </ul>
    </div>
    <div id="main">
      <h1>Business Consultancy Service</h1>
      <img src="yoga.jpg" alt="Business People meditating" />
      <p>Testing 1, 2, 3</p>
    </div>
    </div>
    <!--center content end-->
    As I said this makes floating easier because now you can float the entire content and donít have to address every element following the navigation. Also this makes additional floating next to the navigation easier.

    Now, float that main div to the right and assign it a width so it will fit next to the navigation. Then you float the h1 to the right, the yoga image to the left and make the text after that clear: right; (so it will only clear the right float and go underneath the headline).

    Some additional things I noticed:
    Code:
    <div id="top_curve"></div>
    <div id="left_shade1"></div>
    You canít do this. Thatís table mentality. CSS based websites work best with semantic HTML which means you never put empty meaningless elements just to apply a style. You can easily apply the left and right shades to the holder div or the body if you put both, the left and the right shade into one image, leaving as much space in between them as the actual content is wide. It also just needs to be 1px high. The corners can also be combined, top left and right in one image, and both bottom corners in one image (with the top/bottom border in between, all as wide as the page) and apply them to the header and the footer, respectively.
    Only use the elements you need. Look at the page without styles and determine if it makes sense. And empty elements donít do anything without styles so they donít make sense. Then only use the elements youíve got to apply styles. Thereís almost always a way.

    After that is done we will look at it in IE. For all modern browsers: if it looks OK on Mac it usually also looks OK on Windows, Unix, and whatever the respective browser is distributed for. There are no differences between one vendorís browser on different OSs, rendering wise.
    Last edited by VIPStephan; 09-22-2007 at 12:32 PM.

  • Users who have thanked VIPStephan for this post:

    cazeroline (09-22-2007)

  • #6
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Cheers, I'll give it a wiz! They don't make IE for Mac anymore, so I have no idea at all what it looks like at all.

  • #7
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Right, I've done all that and it seems to work alright (in all browsers I've been able to check). But I didn't quite get what you meant when you were talking about the corners? I can't figure a way of getting my top corners into a div that is already in use? I can't use my top most div because this already has a gray background colour in it...any suggestion?

    Also, my main section - with the writing etc, now works fine. However, in some areas I want to move the position of the image further down the page, but my text won't wrap around it. How do I fix that?

    Many many thanks for all help so far.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    You can apply the background image to the body element:
    Code:
    body {background: url(background.jpg) center repeat-y;}
    Then you have a free element for the top corners. And Iíd suggest you put your images in an own /images directory to keep your server/site structure clean.

    Also you forgot to specify a body background color. I see a yellowish background because I have a different color than default white (for this very reason Ė to see deficiencies like that one).

    As to the image position: ever thought about applying a top margin?

  • #9
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I applied a top margin, and yes that works fine, but my text won't wrap around it...

    Also, if I apply the background image to the body, surely it will then only work at a set height? I need the page to vary in height depending on how much text is on the page.

    I'm also getting reports that there's a large white space between my menu bar and the text - which means it's not displaying right in IE.

  • #10
    New Coder
    Join Date
    Jun 2006
    Posts
    56
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Does anyone know how to solve the problem of IE doubling a margin width when the margin is applied to the same side as a float?? It's screwing up my whole page!

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    http://www.positioniseverything.net/...ed-margin.html

    And by the way: Text should still wrap around a floated element if it has a top margin applied.


  •  

    Posting Permissions

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