LinuxQuestions.org
Visit Jeremy's Blog.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 09-23-2019, 10:10 AM   #1
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Rep: Reputation: 51
difficulty with html css position property


I have successfully replaced with the CSS code below an old frameset that gives me something looking like a 2-panel house window. With the frameset, that gives me two frames (the 2 glasses of the window) in which I can put a background image and text. I understand I have to create 2 containers and give the 'positions' of these containers to replicate the result but setting 'width' and 'height' to 'auto' (or anything else) does not seem to allow the browser to calculate the free space after setting other values like 'top' 'left' etc and I cannot find how to accomplish that. There seems to be something fundamental I am missing despite my apparent original success.
Its all done with 20px X 20px GIF images, tiled when necessary.

Can someone point me in the right direction?

Code:
style>
	.top_left_corner	{
	position: fixed; top: 0; left: 0; width: 20px; height: 20px; background-image: url("images/top_left_corner.gif");
	}
	.top_right_corner	{
	position: fixed; top: 0; right: 0; width: 20px; height: 20px; background-image: url("images/top_right_corner.gif");
	}
	.bottom_left_corner	{
	position: fixed; bottom: 0; left: 0; width: 20px; height: 20px; background-image: url("images/bottom_left_corner.gif");
	}
	.bottom_right_corner	{
	position: fixed; bottom: 0; right: 0; width: 20px; height: 20px; background-image: url("images/bottom_right_corner.gif");
	}
	.top	{
	position: absolute; top: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("images/top_.gif"); background-repeat: repeat-x;
	}
	.left	{
	position: absolute; top: 20px; bottom: 20px; left: 0; width: 20px; height: auto; background-image: url("images/left.gif"); 
	}
	.right	{
	position: absolute; top: 20px; bottom: 20px; right: 0; width: 20px; height: auto; background-image: url("images/right.gif");
	}
	.bottom	{
	position: absolute; bottom: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("images/bottom.gif"); background-repeat: repeat-x;
	}
	.middle	{
	position: absolute; top: 20px; bottom: 20px; right: 50%; width: 20px; height: auto; background-image: url("images/middle.gif");  background-repeat: repeat-y;
	}
/* the following does not work */
	.panel_left {
	position: absolute: top: 25px; left: 25px; width: initial; height: initial; background-image: url("images/bg_image1.gif"); background-size: contain; background-repeat: no-repeat;
	}
	.panel_right {
	position: absolute; top: 25px; right: 25px; width: initial; height: initial; background-image: url("images/bg_image2.gif"); background-size: cover; background-repeat: no-repeat;
	}
</style>
Thank you for your help.

Last edited by rblampain; 09-25-2019 at 07:01 AM.
 
Old 09-25-2019, 04:38 AM   #2
Samsonite2010
Member
 
Registered: Apr 2015
Distribution: Debian
Posts: 187
Blog Entries: 1

Rep: Reputation: 99
Your HTML code is also important - what are you applying this CSS to?
 
1 members found this post helpful.
Old 09-25-2019, 06:37 AM   #3
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
I have tried the following in the <body>:
Code:
<table size'100%"><tr>
<td class="top_left_corner"></td>
<td class="top"  colspan="3"></td>
<td class="top_right_corner"></td>
</tr><tr>
<td class="left"></td>
<td class="panel_left">This is left panel.</td>
<td class="middle"></td>
<td class="panel_right">This is panel right.</td>
<td class="right"></td>
</tr><tr>
<td class="bottom_left_corner"></td>
<td class="bottom"  colspan="3"></td>
<td class="bottom_right_corner"></td>
</tr></table>
and
Code:
<div>
<div class="top_left_corner"></div>
<div class="top"></div>
<div class="top_right_corner"></div>
<div class="left"></div>
<div class="panel_left">This is panel left.</div>
<div class="middle"></div>
<div class="panel_right">This is panel right.</div>
<div class="right"></div>
<div class="bottom_left_corner"></div>
<div class="bottom"></div>
<div class="bottom_right_corner"></div>
</div>
It all displays correctly except for any text included in the code which, if large enough, takes the whole window.

Last edited by rblampain; 09-25-2019 at 07:04 AM.
 
Old 09-25-2019, 10:58 AM   #4
Samsonite2010
Member
 
Registered: Apr 2015
Distribution: Debian
Posts: 187
Blog Entries: 1

Rep: Reputation: 99
In what way does the text not display? I cannot quite imagine the issue - you are saying the layout works ok?
 
1 members found this post helpful.
Old 09-25-2019, 01:06 PM   #5
ondoho
LQ Addict
 
Registered: Dec 2013
Posts: 12,463
Blog Entries: 9

Rep: Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372Reputation: 3372
Is all this to put a frame around a box of text?
There's more elegant ways; look at border-image, border-slice and all the other border-* CSS properties.
 
1 members found this post helpful.
Old 09-25-2019, 03:54 PM   #6
Samsonite2010
Member
 
Registered: Apr 2015
Distribution: Debian
Posts: 187
Blog Entries: 1

Rep: Reputation: 99
Maybe if you could show a screenshot of the problem or what you want it to look like, that may help.
 
1 members found this post helpful.
Old 09-26-2019, 03:38 AM   #7
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
Thank you for your answers.
I have succeeded at adapting the code to have text showing and scrolling correctly but the sizing problem remains.

The problem is when the visitor resize their screen. It seems CSS only allows to give dimensions suitable in this case in pixels and percentages. Since the "border" previously set through frames must be in pixels (the size of the images used to make the borders) and the sizes of the 2 "panels" must be in percentages, percentage only gives a good result for a particular window size, when the window size is changed, the results are different.
While it is possible to find the visitor's screen size, it is not possible (I think) to find the window size after the visitor "resizes" it. In these examples I have given a border to these 2 panels to show the results.

Here are 2 screenshots of a window occupying full screen (on the left) and another resized to about a 1/4 of viewport width (on the right) with the code applied in both cases for the smaller window. Notice the right-hand size border of the left-hand size panel in the full size window. Obviously, any text fits within these borders.

It is likely I will need to resize the images used to make the borders so everything resize correctly and in the same proportion but I prefer not to and I am not too sure 'how to' anyway.
Attached Thumbnails
Click image for larger version

Name:	large.jpg
Views:	8
Size:	151.6 KB
ID:	31393   Click image for larger version

Name:	small.jpg
Views:	7
Size:	61.9 KB
ID:	31394  

Last edited by rblampain; 09-26-2019 at 04:19 AM.
 
Old 09-26-2019, 03:25 PM   #8
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: distro hopper
Posts: 9,144

Rep: Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967
Why aren't you using Flexbox or Grid?
 
1 members found this post helpful.
Old 09-27-2019, 01:03 AM   #9
rblampain
Senior Member
 
Registered: Aug 2004
Location: Western Australia
Distribution: Debian 9.2
Posts: 1,166

Original Poster
Rep: Reputation: 51
I did not know about these, it seems Grid could be the answer, I will try it.

Thank you for that.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: Y'know CSS was to kill off HTML table layout? Well, second time's a charm: Meet CSS Grid LXer Syndicated Linux News 0 04-01-2017 07:03 PM
LXer: Publisher 'DRMs' Physical Legal Textbook About 'Property,' Undermines Property And First Sale LXer Syndicated Linux News 0 05-08-2014 07:11 AM
CSS - Is there a way to put several lines of HTML into one line using CSS? Chronothread Programming 12 01-05-2011 06:06 AM
LXer: "Intellectual Property" a Violation of Real Property LXer Syndicated Linux News 1 11-11-2009 05:39 AM
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:48 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration