[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML - help

Posted on 2009-12-30
10
Medium Priority
?
243 Views
Last Modified: 2012-05-08
I am working with a new homepage and the layout I made in tables ( I know it is a bit old fashioned, but it is the most easy way)

Regarding the table I need for HTML I have a problem.

I have specified the height etc for each row and I want it to keep that way. If text is going outside the row there must be a scoll panel

This scoll panel must be showed in the areas called "colnormal" , "colright", "colleft" - so the text in this areas will stay in size and if the text is going outside  a scroll panel must be showed
<HTML>

<HEAD>
<TITLE>site</TITLE>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</HEAD>
<body>



<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" background="grafik/mid.jpg">
	<tr>
                 <td width="70%" height="20%" valign="top" colspan="2" id="colNormal">ColNormal</td>
		<td width="30%" height="100%" rowspan="3" valign="top" id="colBorder">Colborder</td>
	</tr>
	<tr>
		<td width="30%" height="60%" valign="top" id="colRight">Colright</td>
		<td width="30%" height="60%" valign="top" id="colLeft">colleft</td>
	</tr>
	<tr>
		<td width="70%" height="20%" colspan="2">&nbsp;</td>
	</tr>
</table>


</body>

</html>

Open in new window

0
Comment
Question by:rossoneris
  • 5
  • 5
10 Comments
 
LVL 11

Expert Comment

by:nordtorp
ID: 26148758
Someone asked about this earlier. Please have a look at this thread:

http://www.ahfb2000.com/webmaster_help_desk/showthread.php?t=849

You cannot have a scrollbar in your table, but you could have it in a <div> tag that is in your table.

The code below shows the example, it has dotted lines just so you see where it is.

<td width="30%" height="60%" valign="top" id="colRight">
  <div style="width: 200px; height: 200px; overflow: scroll; border: 5px dashed black; background-color:#ccc;">
    This is where all the stuff goes.<br />
    Add some more stuff, and instead of growing, it will have a scrollbar.
  </div>
</td>

Open in new window

0
 

Author Comment

by:rossoneris
ID: 26148949
Actually I forgot.

If I look in my code, in the "colnormal" area I have it working. with the scroll bar.
But how do I do it for the other columns.(colright and colleft). When I try to do the same it looks really wired.
0
 

Author Comment

by:rossoneris
ID: 26148972
Here is the code
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" background="grafik/midt.jpg">
	<tr>
                <TD style="vertical-align:top;width:100%;height:100%"><div style="height: 260px; overflow: auto; width: 672px" id="colNormal">colNormal</div></TD>		
                <td width="30%" height="100%" rowspan="3" valign="top" id="colBorder">Colborder</td>
	</tr>
	<tr>
	<TD style="vertical-align:top;width:100%;height:100%"><div style="height: 200px; overflow: auto; width: 300px" id="colRight">colright</div></TD>
			<TD style="vertical-align:top;width:100%;height:100%"><div style="height: 200px; overflow: auto; width: 300px" id="colLeft">colleft</div></TD>
	</tr>
	<tr>
		<td width="100%" height="20%" colspan="2">&nbsp;</td>
	</tr>
</table>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 11

Expert Comment

by:nordtorp
ID: 26149126
I have cleaned up your code a little bit, you had a weird table setup.
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" background="grafik/midt.jpg">
        <tr>
            <TD style="vertical-align:top;width:100%;height:100%">
				<div style="height: 260px; overflow: auto; width: 672px" id="colNormal">
					colNormal</div>
			</TD>              
            <td width="30%" height="100%" rowspan="2" valign="top" id="colBorder">Colborder</td>
			<td>&nbsp;</td>
        </tr>
        <tr>
			<TD style="vertical-align:top;width:100%;height:100%">
				<div style="height: 200px; overflow: auto; width: 300px" id="colRight">colright</div>
			</TD>
            <TD style="vertical-align:top;width:100%;height:100%">
				<div style="height: 200px; overflow: auto; width: 300px" id="colLeft">colleft</div>
			</TD>
        </tr>
        <tr>
            <td width="100%" height="20%" colspan="3">&nbsp;</td>
        </tr>
</table>

Open in new window

0
 

Author Comment

by:rossoneris
ID: 26152411
hmm Sorry - when Insert the code you cleaned up it looks even more wired.
I just pasted it into frontpage and the columns etc are messed up

Above is the code that is working without DIV - don´t know if it this you should try to use
<HTML> 
 
<HEAD> 
<TITLE>site</TITLE> 
<link rel="stylesheet" type="text/css" href="../css/style.css"> 
</HEAD> 
<body> 
 
 
 
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" background="grafik/mid.jpg"> 
        <tr> 
                 <td width="70%" height="20%" valign="top" colspan="2" id="colNormal">ColNormal</td> 
                <td width="30%" height="100%" rowspan="3" valign="top" id="colBorder">Colborder</td> 
        </tr> 
        <tr> 
                <td width="30%" height="60%" valign="top" id="colRight">Colright</td> 
                <td width="30%" height="60%" valign="top" id="colLeft">colleft</td> 
        </tr> 
        <tr> 
                <td width="70%" height="20%" colspan="2">&nbsp;</td> 
        </tr> 
</table> 
 
 
</body> 
 
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:nordtorp
ID: 26152771
This could be more alike you want. I removed the height in your div.
<HTML>

<HEAD>
<TITLE>site</TITLE>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</HEAD>
<body>



<table border="1" width="100%" cellspacing="0" cellpadding="0" height="100%" background="grafik/mid.jpg">
 <tr>
  <td width="70%" height="20%" valign="top" colspan="2" id="colNormal"><div style="height: 200px; overflow: auto; id="colNormal">colNormal</div>
  </td>
  <td width="30%" height="100%" rowspan="3" valign="top" id="colBorder">Colborder </td>
 </tr>

 <tr>
  <td width="30%" height="60%" valign="top" id="colRight"><div style="height: 200px; overflow: auto; id="colNormal">colright</div></td>
  <td width="30%" height="60%" valign="top" id="colLeft"><div style="height: 200px; overflow: auto; id="colNormal">colleft </div></td>
 </tr>

 <tr>
  <td width="70%" height="20%" colspan="2">&nbsp;</td>
 </tr>
</table>

</body>
</html>

Open in new window

0
 

Author Comment

by:rossoneris
ID: 26153933
Yes it looks better now - but the scroll if the text does not fit into the cells is now gone ?
0
 
LVL 11

Expert Comment

by:nordtorp
ID: 26153998
See this example:

You will see that you have to adjust the height a little bit in the div tags.

And in my last post I said "I removed the height in your div." I meant width.
index.html
0
 

Author Comment

by:rossoneris
ID: 26158294
I can see your example is working but I can simply not get it working with the background picture
You can see the picture here. The upper left white area is working (called colnormal in the html and also the collborder is ok).
But the 2 small colleft and colright white areas simply don´t match. I don´t know how to let this fit so the scrolling  fits to the white areas
example.jpg
0
 
LVL 11

Accepted Solution

by:
nordtorp earned 2000 total points
ID: 26158734
I am not sure if I understood that.

Is does white boxes just a background picture or your whole design?

Doesn't those divs match the backgroup picture, correct? I think you have to span your table cells to they match.

Could you zip the required files and let me have a look at it?
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question