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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Cannot keep text inside divs. Now SORTED.

    I have written the following code in an attempt to make a page a from scratch just doing what I think should be done. I have made progress with everyones help but Cannot keep text inside divs.

    I would like a few comments as to what is wrong. I do NOT want a re-write of the code please. I learn very little that way. Just a pointer or two on the way to go. I like to learn a little at a time and consolidate before moving on.
    Any help will be appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    *{
    margin:0;
    padding:0;
    Border:0;
    }
    
    #wrapper{
    width:100%;
    height:100%;
    color:white
    background-color:gray;
    }
    
    #header{
    width:100%;
    height:10%;
    background-color:red;
    border:2px solid black;
    }
    
    #content{display:inline;
    width:69%;
    height:80%
    background-color:blue;
    border:2px solid black;
    }
    
    #left{
    float:left;
    width:10%;
    height:80%
    background-color:#00ffff;
    border:2px solid black;
    }
    
    #right{
    float:right;
    width:10%;
    height:80%
    background-color:yellow;
    border:2px solid black;
    }
    
    #footer{
    clear:both;
    width:100%;
    height:10%
    background-color:red;
    border:2px solid black;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id= "wrapper">
    <div id="header"><p>Header</p></div>
    <div id="content"><p>Content</p></div>
    <div id="right"><p>Right</p></div>
    <div id="left"><p>Left</p></div>
    <div id="footer"><p>Footer</p></div>
    </div>
    
    </body>
    </html>
    Last edited by effpeetee; 01-04-2008 at 08:00 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    You have a few XML/CSS errors that i see

    1. * on this statement you have one line that is
    Code:
    Border:0;
    keep it lower case,

    then on a few id's you are missing a ";"

    just keep a close eye on those things, sometimes they can mess up alot of things

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks,

    That is a great help and the result is much nearer to what I am reaching for.
    I'll go on from there and post again later.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Also you have two html and head start tags where only one each is allowed. Additionally in XHTML you need to put an XML namespace declaration into the opening html tag like so:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    The language attribute is optional but widely used.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    I didnt even see that, Would IE just ignore that and keep on going, because i know that IE doesnt have a problem with not having ";" but i believe FF would drop it along with double head and html tags?

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Back again.

    This my code now and attached is a screenshot. How do I persuade the divs to take up and fill their correct places in the window?

    Jusy a pointer is what I need.

    Thanks
    Frank

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
    <html>
    <head>
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    *{
    margin:0;
    padding:0;
    border:0;
    }
    
    #wrapper{
    
    width:100&#37;;
    height:100%;
    color:#ffffff
    background-color:#ff00ff;
    }
    
    #header{
    width:100%;
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    #content{dispaly:inline;
    width:69%;
    height:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    border:2px solid red;
    }
    
    #left{
    float:left;
    width:10%;
    height:80%;
    background-color:#00ffff;
    border:2px solid black;
    }
    
    #right{
    float:right;
    width:10%;
    height:80%;
    background-color:yellow;
    border:2px solid black;
    }
    
    #footer{position:absolute;
    top:590px;
    clear:both;
    width:100%;
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id= "wrapper">
    <div id="header"><p>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>
    <div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p></div>
    <div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>
    <div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p></div>
    <div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p></div>
    </div>
    
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Cannot keep text inside divs. Now SORTED.-screenhunter_02-jan.-03-19.54.jpg  
    Last edited by effpeetee; 01-03-2008 at 08:17 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Frank,

    What you're doing is a typical 3 column layout. The best way to master this is to have a good read through one of the online tutorials such as this one:

    http://www.alistapart.com/articles/holygrail

    That should tell you all you need to know.

    James.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Back again.

    This my code now and attached is a screenshot. How do I persuade the divs to take up and fill their correct places in the window?

    Jusy a pointer is what I need.

    Thanks
    Frank
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    *{
    margin:0;
    padding:0;
    border:0;
    }
    
    #wrapper{
    
    width:100%;
    height:100%;
    color:#ffffff
    background-color:#ff00ff;
    }
    
    #header{
    width:100%;
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    #content{dispaly:inline;
    width:69%;
    height:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    border:2px solid red;
    }
    
    #left{
    float:left;
    width:10%;
    height:80%;
    background-color:#00ffff;
    border:2px solid black;
    }
    
    #right{
    float:right;
    width:10%;
    height:80%;
    background-color:yellow;
    border:2px solid black;
    }
    
    #footer{position:absolute;
    top:590px;
    clear:both;
    width:100%;
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id= "wrapper">
    <div id="header"><p>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>
    <div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p></div>
    <div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>
    <div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p></div>
    <div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p></div>
    </div>
    
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hi digilover ,
    Thanks. If you look at the useful url's (Sources) in my signature, you will find this listed with many others. Unfortunately, I do not learn very well this way. I learn fastest and better by diving in at the deep-end and then learning to swim as it were. My problem with css is that I have learned a few techniques without understanding them. I need to struggle a bit in order for it to sink in. I have always learned this way and at 82 yrs old, I've left it too late to changs. I have done a lot of computer programming in my life but no so slippery as CSS where the same thing often means different things in different places.
    I was born too long ago.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    are you trying to have them fill vertically? if so add
    Code:
    html, body {
    height: 100%;
    }
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks harbingerOTV

    That has made a great improvement, but the text is running out of the boxes and the left/right boxes are down at the bottom of the screen.

    Frank
    Attached Thumbnails Attached Thumbnails Cannot keep text inside divs. Now SORTED.-screenhunter_01-jan.-04-07.48.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    overflow: hidden;?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #13
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by effpeetee View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    ...
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    Your content type is incorrect.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by hemebond View Post
    Your content type is incorrect.
    It is as recommended by VIPStephan above.
    Anyway, surely that would not account for the text leaking from the div's

    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by ahallicks View Post
    overflow: hidden;?
    ahallicks

    overflow:hidden;

    Sorry, I must be dense this morning. What do you mean, It doesn't appear in my code, does it?

    Frank - Present code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>Enter_Title_Here</title>
    <style type="text/css">
    
    *{
    margin:0;
    padding:0;
    border:0;
    }
    html, body {
    height: 100&#37;;
    width:100%
    }
    
    #wrapper{
    
    height:100%;
    color:#ffffff
    background-color:#ff00ff;
    }
    
    #header{
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    #content{position:relative;
    width:78%;
    height:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    border:2px solid red;
    text-align: left;
    
    }
    
    #left{position:relative;
    float:left;
    width:10%;
    
    background-color:#00ffff;
    border:2px solid black;
    text-align: left;
    
    }
    
    #right{position:relative;;
    float:right;
    width:10%;
    ;
    background-color:yellow;
    border:2px solid black;
    text-align: left;
    
    }
    
    #footer{
    top:590px;
    clear:both;
    width:100%;
    height:5%;
    background-color:red;
    border:2px solid black;
    }
    
    
    
    </style>
    </head>
    <body>
    <div id= "wrapper">
    
    <div id="header"><p>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>
    
    <div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p></div>
    
    <div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>
    
    
    <div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p></div>
    
    
    <div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p></div>
    </div>
    
    </body>
    </html>____________
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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