SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Planet Earth
    Posts
    1,764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to align DIVs properly, xHTML

    Hello, I usually use TABLEs a lot, though for the moment I thought I'd try DIVs instead.

    Everything was okay, until I tried to add another DIV. Here is what I have just now

    PHP Code:
    <center>
            <
    div>
                <
    img align="right" src="media/logo.jpg" width="740" height="120" border="0" />
                
            </
    div>
            <
    div>
                <
    a href=""><div class="hot_link" 
                    
    onMouseover="javascript:HighLightOn(0, 'Home');return true;" 
                    
    onMouseout="javascript:HighLightOff(0);window.status='- Freelance PHP developer';return true;">home</div></a>
                <
    a href=""><div class="hot_link" 
                    
    onMouseover="javascript:HighLightOn(1, 'About');return true;" 
                    
    onMouseout="javascript:HighLightOff(1);window.status='- Freelance PHP developer';return true;">about</div></a>
                <
    a href=""><div class="hot_link" 
                    
    onMouseover="javascript:HighLightOn(2, 'Contact');return true;" 
                    
    onMouseout="javascript:HighLightOff(2);window.status='- Freelance PHP developer';return true;">contact</div></a>
                <
    a href=""><div class="hot_link" 
                    
    onMouseover="javascript:HighLightOn(3, 'Portfolio');return true;" 
                    
    onMouseout="javascript:HighLightOff(3);window.status='- Freelance PHP developer';return true;">portfolio</div></a>
                <
    a href=""><div class="hot_link" 
                    
    onMouseover="javascript:HighLightOn(4, 'Software');return true;" 
                    
    onMouseout="javascript:HighLightOff(4);window.status='- Freelance PHP developer';return true;">software</div></a>
            </
    div>
            <
    div>
                <
    div class="blank"><img name="plate" src="media/blank.gif" width="104" height="3" border="0" /></div>
                <
    div class="blank"><img name="plate" src="media/blank.gif" width="104" height="3" border="0" /></div>
                <
    div class="blank"><img name="plate" src="media/blank.gif" width="104" height="3" border="0" /></div>
                <
    div class="blank"><img name="plate" src="media/blank.gif" width="104" height="3" border="0" /></div>
                <
    div class="blank"><img name="plate" src="media/blank.gif" width="104" height="3" border="0" /></div>
            </
    div>
        </
    center
    Now, notice that there are 5 DIVs with links ? Also that there are another 5 DIVs with IMGs yes ? This part is okay, links, layout and Javascript work so far.

    The problem is when I want to add a 'SPACER' DIV on the end of the 5th DIV - first set of DIVs, so you'd have 6 DIVs altogether.

    But what happens is that the 6th DIV justs stays beneath the 5 DIVs. The stylesheet I am using is this one

    PHP Code:
    BODY                        
            
    margin                    2px
            
    cursor                    : default; }
        
        
        
    DIV                            {
            
    position                relative;
            
    margin                    0px;
            
    width                    740px; }
            
        
        
    A:link                        {
            
    color                    black;
            
    text-decoration            none; }
            
            
        
    A:visited                    {
            
    color                    black;
            
    text-decoration            none; }
            
            
        
    A:hover                        {
            
    color                    black;
            
    text-decoration            none; }
            
            
        
    A:active                    {
            
    color                    black;
            
    text-decoration            none; }
            
            
        
    DIV.hot_link                
            
    margin                    1px;
            
    font                    11px verdanaarialhelvetica;
            
    color                    black;
            
    background-color        lightskyblue;
            
    width                    104px;
            
    line-height                19px;
            
    cursor                    hand;
            
    position                relative;
            
    float                    left; }
            
            
        
    DIV.blank                    {
            
    margin                    1px;
            
    width                    104px;
            
    line-height                3px;
            
    position                relative;
            
    float                    left; } 
    Just don't know why the 6th DIV doesn't align it's self like the other 5 - can anyone help me with this, since I'm keen to build a web page minus TABLEs. I think CSS positioning would help here, but just don't know for sure which properties I need to use

    Thanks.

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In order to benifit from tableless layout you need to have well formed html first. This is one way in which the above html could me rewritten:
    HTML Code:
    <div id="container">
        <div id="header"
            <img src="media/logo.jpg" width="740" height="120" />
        </div>
        <div id="content">
        </div>
        <div id="navigation">
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">about</a></li>
                <li><a href="">contact</a></li>
                <li><a href="">portfolio</a></li>
                <li><a href="">software</a></li>
            </ul>
        </div>
    </div>
    Light as a feather! It's all about seperating content and document structure from presentation and behaviour.
    • Content and structure -> (x)html
    • Presentation -> CSS
    • Behaviour -> Javascript, preferably with event handling, rather then with embedded code.

    Ok, so this is not what you wanted to hear and you're rolling your eyes and thinking "what the...".

    Bear with me, and spend some time at the below places:
    Some basic nuts and bolts:
    http://www.w3schools.com/css/default.asp
    Some philosophy:
    http://www.thenoodleincident.com/tutorials/design_rant/
    Some layouts to get started with:
    http://glish.com/css/
    http://www.thenoodleincident.com/tutorials/box_lesson/
    http://www.bluerobot.com/web/layouts/
    Some inspiration:
    http://www.csszengarden.com/

    Have fun with it!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    Non-Member
    Join Date
    Jan 2004
    Location
    Planet Earth
    Posts
    1,764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Zoef for more insight. I'm going to look over those links in a minute - not sure about using LI though as you say, I can do something with this via CSS ?

    preferably with event handling, rather then with embedded code.
    This I know myself, though the site (mine) for this template isn't finished yet Once the dynamic stuff is done - PHP in other words - I will redo the Javascript

    Let you know how things go yes ? Thanks again.

  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Widow Maker
    Thanks Zoef for more insight. I'm going to look over those links in a minute - not sure about using LI though as you say, I can do something with this via CSS ?
    You're very welcome mate! About the li's, check out this classic:
    http://www.alistapart.com/articles/taminglists/
    Quote Originally Posted by Widow Maker
    Let you know how things go yes ? Thanks again.
    Ok! If you get stuck, don't forget the CSS forum. There's some really smart and helpfull people there.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    Non-Member
    Join Date
    Jan 2004
    Location
    Planet Earth
    Posts
    1,764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking over your links - and a few others - I've a bit to learn yet on CSS.

    I've known the basic's for a few years - got by thus far - but it's about time I moved with the times I suppose

    Just thinking the 'HTML' way of doing things still in regards to using xHTML + CSS, but I'll be keeping your points in mind from now on

    Cheers.

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Widow Maker
    Just thinking the 'HTML' way of doing things still in regards to using xHTML + CSS, but I'll be keeping your points in mind from now on .
    Making that paradigm shift is the hardest bit. The only thing to do is to experiment, look at other people's work and slowly you'll find yourself less and less 'thinking in tables'.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with Zoef's synopsis, but there are some obvious mistakes with the existing design.

    In the first row of 5, the <a> tags should be inside the <div> tags and not the other way around. You are using the *hot_link* class to define width and margin spacing, and so it really defeats the purpose to surround a heavy formatting tag by a lighter formatting tag -- I think.

    This might be why you are having alignment problems.

    The other problem is in double-nesting the DIV's. The outer DIV in this case accomplishes nothing, and is merely redundant. I would lose the outer DIV.

    The other suggestion, is to lose the <CENTER> tag, as it's deprecated and not the best approach. You might be able to make use of the double-nested DIV here and throw in a *align=center* or do it the CSS way -> *text-align: center*

    I've found that XHTML has drawbacks too, so sometimes it's better to use something solid than worry about compliance in a language that was non-compliant from the very beginning.

  8. #8
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kidwizdumb
    The other suggestion, is to lose the <CENTER> tag, as it's deprecated and not the best approach. You might be able to make use of the double-nested DIV here and throw in a *align=center* or do it the CSS way -> *text-align: center*
    I have to disagree with your solution here. Having this html fragment:
    HTML Code:
    <body>
        <div id="content">
            <!-- content here -->
        </div>
    </body>
    You would, according to standards center that div with this bit of css:
    HTML Code:
    #content {width:730px; margin:auto;}
    But because some versions of IE don't understand 'margin:auto' and misinterpret 'text-align' the practical solution is to do this:
    HTML Code:
    body {text-align:center;}
    #content {width:730px; margin:auto; text-align:left;}
    Quote Originally Posted by kidwizdumb
    I've found that XHTML has drawbacks too, so sometimes it's better to use something solid than worry about compliance in a language that was non-compliant from the very beginning.
    Xhtml has problems? Is not solid? Is non-compliant?

    That's the first thing I hear about that! Please illustrate your point further.

    What I think you might mean is that today's browsers are not fully compliant with the latest CSS standards. And that would be true (one particular bad offender comes to mind ). However they are getting better with each release.

    However, xhtml is as solid as a rock, as far as I know.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  9. #9
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Xhtml has problems? Is not solid? Is non-compliant?

    That's the first thing I hear about that! Please illustrate your point further.

    What I think you might mean is that today's browsers are not fully compliant with the latest CSS standards. And that would be true (one particular bad offender comes to mind ). However they are getting better with each release.

    However, xhtml is as solid as a rock, as far as I know.
    Well for one thing, I have Jeffrey Zeldman's book *Designing with Web Standards* and it's not really a bad book, but lots of things outlined don't really work in practice. Take the subject of DOCTYPE switching for example, I used XHTML Transitional and Strict, and HTML Transitional, and Strict in Mozilla and IE and found that most browsers pretty much run in Quirk's mode all the time, so the DOCTYPE might seem important from a utopian point of view, but a browser like IE performs very similar if you switch between different DOCTYPE flavors, or you could say it doesn't perform as expected.

    XHTML is supposed to separate content from structure, and for that reason it should definitely be appreciated, as many of us remember the bygone days of crappy <font> tags and browser specific code. I don't think that XHTML is really coming together as its proponents would contend that it does. It still has many of the drawbacks of plain vanilla HTML, and then you get high minded types who write books about it to make money.

    The languages that I think deserve attention and have a lot of potential are XML and XLST. These do adhere to a standard, and are already catching on in a big way, and serve a real need. It would be great if we only saw standards compliant XHTML code in the future, and certainly it would make the web a much better place, but how can we expect the majority of HTML coders to be responsible enough to write the stuff?

    I can't count the number of times I've seen people use a single <p> tag to make a line space and fail to close it, or when people do all sorts of non-compliant things to save time. This happens in professional level work, too. You can write bad code, and browsers work around it, and why shouldn't they?

    The only way this kind of quality could be achieved, would of course be to run every page through a validator -- which takes time, and doesn't suit the budget of most web projects, or to abandon HTML for a strictly compiled language.

  10. #10
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kidwizdumb
    Well for one thing, I have Jeffrey Zeldman's book *Designing with Web Standards* and it's not really a bad book, but lots of things outlined don't really work in practice. Take the subject of DOCTYPE switching for example, I used XHTML Transitional and Strict, and HTML Transitional, and Strict in Mozilla and IE and found that most browsers pretty much run in Quirk's mode all the time, so the DOCTYPE might seem important from a utopian point of view, but a browser like IE performs very similar if you switch between different DOCTYPE flavors, or you could say it doesn't perform as expected.
    Most browsers running in Quicksmode all the time? That's new to me too! I can make IE run in quirck mode when I want thanks to the '<?xml version=... ' bug. With Moz or any other browser I never really tried, as far as I know they run in standards mode. And they do behave that way (safe for a some bugs ).

    But that's beside the point. You are making an stand against standards using poor browser implementation as a argument. To make a crude analogie, that's like saying "The thief is braking the law, therefore the problem is the law".
    Quote Originally Posted by kidwizdumb
    XHTML is supposed to separate content from structure, and for that reason it should definitely be appreciated, as many of us remember the bygone days of crappy <font> tags and browser specific code. I don't think that XHTML is really coming together as its proponents would contend that it does. It still has many of the drawbacks of plain vanilla HTML, and then you get high minded types who write books about it to make money.
    XHTML is a compromise between XML and 'old' HTML. It is a malformed XML standard. The next step is XHTML2 and it is my understanding that it will be closer to a 'true' XML standard. Btw, that is why doctypes are so important, future browsers will need them to start making sense of what we make today.

    Personally I can't see anything wrong with writing a book and making money of it. However I don't think you could acuse Zeldman(which I am asuming is your 'high minded type') of money grabbing given all of the work that he's done, for free, at the web standards project, with his personal blog and at a list apart long before web standards became 'fashionable'. There is a reason that he is one of the most respected web developers worldwide.
    Quote Originally Posted by kidwizdumb
    The languages that I think deserve attention and have a lot of potential are XML and XLST. These do adhere to a standard, and are already catching on in a big way, and serve a real need. It would be great if we only saw standards compliant XHTML code in the future, and certainly it would make the web a much better place, but how can we expect the majority of HTML coders to be responsible enough to write the stuff?
    XML and XSLT are of a different nature then XHTML. Ihaven't dabled too much into XSLT but it is my understanding that it is used to transform XML documents into another language or form, one of these being XHTML. Correct me if I'm wrong. XML is not a language, but rather a meta language. A language used to describe other languages, one of these being XHTML. Also, an XML file has no meaning whats so ever, unless it has a... doctype, which refers to the standard being used.
    Quote Originally Posted by kidwizdumb
    I can't count the number of times I've seen people use a single <p> tag to make a line space and fail to close it, or when people do all sorts of non-compliant things to save time. This happens in professional level work, too. You can write bad code, and browsers work around it, and why shouldn't they?
    If people write bad code, that is their problem, not the standards. Some of the newer browsers are already being less forgiving. And if these people are ever going to code in any flavor of XML they'd better get there act straight.
    Quote Originally Posted by kidwizdumb
    The only way this kind of quality could be achieved, would of course be to run every page through a validator -- which takes time, and doesn't suit the budget of most web projects, or to abandon HTML for a strictly compiled language.
    I'm not really understanding were you are going. Half of you reasoning seems to be for 'sloppy coding' and against standards, and half of it seems to be for even stricter standards. Your argument seems to be "If we can't have perfection, let's have a total mess" .

    Validators should be (and are already) part of the authoring tool. As a matter of fact I'm running an old version of Homesite here which has a pretty good (html4) validator. I can even have it validate my code 'as I type it'. If I'm not mistaken Dreamweaver MX supports, generates and validates xhtml and css, or will do with the next release.

    Well, that's it for now really. I do enjoy a bit of polemic once in while .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  11. #11
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Personally I can't see anything wrong with writing a book and making money of it. However I don't think you could acuse Zeldman(which I am asuming is your 'high minded type') of money grabbing given all of the work that he's done, for free, at the web standards project, with his personal blog and at a list apart long before web standards became 'fashionable'. There is a reason that he is one of the most respected web developers worldwide.
    It wouldn't be wise to accuse Zeldman of this, especially since I have so little background on the guy, and so there wasn't any particular high-minded person in mind.

    Plus, who ever said that making money at something you love is a bad thing. If Zeldman was making good money at pushing XHTML -- that's great! I'd love to be writing books too.

    Correct me if I'm wrong. XML is not a language, but rather a meta language. A language used to describe other languages, one of these being XHTML.
    In the sense that it describes something, it would be a language.


    I'm not really understanding were you are going. Half of you reasoning seems to be for 'sloppy coding' and against standards, and half of it seems to be for even stricter standards. Your argument seems to be "If we can't have perfection, let's have a total mess" .
    I think it's more like:

    If we can't have perfection, let's accept the mess and be one with the mess that is HTML.

    Well, that's it for now really. I do enjoy a bit of polemic once in while .
    Yeah, I'm pretty much talked out too I'm usually listening to everything someone says, so my discussions are not set up to prove a point and make someone else wrong, but to gather information and have fun with it at the same time.

    I'm also here to find solutions to coding problems when possible, or even be innovative.

  12. #12
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kidwizdumb
    I think it's more like:

    If we can't have perfection, let's accept the mess and be one with the mess that is HTML.
    I guess I'm more of a 'middle of the road' kinda guy . I don't like things to messy but I find perfection can be stifling as well. For me XHTML offers a good compromise with enough freedom to be as 'perfect' or as 'messy' as is required by the job at hand.
    Quote Originally Posted by kidwizdumb
    so my discussions are not set up to prove a point and make someone else wrong, but to gather information and have fun with it at the same time.
    Same here really, though I'm also not afraid of giving my opinion at any time. One way of learning has been to have my opinion drilled in the ground or confirmed by some of the other members here.
    Quote Originally Posted by kidwizdumb
    I'm also here to find solutions to coding problems when possible, or even be innovative.
    Another great way to learn and stretch ones thinking.

    This is a great place to be for that, isn't it?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  13. #13
    SitePoint Enthusiast kidwizdumb's Avatar
    Join Date
    Oct 2003
    Location
    Ojai
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Another great way to learn and stretch ones thinking.

    This is a great place to be for that, isn't it?

    Rik
    Most definitely, I'm always impressed by the members here and they have often steered me in the right direction.

    One challenge for me, is that my clients all have different platforms and attitudes.

    Like my primary client/employer is a veteran IT guy, and he has more of a cowboy attitude, or basically everyone he comes into contact with is clueless or technically deficient. He tends to love all things MS, and so he's fine with something working in IE and ignoring the minority browsers at least some of the time. I'm kind of middle of the road, and try to do the most that's possible in the time we have.

    Another client, does everything on the Mac and uses IE primarily, but they aren't really aware of the latest trends in HTML or anything, so I try and focus on making things look good, rather than on making it validate to XHTML strict or transitional, and because they could care less anyway. My main concern is that always trying to validate a site to XHTML will take more time, and that it'll end up being something that concerns me, more so, than the client.


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
  •