473,730 Members | 2,044 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamically maximising map to fill remaining space using CSS

Hi,

I am hoping that someone can offer me some advise. I am new to CSS
layouts and I've struggled to produce the screen layout that I
wanted.
Here's my demonstration page:-

http://www.holleydesigns.com/pudo/demo3m.html

My design goals were:

1) To work on IE, FF and Opera on Windows.
2) To dynamically hide or show route directions on the left and a
control bar at the top
I've created buttons at the bottom of the page to do this.
3) To resize the map portion of the screen to maximise any remaining
viewport space
4) To dynamically resize as the browser window changes size.

I have finally got it working to meet my criteria but I feel that I
have compromised on my use of CSS. I had hoped that I could use CSS
to
anchor the container div that the map lives in to the edges of the
viewport. However my attempts to do this using properties such as
right-margin:0 and right:0 failed. Eventually I was forced to give up
and use a javascript function to dynamically calculate the size of
the
div's and set their values directly.

I would have loved to avoid using my own calculations. Can anyone
enlighten me? Can it be done in CSS directly?

Thanks very much in advanced for your consideration,
Cheers,
Mark

Oct 5 '07 #1
9 5881
On 5 Oct, 09:49, Marky1124 <marky1...@gmai l.comwrote:
2) To dynamically hide or show route directions on the left and a
control bar at the top
Maybe _too_ fluid?

On my desktop I see the LHS bar above the map, unless I full-screen
the window. This is often cited as an example of good fluid design,
but I think it's going too far here. Maybe keeping them side by side
(use a 1x2 <table>) would be better than floating separarate <div>s.

Oct 5 '07 #2
Thanks for your reply Andy.

On Oct 5, 10:48 am, Andy Dingley <ding...@codesm iths.comwrote:
On my desktop I see the LHS bar above the map, unless I full-screen
the window.
Oh dear. Which browser was that? I've been unable to test against IE7
as yet. All my testing has been IE6.

On Oct 5, 10:48 am, Andy Dingley <ding...@codesm iths.comwrote:
Maybe keeping them side by side (use a 1x2 <table>) would be better
than floating separarate <div>s.
That was the original design that I'm attempting to move away from. I
found problems with calculating the maximum map size in IE. IE would
introduce a wide (inch or two) white space gap to the left of the map.
I had problems trying to identify exactly which element was causing
that, because I've yet to meet good tools to examine the DOM
dynamically. I primarily use firebug in Firefox for inspecting layout
and javascript code.

Hence that was the reason I was hoping that it was possible to use CSS
to float the route directions on the left and then have the rest
dynamically size to fill the rest of the visible area.

Cheers,
Mark

Oct 5 '07 #3
In article
<11************ *********@50g20 00hsm.googlegro ups.com>,
Marky1124 <ma*******@gmai l.comwrote:
Hi,

I am hoping that someone can offer me some advise. I am new to CSS
layouts and I've struggled to produce the screen layout that I
wanted.
Here's my demonstration page:-

http://www.holleydesigns.com/pudo/demo3m.html
Have you tried validating it?

--
dorayme
Oct 5 '07 #4
On Oct 5, 11:58 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
Have you tried validating it?

Thanks dorayme, Yes I've done that at http://jigsaw.w3.org/css-validator/
and the only compliant it had was the colour lightgreen.

Cheers,
Mark
Oct 8 '07 #5
In article
<11************ **********@g4g2 000hsf.googlegr oups.com>,
Marky1124 <ma*******@gmai l.comwrote:
On Oct 5, 11:58 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:
Have you tried validating it?


Thanks dorayme, Yes I've done that at http://jigsaw.w3.org/css-validator/
and the only compliant it had was the colour lightgreen.

When I looked again, I got some serious mistakes, not just that
one. Take a look at

<http://tinyurl.com/ys9s8n>

There may be issues to do with the way you are serving XML.
Frankly, much of this stuff is a bit beyond my pay grade as they
say... (I should charge less!) but you could take a look at a
couple of things:

http://www.w3.org/International/articles/serving-xhtml/

http://www.spartanicus.utvinternet.ie/no-xhtml.htm

http://www.spartanicus.utvinternet.ie/custom_dtd.htm

It is lovely for me. I trust what many of the very clever people
are saying around these parts and I stick to 4.01 Strict almost
exclusively. It feels good too.

--
dorayme
Oct 8 '07 #6
Thanks dorayme. This morning when I replied I couldn't get to
validator.w3.or g. I've now fixed the missing DOCTYPE in my example and
fixed other minor errors. All that remains is a compliant about UTF-8
and body onresize attribute. The main reason I have a onresize
function is to demonstrate the page I ended up building. My main goal
with this forum thread was to discover whether it is possible to
achieve my goals in CSS without using Javascript to resize the map
div. I know Google requires that I call map.checkResize () when the map
div changes size, but I don't want to be setting the height and width
values myself.

So my main question is whether it's possible to achieve the page
layout with CSS alone. I've put together another small demo which is
even more minimal.

http://www.holleydesigns.com/pudo/demo6.html

I've tried to use CSS to anchor the container and gmap div to the
edges of the viewport. That doesn't work. Is it possible?

Cheers,
Mark

P.S. Thanks for those other links. As you say that's all heavy duty
stuff. I've always tried to be a minimalist HTML page creator myself,
however the use of Google Maps API has pushed me to use special
DOCTYPE declarations etc.

Oct 8 '07 #7
On 2007-10-08, Marky1124 <ma*******@gmai l.comwrote:
[...]
So my main question is whether it's possible to achieve the page
layout with CSS alone. I've put together another small demo which is
even more minimal.

http://www.holleydesigns.com/pudo/demo6.html

I've tried to use CSS to anchor the container and gmap div to the
edges of the viewport. That doesn't work. Is it possible?
Change the HTML to move fl and fr out of container to in front of it:

<div class="fl">Sits on left
</div>
<div class="fr">Sits on right
</div>
<div id="container" class="containe r">
<div id="gmap">
This is the map
</div>
</div>

Then try this for the styles:

body, html
{
height: 100%;
margin: 0;
padding: 0;
}

div.container
{
position: relative;
background-color: lightgreen;
overflow: hidden; /* So it's a block-formatting-context root, and fits
between the floats */
height: 100%;
}

#gmap
{
position: absolute;
background-color: gray;
left:0px;right: 0px;bottom:0px; top:0px;
}

div.fl {float: left; background-color: blue;}
div.fr {float: right; background-color: red;}

Is this the effect you want?
Oct 8 '07 #8
On Oct 8, 2:18 pm, Ben C <spams...@spam. eggswrote:
Is this the effect you want?
Hi Ben,

That's very impressive. That's much closer to the effect I want but
unfortunately the map sits on top of the text I'd aim to have above
and below it, presumably because it's set to absolute.

http://www.holleydesigns.com/pudo/demo3mm.html

I have to confess I've only spent a couple of minutes trying to
understand your example and make it work with a map as well. The
reason is that I'm due to go on holiday in a few hours time and I'm
rushing to finish off things before I leave.

So thank you very much for your example. It's closer but it doesn't
quite work like this page demonstrates:

http://www.holleydesigns.com/pudo/demo3m.html

After my holiday I'll have to ponder more on the way of things. I
certainly need to understand fully how and why your example works.
I've not spent the time yet getting to grips with it.

Thanks again,
Cheers,
Mark

Oct 8 '07 #9
On 2007-10-08, Marky1124 <ma*******@gmai l.comwrote:
On Oct 8, 2:18 pm, Ben C <spams...@spam. eggswrote:
>Is this the effect you want?

Hi Ben,

That's very impressive. That's much closer to the effect I want but
unfortunately the map sits on top of the text I'd aim to have above
and below it, presumably because it's set to absolute.
If you don't mind setting explicit heights for the regions above and
below then it's easy-- just put a header div inside container above
#gmap and a footer div below it, set them to 4em each, and make #gmap
top: 4em; bottom: 4em instead of top: 0; bottom: 0.

[...]
After my holiday I'll have to ponder more on the way of things. I
certainly need to understand fully how and why your example works.
I've not spent the time yet getting to grips with it.
The thing is you might not actually need auto widths for the left and
right columns. If you can set those widths explicitly then you can just
use margins to get the middle column between them instead of using
overflow: hidden to make a block formatting context and therefore force
a normal flow block to squeeze between floats.

Your simpler example was good. The thing to be clear about though is
where you can set width and height explicitly, and where you want them
fitted either to the content or to the viewport. It's the combination of
those requirements that makes all the difference to the options you have
about how to do it.
Oct 8 '07 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
11063
by: Ian McCall | last post by:
Hello. How can I make an absolutely-positions div element expand and fill the remaining horizontal space available on-screen? The background is that I've used CSS to create the normal 'three frames' look using div elements rather than frames. One of these DIV elements needs to contain an iframe, and that iframe must expand to use all space available to it. I had been using "width=100%" in the iframe and this works fine in Gecko and...
4
1667
by: Chris Sharman | last post by:
I've got 3 'alternative' boxes, only one of which I want displayed, according to the value of an earlier select (so I'm using the <htmlelement>.style property from javascript). One is a div containing text, which I amend as appropriate with innerhtml One is an image. One is a div containing 4 input text boxes, which are disabled or not as appropriate. I've tried .style.visibility = "hidden" / "visible" (correctly leaves
17
3637
by: JC | last post by:
sorry . i got one more problem i got a string with 4 char. i want to put that in a string with 26 char. how can i fill space on the remain char.. ?? is that i need to do a while loop do fill the space for the string? please help! thanks Jack
12
11010
by: New World Order Pigs | last post by:
Is there no way in .net to get disk space remaining for a given drive??? I can't believe it and yet is seems to be so. If someone knows of a way to do this in the .net libraries I'd be very much appreciative. Thanks, LT.
2
2909
by: Chad | last post by:
I have a problem that I am desperate to understand. It involves dynamically adding controls to a Table control that is built as a result of performing a database query. I am not looking to avoid the problem by avoiding the table control or resorting to databound controls that better manage state for me. I hope to understand how to solve the problem by using the Table web control and sticking to the approach of building the table at run...
1
1828
by: SteveShanks | last post by:
Hi Al How can I set the size of an mdi child form to fill the parent windows as if it was maximised without actually maximising the form as this causes all my subsequent child forms to be displayed maximised as well I will still need the ability to minimise and restore but will disable the maximise option Any ideas greatly appreciate Steve, UK
0
1374
by: Syoam4ka | last post by:
My project is about jewellery. I have devided my jewelery into main types, which each one of them has sub types, and each one those sub types has the jewellery. I have a tabcontainer. It includes tabpanels such as:Catalog,Terms,SiteMap.ViewCart ,etc. All the jewellery Intro is in the Catalog panel. when I first click the Catalog panel it Introduces me all the main types of the jewellery(It's all done dynamically from the cs file).The...
2
2437
by: salmobytes | last post by:
In Java, using the gridbaglayout manager and its complementary gridbagconstraints you can tell a cell to horizontally fill 'any remaining space.' But I can't seem to do that with divs. There must be a way. THE PROBLEM This would be a two-column left-floated layout. I want a left div to contain a variable number of vertical thumbnail- navigation columns--so its width would not determined until runtime (these links come from
1
5223
by: hello2008 | last post by:
Hi, I have just started coding in PHP. I have coded a web page using HTML, JS, and PHP. An HTML table has to be populated dynamically using the data from the backend. Presently I have 5 records in the backend table so I get 5 HTML-table rows. I have created a session object starting from the login page. The requirement is that as soon as I log in and my request gets forwarded to the foll PHP page I should be seeing the foll. dynamically...
0
8940
marktang
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...
0
9299
jinu1996
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...
0
9174
tracyyun
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...
0
8179
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6722
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6029
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();...
0
4541
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4800
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3251
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.