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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A weird problem with the <div> tag

    Hi there!

    This is my first post here. I registered because I'm in need of help, and I'm totally clueless. I hope some people could help.

    I'm building a website and I decided to add a gradient background to the top of each column. This is the code I used:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css">
                @charset "utf-8";
                body  {
                    font: 100% Verdana, Arial, Helvetica, sans-serif;
                    background: #ECDBA6;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    color: #000000;
                }
                
                h1 {
                    margin: 0;
                    padding-top: 20px;
                }
                
                .teststyle #gradient {
                        width: 100%;
                            height: 100px;
                            background-image: url(gradient.png);
                }
            </style>
        </head>
    
        <body class="teststyle">
            <div id="gradient"/>
            <h1>Hello World!</h1>
            <p>
                Lorem ipsum dolor sit amet
            </p>
        </body>
    </html>
    The first interesting thing is that if I use "<div></div>" instead of "<div/>" the whole thing goes wrong. The gradient.png image doesn't go behind the text - it's just simply standing above the text. Why is this?

    The real problem is when I have two collumns, one of which floats on the left and the other on the right side of the page. Adding the "<div/>" part makes everything collapse. This is a sample code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <style type="text/css">
                @charset "utf-8";
    			body  {
    				font: 100% Verdana, Arial, Helvetica, sans-serif;
    				background: #FFFFFF;
    				margin: 0;
    				padding: 0;
    				text-align: center;
    				color: #000000;
    			}
    			
    			.teststyle2 #gradient_left {
    				float: left;
    				width: 100%;
    				height: 100px;
    				background-image: url(images/gradient.png);
    			}
    			
    			.teststyle2 #container { 
    				width: 900px;
    				margin: 0 auto; 
    				text-align: left;
    			}  
    			
    			.teststyle2 #sidebar1 {
    				float: left;
    				width: 11em;
    				padding: 0;
    				background: #ECDBA6;
    			}
    
    			.teststyle2 #sidebar2 {
    				float: right;
    				width: 11em;
    				padding: 0;
    				background: #ECDBA6;
    			}
    			
    			.teststyle2 #sidebar1 h3, .thrColHybHdr #sidebar1 p {
    				margin-left: 10px;
    				margin-right: 10px;
    			}
    
            </style>
        </head>
    
        <body class="teststyle2">
            <div id="container">
            	<div id="sidebar1">
                	
                    <!-- ***** -->
                    <!-- *   * -->
                    <div id="gradient_left"/>
                    <!-- *   * -->
                    <!-- ***** -->
                    
                    <h3>sidebar 1</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                </div>
                <div id="sidebar2">
                    <h3>sidebar 2</h3>
                    <p>Donec eu mi sed turpis feugiat feugiat.</p>
                </div>
            </div>
        </body>
    </html>
    I have no idea why this is happening. Could somebody give me a hint?
    Thanks, in advance!

  • #2
    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 Balidani,
    Where did you come up with "<div/>" ?

    Check out the links in my signature line about validating. They will really help you a lot.
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply!

    I'm not really experienced with HTML, so I just thought it would work like in XML. And it worked for some reason.

    Now I'll read everything you have in your sig. about validation. I'm quite experienced with programming languages like C, C++, Java, ... It seems trying to teach myself HTML thinking "hey it's just HTML" wasn't such a great idea.

    If I can't do it this way, could you tell me how should I go about achieving the same effect?
    I'd really appreciate it!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In that second example you post, you have #sidebar2 nested inside #sidebar1. You probably just missed the closing tag for #sidebar1.
    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

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but the problem is that I don't want that image for the whole sidebar. It's just a 100pixel high image, and below that I'd like a single color.

    And separating the sidebar would make the text appear either only in front of the gradient image or the normal background color.

    Is this something hard to achieve? Maybe I should change my plans.

  • #6
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    Put this for the sidebar1 css:
    Code:
    background:#ECDBA6 url('mages/gradient.png') no-repeat center top;}
    And get rid of <div id="gradientleft"/>
    Learning along the way...

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much!
    You solved my problem

    Now I'm off to read about validation.
    Thank you guys!


  •  

    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
    •