User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 456,470 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,802 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 745 | Replies: 7 | Solved
Reply
Join Date: Feb 2008
Posts: 21
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Taking the plunge into Layers

  #1  
Apr 26th, 2008
Good day,

I took the plunge and broke away from doing lay-out with tables and decided to experiment with layers. My coding has gone well and I like the results - except for one thing.

Can anyone offer a good resource for appropriate design techniques if a user decides to increase the size of the text in their browser?

I have this nice looking web page and everything goes to crap if it gets resized. Searches I have executed in Google don't seem to deal with the issue. The closest I have come to a solution is "...know your audience and plan for a size they will accept to begin with."

Thanks in advance.
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Mar 2008
Posts: 246
Reputation: Sky Diploma is on a distinguished road 
Rep Power: 1
Solved Threads: 34
Sky Diploma's Avatar
Sky Diploma Sky Diploma is offline Offline
Posting Whiz in Training

Re: Taking the plunge into Layers

  #2  
Apr 27th, 2008
Try a search on google on

CSS Liquid Layouts.

I do not have much idea about that. But it is possible.
User, n. The word computer professionals use when they mean "idiot." ~Dave Barry
Reply With Quote  
Join Date: Feb 2008
Posts: 21
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Re: Taking the plunge into Layers

  #3  
Apr 27th, 2008
Thanks for the idea on search terms.
Reply With Quote  
Join Date: Feb 2008
Posts: 21
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Re: Taking the plunge into Layers

  #4  
May 5th, 2008
Is it possible to use div tags, using relative positioning, to have two columns so that the top line of two blocks line up?

I'm coding an online version of a c.v. Using a table scheme, I could achieve this with coding a row like this:
  1. <tr valign="top">
  2. <td width="85%">
  3. <p class="c5">
  4. Job Title
  5. </p>
  6. <p class="c4">
  7. Company and City
  8. </p>
  9. <p class="c4">
  10. Job Description and other details
  11. </p>
  12. </td>
  13. <td width="15%" nowrap="nowrap">
  14. <p class="yrs">
  15. Dates there
  16. </p>
  17. <p class="c4">
  18. <br />
  19. </p>
  20. </td>
  21. </tr>

This would display the time served at a company in a new column, lining up with the top line of the first column.

In CSS I have the following code:

  1. <div style="position: relative; background-color: blue;
  2. left: 0px; top: 0px; width: 80%; height: automatic; z-index: 4">
  3. <p class="c5">
  4. Company
  5. </p>
  6. <p class="c4">
  7. Job Title
  8. </p>
  9. <p class="c4">
  10. Description.
  11. (This can be quite long and
  12. is a key factor for making
  13. the height automatic since
  14. </p>
  15. </div>
  16. <div style="position: relative; background-color: blue;
  17. left: 0px; top: 5px; width: 20%; margin-left: 80%;
  18. height: automatic; z-index: 4">
  19. <p class="yrs">
  20. yyyy - yyyy
  21. </p>
  22. </div>

The desired result is 67% of what I want. The years display one line below the information provided in the description instead of at the top, but to the right where I want it.

I don't think positioning with absolutes is viable because the height of the blocks for describing a job will vary on the left. As well, there is text above this area that would make coding absolutes very difficult to achieve.
Reply With Quote  
Join Date: Apr 2007
Location: Birmingham
Posts: 378
Reputation: Fungus1487 is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 38
Fungus1487's Avatar
Fungus1487 Fungus1487 is offline Offline
Posting Whiz

Re: Taking the plunge into Layers

  #5  
May 6th, 2008
are you displaying tabular information ?

it very much looks like it.

one thing is tables are NOT bad. But are simply bad when using them for entirely different purposes than they were created for.

If you have tabular data use tables.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Reply With Quote  
Join Date: Feb 2008
Posts: 21
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Re: Taking the plunge into Layers

  #6  
May 6th, 2008
Originally Posted by Fungus1487 View Post
are you displaying tabular information ?

it very much looks like it.

one thing is tables are NOT bad. But are simply bad when using them for entirely different purposes than they were created for.

If you have tabular data use tables.


I think you need to look at my message again. Yes, I have table data in the message as an example of how I would code in tables what I am trying to achieve with CSS. I want to know if there is a way to achieve the same results using CSS.
Last edited by dwlamb_001 : May 6th, 2008 at 1:03 pm.
Reply With Quote  
Join Date: Apr 2007
Location: Birmingham
Posts: 378
Reputation: Fungus1487 is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 38
Fungus1487's Avatar
Fungus1487 Fungus1487 is offline Offline
Posting Whiz

Re: Taking the plunge into Layers

  #7  
May 6th, 2008
well i am almost certain you cant use relative positioning with the technique you are using but i have frequently used the opening div as a placeholder for inner relative elements.

E.g if you move your css into an outer div and wrap what you already have. (without moving the position:relative information) you get.

<div style="float:right;width:20%;">
	<div style="position:relative;background-color:blue;left:0px;top:5px;z-index:4;">
	  <p class="yrs">yyyy - yyyy</p>
	</div>
</div>
<div style="width: auto;margin-right:20%;">
	<div style="position:relative;background-color:blue;left:0px;top:0px;z-index: 4">
	  <p class="c5">Company</p>
	  <p class="c4">Job Title</p>
	  <p class="c4">Description. (This can be quite long and is a key factor for making the height automatic since</p>
	</div>
</div>

im still not 100% sure what your after. Hopefully that helps.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Reply With Quote  
Join Date: Feb 2008
Posts: 21
Reputation: dwlamb_001 is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
dwlamb_001 dwlamb_001 is offline Offline
Newbie Poster

Re: Taking the plunge into Layers

  #8  
May 7th, 2008
Fungus! Excellent. That's exactly what I was looking for.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb HTML and CSS Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 2:29 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC