...

View Full Version : Cannot keep text inside divs. Now SORTED.



effpeetee
01-03-2008, 08:30 PM
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.


<!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>

jcdevelopment
01-03-2008, 08:37 PM
You have a few XML/CSS errors that i see

1. * on this statement you have one line that is


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

effpeetee
01-03-2008, 08:45 PM
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

VIPStephan
01-03-2008, 08:46 PM
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:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

The language attribute is optional but widely used.

jcdevelopment
01-03-2008, 08:48 PM
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?

effpeetee
01-03-2008, 08:58 PM
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


<!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>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>
<div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccc</p></div>
<div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>
<div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllll</p></div>
<div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffff</p></div>
</div>

</body>
</html>

digilover
01-03-2008, 09:33 PM
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 (http://www.alistapart.com/articles/holygrail/)

That should tell you all you need to know.

James.

effpeetee
01-03-2008, 09:37 PM
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


<!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>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>
<div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccc</p></div>
<div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>
<div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllll</p></div>
<div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffff</p></div>
</div>

</body>
</html>

effpeetee
01-03-2008, 09:46 PM
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

harbingerOTV
01-03-2008, 11:12 PM
are you trying to have them fill vertically? if so add


html, body {
height: 100%;
}

effpeetee
01-04-2008, 08:50 AM
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

ahallicks
01-04-2008, 10:26 AM
overflow: hidden;?

hemebond
01-04-2008, 10:45 AM
<!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.

effpeetee
01-04-2008, 11:39 AM
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.

effpeetee
01-04-2008, 11:43 AM
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.
<!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>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>

<div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllll</p></div>

<div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>


<div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccc</p></div>


<div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffff</p></div>
</div>

</body>
</html>____________

effpeetee
01-04-2008, 11:56 AM
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?

http://www.exitfegs.co.uk/2121b.html

Frank -

Present 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%;
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>Headerhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p></div>

<div id="left"><p>Left llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllll</p></div>

<div id="right"><p>Rightrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr rrrrrrrrrrrrrrrrrrrrrrrrrr</p></div>


<div id="content"><p>Content cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc cccccccccccccccccccccccccccc</p></div>


<div id="footer"><p>Footer ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff ffffffffffffffffffffff</p></div>
</div>

</body>
</html>____________

hemebond
01-04-2008, 02:23 PM
Anyway, surely that would not account for the text leaking from the div'sSorry, I thought we were just pointing out flaws.


It's still wrong though.

ahallicks
01-04-2008, 02:48 PM
You forgot the trailing slash that XHTML requires...

And I thought that you might want to try overflow: hidden; on those divs where the content is overflowing?

effpeetee
01-04-2008, 03:42 PM
You forgot the trailing slash that XHTML requires...

And I thought that you might want to try overflow: hidden; on those divs where the content is overflowing?
Thank ahallicks and hemebond ,

I have now validated my html and css.
I will use the overflow:hidden; and see where I go.

Frank

EDIT, Yes it certainly hid the overflow, but I wanted it to fill the div Not just dispose of it.
How do I do that.

effpeetee
01-04-2008, 06:00 PM
:eek:Nothing that I do seems to make any difference. I just cannot get the text to flow into the divs. The text just keeps going off to the right and off screen.:eek:

Sure, I can hide it with overflow:hidden; - but that makes it rather difficult to read:D

http://www.exitfegs.co.uk/2121b.html

It is available here.

Help necessary before I scream.:eek:

Frank:mad:

jcdevelopment
01-04-2008, 06:16 PM
create a class that contains the text, im not sure if anyone suggested that but something like this




.someClass {
width:250px;
height:inherit;
color:fff;
so on so on
}


then add the class to your text when written

rmedek
01-04-2008, 06:54 PM
Nothing that I do seems to make any difference. I just cannot get the text to flow into the divs. The text just keeps going off to the right and off screen.

Nothing is going to get the text to wrap. You've set a width on your divs, and you've put text in there that doesn't break—no spaces—so the browser treats the text as one long column. You are trying to shoehorn something wider than the div into the div.

The text will not wrap automatically and the div will not expand horizontally to match. You are looking at the correct behavior of the document.

There are some ways around it (http://css-discuss.incutio.com/?page=WordWrapLongText) in IE, or you'd need to use Javascript. There's also this thread (http://www.codingforums.com/showthread.php?t=108107) which has a nice workaround.

effpeetee
01-04-2008, 07:25 PM
Thank you all for your help. But how does the text wrap in the CodingForums web pages. Also, when making up my "Sources" site (in my signature) When I put too long a title in, it wrapped automatically without me doing anythins special. Even in this REPLY box it is doing so.

Have a look at this.

http://www.exitfegs.co.uk/2121.html

Am I missing something? Boy am I confused.

Frank

rmedek
01-04-2008, 07:37 PM
The words "break," or wrap, where there are spaces. No spaces, no break.

It works in the reply boxes here thanks to vBulletin code. Spaces are being added dynamically so text will wrap.

effpeetee
01-04-2008, 08:04 PM
The words "break," or wrap, where there are spaces. No spaces, no break.

It works in the reply boxes here thanks to vBulletin code. Spaces are being added dynamically so text will wrap.
Yes, the penny has dropped at last. I must be getting old. It is so obvious once it is pointed out. That is one of the great strengths of this Forum.

I was looking for some great hidden mystery when the answer was staring me in the face.

Thanks to you all for your patience.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum