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 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    uK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    XHTML / CSS Problem. Can't solve myself!

    Hello,

    Whilst designing my latest website I have come across a little problem which I can't figure out.

    link to website: http://www.skinground.com

    Basically, I have 2 content boxes on the right hand side. They do not touch each other where they should the bottom content box infact doesn't budge up to it vertically.

    In this image you will see what I mean:



    The arrows show which way the lower content box (The problem) should go. The red line indicated where the content box should rest.

    I don't have any type of margin on the upper box and I have tried various other things. I have a strong idea that it could be to do with the
    clear: both/left/right;
    attribute though but where.. I do not know.

    If anyone has any input or say on this matter please tell me! Anything helps I want to crack this anoying issue asap! Thanks!!
    http://www.artisticgfx.com - Graphics & Design community

    www.arexhost.com - Reliable, simple hosting solutions

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I noticed there was no float:left; on your login divs, maybe you should try putting a float:left; on those and see what happens

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Nickgod99,
    You can't re-use div id's like that. An id only gets used once on a page, change the name or make it a class.
    Have a look at the validator

    I'm don't know if fixing those errors will stop your content from dropping but it'll be a good start.
    Last edited by Excavator; 12-26-2006 at 05:27 AM. Reason: spelling
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Apr 2006
    Location
    uK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have fixed everything the validator tells me to fix. Still get the problem
    http://www.artisticgfx.com - Graphics & Design community

    www.arexhost.com - Reliable, simple hosting solutions

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Your code isn't very clean and well structured. You should use a real list for the menu on the left. Plus you don't group your divs that belong together (like the menu items or the boxes on the right) in a container div which would make styling easier.

    The gap is occuring because that content comes after the menu in the source code and so you need to float everything that is on the left side (e.g. the advertising space) to the left. Again, if you would put the entire menu in one container div it would be easier because you wouldn't have to apply the float to all those elements but just one (also saving classes in the HTML).

  • #6
    New Coder
    Join Date
    Apr 2006
    Location
    uK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you possible tell me which classes and such need what changing?
    http://www.artisticgfx.com - Graphics & Design community

    www.arexhost.com - Reliable, simple hosting solutions

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Yeah, trying to do this it reveals the flaws of your HTML structure.
    Try to add this and see what happens:
    Code:
    <div style="float: left;">
    <div class="login_bg">
    	<div class="main_content_text">
    		<form id="form2" name="form2" method="post" action="login.php">
                <label>User
                <input name="textfield" type="text"></label>
                <label>Pass
                <input name="textfield" type="text"></label>
                <input name="Submit" value="Submit" type="submit">
            </form>
    	</div>
    </div>
    <div class="ad_bg">
    	<div class="main_content_text">Space for Advertisement</div>
    </div>
    </div>
    It makes the title of the main content go up a little (in my Fx 2) but still, because the section title, the section body (skin preview), and all related elements are separate (not grouped within one big container) it's probably not really fixing things. You need to structure your markup properly, e.g. like so:
    Code:
    <body>
    <div id="container">
      <div id="topsection">(welcome message and announcements)</div>
      <div id="menu">(menu, login are, and ad space)</div>
      <div id="mainsection">(main content)</div>
    </div>
    </body>
    And the titles of each box should actually be headlines (<h1>-<h6>), as that's what they are there for, hence the boxes could look like this:
    Code:
    <div class="box">
      <h2>Box Title</h2>
      <div>(box content, can be text, images, tables, or whatever)</div>
    </div>
    All this is part of semantic HTML which is a lot easier to style than a thousand poorly placed single divs.

  • #8
    New Coder
    Join Date
    Apr 2006
    Location
    uK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That really helped thanks alot man.
    http://www.artisticgfx.com - Graphics & Design community

    www.arexhost.com - Reliable, simple hosting solutions

  • #9
    New Coder
    Join Date
    Apr 2006
    Location
    uK
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again.

    I have put my content into two containers, one floating left and one floating right.

    Called:

    #middlecontent{
    margin: 0px;
    padding: 0px;
    float: right;
    }
    #menu{
    float: left;
    margin: 0px;
    padding: 0px;
    }

    I have also changed my html around. Putting the latest skins box under the main one.

    But.. the left menu has fallen below it in Firefox. IE looks abit better.

    Whats the problem?
    Last edited by Nickgod99; 12-26-2006 at 04:33 PM. Reason: mistake.
    http://www.artisticgfx.com - Graphics & Design community

    www.arexhost.com - Reliable, simple hosting solutions

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think your still doing what VIPStephan pointed out, the order of your HTML is wrong.
    You have #wrapper3 then your menu items then #skin_container (which is missing a > )

    I think you need to re-ordering everything starting from the top down to get it all to lay right. I tried moving a few things around with the developer tools in FF but right from the start, at least at the top of #wrapper3, there are problems.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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