6 replies [Last post]
dklbwf
dklbwf's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT-5
Joined: 2013-02-19
Posts: 3
Points: 4

Hello CSS Family,

I am basically trying to embed a url inside of div:

this url pulls in a small text field and looks at the date/time field to determine if it should show now or later. If the text field date is set to before today's date nothing will show which results in a blank white space. What would be the best css option to make the div/iframe space totally disappear and shift everything up if there is no items to display at certain times? This space will be empty most of the time, only used for emergency messages.

Thanks N Advance,

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi dklbwf, Check out

Hi dklbwf,
Check out display:none;

Zbee
Zbee's picture
Offline
Regular
Colorado Springs, CO, USA
Last seen: 7 years 32 weeks ago
Colorado Springs, CO, USA
Timezone: GMT-6
Joined: 2013-02-20
Posts: 11
Points: 11

Hey

Yeah, Display: none Would work the best; But you could also set height and width to 0, if display, isn't an option. height: 0px; width: 0px;.

/* Zbee */

www.zbee.me

dklbwf
dklbwf's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT-5
Joined: 2013-02-19
Posts: 3
Points: 4

thanks for responses!! using

thanks for responses!! using the display none option will totally remove the div and if there is something to be displayed the whole div will be gone.....it only needs to disappear when there is nothing to display from iframe url....thanks for your help/advice!!

Zbee
Zbee's picture
Offline
Regular
Colorado Springs, CO, USA
Last seen: 7 years 32 weeks ago
Colorado Springs, CO, USA
Timezone: GMT-6
Joined: 2013-02-20
Posts: 11
Points: 11

Try this

I played around with it a bit, and try setting the min-height/width and height/width to like 0, and then it (should) automatically expand with content inside.

Hope that works Smile

/* Zbee */

www.zbee.me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

javascript?

Presumably you're using javascript to test the date. I won't get into those mechanisms. The div

<div class="out-of-date">
  <p>message text</p>
</div>

is initialized as out of date,
.out-of-date {
  display: none;
  }

Javascript tests and if the message is current, the class attribute is set to class="timely". That class has the style
.timely {
  display: block;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dklbwf
dklbwf's picture
Offline
newbie
Last seen: 7 years 34 weeks ago
Timezone: GMT-5
Joined: 2013-02-19
Posts: 3
Points: 4

thanks guys!!! I have

thanks guys!!!

I have added
min-height:0px;
min-width:0px;
width:0px;
height:0px;
padding:0;
border:0;

to div css but still get a blank space with a border if nothing is to be displayed. I have attached small screnshot

Currently i have:

.test{
min-height:0px;
min-width:0px;
width:0px;
height:0px;
padding:0;
border:0;
}screenshot.jpg