[WSG] 2-col question
Folks - you've helped out before, and I'm asking again. Pardon if this sounds all too simple, but I've yet to find a solution either in this list's archives, or on the web. I'm trying to create a fluid layout with two columns, but whilst the left column is variable width, the right column (sidebar) is to be a fixed width (190px). This is entirely because the right column contains an image in every instance. But I want the left column to take up the remainder of the space (viewport width - 190px). Everything that I've seen or reviewed works fine if I wish to break the columns by percentage, or pixel widths on both. And min-width doesn't seem to work for IE. Having divved up some non-table examples using the usual suspects, my efforts result in my finding that when making the viewport window very small (or when enlarging the text to huge sizes), the left column slides under the righthand column. Do I need to use double-divs to set a width for the troublesome right column? The most frustrating part of this is using tables and cells, this is a no-brainer. I'd show you an example of where I'm at, but my test site is down at the moment. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 2-col question
Thanks everyone: it was the float clearing that proved to be the thorn
in my side (right side). And the IE-Mac fix is also appreciated.
Only one more nut to crack with the site. I'll return for assistance
with another right floater if I can't use what I've just learned.
Thanks again: a terrific resource!
On 05/12/05, Mark White [EMAIL PROTECTED] wrote:
There's a simpler way of clearing floats without using the clear
attribute.
If you apply overflow: hidden; to the container DIV it will then
expand to contain all the floats (as long as a height hasn't been
specified, then it will possibly clip the floats).
The only issue with this is that IE needs a width (a few other
attributes work as well) to make its special float rendering engine
kick in, so I generally give the DIV a width of 100%; which DIVs do by
default so there are unusually no adverse effects.
Here's the code:
-
.expand
{
width: 100%;
overflow: hidden;
}
-
For a more detailed description of the above method look at
http://www.quirksmode.org/css/clearing.html;, which includes the names
of who first found this method.
Paul Noone wrote:
If you have any problems the clear div being applied after the column divs
(as I did) you can try applying the following to the contentwrap div, and
any other container that holds floats.
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
--
Mark White
Implementation Specialist
Squiz.net
T: 02 9568 6866
F: 02 9568 6733
E: [EMAIL PROTECTED]
W: www.squiz.net | http://matrix.squiz.net
. Open Source - Own it - Squiz.net ./
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] University textbook or other resources?
Folks I've been asked if there are useful university-focused textbooks or other resources suitable for teaching accessible web design. So far 'Effective website development' (Darlington) and 'Principles of web site design' (Skalr) have been proposed as possible options. Thoughts? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] hover div fill query
Dear all I've been trying very hard to propel myself into the 21st century and apply web standards and use good CSS as much as possible, but I'm stuck on getting a div to honour a hover state that I am trying to build. Guidance appreciated... The demo page is at http://imeet.com.au/aa2/ - it's cut right backto highlight my problem. Ignore the content, and the site URL I'm trying to find a way to make blocks of text in a div (item) to display the hover background for the entire div, and not just the linked text. I'd also like the hover state to apply to only the divs in question, and not all other linked text. What am I doing wrong? I can do this standing on my head and one hand behind my back using tables, but I'm not going back now. And yes, I've googled myself to death on this one, which is why I'm asking! Thanks in advance. I.K. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
Thanks for the prompt response, Tim - but your suggestion did not alter the output (in my browser, at least). Sounded plausible, though... Anyone else? On 14/11/05, Tim Burgan [EMAIL PROTECTED] wrote: If I remember correctly (others, please correct me if I'm wrong).. Make your links block elements with a height and width. e.g. div.item a ( display: block; height: 100%; width: 100%; } I think that should do the trick.. maybe? Tim ivanovitch wrote: Dear all I've been trying very hard to propel myself into the 21st century and apply web standards and use good CSS as much as possible, but I'm stuck on getting a div to honour a hover state that I am trying to build. Guidance appreciated... The demo page is at http://imeet.com.au/aa2/ - it's cut right backto highlight my problem. Ignore the content, and the site URL I'm trying to find a way to make blocks of text in a div (item) to display the hover background for the entire div, and not just the linked text. I'd also like the hover state to apply to only the divs in question, and not all other linked text. What am I doing wrong? I can do this standing on my head and one hand behind my back using tables, but I'm not going back now. And yes, I've googled myself to death on this one, which is why I'm asking! Thanks in advance. I.K. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
Nope: it's the demo page that is failing. Might be the browser (I'm using Safari and Firefox at present, and rebuilding my Windows box after a trojan popped in). We're only talking a few pixels: the text does show the hover state, but if I were to use a table cell, the entire cell would show it. At present, the hover finishes at exactly the edge of the text, and not to the div border. Also, haven't licked the white text on hover bit, either - and yes, I can see a conflict with the author/comment/timestamp tags. On 15/11/05, Patrick H. Lauke [EMAIL PROTECTED] wrote: ivanovitch wrote: Thank you: this is a great improvement, but not quite there. I've added the extra declaration as shown, but... This addtion only hovers the text component, not the entire span area. A table cell would go to the ruled edges - it's only a few pixels, I know, but it's important. (and I've not solved the white text on hover, either!). Adding the proposed declarations to your DEMO page works just fine. Are you checking it there, or are you adding the extra CSS to your actual live project, rather than the cut back demo one? If that's the case, you probably have some more rules in your full page that are interfering with the proposed styles. Can you not post the URL to your full page? 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 __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
Tried height adjustments (0, 1, 99%) in Safari, but no dice. It seems as though the padding (needed here) is getting in the way no matter what. I didn't think that the full-width div color would be so tricky. I think that I can work my head around Terence's advice on the text color (Thanks, Terence), but the issue of the div not taking the full color is bothering me. I've also yet to see what transpires in Win/IE - so might ask others to check it out once I'm closer to the final output. On 15/11/05, Thierry Koblentz [EMAIL PROTECTED] wrote: Patrick H. Lauke wrote: Ah, hang on, missed the bit about the white space. Why not just set the padding on both div.input and div.item to 0, and reapply the padding in div.item a:link? Also, you don't need the width: 100%; and height: 100% in the a:link The width is not needed, but I believe the height should be equals to 0, 1% or whatever (but *not* 100%), to prevent IE5 from doing some shrink-wrapping. Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] hover div fill query
On 15/11/05, Terrence Wood [EMAIL PROTECTED] wrote:
This is a really brief answer, but should get you started on the right
track to thinking about the C in CSS =)
First, some house work: id must be unique, class can be reused on any
number of elements.
Oops - leftover from the bigger site... Thanks!
Second, the following demonstrates the use of the cascade - C - to color
the author class:
a:hover .author {color:#fff;}
Got it - Thanks again. So simple when you know how, no? Now for the
'div complete fill problem'.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Safari, select, and option attributes.
Apologies if this has been discussed before, but is it my bad coding, or does Safari (v2.02, latest build) not honour any select styles? Further, is there a way to dictate how option can display styled font attributes across all CSS-compliant browsers? My aim is to make the drop-down in the same style as the rest of the page, but I'm having limited success. Firefox and IE have no problems, on WinXP and OS X (though IE on OS X does odd things when options are selected). TIps? Suggestions? Am I going the wrong way here? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Safari, select, and option attributes.
Thanks, Philippe - I was hoping that I'd hear otherwise. I'm not attempting to make radical changes to the user interface: just aiming for consistency. Interesting that certain widgets are off-limits in this sense, yet submit can be OS-built, text, or image. I had considered using dropdown menu scripting for this, but sense massive overkill (and I don't like javascript unless absolutely needed). Ta. On 06/11/05, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On 6 Nov 2005, at 10:54 am, ivanovitch wrote: Apologies if this has been discussed before, but is it my bad coding, or does Safari (v2.02, latest build) not honour any select styles? Further, is there a way to dictate how option can display styled font attributes across all CSS-compliant browsers? My aim is to make the drop-down in the same style as the rest of the page, but I'm having limited success. Firefox and IE have no problems, on WinXP and OS X (though IE on OS X does odd things when options are selected). Styling form widgets across browsers is notoriously difficult: http://www.456bereastreet.com/archive/200410/ styling_even_more_form_controls/ (and from a usability perspective, not always the recommended option) And no, Safari doesn't allow styling of the select and option, the same goes for Camino and iCab. Opera has a user option to disable author styling of form widgets (something I really like...). Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
