[WSG] elasticity and floats
Can anyone help me sort a problem please: I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed width and I want div 3 to be flexible width and fill the gap: div id=wrapper [fixed- float left] [fixed - float left] [elastic - no floats] [fixed - float right] /div The wrapper div takes care of the clearing, using overflow : hidden. It's easy with a table, but I don't seem to be able to do it with floats. The ways I've tried either don't line up the divs vertically, or the 3rd div width shrinks to content size. I hope I've explained this properly (nothing online to see yet) and I hope someone can help. Thanks, Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] elasticity and floats
On Tue, Oct 6, 2009 at 11:28 AM, designer desig...@gwelanmor-internet.co.uk wrote: I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed width and I want div 3 to be flexible width and fill the gap: Have you tried here? http://blog.html.it/layoutgala/ - Matthew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Out of Office AutoReply: WSG Digest
Thanks for your email I am currently away until the 12th October. If you are a client of Hitwise and require imediate technical assistance, please contact our support team on 1800 816 997 or support...@hitwise.com. Otherwise I will endeavour to respond to your email as soon as I can Regards, Ché Carbis Director - Client Services __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Re: WSG Digest
Hi Bob,
That's a good one.
I've had a quick play and the only way I've found that works as you intend
is by giving widths in % - ie, your fixed divs, 1, 2 (floated left) and 4
(floated right) all have, say, width:10%; while your elastic div 3 (also
floated left) is given width:70%;
Markup, using background colours to visually define the divs:
div id=wrapper
div class=fixed id=box1box 1 - fixed/div
div class=fixed id=box2box 2 - fixed/div
div class=elastic id=box3box 3 - elastic - stretches with
content/div
div class=fixed id=box4box 4 - fixed/div
/div
#wrapper {
overflow:hidden;
width:100%;
}
#wrapper div {
height:50px;
}
#wrapper .fixed {
width:10%;
}
#wrapper .elastic {
width:70%;
}
#wrapper #box1 {
background:#f0;
float:left;
}
#wrapper #box2 {
background:#fff000;
float:left;
}
#wrapper #box3 {
background:#00f000;
float:left;
}
#wrapper #box4 {
background:#f0;
float:right;
}
It's not perfect by any means - anyone else got any methods?
Rich
2009/10/6 wsg@webstandardsgroup.org
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: designer desig...@gwelanmor-internet.co.uk
Date: Tue, 6 Oct 2009 11:28:30 +0100
Subject: elasticity and floats
Can anyone help me sort a problem please:
I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed
width
and I want div 3 to be flexible width and fill the gap:
div id=wrapper
[fixed- float left] [fixed - float left] [elastic - no floats] [fixed -
float right]
/div
The wrapper div takes care of the clearing, using overflow : hidden.
It's easy with a table, but I don't seem to be able to do it with
floats.
The ways I've tried either don't line up the divs vertically, or the 3rd
div
width shrinks to content size.
I hope I've explained this properly (nothing online to see yet) and I
hope
someone can help.
Thanks,
Bob
**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] RE: WSG Digest
Try this
style type=text/css
#wrapper {
height: 100px;
width: 800px;
}
#box1 {
height: 100px;
width: 200px;
float: left;
border: thin solid #F00;
}
#box2 {
height: 100px;
width: 200px;
float: left;
border: thin solid #00C;
}
#box3 {
float: left;
height: 100px;
width: 200px;
border: thin solid #930;
}
#box4 {
float: left;
height: 100px;
width: auto;
border: thin solid #FC0;
}
/style
/head
body
div id=wrapper
div id=box1BOX 1/div
div id=box2BOX2/div
div id=box4BOX4 flexi/div
div id=box3BOX3/div
/div
/body
Box 4 is the flexi one and will stretch but only up to the MAX size of the
wrapper
Lucas M Meyer
CEO
Silvermoonsky Web Design
www.silvermoonsky.com
-Original Message-
From: wsg@webstandardsgroup.org [mailto:w...@webstandardsgroup.org]
Sent: 06 October 2009 09:36 PM
To: wsg@webstandardsgroup.org
Subject: WSG Digest
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: designer desig...@gwelanmor-internet.co.uk
Date: Tue, 6 Oct 2009 11:28:30 +0100
Subject: elasticity and floats
Can anyone help me sort a problem please:
I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed
width
and I want div 3 to be flexible width and fill the gap:
div id=wrapper
[fixed- float left] [fixed - float left] [elastic - no floats] [fixed -
float right]
/div
The wrapper div takes care of the clearing, using overflow : hidden.
It's easy with a table, but I don't seem to be able to do it with
floats.
The ways I've tried either don't line up the divs vertically, or the 3rd
div
width shrinks to content size.
I hope I've explained this properly (nothing online to see yet) and I
hope
someone can help.
Thanks,
Bob
**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] floats and elasticity
- Original Message -
From: i...@silvermoonsky.com
To: wsg@webstandardsgroup.org
Sent: Tuesday, October 06, 2009 1:13 PM
Subject: [WSG] RE: WSG Digest
Try this
style type=text/css
#wrapper {
height: 100px;
width: 800px;
}
#box1 {
height: 100px;
width: 200px;
float: left;
border: thin solid #F00;
}
#box2 {
height: 100px;
width: 200px;
float: left;
border: thin solid #00C;
}
#box3 {
float: left;
height: 100px;
width: 200px;
border: thin solid #930;
}
#box4 {
float: left;
height: 100px;
width: auto;
border: thin solid #FC0;
}
/style
/head
body
div id=wrapper
div id=box1BOX 1/div
div id=box2BOX2/div
div id=box4BOX4 flexi/div
div id=box3BOX3/div
/div
/body
Box 4 is the flexi one and will stretch but only up to the MAX size of the
wrapper
Hi Lucas, Box4 shrinks to content width. Thanks anyway,
Bob
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] elasticity and floats
- Original Message - From: Matthew Pennell To: wsg@webstandardsgroup.org Sent: Tuesday, October 06, 2009 11:42 AM Subject: Re: [WSG] elasticity and floats On Tue, Oct 6, 2009 at 11:28 AM, designer desig...@gwelanmor-internet.co.uk wrote: I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed width and I want div 3 to be flexible width and fill the gap: Have you tried here? http://blog.html.it/layoutgala/ - Matthew Thanks Matthew. I have looked there, but it all seems a bit messy. Too many divs and negative margins (I's rather use a table than resort to all that . . .) Bob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] elasticity and floats
On Tue, 6 Oct 2009, designer wrote: Can anyone help me sort a problem please: I want to make a banner/masthead with 4 divs. Nos 1,2 and 4 are fixed width and I want div 3 to be flexible width and fill the gap: div id=wrapper [fixed- float left] [fixed - float left] [elastic - no floats] [fixed - float right] /div The wrapper div takes care of the clearing, using overflow : hidden. It's easy with a table, but I don't seem to be able to do it with floats. The ways I've tried either don't line up the divs vertically, or the 3rd div width shrinks to content size. I hope I've explained this properly (nothing online to see yet) and I hope someone can help. Is this what you want: http://cfajohnson.com/testing/floatdivs.shtml ? -- Chris F.A. Johnson, webmaster http://woodbine-gerrard.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] CSS list-style
Hi all,
I'm wondering about colouring bullet points in a ul and wanted to know if
there was a way of having the list-style: a different colour to the text
within the li without having to resort to putting it all within a
spanas per my example:
ul
lispancontent/span/li
/ul
ul {
color:#380;
list-style-type:disc;
}
ul li span {
color:#000;
}
Many thanks
Rich
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS list-style
On Tue, 6 Oct 2009, Richard Mather wrote:
Hi all,
I'm wondering about colouring bullet points in a ul and wanted to know if
there was a way of having the list-style: a different colour to the text
within the li without having to resort to putting it all within a
spanas per my example:
ul
lispancontent/span/li
/ul
ul {
color:#380;
list-style-type:disc;
}
ul li span {
color:#000;
}
ul
li class=blackcontent/li
/ul
ul {
color:#380;
list-style-type:disc;
}
ul li.black {
color:#000;
}
--
Chris F.A. Johnson, webmaster http://woodbine-gerrard.com
===
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] CSS list-style
Hi Rich,
You can always get rid of the list-style-type and add the disc as an image
in whichever color you want.
I think that on CSS2.1 the disc (or letters or numbers for that matter) will
always be the same color of the list element or as you say, having to add a
span, which is ugly.
Cheers
Raul
_
De: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] En
nombre de Richard Mather
Enviado el: martes, 06 de octubre de 2009 19:48
Para: wsg
Asunto: [WSG] CSS list-style
Hi all,
I'm wondering about colouring bullet points in a ul and wanted to know if
there was a way of having the list-style: a different colour to the text
within the li without having to resort to putting it all within a span
as per my example:
ul
lispancontent/span/li
/ul
ul {
color:#380;
list-style-type:disc;
}
ul li span {
color:#000;
}
Many thanks
Rich
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] opera 10 and access keys
Good evening list, Does anybody know if Opera 10 has problems with access keys? The list pops up but just shows a blank window. test: http://www.dzinelabs.com/sandbox/New_site_layout/maxtest.html -- Regards, Luc _ http://www.dzinelabs.com Using the best e-mail client: The Bat! version 4.2.6 with Windows XP (build 2600), version 5.1 Service Pack 3 and using the best browser: Opera. Diplomacy - the art of letting someone have your way. - attributed to Daniele Vare. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] opera 10 and access keys
Luc wrote: Does anybody know if Opera 10 has problems with access keys? The list pops up but just shows a blank window. http://www.dzinelabs.com/sandbox/New_site_layout/maxtest.html Works fine for me in Opera 10 final - Shift+Esc brings up the list of 2,3,4,5 and 6 http://www.opera.com/browser/tutorials/nomouse/#access P -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com | http://flickr.com/photos/redux/ __ Co-lead, Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] opera 10 and access keys
Good evening Patrick, It was foretold that on 06/10/2009 @ 23:43:05 GMT+0100 (which was 19:43:05 where I live) Patrick H. Lauke would write: snipped a bit PHL Works fine for me in Opera 10 final - Shift+Esc brings up the list of PHL 2,3,4,5 and 6 Hmm, that's strange on my opera 10 final it doesn't. I get the pop up and when hovering over it, the text is shown as a tooltip but the actual list is white -- Regards, Luc _ http://www.dzinelabs.com Using the best e-mail client: The Bat! version 4.2.6 with Windows XP (build 2600), version 5.1 Service Pack 3 and using the best browser: Opera. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
