Jump to content

Display/layout problem


olyan
 Share

Recommended Posts

Hi there everyone. I am having a problem that does not seem to be easy to fix. I have tried multiple things, for quite a few hours without finding a solution that does exactly what I want.Here is the problem. I have a legend, which is in fact a unordered list, containing links to the different sections of my page. I also have some "code output" that I formatted in my page, with some description of the output.What happens is that, these blocks of "code output" goes right through my legend. I would like it to reformat itself by the width left beside the legend, and if the place is free, that it takes about 90% of the page. So, in case the "code output" is beside the legend, it would only take 90% of the free space beside the legend, not 90% of the page.Here is a test case I made for you to understand my problem.

<html><head>	<title>Help - Test case</title>	<link rel="stylesheet" type="text/css" href="help.css" /></head><body>	<a name="Top">	<h1>This is a test case</h1></a>	<hr />	<!-- Small legend of the different sections of the help page -->	<!-- For the test purpose, I need to make the list pretty long. -->	<ul class="legend" style="float:right;">		<li><a href="#Error_Case">This is a section of text</a>		<ul>			<li><a href="#Subsection1">Subsection1</a></li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>		</ul>		</li>	</ul>	<a name="Error_Case"> 	<h2>This is a section of text</h2> </a>		<p>On this line, I describe some info about the different sections coming up.</p>		<a name="Subsection1">		<h3>Subsection1</h3> </a>			<p>				Description of the subsection			</p>			<ol>				<li>				<h6>First type of block of code</h6>					<p>						On this line, I describe some info about the block of code coming up.					</p>										<p class="code">						Some code.<br />						Some other line code.<br />					</p>				</li>			</ol></body></html>

Here is what I use inside my stylesheet.

body{	background-color:#FFFFFF;	background-image: url("gradient2.png");	background-repeat:repeat-x;	font-size:100%;}p{	color:black;	font-family: "Calibri", Arial, Helvetica, sans-serif;	font-size:0.85em;}p.code{	margin-left:5%;	margin-right:5%;	padding:10px 10px 10px 10px;	background-color:lightgrey;	border: 1px solid black;	border-collapse:separate;	font-family:"Courier New", Courier, monospace;	font-size:0.71875em;}p.code_title{	margin-left:5%;	font-family:"Courier New", Courier, monospace;	font-weight:bold; 	font-size:0.71875em;}ul.legend{	margin:25px 50px 25px 25px;	border: 1px solid black;	border-collapse:separate;	padding: 10px 10px 10px 25px;	font-family: Helvetica, Arial, sans-serif;	font-size:0.75em;	list-style-type: square;}ul.legend ul  ul  ul{	list-style-type: disc;}

Thank you for your help.

Link to comment
Share on other sites

Hi there everyone. I am having a problem that does not seem to be easy to fix. I have tried multiple things, for quite a few hours without finding a solution that does exactly what I want.Here is the problem. I have a legend, which is in fact a unordered list, containing links to the different sections of my page. I also have some "code output" that I formatted in my page, with some description of the output.What happens is that, these blocks of "code output" goes right through my legend. I would like it to reformat itself by the width left beside the legend, and if the place is free, that it takes about 90% of the page. So, in case the "code output" is beside the legend, it would only take 90% of the free space beside the legend, not 90% of the page.Here is a test case I made for you to understand my problem.
<html><head>	<title>Help - Test case</title>	<link rel="stylesheet" type="text/css" href="help.css" /></head><body>	<a name="Top">	<h1>This is a test case</h1></a>	<hr />	<!-- Small legend of the different sections of the help page -->	<!-- For the test purpose, I need to make the list pretty long. -->	[color="#FF0000"]<div id="legend">[/color]		<li><a href="#Error_Case">This is a section of text</a>		<ul>			<li><a href="#Subsection1">Subsection1</a></li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>			<li>Some other item.</li>		</ul>		</li>	[color="#FF0000"]</div>[/color]	<a name="Error_Case"> 	<h2>This is a section of text</h2> </a>		<p>On this line, I describe some info about the different sections coming up.</p>		<a name="Subsection1">		<h3>Subsection1</h3> </a>			<p>				Description of the subsection			</p>			<ol>				<li>				<h6>First type of block of code</h6>					<p>						On this line, I describe some info about the block of code coming up.					</p>					[color="#FF0000"]<div id="code">[/color]					<p class="code">						Some code.<br />						Some other line code.<br />					</p>[color="#FF0000"]</div>[/color]				</li>			</ol></body></html>

Here is what I use inside my stylesheet.

body{	background-color:#FFFFFF;	background-image: url("gradient2.png");	background-repeat:repeat-x;	font-size:100%;}p{	color:black;	font-family: "Calibri", Arial, Helvetica, sans-serif;	font-size:0.85em;}p.code{	margin-left:5%;	margin-right:5%;	padding:10px 10px 10px 10px;	background-color:lightgrey;	border: 1px solid black;	border-collapse:separate;	font-family:"Courier New", Courier, monospace;	font-size:0.71875em;}p.code_title{	margin-left:5%;	font-family:"Courier New", Courier, monospace;	font-weight:bold; 	font-size:0.71875em;}[color="#FF0000"]#legend {	float:right;}[/color]ul.legend{	margin:25px 50px 25px 25px;	border: 1px solid black;	border-collapse:separate;	padding: 10px 10px 10px 25px;	font-family: Helvetica, Arial, sans-serif;	font-size:0.75em;	list-style-type: square;}ul.legend ul  ul  ul{	list-style-type: disc;}

Thank you for your help.

Put your LEGEND and CODE in a div tag and assign the CODE div a width of 80%...I made the changes to your code in red.Does that help?
Link to comment
Share on other sites

Your solution didn't quite fix my problem. On first look, the problem seems to be fixed, but if you minimize a bit the web browser window, the legend and the code output block are superimposed. Any other ideas?Maybe it's going to be clearer what I want to be with a small example. Take Office Word. Write a bunch of text and then add an image. The text wraps around the image. And if you resize your page, the text will follow around. It's a bit the same thing I want to do, but with my code output block.

Link to comment
Share on other sites

Your solution didn't quite fix my problem. On first look, the problem seems to be fixed, but if you minimize a bit the web browser window, the legend and the code output block are superimposed. Any other ideas?Maybe it's going to be clearer what I want to be with a small example. Take Office Word. Write a bunch of text and then add an image. The text wraps around the image. And if you resize your page, the text will follow around. It's a bit the same thing I want to do, but with my code output block.
Well, you can try making putting your legend in one div tag (float:right;) and everything else in another (float:left;).
<html><head><title>Help - Test case</title><link rel="stylesheet" type="text/css" href="help.css" /></head><style>body{background-color:#FFFFFF;background-image: url("gradient2.png");background-repeat:repeat-x;font-size:100%;}p{color:black;font-family: "Calibri", Arial, Helvetica, sans-serif;font-size:0.85em;}p.code{margin-left:5%;width:80%;padding:10px 10px 10px 10px;background-color:lightgrey;border: 1px solid black;border-collapse:separate;font-family:"Courier New", Courier, monospace;font-size:0.71875em;}p.code_title{margin-left:5%;font-family:"Courier New", Courier, monospace;font-weight:bold;font-size:0.71875em;}#legend {float:right;}ul.legend{margin:25px 50px 25px 25px;border: 1px solid black;border-collapse:separate;padding: 10px 10px 10px 25px;font-family: Helvetica, Arial, sans-serif;font-size:0.75em;list-style-type: square;}ul.legend ul ul ul{list-style-type: disc;}#code {margin-left:5%;width:80%;} #content {	width:80%;	float:left;}</style><body><div id="content"><a name="Top"><h1>This is a test case</h1></a><hr /><a name="Error_Case"><h2>This is a section of text</h2> </a><p>On this line, I describe some info about the different sections coming up.</p><a name="Subsection1"><h3>Subsection1</h3> </a><p>Description of the subsection</p><ol><li><h6>First type of block of code</h6><p>On this line, I describe some info about the block of code coming up.</p><div id="code"><p class="code">Some code.<br />Some other line code.<br /></p></div></li></ol></div><!-- Small legend of the different sections of the help page --><!-- For the test purpose, I need to make the list pretty long. --><div id="legend"><li><a href="#Error_Case">This is a section of text</a><ul><li><a href="#Subsection1">Subsection1</a></li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li><li>Some other item.</li></ul></li></div></body></html>

Link to comment
Share on other sites

First of all, thank you for your help. It is well appreciated. Unfortunately, its seems it's not quite what I'm looking for. When minimizing the web browser, I saw that the legend and the rest seemed to make 2 block. To be sure of this, I added a border to both divs and put each of them a different color. What I saw was that the 2 div blocks would superimpose. Which is good. But since the content of the float:left div block can be pretty long, I lose all the space that is under the legend (the right div block). So, in other words, the effect was the same as if I had made a table 1x2, the left column being the content of the page and the right one the legend.

Link to comment
Share on other sites

Try just floating your legend div. Don't float anything else and the content should flow around the legend.Edit:Actually, revert back to the original code you posted. (with the <ul>)Make the <ul> float right and leave everything else the way you had it.

Edited by jkloth
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...