[css-d] Flexible inside inside a wide div
Hello CSS Discuss, I have a 1920 wide div containing an image slide show. Inside that div are the controls. At the moment they sit in a 940px wide container, but i want the 'previous' and 'next' buttons to float either side of the browser. Fixed does this but I don't want them to stick when the page scrolls. Making the inside absolute and width 100% would just stretch it to the width of the outer div. Same with float left/right. Any ideas? Thanks, CB __ css-discuss [css-d@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] Multiple webfonts
Hey,
I am making a website that will be in two languages, English and
Chinese. I am going to use my own webfonts but the font I am using for
the English side doesn't have Chinese variations. I have found another
font for the Chinese and was wondering if I can have more than one
custom font e.g.
#quotes h4{
color: #3B7E71;
font-family: 'englishfont', 'chinesefont', Arial, sans-serif;
font-size: 18px;
}
Thanks, CB
__
css-discuss [css-d@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] Making A Link Disappear When Revisited By A Reader
Hi, Just an idea, but might be a bit far fetched: The link you don't want needs to be visible at the start, and then after another link is clicked to disappear. I think that if both links were in a div with a set width and height you could change the CSS for the 'visited' link to increase in size, and sort of knock the other link out of sight. for example a 200px wide container containing to block links at 100px wide each. Once one link has been visited it becomes 200px wide, pushing the other link into overflow hidden and like magic, it's gone. does that make sense? BR, CB On 11/06/2011, at 2:32 AM, i...@ecoitsf.com wrote: Choose your own adventure. Cool. Sincerely, Matthew P. Johnson 415.254.1563 Eco I.T. ecoitsf.com - Reply message - From: Fabienne i...@possets.com Date: Fri, Jun 10, 2011 11:27 am Subject: [css-d] Making A Link Disappear When Revisited By A Reader To: css-d@lists.css-discuss.org I am writing a novelette and want to have two endings to the story. I also want to have the reader choose one answer and not be able to go back and read the one they did not choose later. So I want the link to the ending they did not choose disappear after they make their choice. How would I go about doing that with CSS, or could I? I have thought of having a page they go to to make their initial choice, then they would go to the page for the ending they chose which would have a link back to the choice page BUT that page would have only the link to the one they chose and the one they did not choose would be gone (because the page to go back to would be another page, really). I hope I explained it sufficiently. It's a simple concept, I just want the reader to make up their mind and not be able to go back to read the other ending. Thanks for any inputs on this. I am afraid I am stumped. _ _ _-- _ Fabienne __ css-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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] Making A Link Disappear When Revisited By A Reader
Brian has made a good point, a link on the right would expand out of view, even if it was the one you want to remain. However he's indicated using z-index too which with the right CSS tweeks could hide the unwanted link out of sight. On 11/06/2011, at 2:54 AM, Brian Kardell wrote: Oh I see - I think I misread... Sorry :) But yes, I think the idea would still be to use visited somehow. I don't think that what is described here would necessarily work though - would it? I mean, if the one clicked were on the right, it wouldn't really have any visible impact (it would just grow out of the viewable area and be clipped). I think you would have to also position it and lay it on a higher layer to hide it. On Fri, Jun 10, 2011 at 2:44 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, Just an idea, but might be a bit far fetched: The link you don't want needs to be visible at the start, and then after another link is clicked to disappear. I think that if both links were in a div with a set width and height you could change the CSS for the 'visited' link to increase in size, and sort of knock the other link out of sight. for example a 200px wide container containing to block links at 100px wide each. Once one link has been visited it becomes 200px wide, pushing the other link into overflow hidden and like magic, it's gone. does that make sense? BR, CB On 11/06/2011, at 2:32 AM, i...@ecoitsf.com wrote: Choose your own adventure. Cool. Sincerely, Matthew P. Johnson 415.254.1563 Eco I.T. ecoitsf.com - Reply message - From: Fabienne i...@possets.com Date: Fri, Jun 10, 2011 11:27 am Subject: [css-d] Making A Link Disappear When Revisited By A Reader To: css-d@lists.css-discuss.org I am writing a novelette and want to have two endings to the story. I also want to have the reader choose one answer and not be able to go back and read the one they did not choose later. So I want the link to the ending they did not choose disappear after they make their choice. How would I go about doing that with CSS, or could I? I have thought of having a page they go to to make their initial choice, then they would go to the page for the ending they chose which would have a link back to the choice page BUT that page would have only the link to the one they chose and the one they did not choose would be gone (because the page to go back to would be another page, really). I hope I explained it sufficiently. It's a simple concept, I just want the reader to make up their mind and not be able to go back to read the other ending. Thanks for any inputs on this. I am afraid I am stumped. _ _ _-- _ Fabienne __ css-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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] Fwd: Trying to find active state
Hi,
http://blakeys.com/index.php/profile
I would like the current / active title to be a colour. I have
managed to find the tag to make hover work:
#page div.whitespace div.yoo-accordion dt span.header-r:hover{
color: red;
}
but :active doesn't seem to work.
Any ideas?
Thanks, Chris
P.S. I have had to knock this up in 2 days so it is by no means
finished or what i intend to have as a business. Haha, in case
anyone wanted to say nasty things!
__
css-discuss [css-d@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] New to the list and a question..
On 12/02/2011, at 6:02 AM, Tom Livingston wrote: Though Chris *may* have sounded a bit curt (email is notorious for not conveying tone), it's fair for others to assume that your issue may be *because* of invalid code. Not the other way around. I agree, he wasn't being nasty. It's just standard for the list to validate before posting. Good luck That said, Georg, as always, has a fine solution for the nav gap. Give that a go. Then try tackling the errors. Fixing them may fix a lot of other things. Good luck. On Fri, Feb 11, 2011 at 4:54 PM, James Sheffer ja...@higherpowered.com wrote: Chris- Thanks for the validation news - I guess If I asked someone to validate my code I would have put in the email... I also guess since I'm having an issue with this page that it obviously wouldn't validate correctly and I wouldn't be spending my time validating it until I fixed the issue. Don't fall off your high horse... Cheers! James On Feb 11, 2011, at 3:42 PM, Chris F.A. Johnson wrote: On Fri, 11 Feb 2011, James Sheffer wrote: ... http://new.thetoyz.com/navcode.abc Wow! 636 Errors, 576 warning(s) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fnew.thetoyz.com%2F Once the errors are fixed, ask again. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [css-d@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-discuss [css-d@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/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@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-discuss [css-d@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] browser check
- the entire image and navigation magnify and reduce together. Yeh that bits cool. I went to one of the gallery pages - there no loader and it was quite a wait for the first large image. Whilst waiting the border does not sit where it should be, it is up and behind the thumbs. I would have thought a .clear in the thumbnail container would fix it. Regards, Beth Lee www.bethleedesign.com __ css-discuss [css-d@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-discuss [css-d@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] browser testing, and redirect.
Hi, http://www.emw8.com/ Is a new design and web-dev business/website I am making that specialises in multi-lingual and localised content. I'm based in China so I want to make my site fully translated (by people not machines) in English and Chinese. I'm getting on top of that bit, but when doing browser tests in China I ran into some nasties. Old computers, old browsers, weird browsers - you name it, they've got it! Statistics here are: IE (50%), Maxthon (20%), and 360 (20%). Mozilla, sogo, chrome all have tiny shares. It's not as simple as just telling them to update. Many browsers are used because some online banking and e-commerce only support these browsers. Needless to say most template builders stopped supporting IE6 a couple of years ago so my site breaks big time in IE6 and some of these Chinese browsers (IE modifications). My solution was to add a script redirecting IE6 users to a page with a different, IE6 supported, template. It's good because users see something, articles can be reused, and it's all housed in one CMS. So my question is really, how do you guys get on with it? I know there is an issue with the language selection box but I am working on that. There isn't anything in the 'test' box. Everything else should be working fine. If you load the page and end up on http://www.emw8.com/index.php/en/ ie6 it should be because you are using IE6. Let me know if that's not the case. The language detection works, not by Geo IP, but what language your browser is in. If there's any Chinese using this list then I'd be interested to know if that works. My recent tests have been really good. It's very much in development, but I just want to check browser stability, and the redirecting function. Merry Christmas! BR, CB __ 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] Is blocking ads OK for web developers?
Hi, I use mac mail and there is a warning along with this email. It says 'unable to verify message signature'. I have never seen this before. I don't like it, and it makes me a bit uneasy. Off topic. but my penny's worth. Pop ups are intrusive, so I have 'block pup up windows' turned on. Does a good job I think cos many of the blogs I use people are always whining about pop ups and I don't get them. Pop ups that then hide behind the current page I am viewing are just the worst. Look at Chinese webites, they have some interesting techniques and a lot of them are just OTT. Fixed position ads irritate me too. Ads appearing after searches and above the site's actual content grind my gears, and I don't know why a developer would really want to do that anyway. I worked on an ad campaign for vodafone called 'content integrated marketing'. The idea being that it looked part of the website that it was placed - but clearly marked 'advertisement'. I didn't feel so bad about that and I think it worked quite well. I don't know about adblock, but I can block ads with my own eyes. So if it's in my face, flagrantly an ad then I don't look at it. bored, going to the pub. Chris On 04/11/2010, at 8:01 PM, Jackson Araújo wrote: I was wondering, as i started learning my way through web development, if the habit i had of using the so-famous Adblock filters and addons, while surfing the web was something OK. I mean, some of you (hopefully us, in a while) might even have to design advertisement campaigns, etc. So having them turned off could take a valuable (sometimes not that much) source of inspiration away. What do you guys think? Do you use them? Know somebody who does? Perhaps, someday in the future i'd regret doing so... -- José Araújo --zéck-- __ 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-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] lots of validation errors, tables, and other things that we just love!
Hey, I have just been handed this: http://wolves.redrunner.co.uk/ The creator has used a template that has since been removed from the place he got it from. I'm trying to save it rather than rebuild it from scratch. Firstly the validation errors seem to be mainly to do with doctype. Any ideas what it should be? I have a really nasty bug appearing in safari 5.0.2 mac osx. Two scroll bars and white space at the bottom of the page. It's not like that in FF. It also doesnt appear in the admin sde so I think it has something to with the content. Most of the the styling problems aren't too hard to fix (if it's not in tables anyway) so I am not too fussed with fixing those yet. Thanks, Chris __ 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] How to make the background wrap around the image?
Hi,
I copied the code into my editor and redered it. It's abit hard to see
what you're trying to do. Can you explain a bit more.. is it for a
header? Could you replace the dummy content with somethig a bit more
meaningful because the text over the image, and text next to it is
that same so it's just a bit of a mess. It also seems like you have a
lot of wrappers happening which might not be needed.
Cheers, CB
On 30/09/2010, at 10:17 AM, Anthony wrote:
Hi all
I have been trying to figure out how to wrap the background around the
image on the left, so that the image doesn’t stick out outside the
background. But I haven’t had any luck. Any help would be greatly
appreciated.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleslkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj /
h2
div class=content
pa href=http://www.google.com;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/alsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj
lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f/p
/div
/div
div class=bottom /div
/div
/div
/body
/html
A
__
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-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] the other list
what's the name/link to the other list that some members use for all question regarding web-devm not solely CSS? Mu questions are about developing multi-lingual sites and SEO for foreign search engines (China and HK mainly). ty, cb __ 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] Subscripts and superscripts
Hi, I am basically using EMW8 as the company name. I'd rather do away with the 8, but some sod is just sitting on the domain. to make it be less important I want to make it superscript throughout the website whenever name dropping. So in this instance should I make a span, setting lower type face and padding-bottom that could work and not screw up all the other default stylings? Another option could be just to make a span making the 8 a soft grey rather than black, but I have already started to devlop the logo and it looks quite cool being ss. Not making things easy for myself! Cheers, CB On 26/09/2010, at 6:13 AM, Philip Taylor (Webmaster, Ret'd) wrote: Jukka K. Korpela wrote: vertical-align: baseline; position: relative; bottom: some factorex; That looks really cool and simple and seems to fix things nicely. How come I never thought of that? Don't know. What I /do/ know is that the problem drove me crazy until I hit on that idea. Are there any hidden problems? None that I've encountered so far, but that is not to suggest that there isn't something /really/ nasty waiting to bite when I am least expecting it :-) There's the inherent problem that depending on the font characteristics, the line height, the characters in the text, the font size of the superscripts, the factors you've chosen, and the phase of the moon, some subscripts or superscripts might come too close, or even hit, characters on another line. But that's a risk we need to accept and to prepare for (especially by setting line-height and other key properties well). Agreed. ** Phil. __ 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-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] Capitalize
Hi,
i am not too fussed about the title transforming because I can just
enter that manually as UC. However I dropped it in so that the
question had something to do with CSS.
From people's answers about the URL being UC it seems that it's just
a bad idea - so I'll just have to go normal.
Thanks for all the info.
CB
On 26/09/2010, at 4:56 AM, Jukka K. Korpela wrote:
david wrote:
I seem to recall that URLs are not case sensitive?
URLs are case-sensitive, but some parts of them, including the
server part, are defined to be case-insensitive. Whether people know
about this is a different matter. For usability, it is good policy
to announce your server name in lowercase.
If you write the server name in uppercase in a link href, for
example, it will get turned to lowercase by the browser. This is
outside the scope of CSS, as it's not about document rendering but
about the document's address.
Anyway, I don't think CSS can change case of the title tag
contents.
Did you try it?
Well _I_ tried...
The title element is something that you can assign CSS
declarations to. But their impact may vary. Normally the title
element is not displayed inside the document, which is where CSS
plays. But in CSS terms, its absence can be characterized as a
consequence of the default setting of display: none for head and
title. And these are something you can change, in principle at
least.
On Firefox and Opera, for example, the following CSS code makes the
title element content visible at the start of the document, in
uppercase:
head, title { display: block; }
title { text-transform: uppercase }
But you can't style a span of text there, because no inner elements
are allowed inside a title element (by the specifications or in
browser practice).
So it's not particularly useful, especially since it does not affect
the rendering of the title element content in the browser's top
bar - it's displayed by browser functions that are immune to CSS.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
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-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] Capitalize
Hi, Hopefully this is anew one for the list - kind of in two parts and the first being CSS based the second not so much :) 1. Can I use text-transform on the Title'this' to 'THIS'/title 2. And what I really want to know, sneaky, is can I make it so the my URL always appears in caps? I have emw8.com and I just think it looks stupid with the 8 sticking up, when really it's the part of the URL I don't like. I'd much prefer WWW.EMW8.COM. Is there anyway to control this, does it effect SEO at all? P.S. I need to be using sub-script and super-script a fair bit on this site, any warnings or words of wisdom about doing this? Thanks, CB P.S. I want to get this Google chrome speed tracer thing on my mac. I got that dmg fine, but the developers model of the browser, I can't seem to download it (might be the fact I am in China). Does anybody have a link to this file so I can set it up? The only other free resource I have for testing website speeds is http:// tools.pingdom.com/ but I don't think it's very accurate. __ 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] Capitalize
On 25/09/2010, at 9:13 PM, Kate wrote: It seems: Officially Google it doesn’t care about the case: http://www.searchenginejournal com/page-title-in-all-caps/10846/#ixzz10Xw5kOAI 52% thinks 'it makes the site stand out', I chose 'It is associated with spam ' and good lord, 82% think same as me. Kate http://jungaling.com/katecorner/ Hi, Hopefully this is anew one for the list - kind of in two parts and the First being CSS based the second not so much :) 1. Can I use text-transform on the Title'this' to 'THIS'/title 2. And what I really want to know, sneaky, is can I make it so the my URL always appears in caps? I have emw8.com and I just think it looks Stupid with the 8 sticking up, when really it's the part of the URL I Don't like. I'd much prefer WWW.EMW8.COM. Is there anyway to control This, does it effect SEO at all? So is there a way to block capitals in mail apps, or cloud apps? I wouldn't spam anyone - just newsletter to subscribers and customers that have already contacted me. For mail it could work lowercase anyway - it's more to do with standing out - the logo is very much in caps - with EMW being the same shape just rotated and the '8' in the background reinforcing this loop, unity idea. Branding is key and I don't want to use lowercase for the company name at all - and I thought that if the URL auto to caps that would be quite a new approach to brand consistency. I appreciate your advice, just needa bit more clarity. ty, cb __ 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] Can i vertically centre a UL?
Hey, Having given the best solution to what is impossible via CSS comes Tim with an impressive (off-list) javascript solution! Mad props Tim! This list has been here from day one (4yrs for me) and I am a self- taught webmaster (lol) bordering on having a decent career. It's only cos of peeps like you (mad props open source) that we can get on with things, independent of upbringing and/or opportunity. I am definitely going to give back whenever I can. CSS-discuss up for Presidency. Respect to you all, especially TIM! (solved) Thanks, CB :-D On 16/09/2010, at 4:39 AM, Climis, Tim wrote: -Original Message- From: Chris Blake [mailto:ch...@3pointdesign.com] Sent: Wednesday, September 15, 2010 3:41 PM To: Climis, Tim Subject: Re: [css-d] Can i vertically centre a UL? change the selector from .level3 to #menu ul.level3, and I think you'll be good. ---Tim That's great, thanks! I was wondering if there was any chance that it could always stay in the middle whether it had one link or six? Only with javascript. Keep the same CSS as you currently have, but add this to a function that gets called in the body onload. level3s = document.getElementByID(menu).getElementsByClassName(level3); for (var i=0; ilevel3s.length; i++) if(level3s[i].tagName = UL) level3s[i].style.marginTop = level3s[i].offsetHeight/-2 + px; Just a note, getElementsByClassName is a newish function in javascript, and I don't recall what browser support it has. But if you use a frame work, there's probably a reliable way to get a list of elements to loop through. jQuery, for example (I believe, as I haven't used it) would be something like level3s = $(#menu ul.level3); and then the same from there. (that method would let you get rid of the if check for the UL tag.) This works because the menus are displayed, but hidden way off to the left side of the screen. If they were hidden with display: none, you'd have to set them as visible first, then get the height, and then make it disappear again. ---Tim __ 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] Can i vertically centre a UL?
HI, I have got over my fear of sending a ink to the site so you can see that it's level 3, from the websites drop down that could be improved by centering vertically. http://blakeys.com/ Thanks, CB On 15/09/2010, at 10:58 PM, Gaurav Saxena wrote: CB, attaching a .html for ya; do tell if this is what was desired or not Regards, Gaurav On Tue, Sep 14, 2010 at 4:42 PM, Chris Blake ch...@3pointdesign.com wrote: Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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-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-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] Can i vertically centre a UL?
On 16/09/2010, at 1:38 AM, Climis, Tim wrote:
I have got over my fear of sending a ink to the site so you can see
that
it's level 3, from the websites drop down that could be improved by
centering vertically.
http://blakeys.com/
/* this is the box that actually lays out the interior of level 2.
It was hard to find through all the extra stuff. */
.group-box2 {
overflow: hidden; /* this makes the div have the height of the
internal box (all the contents are floated, so it has no height by
default. */
position: relative; /* this makes it the parent for the level3
absolute positioning */
}
.level3 {
position: absolute; /* position relative to group-box2 */
top: 50%; /* top goes in the middle of the group-box2 */
margin-top: -2.8em; /* since the ul is 4 lines of text, this is
half the height of the ul (assuming no vertical margins or padding,
and a default line-height of 1.2em) */
width: 41%; /* makes the highlight go to the edge of the box --
needs some tweaking */
}
Also, it looks like you have a whole lot of really useless divs in
here. I don't see the point of groupboxes 3, 4, or 5, or hoverboxes
2, 3, or 4. And this solution makes div.sub useless as well.
---Tim
Hi Tim,
yeh it's from a template that i have ripped apart in both CSS and
template.php. I've tried to strip it but some of the includes are just
appearing form thin air. I was ging to create it as I want ti and then
ask the developers how much to strip it of all the unneeded scripts.
It is however built on an unbelievable frame work - i just wish the
designs weren't so bloggy and fluffed up.
I'll give this code a try now and let you know. Cheers!
CB
__
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] Can i vertically centre a UL?
Hi, I have a unordered list sitting in a div. I'd like it to sit right in the middle both vertically and horizontally without using padding or anything like that because it's dynamically fed. is there such a way using CSS? Cheers, CB *the lists been kinda quiet recently __ 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] Can i vertically centre a UL?
Given:
divul/ul/div
I think
div {position: relative};
ul {
position: absolute;
top: 50%;
height: 5em;
margin-top: -2.5em;
}
does it. Or does the div need a height too? Okay, in this case it
would, since there's nothing *in* the div, but in a similar case,
where the div has other contents to give it an implicit height.
---Tim
OK it makes perfect sense, but I couldn't get it to work. I forgot to
mention that my div is actually floating left - could this be the
cause of unordered chaos?
Answers on a postcard to...
Thanks, CB
__
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] Can i vertically centre a UL?
On 15/09/2010, at 6:30 AM, Boray ERIS wrote: Do you have the site live? Kind of, it's a CMS website that I am developing but I'm sort of hiding it from the world until the right time. Sorry, I know I should post a link. __ 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] Sidebar disabling navigation in center section
Hi, It's because of you layout. The padding for the navigation is covering the entire main content making it impossible to highlight any text let alone click a link. It can be fixed though: Remove from #naviagtion: position: absolute top: xxpx padding-left fixed it for me in firebug anyway. Hope it works! let me know. CB Check ur validation errors too: http://validator.w3.org On 15/09/2010, at 7:00 AM, Carol Swinehart wrote: http://www.bowenhouse.org/ Sidebar is disabling links in main content section. See rental information link. Had to take sidebar navigation off contact page until I can figure out what is going on. Anyone have a clue. Thanks, Carol __ 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-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] Sidebar disabling navigation in center section
Hi,
Sorry, that wasn't very clear.
Your CSS for for the nav column should just be this:
#navigation {
float:right;
min-height:553px;
padding-right:20px;
}
Check ur validation errors too: http://validator.w3.org
Cheers, CB
On 15/09/2010, at 7:31 AM, Chris Blake wrote:
Hi,
It's because of you layout. The padding for the navigation is
covering the entire main content making it impossible to highlight
any text let alone click a link.
It can be fixed though:
Remove from #naviagtion:
position: absolute
top: xxpx
padding-left
fixed it for me in firebug anyway.
Hope it works! let me know.
CB
Check ur validation errors too: http://validator.w3.org
On 15/09/2010, at 7:00 AM, Carol Swinehart wrote:
http://www.bowenhouse.org/
Sidebar is disabling links in main content section. See rental
information link.
Had to take sidebar navigation off contact page until I can figure
out what is going on.
Anyone have a clue.
Thanks,
Carol
__
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-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-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] Can i vertically centre a UL?
whizz-bang-blammo align centered vertically. Brilliant!!! But sadly not. If you, or anyone is till interested in helping in the next 30-45 mins then reply to me (don't click 'reply all') and I will put the site live and send you the link. Be warned this CMS template creates a whole load or wrappers so you'll have to expand about 100 divs before getting to the culprits. It is however one sexy menu that works even with javascript turned off. Whizz bang blammo, Chris __ 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] ADMIN: List Moving (was: Re: List Options)
Thanks, you guys n' gals are great. \ TY,CB On 30/08/2010, at 1:53 AM, Dean Mah wrote: Hello, We are currently in the process of moving the css-d list to another server. You may notice some flakiness as the new DNS information propagates. The new IP address of css-discuss.org and lists.css-discuss.org will be 67.19.208.11. I will switch your subscription manually myself. Dean - on behalf of evolt.org On Sun, Aug 29, 2010 at 10:51 AM, Edward McCarroll e...@comsimplicity.com wrote: I've made two attempts to switch my subscription to digest mode, and it isn't happening. Is there a several-day lag on this, or did I get it wrong? Help! Regards, Ed __ 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-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] Can CSS get me out of the stone age?
http://www.coastalind.com/ciordersample.html Does anyone have any suggested CSS coding that would streamline this page? Not really, no. CSS cannot be used to reduce *content*, only to style it. Your issue is one of markup - how best to represent thousands of items in a form - and, thus, isn't really suitable for this list, IMO. - Bobby I disagree. There are ways to style forms, so why not!? Streamlined makes me think that you're talking about speed so maybe adding images and things isn't such a good idea in that sense but would make it look better. Ermm, google it - there's lots out there. 'styling forms with CSS'... __ 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] is this list still alive?
The list is soo good nobody needs help anymore :-D On 22/08/2010, at 2:33 PM, david wrote: Francesco wrote: I used to get 50 messages a day from here. Where is everyone? Well, including your message and the ones I haven't looked at this evening, there are 14. Your email made it to the list. -- David gn...@hawaii.rr.com authenticity, honesty, community __ 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-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] Hide current page link
Hi, CSS does not know anything about a link pointing to the page itself. What about a:active and/or a:current? I'm uncertain but a:hover works in style sheets without having to add an ID or class of 'hover' to the links so maybe it's the same with the former two. Then perhaps} display: none; Sorry if it's a bad guess. br, cb On 17/08/2010, at 3:01 AM, Jukka K. Korpela wrote: Val Dobson wrote: Is there a CSS method to hide the current page link in a navigation list? ie: if you're on the widgets page, you don't get the See our crazy widgets! link in the menu. You can do this only if you have some way of distinguishing the current page link from other elements in terms of CSS. This normally means it needs to have a suitable class (or id) attribute. CSS does not know anything about a link pointing to the page itself. In theory you could use attribute selectors that select elements e.g. on the basis of the href attribute value. But there's no way in CSS to couple this with the idea of the URL of the page itself. I'm responsible for looking after a static HTML site that has had more and more pages added to it over the years, and changing the navigation on each page is becoming a chore. I know how to do includes, I'd just like to hide the current page link.. Simple server-side includes won't help. You would need to generate the navigational elements in a manner that uses some distinguishing markup for the current page link. You might ask why not then remove that link instead of hiding it from the visual appearance, and that's a good question. If you cannot use any more advanced server-side techniques, then probably the best shot is to add a piece of JavaScript that traverses the links on the page and hides any link pointing to the page itself. Here, too, one might ask why not remove the link from the document tree instead of just hiding it via CSS. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ 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-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] new website - critics welcome
mac, safari 5 - it's all good. I think it's really cool and unique! On 22/07/2010, at 9:09 PM, tomo jacobson wrote: hi, i'm an amateur. i haven't done any website since early high-school... anyway this is what i achieved (can't post the link, sorry...): tomojacobson.art.pl/strona/ there're some things i don't feel good about: 1. footer... when u shrink the window and scroll right/left, text in the content gets over a sidebar menu. also the footer doesn't scroll right/left when u shrink the window. (maybe it doesn't matter cause nobody will shrink the window to 820px?) 2. i used TABLE and ALIGN attribute and TARGET attribute... TABLE and ALIGN appears in the footer. the footer is pretty crazy codewise, but i couldn't get it any other way... TARGET is my choice, i really would like to open links in a new window. 3. i used help from IE7 script (i'll never do fixed header, footer and a sidebar menu at one page again! - damn ie...). i'm affraid that some people might have javascript disabled... but maybe nowdays it's almost nobody who does it? 4. i'd like to add RSS, but don't know how yet... i guess that's all. i'd be more than greatful for any kind of ctiticism. regards, Tomo __ 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-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] new website - critics welcome
On 22/07/2010, at 10:40 PM, Climis, Tim wrote: i'd be more than greatful for any kind of ctiticism. It'd be nice if there was some kind of clue that there are links on the first page. I don't know that most people will discover that a few random letters produce hover effects. I heard something interesting the other day - as i have a new friend that has done loads of crazy flash things for some pretty massive brands. it went something along the lines of.. the big brands are corporate weazels but in bid to keep face they will execute something that is hard to navigate, kinda weird and so on. the theory, cos it has to be money after all they re corporate scum, is that the rich will look at this quirky thing - think that they 'get it' because they are that brand. but do they really know what the artist is doing - does it really serve a purpose? anyhow, the page is humble and intriguing. I found it easy enough and although i remember the first time not being too impressed once ur in and u see the rest of the quirkiness then it works - if u have ventured this far then u are the right kind of person to be viewing. if not u wouldnt have even bothered looking. I think it's kid of cool - exclusive in a way. it is something i am battling with designing my own. there are peple, clients that aren't scared of the new, my dig my style, might even oay me to spend time dreaming and being an artist once more but then there is always the majority looking for functiona nd surely there is a template that makes them say 'OK'. it's toss up - but in a way presenting my cirporate work on an slightly quirky, original site shows that iam capable - but left to my own devices (is that the word?) I wouldn't bother - unless I was learning something new in the process. __ 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] CSS IDs and class selectors: details
HAPPY BIRTHDAY - but I was after an Aston Martin. :-D On 20/07/2010, at 4:26 PM, Gabriele Romanato wrote: Hi! Today's my birthday. Here's a gift for you: http://onwebdev.blogspot.com/2010/07/css-id-and-class-selectors-details.html HTH ^^/ Gabriele Romanato http://www.css-zibaldone.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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-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] ID vs. Class
Hi, I understand the difference between class and ID to a basic level. I am adding a #div but I may want to add another later. Therefore I should use class but what is the danger if I use a class - is it slower, does something cache that may not if it's an ID - what's the real difference other than using it once or multiple times? TY, CB __ 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] ID vs. Class
On 20/07/2010, at 11:06 AM, Beth Lee wrote: -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Monday, July 19, 2010 8:50 PM To: css discuss discuss Subject: [css-d] ID vs. Class I understand the difference between class and ID to a basic level. ... - what's the real difference other than using it once or multiple times? 1. If you use an ID multiple times, your HTML won't validate. Maybe you don't care about that. I do care. 2. There is a difference between ID and class in the cascade in css. If a div has both a class and an ID, the ID rule trumps the class rule, since an ID has more specificity than a class, You can use the cascade to streamline your stylesheet. Aha I learnt that. Forgot to say. 3. If you use Javascript, your getElementById functions could go blooey if there are multiple divs with the same ID. (If there's a more technical terms for it, I don't know it.) But it's OK if they classes? Beth Really for this because it is only appearing once for now I should use ID - but there's a good chance I may use it again later on this page - so class for now is OK? Cool and thank you. __ 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] ID vs. Class [solved]
On 20/07/2010, at 11:32 AM, Claude Needham wrote: On Mon, Jul 19, 2010 at 8:15 PM, Chris Blake ch...@3pointdesign.com wrote: Really for this because it is only appearing once for now I should use ID - but there's a good chance I may use it again later on this page - so class for now is OK? I like to treat class and id semantically -- or at least according to my understanding of what that means. ID is properly used on elements (div, etc) that are unique. Class is used with elements that are categorical or a class in the mathematical and programming sense. For me an ID is something like header, footer, masthead, basically anything that makes sense as unique. If I happen to have a page for which I currently only have one newsitem. I will still use class. Simply because to me a page could naturally have more than one newsitem. I don't base the notion of ID simply on the fact of there being only one element of that type currently. I base it on there should rightfully be only one. This is how I go about it. As they say your mileage may vary. Regards, Claude Needham SOUNDS GOOD TO ME! Cheers, CB __ 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] browser reports please [blakeys]
Hi, I appreciate all the advice I am getting on this topic and it's raising some very important issues for me and I think the template creators too. I understand setting the line-height as a ratio, and the font sizes could still be set as pixels (or should this be a ratio too?). I am however concerned that because of the width of the menu, it being a drop-down, the number of items, and the layout having a fixed width that another serious issue is that items start breaking out of their containers (applys to the height too of course). I would to think that having a flexible/fluid/expandable menu - possibly sitting outside of the main wrapper (with a minimum width declared in pixels) could resolve this issue. Other items that have a set width (e.g. my top panel trigger) could be set to min-widths. Could css-d give me some examples of what you think are the best kind of declarations for items such as menu links (horizontal, 1 line) using ratios and whatever else so that I do not run into problems with min font sizes. It'll just give me a starting point and then I can play about with it in fire-bug. Just as I thought it was the end of IE6 I run into a new problem! Lovin' web design :D Thanks, CB On 13/07/2010, at 2:53 PM, Felix Miata wrote: On 2010/07/13 13:52 (GMT+0800) Chris Blake composed: 2. 'line-height set in pixels' - what should I use? It's a menu rather than a paragraph. Unless you're happy to have your design break royally upon encountering minimum font size, containers need to be big enough for the text they contain. Line-height is a sort of containment. When you specify line- height of 16px and my minimum font size is 22px, something will definitely break. That break is likely to be my patience, followed by a click on the back button. So, make the line-height depend on the size of the text it must contain, using a ratio, a plain number, such as 1.3. http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height 16 pixels minimum - are you kidding me!? Pixels are a proportion of a display canvas that is normally of unknown size. Since CSS cannot know display size regardless, and cannot know total px to fit in the unknown display space, via CSS alone you have no idea how big 16px is. At 144 DPI (e.g, my display here), 16px is only 8pt, while my UI text (e.g. browser menus) is 10pt, and my normal browser minimum font sizes vary between 15px and 22px, depending on which browser and for what purpose I'm using it. Sometimes I set the minimum equal to the (24px) default, which removes any practical possibility of contextual meaning to be derived from text size, but is the only way to actually read what I need to read without disabling all page styles. On http://blakeys.com/design/index.php/en/blakeys-websites-introduction with a 22px minimum setting the white nav text is so scattered about it's impossible to guess what it means to offer, and on hover the dropdowns compound the apparent textual randomization. Up top in the middle looks like a tiny hanging tab, with only about the top 40% of the text it's apparently supposed to contain actually showing, and nothing showing to help explain it on the statusbar on hover. The search box can't fit even 7 full letters (abcdefg), cutting off the bottoms, and one or the other end. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Fonts, fall-backs Unicode
Hi,
What about using CSS3 web fonts http://www.fontsquirrel.com/fontface/generator
?
Upload the font you want, it will generate all the different types,
link to them using the @fontface thing and bingo - they don't need
that font on their system.
or am I dreadfully mistaken?
BR, CB
On 13/07/2010, at 4:57 PM, Philip Taylor (Webmaster, Ret'd) wrote:
If I have a page such as the following :
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8
titleArmenian test/title
style type=text/css
BODY {font-family : Arial Unicode MS, sans-serif}
/style
/head
body
h1Եւ երկիր էր աներևոյթ և անպատրաստ. և
խաւար ի վերայ անդնդոց. և
Հոգի Աստուծոյ շրջէր ի վերայ ջուրց/h1
/body
/html
I have presumably chosen my primary font not only because I feel its
aesthetics are appropriate but also because it supports the necessary
subset of Unicode to correctly display the characters that make up
the page. But if for some reason the visitor's browser does not have
access to (in this case) Arial Unicode MS, and falls back to the
generic sans-serif, there is (as far as I can see) no way of
guaranteeing that the page will still display correctly.
Is there, therefore, in CSS, some way of specifying as a part of the
font fallback sequence that any font selected as a result of fallback
must support a specific subset of Unicode such that the page can be
guaranteed to display correctly provided that such a font does in
fact exist on the visitor's machine ? And is there any way,
presumably
using a combination of HTML and CSS, to display a suitable error
message
using solely ASCII characters if such a font cannot be found ?
Philip Taylor
__
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-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] Fonts, fall-backs Unicode
On 13/07/2010, at 6:38 PM, Philip Taylor (Webmaster, Ret'd) wrote: Michael Adams wrote: Would it help to create a page with all the Unicode chars in the range you are using and ask who can see how many based on font selections on a per paragraph basis. For *my* Linux Nimbus Roman No9 L may be a well populated serif font and Nimbus Sans L as sans serif (dunno i haven't gone into it that much). You could also get replies from Mac, Windows 7, Vista and XP users and try for the best combinations. I don't know the maximum fonts you can have in a CSS fonts list - anyone? Thank you for the suggestion, Michael; it is certainly worth listing the more common well populated fonts as you suggest, but it doesn't address the real issue, which /seems/ to be (in the absence of any evidence to the contrary) that the CSS fallback mechanism was formulated at a time when Unicode was not yet prevalent, and does not seem to have evolved to cope with the need to have greater control over the fallback font selected in order to deal with the various character sets that the page uses. it could be seen as racist! Alternatively, if you are dealing with particularly uncommon glyphs it could pay to use images of the ones you want instead. I would prefer not to go that route at all ! haha, how many characters in that language? ** Phil. __ 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-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] background image - repeat, flip horizontal and vertically
Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ 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] background image - repeat, flip horizontal and vertically
Hi, Since that took a while I have done some research. Flipping it seems impossible so I went for the 100% width, maintain aspect ratio idea. The answer isn't great here too but there is some hope in the way of CSS3 background-size: 100%; (that will keep the aspect ratio). Only supported by Safari, there is a firefox one (-mozilla blah blah blah) but I couldn't get it to work. It'll need javascript but I couldn't even find an answer with that that didn't involve adding wrappers, even tables!. Case closed :-( BR, CB On 13/07/2010, at 5:22 PM, Chris Blake wrote: Hi, Ok I have an image for my background. It's repeating but because it's not a tiling pattern it looks odd if you are zoomed out so far that you can't see it. One option could be to remove the repeating and have some kind of effect, e.g. gradient, that dissolves the image into a suitable background colour. But I don't really want to do that. What I'd like is to flip the image horizontally and vertically when it is repeated so that the images are seamless (mirrored). I have found some CSS that will flip an image but not that's not really what I want. I think it's going to involve some javascript and CSS so can anyone help with pointers? TY, CB __ 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-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] browser check pls -- intermittent problem in ie8
On 13/07/2010, at 11:50 AM, snak detek+0r wrote: Intermittent is generous, actually. My client was browsing in ie8 at 75% zoom, and saw the problem pictured here http://bit.ly/cxZRUU but I can't replicate it. Any one else able to get this to happen in ie8 or other? Real site is here: http://bit.ly/dddkTA Is it common for zoom to break layout? Or is it just some quirky ie rendering problem (which did see a bit of while I was poking around...). Thanks in advance, josh I can replicate it in mac os x safari 5 by zooming out 3 times (apple +). Mine breaks if I zoom out like that too. __ 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] browser reports please
I did not look at the demo. With regard to your page, setting type in pixels is not a good idea. In general, the culprits as far as type is concerned, is setting fonts with line-height set in pixels, and hard-coding a height on blocks containing text-type. Just for kicks, try resetting your horizontal-navigation bar: pretend you do not have, nor have ever heard of, Photoshop. 1. 'hard coding heights on blocks containing text-type' - that must be done by Joomla or the template. 2. 'line-height set in pixels' - what should I use? It's a menu rather than a paragraph. 3. 'try resetting your horizontal-navigation bar' The main reason I chose this template, framework was because of the menu and now you're telling me it's rubbish. 4. 'nor have ever heard of, Photoshop' - So I wasted three years at university then :D Solutions to markup validation problems are often easily resolved by running the page through Tidy Online [1] [backup your original page before doing so]. That's great except it doesn't teach me what the problem is, and when it's coded by Joomla, then I can't change it anyway. I am so happy the days of IE6 are finally going away but I seem to be faced with a new problem - display sizes. I appreciate you may have bad eyes and/or a whopping great monitor but I feel that because of this designs are having to be uber-basic once again. 16 pixels minimum - are you kidding me!? I've also been a little disappointed hearing user of this list telling people to stay away from animation because at the end of the day it is subjective, and/or you may be designing for a client that has requested it. Since I have started using Joomla and customising templates like this I seem to be getting a lot more work. I'll get onto the template developers about this minimum font size thing. Cheers, CB __ 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] browser reports please
Hi, http://blakeys.com/design/index.php/en/blakeys-websites-introduction I am just playing around with getting some things to work and the imageflow and layout looks fine in mac os x; safari 5 and Firefox but my friend has just sent me a crazy jpg showing the two columns underneath being all over the place. Please let me know what you see. You'll have to turn on javascript for this one I'm afraid. Any constructive tips would be most welcome. Thanks, CB __ 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] background layering, transparency help
Stuart King wrote: Hi : I need to logo to be on top. 2. I need the yellow background to be at 75% opacity 3. I need the text and image in the .mc_50 and .mc_50r classes to be at 100% opacity Please help URL: http://www.clarksburgwineco.com/index_sk.html thank you. --Stuart aside A cup of tea and perhaps a little more passive approach to the tyography might be nice, too... /aside Best, ~d Haha, I'll have a cuppa too. But I think it's pretty cool. Just use a 1x1px tranpsarent PNG background image (repeat) for your opacity problem. It'll just make it easier. Menu is a bit tricky to navigate - bigger maybe. The main body of text could do with more space to the left. Considering you are using browns everywhere I think you could get away with using two fonts for headlines e.g. H1: something; H2: something else. If you're out off tea a few crates of wine will do. Cheers, CB __ 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] styling non-english fonts
Hi, I would have thought the idea wold be to find out what fonts are installed in the language packs - install. Specify fots before choosing 'serif' e.g. arial helvetica, serif but using the names of the fonts in the system. How can you specify the language if it's a multi-lingual site? I have started playing around with Joomfish recently so I am very interested in all this stuff - especially because I live in Asia. TY, CB On 19/06/2010, at 3:02 AM, Angela French wrote: Well, I'm on my 7th out of 11 languages today, and only Khmer proved to be trouble so far.And yes I am adding the xml:lang attribute to the content div . And I specify UTF-8 in the meta tag. -Original Message- From: Mark Richards [mailto:mark.richa...@date.com] Sent: Friday, June 18, 2010 12:00 PM To: Angela French; css-d Subject: RE: [css-d] styling non-english fonts From: Angela French Subject: [css-d] styling non-english fonts I am creating some foreign language pages. Cambodian/Khmer renders vastly different font sizes between browsers. Other than making style sheets for each browser to style all my page elements, is there some other way? I've found that different browsers choose fonts differently, causing the appearance of the page to vary widely. For example, my personal site asked for Serif font-family and displayed Chinese text. IE6 used a blocky sans font, IE 7 and 8 used a serif font, Firefox 2 used a serif font, and Firefox 3 used a mix of blocky sans and serif. The solution for Firefox, in my case, was to apply a lang attribute to the elements in question, thus instructing Firefox to choose Chinese fonts for all the characters instead of trying to use Japanese fonts for some and Chinese fonts for others. Once I had the page looking ok in first-class browsers (IE6 still broke) I left it at that, but you will probably want to specify some fonts and font-sizes in addition to the lang attribute. Mark __ 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-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] IE8, CSS 2.1 page-break-inside: avoid problem
Salut,
It's a strange question for the list but I am going to give answering
it a go because I can't sleep.
First off I looked at your HTML (I don't really care which fancy way
you got to it - that's the bare bones).
...
/div
br
div class='Notice' style='left:0cm'
br is not a 'page break'. The br tag inserts a single line break.
W3schools.
However it does seem possible to have page breaks, recognise by
printers, in HTML pages via CSS. This CSS can be applied to many tags
as much as it can be applied to line-breaks (br).
Have a look: http://www.boutell.com/newfaq/creating/pagebreak.html ,
http://www.cybertext.com.au/tips_HTML_pagebreak.htm
, and this one seems to be doing something similar to you
http://www.velocityreviews.com/forums/t164455-how-to-add-a-page-break-to-a-html-page.html
Try this:
div.Notice {
width:10.03cm;
height:2.50cm;
position:relative;
page-break-after: always;
}
or just read one of the links I provided before.
Let me know if that helps. I can't believe I even tried to answer that
with all the mumbo-jumbo at the start of the message.
Au revoir, CB
On 16/06/2010, at 5:45 AM, Stéphane Carnot wrote:
Hi,
Still stucked.
Really nobody has an idea ?
JYves
De : Stéphane Carnot stephanecar...@yahoo.fr
À : css-d@lists.css-discuss.org
Envoyé le : Mar 8 juin 2010, 10h 31min 46s
Objet : IE8, CSS 2.1 page-break-inside: avoid problem
Hi all,
This is my 1st post in this list, so please forgive me if i forgot
something :-)
- Windows Vista Business SP1 (French) Microsoft, Internet Explorer
8.0 6001.18904 -
I have a desktop application which generates html pages from SQL data.
Then, with a WebBrowser object, I send these pages to print or
preview (Exec Web method).
I can’t make the CSS 2.1 page-break-inside work
However with IE 8 this should work (Trident - Comparison of layout
engines (Cascading Style Sheets)).
I’ve read the W3 documentation, Microsoft documentations (Defining
Document Compatibility, page-break-inside Attribute |
pageBreakInside Property) and Vitaly Sharovatov’s article (IE8
Rendering Modes theory and practice) and I added in my header:
Code :
meta http-equiv=X-UA-Compatible content=IE=8/
But it doesn’t work either.
I’m totally newbie with CSS :-(
Any hint?
TIA
JYves
My test files :
http://obaobaobao.free.fr/sample01.html
http://obaobaobao.free.fr/sample02.html
http://obaobaobao.free.fr/sample03.html
__
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-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] Pure CSS fisheye menu with icons: a demo
On 16/06/2010, at 5:44 AM, tedd wrote: While it's neat, but it's a misnomer. That's not a fisheye, it's just a magnification. A fisheye is like looking through a fisheye lens. Here's a fisheye picture for example: http://en.wikipedia.org/wiki/File:Fisheye_lens_room.jpg The perspective is distorted (i.e., no straight lines) Cheers, tedd Hmmm, you're right but you can't blame him when the creators of the javascript versions are using the same terminology : http://safalra.com/web-design/javascript/mac-style-dock/ I messed with this style for ages a long time ago and never got the results I wanted unless I used flash so I gave up. I like this technique but can you get it to magnify from the centre point of the image outwards? Oh no I did use it on something - http://www.redrunner.co.uk/ After the first rollover the menu uses the effect i wanted on rollover (it warps of to the side slightly the first time). However what i really wanted was that they all stayed in the width of their containing div, expanded from the centre point outwards, and depending on how close you were to the centre, how much the image expanded. i saw it done by some real wizards, I asked how but they were too busy to tell me. Bar stewards. cb __ 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] link trickery
Hi, I have a Joomla module installed that feeds articles into a small block. The module lets me choose show or hide the 'read more' link, which I have hidden. For now I do not want people to click on the title or read more link to go the article, it is simply for show. However the title is still clickable and I don't want it to be. Is there anyway to disable a link via CSS? I want to display it, just not have it working as a link. I have thought that an option (trick) could be to remove text decoration of underline on rollover and possibly change the cursor to be ?? (the standard one when hovering over normal text). At least this way user will not see the cursor for link, and not try clicking. BR, CB __ 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] semantic accessible animated drop up menu
On 03/05/2010, at 10:27 PM, David Laakso wrote: Ido dekkers wrote: hello does anyone know about a drop down/up menu with JS animation that is also accessible and semantic? thanks http://tjkdesign.com/articles/dropdown/default.asp ~d I've used this before. Small and easy: http://www.leigeber.com/2008/11/drop-down-menu/ __ 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] Safari Issue
Hi, The lions keep eating my zebra! http://www.accidentclaimwestmidlands.co.uk/ I have been handed a couple of amends to do on this website and I am seeing a strange problem in Safari. The flash movie is not in it's container! I don't see it in FF so my handy little firebug can't help and I really don't know how to fix it. Is there a special string (like *html, mozilla or something) I can use to target safari only (maybe something targeting webkit)? Thanks, CB __ 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] Safari Issue
Hi,,, CSS DISCUSS!!! I've never had a personal response from the CSS-d list like this before. It's hysterical. In my defence I will refer to the very first sentence that sparked this (but remember to read the response.). I have been handed a couple of amends to do on this website CB :-) Hi Chris - Just a couple non-CSS observations that I hope are received in the spirit they are intended, which is just one of improving web experiences for all of us. Two things jump out at me on the link you provided: 1) One is the lack of the need for Flash at all in order to have the features presented: a) a rotating quote - very doable with jQuery or javascript, and b) the blinking phone number - which I'll address in a minute. The iPad has a bunch of people talking about Apple's failure to include Flash support. Whether one agrees or disagrees, one thing comes up in a lot of those conversations. That is the ability of HTML and other, more accessible tools, to do much of what Flash is used for. This is a good example. 2) The blinking phone number really is not much different than the old blink tag in HTML. It's popularity fell out of use for good reason. Such presentation of content is considered annoying by many. My own opinion as a user is that I agree. That one feature alone would be the thing that would make me quickly leave the site. I think it's a much more professional approach to not have blinking text, essentially screaming at the potential customer. Just my 2¢, and I understand you may not have any control over what people are asking you to do. But you're welcome to pass on my comments if you think it would be of any benefit since I represent Joe Customer, un-biased. Have a great day, Christopher Akins Web Coordinator City of Springfield, MO Hi, The lions keep eating my zebra! http://www.accidentclaimwestmidlands.co.uk/ I have been handed a couple of amends to do on this website and I am seeing a strange problem in Safari. The flash movie is not in it's container! I don't see it in FF so my handy little firebug can't help and I really don't know how to fix it. Is there a special string (like *html, mozilla or something) I can use to target safari only (maybe something targeting webkit)? Thanks, CB I won't help you write your fascinating dissertation you leper . Great values though! Quite revolutionary.??? WTF, CB __ 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] parenting issues
Hi, I have added page class suffix to some pages on my website giving the body id=page class=corporate. I want to rewrite the CSS for the h1 in only the corporate pages. However my body.corporate gets overwritten by #page styles. What order can I layout these IDs, classes so that I only style h1 for corporate body? Thanks, CB __ 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] parenting issues
Hi, body#page.corporate That has worked! Thank you so much! Cheers, CB On 23/04/2010, at 7:27 PM, Christian Kirchhoff wrote: Am 23.04.2010 12:18, schrieb Chris Blake: Hi, I have added page class suffix to some pages on my website giving the body id=page class=corporate. I want to rewrite the CSS for the h1 in only the corporate pages. However my body.corporate gets overwritten by #page styles. What order can I layout these IDs, classes so that I only style h1 for corporate body? Thanks, CB __ 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/ Maybe this has some good ressources for understanding css specificity: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#cascade A selector like body#page has a higher specificity than body.corporate. But body#page.corporate should have an even higher specificity. Best regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ 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-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] Unbelievable CSS Trick
On 22/04/2010, at 8:21 AM, David Hucklesby wrote:
On 4/21/10 12:07 PM, Chris Blake wrote:
Hi,
http://s318194674.websitehome.co.uk/index.php?option=com_contentview=articleid=132Itemid=1
I was trying to apply a white, 50% opaque, background colour to a
wrapper via CSS and see what happened! I have no idea CSS could do
something like that!
[...]
Here is the css (4 lines!):
http://css-tricks.com/css-transparency-settings-for-all-broswers/
As already suggested, a semi-transparent PNG will work in most
browsers,
with the exception of IE before version 7. You can use a filter for
that
browser.
You can combine RGBA background-color with an image for older
browsers,
and a filter for IE 5/6 like this:
div.wrapper-body {
background: url(images/white-50pct-1px.png);
background: rgba(255, 255, 255, .5);
}
/* IE 5-6 only */
* html div.wrapper-body {
background: transparent;
filter:
progid:DXImageTransform
.Microsoft.gradient(startColorstr=#80ff,endColorstr=#80ff);
height: 1%; /* give IE layout */
}
Hope this helps.
Cordially,
David
Hi,
Ok everyone, thanks for your help. I have gone for a simple background
png, and if it's not supported by IE6 and earlier then users should
update their browser! I've also tried a new, wider than average width,
so I hope my audience aren't dinosaurs, with fossil computers!
I don't like the way that my site loads, it's probably and is a new
post but what I want is this image to be loading first. What is the
best way to do this? It's annoying because the template I am working
on from reads custom.css last (so that template updates do not affect
changes) and then module styles (but #page parent overwrites those).
Maybe I could load it into the header of the html? That's not so easy
cos it's all database calls (i could do it in drupal, but this is
Joomla which i am new to). Anyhow I really want to do this so what is
the best way? I can add it to the first style sheet in the list,
possibly in the head, but I just don't know.
I will make anew post. Thanks on this one!
Cheers, CB
__
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] Image loading order
Hi, I have applied a simple transparent PNG to my wrapper div. I would like that to load as one of the first images. What is the best way to do this? Thanks, CB __ 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] Unbelievable CSS Trick
Hi, http://s318194674.websitehome.co.uk/index.php?option=com_contentview=articleid=132Itemid=1 I was trying to apply a white, 50% opaque, background colour to a wrapper via CSS and see what happened! I have no idea CSS could do something like that! It's tuned the whole lot into a ghost website! I'm sure it's all to with inherent styles but wt... that is some crazy stuff! Here is the css (4 lines!): http://css-tricks.com/css-transparency-settings-for-all-broswers/ works in safari and ff on mac. the article reckons all browsers. I just want to make a div with css applied to it to get a background colour appear at 50%. Any ideas? Cheers, CB Ghost websites, spOOky. __ 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] Text next to logo
Hi, Your title div has clear: both; clearing the float! cheers, CB On 20/04/2010, at 7:16 PM, Brian M. Curran wrote: Hi All, Does someone know why the text in my masthead is not aligning to the right of my logo, but rather it is sitting below it? http://www.draftingservices.com/logo.html Sincerely, Brian __ 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-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] validation with no warnings
Hi, I am pleased that I managed to get this site done without asking the list for help! I did however post about doctype at the start and still didn't find the right answer. http://wch.redrunner.co.uk/ The index page just has one warning, the others have 3. I don't really get HTML and CSS briefs anymore (Drupal, Joomla) but if I do this is how I code. I'd love it if someone could tell me what doctype and UTF setting suits my style so that I can just strike that from my list. Link to an example or cut and paste the code into here would be great. Thanks, Chris __ 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] validation with no warnings
http://wch.redrunner.co.uk/ The index page just has one warning, the others have 3. I'd love it if someone could tell me what doctype and UTF setting suits my style so that I can just strike that from my list. Hi Chris, Your home page only has a single warning, which relates to the line- break in your doctype declaration. Instead of: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/ html4/strict.dtd write: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd or: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Your other pages are simply missing a content-type declaration; why not use the same one as your home page: meta http-equiv=Content-Type content=text/html; charset=UTF-8 FWIW, I use HTML4/strict (because I see no point in using XHTML since it's not supported properly by IE, but I still want everything to be as strictly defined as possible) and UTF-8 (for non-ASCII support, although I normally use character entities anyway). - Bobby Hi, OK thanks, I have changed all the pages now, but it seems as though I have to go through and change all the apostrophes, copyright symbols to HTML in order to pass. Home page has no warnings!! Excellent, thanks! Cheers, CB __ 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] validation with no warnings SOLVED
Hi, Thanks to everyone that replied. I have no figured out that HTML4/ Strict works for me and UTF8 is good too. I also learnt to change the preferences in my editor so that 'default file encodings' was 'Unicode UTF8' rather than automatic, which means that I do not need to use odd HTML characters for things like apostrophes (the keyboard one works just fine). Excellent news, I am so happy and feel that I understand it a bit better now. Cheers again, CB On 12/04/2010, at 11:22 PM, Chris Blake wrote: http://wch.redrunner.co.uk/ The index page just has one warning, the others have 3. I'd love it if someone could tell me what doctype and UTF setting suits my style so that I can just strike that from my list. Hi Chris, Your home page only has a single warning, which relates to the line- break in your doctype declaration. Instead of: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/ html4/strict.dtd write: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd or: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; Your other pages are simply missing a content-type declaration; why not use the same one as your home page: meta http-equiv=Content-Type content=text/html; charset=UTF-8 FWIW, I use HTML4/strict (because I see no point in using XHTML since it's not supported properly by IE, but I still want everything to be as strictly defined as possible) and UTF-8 (for non-ASCII support, although I normally use character entities anyway). - Bobby Hi, OK thanks, I have changed all the pages now, but it seems as though I have to go through and change all the apostrophes, copyright symbols to HTML in order to pass. Home page has no warnings!! Excellent, thanks! Cheers, CB __ 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-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] How to handle cached styles...
I use safari and it pretty much does a hard refresh every time. Sometimes with firefox i hold the shift key whilst refreshing. On 13/04/2010, at 3:02 AM, Climis, Tim wrote: Hi all, I wanted to get some collective input on how you all handle updating styles that are cached. Double clicking the refresh button will usually do the trick. There's also private browsing mode, which will keep things from caching. ---Tim __ 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-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] doctype
HI, Although it's not a CSS question it is strongly related to validation which is something we all care about at css-discuss so I am sticking my neck out a bit but hope to get an OK response. I have validated a very simple layout and although it validates I am getting a few warnings: http://validator.w3.org/check?uri=http%3A%2F%2Fwch.redrunner.co.uk%2Fcharset=%28detect+automatically%29doctype=Inlinegroup=0user-agent=W3C_Validator%2F1.767 Most seem to be to do with the doctype which is something I know little about. Basically I want to chose the easiest one to use (easy in the sense of validation). The results gave me a link to a page of different doctypes and what I think is I should be choosing either HTML 4.0.1, or xhtml 1.0, Transitional. Am I right? What's the difference? The site I am going to be using is going to be strictly HTML, CSS and images. I may, depending on results need to use a PNG fix. Thanks, CB __ 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] doctype
Hi, So I have made it 'strict' HTML, but it is now giving me some rubbish about character encoding. OK I have not added it because when i do it seems that it can't be validated. !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd html head titleWorcester Community Housing | Rewards/title I left the gap because that is where I have tried to put this line: meta http-equiv=Content-Type content=text/html; charset=utf-8 / What gives, I can't even pass 100% before writing anything! Thanks, CB On 01/04/2010, at 11:58 AM, Chris F.A. Johnson wrote: On Thu, 1 Apr 2010, Chris Blake wrote: HI, Although it's not a CSS question it is strongly related to validation which is something we all care about at css-discuss so I am sticking my neck out a bit but hope to get an OK response. I have validated a very simple layout and although it validates I am getting a few warnings: http://validator.w3.org/check?uri=http%3A%2F%2Fwch.redrunner.co.uk%2Fcharset=%28detect+automatically%29doctype=Inlinegroup=0user-agent=W3C_Validator%2F1.767 Most seem to be to do with the doctype which is something I know little about. Basically I want to chose the easiest one to use (easy in the sense of validation). The results gave me a link to a page of different doctypes and what I think is I should be choosing either HTML 4.0.1, or xhtml 1.0, Transitional. Am I right? What's the difference? I recommend 4.01 strict. If it's a new page, you shouldn't use transitional. That's for the transition of an old page to valid markup. Here is the list of valid doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html The site I am going to be using is going to be strictly HTML, CSS and images. I may, depending on results need to use a PNG fix. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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] Reset CSS
Hi, Anyone know of a standard and simple reset.css file to use. I finally have a 'back to the old days' job, a website purely HTML and CSS, and standards compliant - what a cool challenge. The design has been done by print designers so it's not going to be easy either! Thanks, CB __ 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] Reset CSS
From: Chris Blake ch...@3pointdesign.com Anyone know of a standard and simple reset.css file to use. This is a good, recent article from our very own Thierry: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ I think the general point to take from the current prevailing opinion is: don't use a reset 'blindly', think about the effects it's actually performing and adjust styles accordingly. IMO, resets are far more relevant for quick mockup work and designing in the browser rather than final production work. I had a good read of this, ad then thought it might be a slim down version but it was bigger then others that I found. I attached it anyway to see what happened and there was scroll in the borwser, and I haven't even put content in yet. I may just do without to begin with. Thanks, CB __ 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] Die focus, die!
Hi, There's an address for admin questions like that and I think it is: cs...@css-discuss.org Reply under the quote, if you remember, I often forget like in this instance. As for your mac mail question I would stop over-thinking it. I click 'new' type 'css' the address appears, tab down, give a new subject (thread) and bob's your uncle. Sometimes you may just want to reply to one part of someone's post - you can do this by highlighting that part, and then clicking reply and then only the highlighted part of that email will be seen in the reply. css-discuss = discuss css Chairs, Chris On 25/03/2010, at 11:10 PM, Charles Miller wrote: I have two questions about protocol, or whatever it might be called. 1. Is it considered proper to put the reply after the quote? I personally much prefer the reply first. If I'm reading a thread, I have the quote already in mind, and like it when I don't have to manually scroll down to see the reply. But if manners suggest quote first, I can do that. 2. I suppose this is a Mac Mail question. I thought one could right click on the list address in a message, choose New Message, and get a new message with a new thread. I *thought* I'd confirmed that. But lately my new threads have been grafted at the top of old threads. Sorry for that. Trial error will have to be employed to find the true path. Chuck M __ 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-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] content in table won't align vertically
Hi, The best editor for Mac OSX is Coda by Panic. It uses the Safari render engine (webkit) from your mac to preview your pages. http://www.panic.com/coda/ The next step is to use the firebug extension in firefox which is just a godsend for testing things on the fly. I might use Dreamweaver if I am creating a table, apart from that I haven't touched it in years. Hope that helps, CB MB wrote: I thought DW used webkit for the Live view on Mac OS X at least. There are a lot of webkit-based browsers, no? I have no experience of a version recent enough to support Live View : my last experience of DW was 8.0.2 Obviously, the Design view in DW is not about how it will look in a real web browser. I don't think this is obvious to the naive user at all. By putatively being a rendered view of the underlying source material, it leads naive and less experienced users into believing that that is what will be seen in a conformant browser. Even quite experienced former colleagues have been surprised at the differences between DW's design view and the view in a conformant browser. It would be nice if the Design view always showed CSS according to the spec at least, but DW have always been barely usable for CSS-oriented design and the interface even in the current version is full of easy GUI starting points for bad code. But even so, it is very possible to do compliant good web design in Dreamweaver. As always, it's about the knowledge and skill of the author/developer. I completely agree : I migrated from HoTMetaL PRO to DW some years ago, and much as I miss the tags on view of HM PRO, I have come to regard DW as a quite acceptable substitute so long as one remembers that it is simply an interface between coder and page, rather than a fully-fledged WYSIWYG design tool. Philip Taylor __ 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-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] In HTML CSS vs. Separate style sheet CSS
On 16/03/2010, at 12:18 AM, Chris Blake wrote: On 16/03/2010, at 12:01 AM, Climis, Tim wrote: 100%px isn't valid, unless my programming mind is tying to make too much sense. I think that's the problem... His template is putting in 'px' even though he doesn't want one. And he wants to have a width of 100% in spite of it. Stylesheets should never overwrite a style defined in the actual tag (Unless it's on the user's side). On the other hand, that gave me an idea that may work (completely untested mind you): Invalid styles should be ignored. So, if you specify width: 100%px in the inline style, and then width: 100% in the style sheet, it might actually get applied. It would be among the ugliest hacks I've ever seen though. ---Tim You're right that's what I am trying to do. I will give it a go for the sake of experimentation. I may even write width(px): uglyhack% in the joomla backend so that it can't even get a number from it! style=width: uglyhack%px ;height: 255px; There goes validation ;-P Thanks to both! Cheers, CB The Hack worked but it's made a hash of the animation and navigation of the module. It might come in handy for something else though. Thanks! CB __ 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] In HTML CSS vs. Separate style sheet CSS
Hi, I think that I already know the answer to this one but it's worth a shot: I am using Joomla and ripping a template apart to make it work for me. However when it comes to some of the modules I have to set the width in pixels via the Joomla backend and the resulting code looks like this: div class=basic-h div id=yoo-scroller-1 class=yoo-scroller style=width: 960px;height: 255px; I tried to stick in a percent sign but it wrote it like this: style=width: 100%px;height: 255px; Now the 'custom.css' sheet is the last CSS sheet in the list and is overwriting most of the template's own. However I don't stand much of a chance of getting around this styling unless you guys no of one? Thanks, CB (BTW I am using using a fluid layout and would like this scroller to be the same) __ 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] In HTML CSS vs. Separate style sheet CSS
On 15/03/2010, at 11:46 PM, Jack Timmons wrote: On Mon, Mar 15, 2010 at 10:42 AM, Chris Blake ch...@3pointdesign.com wrote: Hi, I think that I already know the answer to this one but it's worth a shot: I am using Joomla and ripping a template apart to make it work for me. However when it comes to some of the modules I have to set the width in pixels via the Joomla backend and the resulting code looks like this: div class=basic-h div id=yoo-scroller-1 class=yoo-scroller style=width: 960px;height: 255px; I tried to stick in a percent sign but it wrote it like this: style=width: 100%px;height: 255px; Now the 'custom.css' sheet is the last CSS sheet in the list and is overwriting most of the template's own. However I don't stand much of a chance of getting around this styling unless you guys no of one? Thanks, CB (BTW I am using using a fluid layout and would like this scroller to be the same) 100%px isn't valid, unless my programming mind is tying to make too much sense. Stylesheets should never overwrite a style defined in the actual tag (Unless it's on the user's side). http://www.w3.org/TR/CSS2/cascade.html#specificity I would validate your CSS first and go from there. Hi Jack, Of course! I wouldn't dream of using 100%px . How could user's side help? It would still have to load another style sheet and then go through the same HTML resulting in PX not %. ? BR, CB __ 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] In HTML CSS vs. Separate style sheet CSS
On 16/03/2010, at 12:01 AM, Climis, Tim wrote: 100%px isn't valid, unless my programming mind is tying to make too much sense. I think that's the problem... His template is putting in 'px' even though he doesn't want one. And he wants to have a width of 100% in spite of it. Stylesheets should never overwrite a style defined in the actual tag (Unless it's on the user's side). On the other hand, that gave me an idea that may work (completely untested mind you): Invalid styles should be ignored. So, if you specify width: 100%px in the inline style, and then width: 100% in the style sheet, it might actually get applied. It would be among the ugliest hacks I've ever seen though. ---Tim You're right that's what I am trying to do. I will give it a go for the sake of experimentation. I may even write width(px): uglyhack% in the joomla backend so that it can't even get a number from it! style=width: uglyhack%px ;height: 255px; There goes validation ;-P Thanks to both! Cheers, CB __ 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] multiple IDs and classes to one div - which one speaks loudest?
Hi,
I want to targetdiv#yoo-toppanel-1 in my CSS without disturbing
the styling already in place for div.yoo-toppanel.
Here is the HTML:
div id=yoo-toppanel-1 class=yoo-toppanelcontent/div
And it reads this CSS first:
#yoo-toppanel-1 div.yoo-toppanel div.panel-container {
position: fixed;
left: 50%;
width: 100%;
height: 0px; /* overlapping link bug */
margin-left: -50%;
z-index: 15;
}
(mine) and then this:
div.yoo-toppanel div.panel-container {
position: absolute;
left: 50%;
width: 100%;
height: 0px;
margin-left: -50%;
z-index: 15;
}
(default)
But because of this it is disregarding 'mine' and choosing default.
So I messed with the parenting of it a bit and used:
#yoo-toppanel-1 div.panel-container {
position: fixed;
left: 50%;
width: 100%;
height: 0px; /* overlapping link bug */
margin-left: -50%;
z-index: 15;
}
but then it reads both and causes a big mess.
What I am trying to do is not touch the default styling and use only
'mine' which is read first. I think the problem maybe to do with #yoo-
toppanel-1 being a sibling of the class.
Any pointers?
Thanks, CB
__
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] SOLVED multiple IDs and classes to one div - which one speaks loudest?
Here is the HTML:
div id=yoo-toppanel-1
class=yoo-toppanelcontent/div
And it reads this CSS first:
#yoo-toppanel-1 div.yoo-toppanel div.panel-container {
But because of this it is disregarding 'mine' and choosing
default.
Hi Chris,
It's actually 'disregarding' your CSS because '#yoo-toppanel-1
div.yoo-toppanel' doesn't match; that's looking for a DIV element
with a class of 'yoo-toppanel' INSIDE an element with an ID of 'yoo-
toppanel-1'.
To match that element, you actually want:
#yoo-toppanel-1.yoo-toppanel
OR
div#yoo-toppanel-1.yoo-toppanel
OR just
#yoo-toppanel-1
which will probably 'win' on specificity, depending on the other CSS
present.
- Bobby
You inspired me to give it another crack and what i did was change:
#yoo-toppanel-1 div.panel-container{ -to- div#yoo-toppanel-1
div.panel-container {
and it's worked!
I don't understand why every class or ID in this module's default CSS
has to start with 'div' but that's what'd been crushing my change in
parenting idea. I guess that IDs are stronger than classes then.
__
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] FF 2.0 rendering issues - blank content
Hi Eric, To stop your rollover images blinking on first rollover: place both images side-by-side and save it as one image. Then use the background position property to move the image on rollover/hover. apart from that it all looks good to me - mac, safari. Cheers, CB On 10/03/2010, at 1:04 AM, Eric Heitz wrote: Site recently posted live. Passes CSS Validation and has minor HTML validation issue. http://www.eyecarecincinnati.com Homepage is showing correctly but moving within the site, example Our Doctors page, the header and footer shows but not the content. I am unsure if this is a CSS issue or just an old browser. Really not even sure the right place to start. Any input would be great. If this goes off topic, I will throw it out the door. - Thanks Eric __ 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-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] Why JavaScript and CSS can work well together
Eric Meyer once said: JavaScript will save us all. I started to effectively work with JavaScript almost a year ago, when I discovered the powerful features of jQuery and the DOM. I have to say that JavaScript and CSS can work well together, especially when dealing with browsers inconsistencies and automating some repetitive tasks. Did you know, for example, that with jQuery you can automatically clear floats without manually adding the infamous .clearfix class? Of course I'm talking about unobtrusive JavaScript, but you get the idea. Sometimes on this list I see people who try to fix some problems with long and tedious CSS procedures that could be easily solved with a single JavaScript statement... and in a cross-browser way! So here's a little piece of advice: don't fear JavaScript as the boogey-man! Try to discover its features, say, rediscover them, and you will see how your daily work on web sites is greatily improved. I like javascript too, but I haven't used it for clearing floats and suchlike - just fancy sliders etc. As I expected you are being shot down for being O/T and rightly so. OK some tedious fixes have other seemingly less confusing work arounds but having an understanding that websites can work without the use of javascript is a very important lesson for all beginners. i feel that only once they have a bit of experience and of the pains that can go into coding should they start to consider using other methods, and by that point they may have the knowledge so that they don't need to. There's also lots of other, possibly even more confusing, issues when using javascript such as conflicting scripts, load times, what library covers all. You're speaking at the beginner and we have mostly all been there and I am sure that getting to grips with these issues in CSS is a much better course of action than trying to get your head around javascript as well. You should be humbled by Al Sparber's answer because his company or employer Project7 do a lot of work creating neat cross-browser javascript apps, and even he is saying that javascript is not the answer to the type of issues you referenced. Sorry to join the list of beat-downs, I wouldn't usually bother but you targeted your comments at beginners, and I disagree with them and wouldn't recommend this course of action for beginners. maybe they should do an episode of Sesame Street on the topic? Big bird says 'hell no' to javascript fixes, but cookie monster is all over it like ... cookies! Big Bird wins and then all the beginners have a sing-song. OK I have officially lost the plot! Regards, CB __ 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] :: makeready ::
On 23/12/2009, at 8:08 AM, David Laakso wrote: David Laakso wrote: I'd appreciate your comments and suggestions on this site. http://chelseacreekstudio.com/ David, I loved it before and I still love it now. There are a few things that I would like to see changed though. 1. Your awesome logo does not need a drop shadow box around it. 2. As someone else noticed there is a white box in the upper-left hand corner. Possibly this is so your logo can sit against a white background but what you could do is have the repeating gradient at the top of the page, and use a white - transparent radial fill around the logo (will need png fix). Another option is to lose the small bt of body gradient from the left and align gradient to start above the page content and not the menu. 3. 'Below are thumbnail images of some websites' - they're not really, they're logos of clients and it is in fact a client list. You can lose most of that paragraph just by saying, 'here is a list of some clients that I've worked with'. There's no need for this to be expandable/ collapsible. I think every user will want to see so why make them work for it? 4. If you choose against previous then try to think about naming your sets. Why are they grouped? I.E. rename sets to something like: Set 1 = Creative industries, Set 2 = Communications, Set 3 = Personal 5. The main image is needed and placed in just the right spot but I do think it should change from page-to-page. Your choice of imagery is part of your brand and I REALLY like it. It gives the user breathing space and room for them to interpret however they want. Lens flare is coming back! I am serious, as tacky as I used to think it was (being one of the first effects anyone plays with when they get PS) you have used it well and trust me it is something that will be appearing on innovative and modern designed website (e.g. mac) in the not so far feature. Well done for getting there first! 6. I would title each one, not the page title, and not over the imagery - but neatly below as if hung in a gallery. If it's your artwork, say so - it shows that you are creative and not solely all about the code. It doesn't seem that you want the type of clients that will use stock imagery so don't let them think that's what you're about. 7. I would make 'Chelsea Creek Studios' a unique font (a word-mark). It's a lovely name and by simply making the first letters of words a capital is too subtle. 8. I'd knock the size of those lines down a few pixies too. I know plenty of people that this would appeal to, it gives a strong sense of who you are and that message to me comes across as sincere, trust-worthy, passionate and smart which are awesome traits that the money-grabbing world just doesn't get. Well done you! Please lose that drop shadow around your logo. It sticks out like a sore thumb and trust me it's doesn't need it. It's wicked and in fact I wouldn't mind it if you could do something like that for me. Send me a message if you're interested. Cheers, Chris P.S. Get in touch about that logo __ 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-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] Weird display in Safari
With a mac download too! Cheers! CB On 16/12/2009, at 3:21 AM, Bill Braun wrote: Chris Blake wrote: Thanks David, I've been ignoring validation a bit too much recently. I recently started using Amaya from W3 for markup (http://www.w3.org/Amaya/User/BinDist.html). While it has its quirks and idiosyncrasies, it only gives the green light when the code (HTML and CSS) is valid. Very handy. Bill B __ 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-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] Weird display in Safari
On 15/12/2009, at 3:45 PM, David Laakso wrote:
Chris Blake wrote:
Hi,
I am having the exact same problem!
http://football.redrunner.co.uk/
Everything is OK in all my other browsers, apart from Safari, my
current browser of choice.
Your page is broken on this end in Safari, WebKit, Opera, IE/8.
SeaMoney, and Chrome.
Thanks David, I've been ignoring validation a bit too much recently.
The problem I was having now appears to be fixed - but I had to remove
something. Do you have any tips how I can make a div a link and still
validate. What I was doing does not validate:
pa href=?=node/1div id=hoologo/div/a/p
#block-block-2{
background: url(images/logo.png) no-repeat top left;
height: 59px;
width: 370px;
clear: both;
}
Hmm - maybe it's because I did not give #hoologo any css (especially
display: block;)
Is that right or am I way off the mark.
Thanks CB
P.S. Why can't I validate my CSS? - this is the path
http://football.redrunner.co.uk/httpdocs/themes/framework/style.css
If anyone knows anything about these fairly new safari problems
please
let us know.
Thanks, CB
Please validate, bottom post, or start your ow thread. Thanks.
~d
__
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-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] Strange display in Safari
Hi, I am having the exact same problem! http://football.redrunner.co.uk/ Everything is OK in all my other browsers, apart from Safari, my current browser of choice. If anyone knows anything about these fairly new safari problems please let us know. Thanks, CB On 15/12/2009, at 1:19 PM, Andzia wrote: Hello, recently I have added two banners to the right of a centered column on my website, and since then, the rest of the content (which should be below) appears to the right in Safari. Other browsers display it correctly (I'm using Firefox). Before Safari was the only browser where the website looked identically like in Firefox... so what is wrong now? Here is the url: http://klikerlab.pl/ Thanks in advance, Ania -- The customs of your tribe are not laws of nature. George Bernard Shaw __ 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-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] ADMIN: Recent quietude
On 29/10/2009, at 1:32 AM, Eric A. Meyer wrote: Hi all, I wanted to pop in for a moment to say that you may have noticed a recent slowdown in list traffic. You're not mistaken-- things are, indeed, slower 'round these parts. This appears to be in part due to everyone's favorite parasites: spammers. To quote the Evolt server sysadmin: In the past couple of weeks, we've been hit by a large number of spammers which is causing the SMTP server to get overloaded. This will cause some MTAs on the sender side to decide that lists.evolt.org is down and, in some cases, does not retry. So if you sent mail to the list and it just never showed up, that's most likely why. The flood of spam is choking off legitimate traffic. If you sent a message to the list more than a day ago and didn't get a message delayed, will try again later notice, try sending it again. Unfortunately, the only things I can suggest are that you keep copies of all your outgoing messages just in case you need to resend them, and to be patient. (Both of which I'll be doing with this message, as it happens!) SPAMMERS ARE NEARLY AS BAD AS INTERNET EXPLORER!!! __ 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] clearing spans?
HI, ul li class=views-row views-row-1 views-row-odd views-row-first span class=views-field-title a href=/blog-title title=This is the Blog Titlealt=This is the Blog TitleThis is the Blog Title/a /span span class=views-field-created label class=views-label-created Post date: /label Wed, 2009-10-14 12:49 /span /li /ul How can I stop the date sitting on the same line as the title? TITLE post date to TITLE post date I have tried to float the title and then use clear: both but it didn't work. Thanks, CB __ 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] clearing spans?
I had a play around and;
.views-field-created{
color: #AA;
display: block;
}
fixed the problem.
On 26/10/2009, at 6:05 PM, Chris Blake wrote:
HI,
ul
li class=views-row views-row-1 views-row-odd views-row-first
span class=views-field-title
a href=/blog-title title=This is the Blog
Titlealt=This is the Blog TitleThis is the Blog Title/a
/span
span class=views-field-created
label class=views-label-created
Post date:
/label
Wed, 2009-10-14 12:49
/span
/li /ul
How can I stop the date sitting on the same line as the title?
TITLE post date
to
TITLE
post date
I have tried to float the title and then use clear: both but it didn't
work.
Thanks, CB
__
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-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] styling different a-link states
helloo, a style=text-decoration: none; href=#link/a can i style the other states, e.g. hover, using this method of adding css or would i need to do it in the head? Thanks, CB __ 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] Site Check
Hi, http://www.redrunner.co.uk/rr/ Battling with Drupal and Javascript, but it's getting there. Let me know of any problems and if you have any fixes for them. There are a few niggles in IE7, but nothing major as far as I can see. Cheers, Chris __ 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] bold and italic
Hi, Anyone got much experience using bold and italic at the same time? What fonts support this, mac and PC? What happens if the font has bold and italic but not bold italic? Which one does it choose, if either? Thanks in advance, CB __ 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] shorthand elements
I agree. I have to write some styles on the fly i.e. div style=border: 1px soilid red/div and shorthand comes in very useful. However I only know a few so anyone with a useful to all of the ones available would be really appreciated. div style=background: url(img/pic.png) no-repeat top right;. As for the three value, I can get my head around it but just doesn't seem visually balanced in the code to leave one out, even if it's not needed. chris On 29/09/2009, at 12:07 AM, Bobby Jack wrote: --- On Mon, 9/28/09, tedd tedd.sperl...@gmail.com wrote: opinion I find reading other code (as well as mine later) much easier if longhand elements are used. After 40+ years of programming I can say the less cryptic the code, the better it is. This is because of self-documentation -- in short, documentation matters. /opinion Hi tedd, Interesting. To be honest, I find: margin: 10px 20px; far quicker to read, understand, and visualise than: margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; so what you say definitely holds for some of the time, but doesn't hold the rest of the time. I don't know quite what we should conclude from that though :) I remember I found the shorthand - particularly the 3-value version - annoying at first, but it now seems like second nature. I'd draw the analogy with the ternary operator in c-like languages. It's pretty confusing for beginners to understand but much more readable for those who are familiar with it. - Bobby __ 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-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] absolute, big z-index hidden by, you guessed it, IE
http://airora.redrunner.co.uk/node/1 (The spelling mistakes aren't mine.) The logo is too big for it's container, but it's positioned absolute with a massive z-index. IE7 does not like it and I am certain that I feel the same about IE. Oh yeh, it's making a mess of another site I am making too; http://www.redrunner.co.uk/rr/ __ 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] absolute, big z-index hidden by, you guessed it, IE
On 26/09/2009, at 4:39 PM, Philippe Wittenbergh wrote: On Sep 26, 2009, at 4:31 PM, Chris Blake wrote: http://airora.redrunner.co.uk/node/1 (The spelling mistakes aren't mine.) The logo is too big for it's container, but it's positioned absolute with a massive z-index. IE7 does not like it and I am certain that I feel the same about IE. The usual stacking levels problems in IE 6 7. the parent of the logo is relative positioned but the next block (the nav) is also positioned. Both have the same z-index (auto, = 0). The nav comes on top as it comes later in the markup, no mater what z-index you assign to the logo. The usual solution is to assign a z-index to the parent of the logo. Philippe --- Philippe Wittenbergh http://l-c-n.com/ That looks to have fixed it, thanks a bunch from the bouncey people and me! __ 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-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] web 2.0 style, 100% browser width backgrounds for header and footer
Hi, http://www.redrunner.co.uk/rr/?q=content/home-page# The design I am trying to recreate can be seen here: http://www.redrunner.co.uk/rr/themes/framework/img/RedRunner.jpg I would like to know how I can have two background images that repeat across the browser and still keep all my content in the 980px wide container. I have set a b.g. for the body, this is for the header section. I want to do the same for the footer, but the footer lives inside the container which isn't 100% width. The pages are also going to vary in size so having the header and footer background in 1 image won't work. Ideas that I have had are: 1. place the footer outside of the container and then make an inner div for the content of the footer with the same margin and width as the container (container 2). (I found a link demonstrating this http://cssgirl.com/examples/full-width.html ) 2. place a 'footer background image' div outside of the container, give it absolute positioning and a lower z-index. Problem was that it stuck to the bottom of the browser even if there was scroll. 3. Give #html a background image too. 4. ? I see this style being used all over the place (web 2.0) but I can't figure out how. Please help. Here's the bare-bones of a web page, feel free to insert any divs and css that may get this working. body style=background: url(images/bg.jpg) repeat-x top centre; container style=width: 950px margin: 0px auto headerblurb/header contentBLURB/content footercopyright 2009/footer /container /body Thanks, CB P.S. If anyone knows where the padding at the top of my #navcontainer is coming from then that would be a great help. I am using firebug now but when I make changes to likely culprits the problem still remains. __ 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] Amazing CSS
Hi, Managed to get it working, and stripped it of unnecessary babble. http://blakeys.com/cssdiscuss.html Cheers, CB On 16/09/2009, at 10:54 AM, Tim Climis wrote: On Tuesday, September 15, 2009 4:00:50 pm Chris Blake wrote: Using Just CSS, but maybe not as good. What do you think? I would agree with not as good. The problem is that it's not lit like the text is embossed. It's lit like a white shadow. It's particularly evident on the P. The inside middle of the P is highlighted with the light coming from the top right, while the outside middle had the light coming from the top left. It ruins the illusion and just makes my brain hurt. But I applaud the attempt nonetheless. ---Tim __ 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-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] IE6 - unwanted stretching of background image
Hi, http://welcome2aston.info/ I have a background image, using jquery PNG fix module for Drupal, and in IE6 the image stretches across the width of the div, rather than being positioned 'right top'. I have googled for this bug but no luck. I am unsure whether this problem was present before the fix was put in place so just wandering if any of you had experienced this before. TY, CB __ 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] Drupal - clearing floats
Hi,
I am working on this website: http://forge.redrunner.co.uk/?q=node/2
(specifically this page).
It is built via Drupal, which is OK- we have what we want, however
because it is CMS we are worried that when the client uses the WYSIWYG
editor for changing the main content the styling will be lost. That
link shows the main content as I put it in via HTML and CSS. I have
created another page http://forge.redrunner.co.uk/?q=node/10 and tried
to replicate the other page but using the WYSIWYG editor.
It's a nightmare! The only reason it looks slightly OK is because we
have used tables! SHREAK! I don't want to do that but I can't see
another way around clearing the floats. This editor creates a p
everytime the user hits enter, it creates a br / every time the user
hits shift and enter. Is there any effective way I can get any of
those tags to clear floats via CSS?
e.g.
br {clear:both; }
p{clear: both;} However if I do this and there is more than one
paragraph associated to an image then it will mess it up.
maybe I can add something to the H3, img tags?
WHATDYATHINK?
Thanks, Chris
__
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] Amazing CSS
Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB __ 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] Amazing CSS
Hi, What a response, I must start naming my IE issues as 'amazing' too! hehe Thanks Marc, I was talking about the text. I had a feeling it was done by javascript but wasn't sure. How can I copy the effect? Where can I get the script? The image below the photos is real nice too, my guess would be transparent PNG as well but they muck with colours (IMHO), and the photos are so vibrant so I think it must be a background image or two images sharing one container. The jquery PNG fix covers background and in the HTML images. Help me find the script for the type, it's the nicest effect on website text I have ever seen, closely followed by strikethrough. http://www.bonsai-studio.net/ Uses all the new outer-glow effects (probably not what it's referred to in CSS) but I am not all that keen. Sorry if I have gone off-topic. Someone point me to the javascript I need please ;-) TY, CB On 16/09/2009, at 3:14 AM, Atkinson, Sarah wrote: If you are talking about the text that is done with javascript not css On 9/15/09 3:01 PM, HallMarc Websites m...@hallmarcwebsites.com wrote: Which effect are you referring to? Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 2:56 PM To: css discuss discuss Subject: [css-d] Amazing CSS Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB __ 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/ __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.com __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.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-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-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] Amazing CSS
Hey, ...and if anyone could be so kind as to copy and paste the head of the document into an email for me it would be much appreciated. I live in China and it has been blocked by the Great Firewall of China so all I get is: link href='http://www.zend2.com/Go1.php?u=Oi8vNjcuMjI4LjEzMC4yMDgvfm1pa2UvZmlsZXMvcHJvdG90aXAuY3Nzamp;b=5' rel='stylesheet' type='text/css'/ as I go through the Zend2 proxy website. Thanks! CB On 16/09/2009, at 3:36 AM, Chris Blake wrote: Hi, What a response, I must start naming my IE issues as 'amazing' too! hehe Thanks Marc, I was talking about the text. I had a feeling it was done by javascript but wasn't sure. How can I copy the effect? Where can I get the script? The image below the photos is real nice too, my guess would be transparent PNG as well but they muck with colours (IMHO), and the photos are so vibrant so I think it must be a background image or two images sharing one container. The jquery PNG fix covers background and in the HTML images. Help me find the script for the type, it's the nicest effect on website text I have ever seen, closely followed by strikethrough. http://www.bonsai-studio.net/ Uses all the new outer-glow effects (probably not what it's referred to in CSS) but I am not all that keen. Sorry if I have gone off-topic. Someone point me to the javascript I need please ;-) TY, CB On 16/09/2009, at 3:14 AM, Atkinson, Sarah wrote: If you are talking about the text that is done with javascript not css On 9/15/09 3:01 PM, HallMarc Websites m...@hallmarcwebsites.com wrote: Which effect are you referring to? Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 2:56 PM To: css discuss discuss Subject: [css-d] Amazing CSS Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB __ 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/ __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.com __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.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-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-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-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] Amazing CSS
Using Just CSS, but maybe not as good. What do you think? http://line25.s3.amazonaws.com/wp-content/uploads/2009/letterpress/demo/demo.html demo is from this tutorial. http://www.tutorialhero.com/click-60791-create_a_letterpress_effect_with_css_text_shadow.php Cheers, CB On 16/09/2009, at 3:54 AM, HallMarc Websites wrote: It is in the dropShadows.js file and the affected text must have class='highContrast' Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 3:43 PM To: Chris Blake Cc: Untitled Subject: Re: [css-d] Amazing CSS Hey, ...and if anyone could be so kind as to copy and paste the head of the document into an email for me it would be much appreciated. I live in China and it has been blocked by the Great Firewall of China so all I get is: link href='http://www.zend2.com/Go1.php?u=Oi8vNjcuMjI4LjEzMC4yMDgvfm1pa2UvZm lsZXMvcHJvdG90aXAuY3Nzamp;b=5' rel='stylesheet' type='text/css'/ as I go through the Zend2 proxy website. Thanks! CB On 16/09/2009, at 3:36 AM, Chris Blake wrote: Hi, What a response, I must start naming my IE issues as 'amazing' too! hehe Thanks Marc, I was talking about the text. I had a feeling it was done by javascript but wasn't sure. How can I copy the effect? Where can I get the script? The image below the photos is real nice too, my guess would be transparent PNG as well but they muck with colours (IMHO), and the photos are so vibrant so I think it must be a background image or two images sharing one container. The jquery PNG fix covers background and in the HTML images. Help me find the script for the type, it's the nicest effect on website text I have ever seen, closely followed by strikethrough. http://www.bonsai-studio.net/ Uses all the new outer-glow effects (probably not what it's referred to in CSS) but I am not all that keen. Sorry if I have gone off-topic. Someone point me to the javascript I need please ;-) TY, CB On 16/09/2009, at 3:14 AM, Atkinson, Sarah wrote: If you are talking about the text that is done with javascript not css On 9/15/09 3:01 PM, HallMarc Websites m...@hallmarcwebsites.com wrote: Which effect are you referring to? Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 2:56 PM To: css discuss discuss Subject: [css-d] Amazing CSS Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB __ 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/ __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.com __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.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-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-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-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/ __ Information from ESET Smart Security, version of virus
Re: [css-d] Amazing CSS
Fair comment, but if it degrades to a regular web based type face then not much is lost. On 16/09/2009, at 4:10 AM, HallMarc Websites wrote: It doesn't work in IE 8. In my book if it doesn't work in all of the major browsers; it doesn't work. Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: Chris Blake [mailto:ch...@3pointdesign.com] Sent: Tuesday, September 15, 2009 4:01 PM To: HallMarc Websites Cc: 'Untitled' Subject: Re: [css-d] Amazing CSS Using Just CSS, but maybe not as good. What do you think? http://line25.s3.amazonaws.com/wp- content/uploads/2009/letterpress/demo/demo.html demo is from this tutorial. http://www.tutorialhero.com/click-60791- create_a_letterpress_effect_with_css_text_shadow.php Cheers, CB On 16/09/2009, at 3:54 AM, HallMarc Websites wrote: It is in the dropShadows.js file and the affected text must have class='highContrast' Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 3:43 PM To: Chris Blake Cc: Untitled Subject: Re: [css-d] Amazing CSS Hey, ...and if anyone could be so kind as to copy and paste the head of the document into an email for me it would be much appreciated. I live in China and it has been blocked by the Great Firewall of China so all I get is: link href='http://www.zend2.com/Go1.php?u=Oi8vNjcuMjI4LjEzMC4yMDgvfm1pa2UvZm lsZXMvcHJvdG90aXAuY3Nzamp;b=5' rel='stylesheet' type='text/css'/ as I go through the Zend2 proxy website. Thanks! CB On 16/09/2009, at 3:36 AM, Chris Blake wrote: Hi, What a response, I must start naming my IE issues as 'amazing' too! hehe Thanks Marc, I was talking about the text. I had a feeling it was done by javascript but wasn't sure. How can I copy the effect? Where can I get the script? The image below the photos is real nice too, my guess would be transparent PNG as well but they muck with colours (IMHO), and the photos are so vibrant so I think it must be a background image or two images sharing one container. The jquery PNG fix covers background and in the HTML images. Help me find the script for the type, it's the nicest effect on website text I have ever seen, closely followed by strikethrough. http://www.bonsai-studio.net/ Uses all the new outer-glow effects (probably not what it's referred to in CSS) but I am not all that keen. Sorry if I have gone off-topic. Someone point me to the javascript I need please ;-) TY, CB On 16/09/2009, at 3:14 AM, Atkinson, Sarah wrote: If you are talking about the text that is done with javascript not css On 9/15/09 3:01 PM, HallMarc Websites m...@hallmarcwebsites.com wrote: Which effect are you referring to? Thank you, Marc Hall HallMarc Websites 610.446.3346 -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d- boun...@lists.css-discuss.org] On Behalf Of Chris Blake Sent: Tuesday, September 15, 2009 2:56 PM To: css discuss discuss Subject: [css-d] Amazing CSS Hi, Can anyone tell me how this effect is done? http://www.mikematas.com/ I have just learnt how to do it in Illustrator, but in HTML and CSS!!?? TY, CB __ 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/ __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.com __ Information from ESET Smart Security, version of virus signature database 4427 (20090915) __ The message was checked by ESET Smart Security. http://www.eset.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-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-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css
Re: [css-d] Cascade related question
I always thought that browsers just read from top to bottom. That's
why having a 'reset.css' (taking out any default styles) can be
overwritten by awesome coders like ourselves.
Where are you getting this 'specificity' stuff from? Does it overwrite
parents and siblings?
Ta, CB
No repeat, no surrender (I blame television).
On 03/09/2009, at 8:50 PM, Philippe Wittenbergh wrote:
On Sep 3, 2009, at 8:14 PM, MOHAMMED NASEER wrote:
Hi - I am new to CSS and have problem understanding why a:hover
class's 'background-color' property is not affecting an email link
styled by a descendent selector ( #legal a ) in following code.
a {
color: #207EBF;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #F60;
}
a:visited {
color: #6E97BF;
}
a:hover {
color: #FFF;
background-color: #6E97BF;
border-bottom-color: #6E97BF;
}
#legal a {
color: #66;
border: none;
background: url(images/email.gif) no-repeat left center;
padding-left: 20px;
margin-left: 10px;
}
It is not a question of cascade but specificity: you need to include a
ruleblock for the #legal a:hover.
'#legal a' is more specific (specificity: 101) than
'a:hover' (specificity: 11) and will always override the style set by
your 'a:hover'.
http://www.w3.org/TR/css3-selectors/#specificity
Philippe
---
Philippe Wittenbergh
http://l-c-n.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-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] CMS - and CSS discuss
NI HAO, I built my first website whilst subscribed to this list (MEP of Europe! It helpded launch a post-grad career after very small salaries in print ). That was only three years ago and I now have a healthy career as a designer, but mostly for web. It seems that for career's sake that I am at the mercy of working on Drupal sites (they're made like DW would make a template and then I have to play with the CSS with very little interaction with the HTML created (Not so much like DW)). I've not yet worked from a template, only framework. I have not and don't intend to make templates but I do find myself bewildered by the CSS markup they/drupal create. I can dig-in, spend hours trying to find the right class/ID and maybe get what I want, however, It's just tough because I am sure there must be some kind of logic to what 'standard' CSS and tags and I don't have a clue! I'd love to keep it real, even though I use includes and a fair bit of javascript, but I can't. Is the list anti-Drupal? Will you still help if there are twenty CSS files attached and crazy markup? CB __ 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] suggestions appreciated...
On 15/08/2009, at 12:45 PM, David Laakso wrote: Felix Miata wrote: On 2009/08/14 23:16 (GMT-0400) David Laakso composed: http://chelseacreekstudio.com/dl/index.php Some guy named Westmoreland showed us a site very much like that last month. Not sure whose I like better. I think I'd like this one more with a lot more letter-spacing in the big word. The color of the stripe at the top reminds me of a used diaper, and doesn't seem harmonious with the other colors there. Neither letter-spacing, nor color, is my bag. Best, Goudy Hi, I like the grey (gray) 'portfolio' word-mark on the left. I would consider making this a fixed position. I think that the L.hand vertical menu has a bit too much spacing, but I really like the long underline for active and rollover. Having said this I am not so keen that as you move from menu item to menu item the cursor changes, I like block menus so as you move around the menu you are always on a menu item. 'Navigate the portfolio examples' just doesn't look like a menu at all. It's soo spaced out that even on my fairly high-res screen I am not seeing any real content until halfway down the page, scroll. Why not use an underline to show that they are links? Maybe a tad conventional but people know what it means. The colours are very good, fonts and weights, use of caps are well executed. Just too much white space (reminds me of a term used to explain how dyslexics can view text without correct spacing called the river effect - http://www.readregular.com/english/dyslexia.html ). One of my favourite design companies use a similar menu to your L.hand one - http://www.brownsdesign.com/work/?cat=146id=66 (long underlines). If you want a shock, look at their home page! Yikes! Have a look at your hierarchy of information. What is that you want people to read first? Portfolio? For who, of what? For me it seemed that after reading 'portfolio' twice I went to 'navigate the portfolio' and started looking at the portfolio. It wasn't until after that I learnt that it's for 'website design and front-end development', then the company name, then another tagline. To separate the 'view portfo' from the actual portfolio increase the size of the h5 (or make it h2 etc.). I really like your logo at the bottom. Why can't you use that at the top? Make it clear what you are about, and that they are on your portfolio page. You have been a massive help to me and others David so I hate to be critical. I don't usually bother commenting when something is complete rubbish but this shows a lot of promise (I am a fan of clean and the use of serif fonts). Typography can be tough, but made a lot easier if you know what order you want people to read the information. I really, really like the left hand column, menu and wordmark. I really like the footer and your logo, name, address above it. I think you need to just get the heading right, and this could be done as simply as moving your nice logo up to the top. People really need to know whose website and what it is about before going straight into the portfolio. Keep me updated with any changes, I like how it is going. Cheers, CB __ 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/
