Re: [css-d] What's your preference -- fluid, elastic, or fixed?
On Fri, Jun 05, 2009 at 07:21:27AM -0700, Glow wrote: one thing I wonder about long-term with fluid layouts and increasing screen size is how to scale content when you've got someone using a gigantic monitor (can you visualize one-line articles stretching across three feet of screen real estate?) That is, IMO, an issue for the user to decide. If the user chooses to have a three-foot-wide browser open, then he's also choosing to have three feet of content. Given that you or I don't know how far away from that display he'll be sitting, we're in no position to second-guess whether that's an appropriate choice for him to have made or not. If this user is sitting close to his screen and doesn't want to be turning his head back and forth to take in three feet of horizontal space, then he also has the option of using a smaller browser window to constrain the content to a more usable width. -- Dave Sherohman __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hover image change buttons
I am developing a site, the development link is here...
http://u.univers.net.au/johnking
I need the three large dots second, third and forth from the left on
the top row to act like a hover menu. When you hover over them, the
grid of dots changes, and text appears at the bottom of the grid.
It's almost working, but I am not a css guru, and need the last 10% to
make it happen. I know this can be done in JS or Flash, but I
want/need this to be pure css.
How would you do this in pure css? Have I got something wrong somewhere?
Here are some images showing how it should work...
!-- Normal state --
http://i43.tinypic.com/2prtmoi.jpg
!-- Hovering dot 2 changes pattern and adds text--
http://i42.tinypic.com/2mhj3ug.jpg
!-- Hovering dot 4 changes pattern and adds text--
http://i43.tinypic.com/a4bwgm.jpg
You will see that I have set up some nested uls in the markup to
make the dot pattern.
The relevant css is this...
/* floats */
#logo, #image, #nav, .dotsmall, .dotlarge, .dotspace, .dotactive,
.dotline, #contact, #credits, #email {
position:relative;
float:left;
}
/* Postions */
#logo {
width:560px;
height:39px;
}
#image {
width:560px; /* note: actual image is 515px wide */
height:204px;
}
#nav {
width:560px;
height:300px;
}
#nav ul {
margin:0px;
padding:0px;
position:relative;
width:100%;
}
#nav ul li {
display:inline;
float:left;
}
#nav ul ul {
position:absolute;
left:-93px;
display:none;
z-index:100;
}
#nav ul ul li {
width:560px;
}
#contact a:hover {
display:block;
}
#contact, #credits, #email{
width:93px;
height:93px;
position:relative;
z-index:1000;
cursorointer;
background: #000 url('images/dot_large.gif') no-repeat center;
}
.dotsmall, .dotlarge, .dotspace, .dotline, .dotactive{
width:93px;
height:93px;
}
.dotsmall {
background: #000 url('images/dot_small.gif') no-repeat center;
}
.dotlarge {
background: #000 url('images/dot_large.gif') no-repeat center;
}
.dotline {
background: #000 url('images/dot_large_line.gif') no-repeat center;
}
Thanks in advance for your help, from a nubie. I have posted this
already at another forum, but been told that ccs-d is the best!
--
Joe Bland
61 04 1060 4090
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] first-child pseudo-class not behaving as expected
You are way over my head, Rob. But given what you state is a
given case, then the solution may well lie within a problem
solving language-- programming?
Hi David,
Actually, if you see my other reply (to Tim Snadden). The way I had
structured the selector was incorrect.
The selector of...
div#sidebar:first-child * {margin-top: 0;}
...would NEVER work, because it is seleting the div#sidebar that is the
first-child of it's parent element. What I needed was...
div#sidebar *:first-child {margin-top: 0;}
...for it to work.
I had misread an explanation of the implementation on one of the popular CSS
sites (can't remember which one now). When I saw Tim's message and then
looked at the specification
(http://www.w3.org/TR/CSS2/selector.html#first-child), I realized my error.
Thanks!
...Rob
Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover image change buttons
At 8:21 PM +1000 6/6/09, Joe Bland home wrote: I am developing a site, the development link is here... http://u.univers.net.au/johnking I need the three large dots second, third and forth from the left on the top row to act like a hover menu. When you hover over them, the grid of dots changes, and text appears at the bottom of the grid. Joe: Your solution looks complicated to me. I would use a simple image replacement technique as shown here: http://webbytedd.com/bb/replace-image1/ That will work to solve your problem. The css is there for you to review. This technique is pure css and no javascript is used. You might also investigate tool tips via the title attribute. That might be of service to you. The rollover can become more complicated as shown here: http://webbytedd.com/bbb/map/ Note that not only do you see an image replacement, but text appears. This demo is also pure css. As I said in the demo: This is simply a replacement image technique. It works for all modern browser. IE6 has problems with this demo simply because there are too many items for IE6 to manage. If the map contained less than five states, then this technique would work in IE6 (believe it or not). Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover image change buttons
At 8:21 PM +1000 6/6/09, Joe Bland home wrote: I am developing a site, the development link is here... http://u.univers.net.au/johnking I need the three large dots second, third and forth from the left on the top row to act like a hover menu. When you hover over them, the grid of dots changes, and text appears at the bottom of the grid. Joe: Disregard my previous post about my css map -- in trying to fix my css map for IE6, I broke it for IE7. It would be nice if M$ joined the rest of the world. Sorry, but the technique described here: http://webbytedd.com/bb/replace-image1/ will still solve your problem. tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE floating divs to the right; sorry - can't figure out solution
Hello folks,
My apologies in advance as I know this is a FAQ in the true sense of
the phrase, but there's just so much info available about IE6/7
problems with right floats that I'm totally overwhelmed and can't see
the solution.
I have a fixed width parent div within which I am floating right an
image with the tags:
div style=width: 200px; class=buggybox imgr id=g0 img
class=imgposr src=../images/irrigation/hip4microwave2.png
alt=Microwave width=200 height=133 /div
with the expectation that the text will wrap around the right aligned image.
Unfortunately, IE7 floats the image outside the RHS boundary of the
parent div (see http://horticulture127.massey.ac.nz/ie7view.png)
whereas FF and Safari display the float and wrapped text as I wanted
(http://horticulture127.massey.ac.nz/ffview.png) (the black vertical
lines are the LHS/RHS boundaries of the parent div.
How do I fix this CSS fault?
Thanks,
Bruce
css used:
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
* html .buggybox {height: 1%;}
(imgposr is not a css item - it's a selector for some jquery)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE floating divs to the right; sorry - can't figure out solution
Bruce MacKay wrote: Hello folks, I have a fixed width parent div within which I am floating right an image with the tags: with the expectation that the text will wrap around the right aligned image. Are you after this? http://css.maxdesign.com.au/floatutorial/tutorial0101.htm __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
