- #pagecontent {
-
max-width:490px;
-
max-height: 240px;
-
position: absolute;
-
color: #fff;
-
top: 115px;
-
left: 378px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
How do I make sure data/test displayed in this div automatically goes to a new line as opposed to exceeding/overflowing in the <div>?
I have tried the overflow and display properties but can,t make it.
Your help will be much appreciated
14 22997
dont set
max-height: 240px;
, then if your document bigger then that height length it would overflow the <div> , better to set
min-height: 240px;
then it would take minimum that height and max whatever it comes
That does not seem to work.
Any other ideas?
That should work but min-height does not work in IE6.
I'm using Mozilla. the content still overflows the div
So am I. Need to see the complete markup then cause I don't see the problem.
My CSS -
#content {
-
min-width:490px;
-
min-height: 240px;
-
position: absolute;
-
color: #fff;
-
top: 115px;
-
left: 378px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
-
The page where I display the content -
<?
-
//require_once'functions.php';
-
require_once'template.php';
-
-
Head('Frequently asked questions');
-
?>
-
-
<table align="center">
-
<tr>
-
<td><div id="content">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
-
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div></td>
-
</tr>
-
</table>
-
-
-
-
-
<?
-
Footer();
-
?>
-
I still don't see the problem. Do you mean you are wondering why it's not staying inside the table cell? Absolutely positioned elements are removed from the normal flow and that would be why you don't see it inside the table cell itself but it is staying inside the div.
Thank you very much.
Had over looked that.
However, the div now respects the sizing in CSS but not all content is displayed, ie I expected content to be moving to a new line in succession until it all fits.
What is the issue here?
My other small issue is that my menus appear to be larger, ie not following the CSS style correctly.On my index page, they are okay.
What could be the problem?
You have to show an example. Show the complete markup. By complete, I mean everything from line1 to the last line.
This is my entire CSS -
html, body, ul, li, h1, h2, h3, h4 {
-
margin: 0px;
-
padding: 0px;
-
color: #DBDBDB;
-
list-style: none;
-
}
-
-
h1 img {
-
display: block;
-
}
-
img {
-
border: 0px;
-
}
-
p {
-
margin: 0.5em 0px;
-
}
-
a {
-
color: white;
-
text-decoration: none;
-
}
-
a:hover {
-
color: #eee;
-
text-decoration: underline;
-
}
-
.left {
-
float: left;
-
}
-
.right {
-
float: right;
-
}
-
.more {
-
text-align: right;
-
}
-
.clear {
-
clear: both;
-
}
-
-
body {
-
background: #580000 url(images/header_bg.jpg) repeat-x;
-
font: 11px arial, sans-serif;
-
padding-bottom: 10px;
-
}
-
#header {
-
position: absolute;
-
top: 5px;
-
left: 160px;
-
width: 100%;
-
height: 27px;
-
}
-
-
#header h1 {
-
background:url(images/header_left.jpg) no-repeat;
-
height: 184px;
-
width: 282px;
-
margin: 0;
-
padding: 0;
-
color: #fff;
-
line-height: 1;
-
}
-
#header h1 em {
-
display: block;
-
padding: 30px 0 0 60px;
-
margin: 0;
-
font-size: 18px;
-
font-weight:bold;
-
font-family:Arial, Helvetica, sans-serif;
-
}
-
-
#headerright {
-
position: absolute;
-
top: 5px;
-
left: 920px;
-
width: 100%;
-
height: 200px;
-
}
-
-
#headerright h1 {
-
background:url(images/header_left.jpg) no-repeat;
-
height: 184px;
-
width: 282px;
-
margin: 0;
-
padding: 0;
-
color: #fff;
-
line-height: 1;
-
}
-
#headerright h1 em {
-
display: block;
-
padding: 30px 0 0 60px;
-
margin: 0;
-
font-size: 18px;
-
font-weight:bold;
-
font-family:Arial, Helvetica, sans-serif;
-
}
-
#headerright h1 strong {
-
display: block;
-
margin: 0px;
-
padding: 10px 0px 0px 50px;
-
font-weight: bold;
-
font-size: 15px;
-
font-family: verdana, arial, sans-serif;
-
}
-
-
#nav-top {
-
position: absolute;
-
top: 15px;
-
left: 545px;
-
width: 200px;
-
}
-
#nav-top li {
-
display: inline;
-
}
-
-
#nav {
-
background: top left url(images/nav_left.gif) no-repeat;
-
position: absolute;
-
top: 40px;
-
left: 385px;
-
width: 480px;
-
text-align: center;
-
z-index: 15;
-
}
-
#nav div {
-
background: top right url(images/nav_right.gif) no-repeat;
-
padding: 0 10px;
-
}
-
#nav ul {
-
background: top left url(images/nav_bg.gif) repeat-x;
-
padding: 10px 0 10px 0px;
-
}
-
#nav li {
-
display: inline;
-
}
-
#nav a {
-
font-weight: normal;
-
}
-
-
#left-person img{
-
width: 232px;
-
height: 515px;
-
border: 3px solid white;
-
}
-
-
#right-person img {
-
width: 232px;
-
height: 515px;
-
border: 3px solid white;
-
}
-
-
#black-tl { width: 100%; background: black top left url(images/black_tl.gif) no-repeat; }
-
#black-tr { width: 100%; background: top right url(images/black_tr.gif) no-repeat; }
-
#black-bl { width: 100%; background: bottom left url(images/black_bl.gif) no-repeat; }
-
#black-br { width: 100%; background: bottom right url(images/black_br.gif) no-repeat; }
-
-
#black-tl {
-
margin-left: 5px;
-
margin-right: 15px;
-
margin-top: 0px;
-
margin-bottom: 90px;
-
width: 500px;
-
}
-
#black-bl {
-
padding: 20px 20px 10px 20px;
-
position: relative;
-
}
-
-
.black-box {
-
float: left;
-
width: 126px;
-
margin-right: 5px;
-
margin-left: 28px;
-
}
-
-
.black-box img {
-
width: 120px;
-
height: 105px;
-
}
-
.black-box h2 {
-
font-size: 13px;
-
font-weight: normal;
-
}
-
.black-box h2 em {
-
font-size: 22px;
-
font-family: serif;
-
}
-
.black-box .more {
-
color: red;
-
}
-
-
#footer {
-
margin-left: 320px;
-
width: 300px;
-
position:absolute;
-
top: 665px;
-
left: 200px;
-
}
-
-
#footer li {
-
display: inline;
-
}
-
-
-
#s {
-
position: relative;
-
top: 0.4em;
-
}
-
#submit {
-
position: relative;
-
top: 0.2em;
-
}
-
-
#content {
-
width: 490px;
-
height: 240px;
-
color: #fff;
-
top: 115px;
-
left: 381px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
-
-
#pgcontent {
-
float:left;
-
width: 490px;
-
height: 240px;
-
color: #fff;
-
top: 115px;
-
left: 381px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
-
-
#tips {
-
float: left;
-
width: 235px;
-
height: 260px;
-
position: absolute;
-
color: #fff;
-
top: 370px;
-
left: 381px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
-
#choose {
-
float: left;
-
width: 235px;
-
height: 260px;
-
position: absolute;
-
color: #fff;
-
top: 370px;
-
left: 636px;
-
border: 3px solid white;
-
background: #901315;
-
padding: 0px;
-
}
-
-
-
this is my template page -
<?
-
header("Pragma: no-cache");
-
header("Cache: no-cache");
-
-
function Head($PageTitle)
-
{
-
print "<title>".$PageTitle."</title>";
-
-
-
?>
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<title>LAVIS - CASUAL</title>
-
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
-
-
<link rel="shortcut icon" href="favicon.gif">
-
</head>
-
<script type="text/javascript" src="transitionshow.js">
-
-
/***********************************************
-
* Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)
-
* This notice must stay intact for usage
-
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
-
***********************************************/
-
-
</script>
-
<body>
-
<script>
-
<!--
-
/*
-
Background music script
-
By JavaScript Kit (http://javascriptkit.com)
-
Over 400+ free scripts here!
-
*/
-
-
//specify FULL path to midi
-
var musicsrc="http://localhost/lavis/NicolaBoschetti_GiochiDiLuce.mp4"
-
if (navigator.appName=="Microsoft Internet Explorer")
-
document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')
-
else
-
document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">')
-
//-->
-
</script>
-
-
<script type="text/javascript" src="ajaxNavigation.js"></script>
-
-
<table width="1000" height="650"border="0" align="center">
-
<tr>
-
<td width="250"><table width="250" height="105" border="0" valign = "top">
-
<tr>
-
<td><div id="header">
-
<h1><em>LAVIS</em></h1>
-
</div></td>
-
</tr>
-
</table>
-
<table width="250" border="0">
-
<tr>
-
<td><script type="text/javascript">
-
-
var flashyshow=new flashyslideshow({ //create instance of slideshow
-
wrapperid: "left-person", //unique ID for this slideshow
-
//wrapperclass: "flashclass", //desired CSS class for this slideshow
-
imagearray: [
-
["compimg/lavis.jpg", "", "", ""],
-
["compimg/lavis (1).jpg", "", "", ""],
-
["compimg/lavis (2).jpg", "", "", ""],
-
["compimg/lavis (3).jpg", "", "", ""],
-
],
-
pause: 3000, //pause between content change (millisec)
-
transduration: 8000 //duration of transition (affects only IE users)
-
})
-
</script></td>
-
</tr>
-
</table></td>
-
<td width="500"><table width="500" border="0">
-
<tr>
-
<td><div id="nav-top">
-
<ul>
-
<li><a href="#">Contacts</a> |</li>
-
<li><a href="#">Feedback</a> |</li>
-
<li><a href="#">FAQS</a> |</li>
-
<li><a href="#">Site Map</a></li>
-
</ul>
-
</div>
-
<div id="nav">
-
<div>
-
<ul>
-
<li><a href="#">HOME</a> | </li>
-
<li><a href="#">ACCESSORIES</a> | </li>
-
<li><a href="#">MEN COLLECTION</a> | </li>
-
<li><a href="#">WOMEN COLLECTION</a> | </li>
-
<li><a href="#">KIDS COLLECTION</a></li>
-
</ul>
-
</div>
-
</div></td>
-
</tr>
-
<tr>
-
<td>
-
<div class="clear"></div>
-
</div></td>
-
</tr>
-
<tr>
-
<td>
-
<?
-
}
-
?>
-
-
<?
-
function Footer()
-
{
-
?> </td>
-
</tr>
-
</table>
-
-
-
-
</td>
-
<td width="250"><table width="250" border="0" height="105" valign = "top">
-
<tr>
-
<td><div id="headerright">
-
<h1><em>CASUAL</em><strong>collections</strong></h1>
-
</div></td>
-
</tr>
-
</table>
-
<table width="250" border="0">
-
<tr>
-
<td><script type="text/javascript">
-
-
var flashyshow=new flashyslideshow({ //create instance of slideshow
-
wrapperid: "right-person", //unique ID for this slideshow
-
//wrapperclass: "flashclass", //desired CSS class for this slideshow
-
imagearray: [
-
["compimg/lavis.jpg", "", "", ""],
-
["compimg/lavis (1).jpg", "", "", ""],
-
["compimg/lavis (2).jpg", "", "", ""],
-
["compimg/lavis (3).jpg", "", "", ""],
-
],
-
pause: 5000, //pause between content change (millisec)
-
transduration: 10000 //duration of transition (affects only IE users)
-
})
-
</script>
-
-
</td>
-
</tr>
-
</table></td>
-
</tr>
-
</table>
-
-
<table width="1000" border="0" align="center">
-
<tr>
-
<td>
-
<div class="clear"></div>
-
<hr color="#00FF00" align="center">
-
<div id="footer">
-
<ul>
-
<li><a href="#">Contacts</a> |</li>
-
<li><a href="#">Feedback</a> |</li>
-
<li><a href="#">FAQS</a> |</li>
-
<li><a href="#">Site Map</a></li>
-
<li> ©<? echo date("Y"); ?></li>
-
</ul>
-
</div></td>
-
</tr>
-
</table>
-
</body>
-
</html>
-
<?
-
}
-
?>
-
A pape (FAQs) where I use template -
<?
-
//require_once'functions.php';
-
require_once'template.php';
-
-
Head('Frequently asked questions');
-
?>
-
-
<table align="center">
-
<tr>
-
<td><div id="pgcontent">
-
<p>wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww555555555555555555555</p>
-
<p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</p>
-
<p>yyyyyyyyyyyyyyyyyy </p>
-
</div></td>
-
</tr>
-
</table>
-
-
-
-
-
<?
-
Footer();
-
?>
-
-
My links, governed by the css "header" and those in the footer do not come out clearly like they do in the index page.
-
-
they appear larger and distorted.
-
-
Also, the div area now fits the content area but the information still overflows
-
-
Your help will be highly appreciated.
-
A few things:
1) Never use tables for layout. Always use CSS. In fact, it's been so long since I've messed with tables for layout I find it difficult to debug and frequently won't bother.
2) New web pages have no use for the transitional doctype. Use this one: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
3) Always show the generated markup and never the PHP. It just clutters things up and means nothing to those of us who don't use it and sometimes forces us to interpret it (which I won't do). It looks like I don't need it to follow along, though.
4) <script> before the <body> must be within the <head>.
5) Validate your html for that list of errors.
More later when I can look at this.
I added the tables because i though I would be able to control overflow (my current problem)).
I have validated my HTML
Kindly ignore the PHP
I really appreciate your help
Ok but now you need to show the corrected html.
I managed to fix the content in div problem using white space wrap
Post your reply Sign in to post your reply or Sign up for a free account.
Similar topics
reply
views
Thread by Federico Moschini [328594] |
last post: by
|
4 posts
views
Thread by Robert Oschler |
last post: by
|
82 posts
views
Thread by Peter Diedrich |
last post: by
|
1 post
views
Thread by ajay |
last post: by
|
9 posts
views
Thread by MrSpock |
last post: by
|
6 posts
views
Thread by scottyman |
last post: by
|
17 posts
views
Thread by Rob R. Ainscough |
last post: by
|
3 posts
views
Thread by domnulnopcea |
last post: by
| | | | | | | | | | | | |