I am very new to CSS and am trying to set up 2 divs in the same space
on the page. The idea is that div1 will be an informational message
only displayed sometimes. When there isn't a message to be put there,
then div1 will be hidden and div2 content will be visible. The problem
I am having with this is that the content is still lining up right
beneath each other. If I make div1 hidden, then there is just white
space where it used to be.
Please help me understand what I'm doing wrong and how to make it do
this. If I'm completely off track, please let me know.
Kalvin
**code starts here **
<table width="200" height="100%" border="0" cellpadding="0"
cellspacing="5" >
<tr>
<td>
<div id="div1" style="position :relative; top:0; left:0;
float:none; z-index:10;">
The admin lunch room will be closed on Friday
</div>
<div id="div2"
style="position :relative; top:0; left:0; float: none; z-index:1; ">
Secondary Story </div>
</td>
</tr>
<tr>
<td height="190">
<div id="Weather" style="position :relative; width:175px;
z-index:1; height: 195px; overflow: hidden;">
Weather goes here!
</div>
</td>
</tr>
</table> 2 19738
Kalvin wrote: I am very new to CSS and am trying to set up 2 divs in the same space on the page.
You are using position: relative - which renders the page as normal, and
then sifts elements according to the left/right/top/bottom properties
without altering the flow.
You need absolute positioning to place two elements in the same spot, this
positions elements from the top/left/right/bottom edges of the containing
block (nearest ancestor element that is not position: static, or the
viewport if no such element exists).
The idea is that div1 will be an informational message only displayed sometimes.
So why not change the text instead? Preferably on the server so that it
won't fail if JavaScript or CSS is not available.
When there isn't a message to be put there, then div1 will be hidden and div2 content will be visible.
What you probably want to do then (if you don't go with my suggestion above
regarding altering the text), is to toggle the display property of the
element between the default and "none". This will remove it from normal
flow.
I am having with this is that the content is still lining up right beneath each other. If I make div1 hidden, then there is just white space where it used to be.
Invisible things still take up space.
--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Kalvin wrote: I am very new to CSS and am trying to set up 2 divs in the same space on the page. The idea is that div1 will be an informational message only displayed sometimes. When there isn't a message to be put there, then div1 will be hidden and div2 content will be visible. The problem I am having with this is that the content is still lining up right beneath each other. If I make div1 hidden, then there is just white space where it used to be.
Please help me understand what I'm doing wrong and how to make it do this. If I'm completely off track, please let me know.
Inside the cell (are you sure you really want/need to use a table?),
place a Relatively positioned DIV containing the two messages in an
Absolutely positioned DIV each. Forget about z-index here; it is not
necessary. Don't use the display property, use the visibility property
instead. Allow the initial one to have the default of 'visible' and the
secondary one to have "visibility:hid den;". Then apply a mechanism to
trigger the switch to make the initial div hidden and the secondary div
visible.
--
Gus This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: km |
last post by:
Hi all,
python re module deals with only nonoverlapping matches. how to go for if i want to find out overlapping matches and their span ?
regards,
KM
|
by: André Søreng |
last post by:
With the re/sre module included with Python 2.4:
pattern = "(?P<id1>avi)|(?P<id2>avi|mp3)"
string2match = "some string with avi in it"
matches = re.finditer(pattern, string2match)
....
matches.groupdict()
{'id2': None, 'id1': 'avi'}
Which was expected since overlapping matches are ignored.
|
by: Max M |
last post by:
I am writing a "find-free-time" function for a calendar. There are a lot
of time spans with start end times, some overlapping, some not.
To find the free time spans, I first need to convert the events into a
list of non overlapping time spans "meta-spans".
This nice ascii graph should show what I mean.
1) ---
2) ---
|
by: Phil Sandler |
last post by:
All,
I have a table with start and end dates/times in it, and would like to
be able to calculate the number of hours represented, accounting for
overlapping records.
Note that I am looking for an answer on HOW to do this--I don't
necessarily need it to be written for me (although it would not go
unappreciated!).
|
by: Simon Elliott |
last post by:
Is there an equivalent of std::copy which works on STL containers for
overlapping ranges?
--
Simon Elliott http://www.ctsn.co.uk
| |
by: Bruce |
last post by:
Hello,
Back in the Access 97 days, if I had two texboxes on a form or report
that overlapped, and I selected both and did a Format, Align, Top from
the menu in design view, the controls would align such that the top
edge of one control would align with the bottom edge of the other and
they would no longer overlap. I liked this behavior. Now, in Access
2003, performing the same actions in a similar situation causes the
top edges of the...
|
by: David Thorp |
last post by:
New to this list (first post), and relatively new to C, so hi
everyone...
If anyone can help me with this I'll be most grateful... The following
code is from a rather elaborate (for me) program I'm writing (hence
all the meaningles variable names and so on), but
I've narrowed the problem down to these snippets. Just to make sure,
I created this code alone (new file separate to my larger project) and
the problems are still exhibiting...
|
by: Charlie Brown |
last post by:
I have a form with 2 custom controls that can be dragged around by a
user. How can I check if they overlap each other without performing
some kind of Collision detection on them? Is there anything in GDI to
check for overlapping controls?
|
by: =?ISO-8859-15?Q?Jean=2DFran=E7ois?= Lemaire |
last post by:
Hello all,
I'm learning C and I still am struggling to understand some basic
concepts. For example, I read in the standard that with functions such
as strcpy, 'If copying takes place between objects that overlap, the
behavior is undefined.' But how can I be sure that they don't overlap?
For example, if I write this:
char string1 = "overlap";
|
by: cowboyrocks2009 |
last post by:
Hi,
I am trying to write a Java program to plot rectangles with different colors side by side non overlapping but unfortunately I am unable to do that as of now.
Suppose I want to create 3 rectangles:-
100 - 200
200 - 300
300 - 400
I want to have 3 rectangles non overlapping and adjacent to each other with 3 different colors. I am new to Java so don't know howto do that ?!
I would appreciate any help in this regard.
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |