[css-d] Nav menu woes
Hi I am working on this site: http://www.activehealthzone.com/ http://www.activehealthzone.com/wp-content/themes/active/style.css No matter how hard I try I am still find I am unable to get the navigation to move over to the left hand side! There should be only a small space between the border and the nav menu. Any ideas please? Thanks. -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Replacing Blogger Blog Title w/Image
Hey, all! I'm a newbie at CSS, and am slowly teaching myself through a cobination of copy-and-paste from existing web logs and sporadic reading. Thankfully, I found this list. My question is: Is there a simple way to effectively replace my Blogger blog title with an image? I already have the image designed to specs and hosted, yet, am simply confounded by not having so far been able to make this simple switch. I'm currently using the 'Minima Blue,' Blogger template (http://ibcarlos.blogspot.com), but am prepping for a launch of Thur Broeder's Blogger-friendly black 3-column template (http://www.thurbroeders.nl/templates/tb_b_20060107_black_htm.htm). Thanks for your time! Carlos in Los Angeles __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nav menu woes
Richard Brown wrote: I am working on this site: http://www.activehealthzone.com/ http://www.activehealthzone.com/wp-content/themes/active/style.css No matter how hard I try I am still find I am unable to get the navigation to move over to the left hand side! There should be only a small space between the border and the nav menu. Any ideas please? Set padding/margin to 0 and start from there :-) (you did that for #navcontainer ul/li, but not for #navigation ul/li) -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Replacing Blogger Blog Title w/Image
Yes, edit your template - you can see the css and xhtml in the textarea. Also, don't learn css by copy and paste, you will only pick up bad habits (from bad css) or get frustrated (from good css). Get a very good book and learn methodically. Cascading Style Sheets by Friends Of Ed is good, as is anything by Eric Meyer. Good luck! On 04/05/06, Carlos Whitfield [EMAIL PROTECTED] wrote: Hey, all! I'm a newbie at CSS, and am slowly teaching myself through a cobination of copy-and-paste from existing web logs and sporadic reading. Thankfully, I found this list. My question is: Is there a simple way to effectively replace my Blogger blog title with an image? I already have the image designed to specs and hosted, yet, am simply confounded by not having so far been able to make this simple switch. I'm currently using the 'Minima Blue,' Blogger template ( http://ibcarlos.blogspot.com), but am prepping for a launch of Thur Broeder's Blogger-friendly black 3-column template ( http://www.thurbroeders.nl/templates/tb_b_20060107_black_htm.htm). Thanks for your time! Carlos in Los Angeles __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] short white space
Zoe M. Gillenwater wrote: Daniel Kessler wrote: [...] http://hhp.umd.edu/events/systems_thinking/ [...] Daniel, I strongly suggest getting rid of the .white and .dark_blue divs entirely. Instead, set an id on the div that holds the image. Keep the image inside set to display: block and give it alt text. Give this div 3px of bottom padding and a thick blue bottom border. Ta-da! No more using extraneous divs to create borders. Reserve divs for structure whenever possible. Zoe Yes: ta-da! In addition: you should have a look at the html-validator every now and then: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fhhp.umd.edu%2Fevents%2Fsystems_thinking%2F http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fhhp.umd.edu%2Fevents%2Fsystems_thinking%2F and the css-validator as well: http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Fhhp.umd.edu%2Fevents%2Fsystems_thinking%2F http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Fhhp.umd.edu%2Fevents%2Fsystems_thinking%2F And maybe telling no news: For the accessibility, it will be easier to check that from the beginning, for instance with WatchfireWebXACT: http://webxact.watchfire.com/ Adapting the page/design for accessibility after everything is done, can be a lot more difficult (if that needs changing lay out / other primary conditions for the design). - As the page is now, the font-size is fixed in px - then IE-visitors cannot enlarge (!) if they need that. And the font-size is very small too small! Especially for resolutions 1024x768. A font-size of 90% to 100% in the body-css should be the minimum... See screenshot: http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-systemsThinking.gif Hoping the last remarks are not too much off topic [1], Greetings, francky [1] All beautiful css is useless when the visitors can not read the text! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nav menu woes
Hi Els On 4 May 2006, at 08:34, Els wrote: Set padding/margin to 0 and start from there :-) (you did that for #navcontainer ul/li, but not for #navigation ul/li) Thanks that fixed it. I thought I had done it for navigation - I shouldn't name things so similarly! -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] valid xhtml and css smooth text
hi al, i wanna know if it possible to have smooth scrolling text (ie. http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm) but standard compliant dan validate ? thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] padding differences between safari and firefox
Hello, this is my first message in this list, my name is Giovanni Intini and
I'm from Italy.
I have this markup:
ul id=top-navigation
li id=fatturea href=#Fatture/a/li
li id=clientia href=#Clienti/a/li
li id=banchea href=#Banche/a/li
/ul
I use those links as site navigation tabs, with this css code:
#top-navigation {
list-style: none;
background: #1d1d1d;
padding: 20px 10px 6px 0;
margin: 0;
text-align: right;
}
#top-navigation li {
display: inline;
font-size: 12pt;
}
#top-navigation li a {
padding: 6px;
background: #252525;
color: #fbf7f7;
}
#top-navigation li a:HOVER {
background: #303030;
}
Now, the problem is in #top-navigation { padding }.
if I set the bottom padding to be 5px it displays correctly in firefox and
not in safari
(http://medlar.it/work/images/safari_notok.jpg |
http://medlar.it/work/images/firefox_ok.jpg).
If I set the bottom padding to be 6px it's the opposite (
http://medlar.it/work/images/safari_ok.jpg |
http://medlar.it/work/images/firefox_notok.jpg).
Am I doing something wrong or is this a known bug? (I think it should be me
doing something wrong :))
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] valid xhtml and css smooth text
hi al, i wanna know if it possible to have smooth scrolling text (ie. http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm) but standard compliant dan validate ? Don't think this is really a CSS issue as the main problems with marquees are making them W3 compliant - now that ticks the difficult box and having them cross browser compatible. Having had a look at the script there are some very basic mark-up errors (missing tr tags, wrong JavaScript intro etc. Don't want to take up any more space on this as really way off topic. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.5.3/331 - Release Date: 03/05/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [ADMIN - OFF TOPIC] Re: valid xhtml and css smooth text
i wanna know if it possible to have smooth scrolling text (ie. http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm) but standard compliant dan validate ? I'm afraid that making text scroll is not on topic for this list since it is actually an issue of behaviour, which means for most purposes, javascript. css-d is for the discussion of the practical application of css, not web standards, not accessibility, and certainly not javascript. Your question would be better suited to more general web lists such as evolt's theList or webdesign-l, details for both of which can be found on the Off Topic page of css-d's wiki: http://css-discuss.incutio.com/?page=OffTopic To help you on your way, I would suggest Christian Heilmann's Dom News as a possible starting point to work from (even if it scrolls vertically rather than horizontally): http://onlinetools.org/tools/domnews/ Now, if in the course of your work, you encounter problems with applying CSS to your scroller, at that point you will have a question that this list can help you with. Alex Robinson css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First load problem
For some reason the screenshot didnt go through. here it is again, http://uniquethrudesign.com/aamml_problem.jpg Thanks Brian Quoting [EMAIL PROTECTED]: I know a majority of you have a major problem with this site that I coded. But was wondering if anyone has any experiance with the problem I am having below. I am having a problem when I load the website for the first time on a browser that is not maximized. The weird thing is, this is only a problem the very first time I load the site ? once I refresh it ? it straightens out ok. The problem does not seem to happen when my browser window is maximized. screenshot of first load and the test page can be found at http://ad.aaml.uniquethrudesign.com/ Thank you all in advance... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Vertical stretch
My design is at http://marketinginmalta.com/rfd/ I am trying to make the right yellow column scale to fix to the bottom of the page although I am not having much luck. Any advice would be great. Karl __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical stretch
Ah, that is a common problem. A good way is to use a background image to mimic column heights. I have that info in books but don't know a good online resource for it off the bat.The problem is that elements only stretch as far down as they need to. Use a vertically tiled background image and a rule like so to the body element: background-image: #fff url(/images/foo.gif) repeat-y 50% 0; ...as the body fills the screen you now have the illusion of columns at the desired width no matter how little content sits in the right hand column. On 04/05/06, Karl Camenzuli [EMAIL PROTECTED] wrote: My design is at http://marketinginmalta.com/rfd/ I am trying to make the right yellow column scale to fix to the bottom of the page although I am not having much luck. Any advice would be great. Karl __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Three column
Hi, I have a three column layout with a liquid middle column which resizes as the browser window is expanded or contracted. This works using floats and margins (left col = float left, middle column = margins, right column = float right). However when I resize this layout the middle column contracts as much as possible then jumps down off the screen. This is cause the content of the middle column has images and so it can't contract beyond a certain point. Question is, how do I get the right column to drop down instead of the middle one; or get it to drop behind the middle column (like this http://bluerobot.com/web/layouts/layout3.html but without positioning being involved). Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical stretch
Thanks Dave
The link for that is http://www.alistapart.com/articles/fauxcolumns/
But its not working for me, my CSS for the nav area is as follows
div#navigation_bg {
position: absolute;
width: 230px;
height: 100%;
margin: 0px;
padding: 0px;
top: 20px;
right: 100px;
background-color: #FFD400;
background-image: url(../images/nav_bg2.gif) ;
background-repeat: repeat-y;
z-index: 4;
}
Ah, that is a common problem. A good way is to use a background image to
mimic column heights. I have that info in books but don't know a good online
resource for it off the bat.The problem is that elements only stretch as far
down as they need to. Use a vertically tiled background image and a rule
like so to the body element:
background-image: #fff url(/images/foo.gif) repeat-y 50% 0;
...as the body fills the screen you now have the illusion of columns at the
desired width no matter how little content sits in the right hand column.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical stretch
Subject: Re: [css-d] Vertical stretch Ah, that is a common problem. A good way is to use a background image to mimic column heights. I have that info in books but don't know a good online resource for it off the bat. Of course we do. Our very own Zoe Gillenwater has the very thing at: http://www.communitymx.com/content/article.cfm?page=1cid=AFC58 Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.5.3/331 - Release Date: 03/05/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Expandable Banner in IE
Hey guys... I have got to this point and I don't know what else to do... I've checked some solutions to floating divs, some of them absolute positioned... but none has solved my problem. See the page: http://www.dgabcsolutions.com.br/preview/novodol/tecnologia_home.asp It looks just fine over any browser that don't auto-margin a floated element... but IE does it and crashes everything. Does anyone have any thoughts on this?? Thank you so much. I'm desperate. :( -- Danilo Laurindo Webdesign Customer Attendance [EMAIL PROTECTED] www.donestudio.com.br/danilo Phone: (55 11) 7135-2425 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] firefox column shifting/jumping
No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.392 / Virus Database: 268.5.3/331 - Release Date: 5/3/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Expandable Banner in IE
Well, I actually found out that it has got a problem over other browsers too... Seems like the white space generated by the banner goes over the content, the menu, the rightside bar and you can't click where the layer is... I'm accepting anything, even a link to some site that has a banner like mine... Thanks again! -- Danilo Laurindo Webdesign Customer Attendance [EMAIL PROTECTED] www.donestudio.com.br/danilo Phone: (55 11) 7135-2425 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Descendant Selectors Based on IDs
Thanks Glenn, Rob, and Tyson. I can now start writing cleaner, more sensible CSS and HTML! Cheers, Dagmar __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Three column
Question is, how do I get the right column to drop down instead of the middle one; or get it to drop behind the middle column (like this http://bluerobot.com/web/layouts/layout3.html but without positioning being involved). Solutions using all-floats, like... http://www.alistapart.com/articles/negativemargins/ ...will let you drop whichever column you like when the page runs out of space. It all depends on the order of the columns in the source-code - and the float-direction. 2 and 3-column basic solutions described in that ALA article. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] div covering up scroll bar? Z-index?
Hello everyone, Just when I thought that I was making progress learning CSS, I've come across a problem I'm not sure how to solve. I'll start with the URL: http://benedikt.knowlton.ohio-state.edu/faculty/ This is the development server for a series of faculty profiles I'm putting together. There are several things I'm still grappling with, but the most pressing is that, in IE/Windows, the top header div is appearing over the scroll bar. It's fine in FF/Opera (of course). I've done a reasonable bit of searching in the archives, with Google, etc - but I'm sure that I probably just skimmed over the solution without realizing it. Am I right in thinking that this is somehow related to the z-index of the element? Or would it be something else? The elements I'm suspicious of are the header or headerwrap elements, if that helps. Thanks in advance for any suggestions, Matt -- Matt Bernhardt, [EMAIL PROTECTED] Webmaster + Fab Lab Coordinator Knowlton School of Architecture TheOhio StateUniversity __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Liquid layouts with graphics
I think this is probably obvious to me but at the certainty of sounding stupid I'll ask. I am working on a liquid / fluid layout, 3 columns using floats. If it's relevant this is the rough layout: http://pamshop.com/Template1/exp10.html I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? TIA Mark __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: I think this is probably obvious to me but at the certainty of sounding stupid I'll ask. I am working on a liquid / fluid layout, 3 columns using floats. If it's relevant this is the rough layout: http://pamshop.com/Template1/exp10.html I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? Depends on the background image i guess and whether you can repeat it horizontally. If you only apply the background image to the links and not the list and give each li a left and right margin in % it could work. I've got a friend with a stupidly wide monitor (32) and he browses without sidebars and with the window maximised, not to mention hi-res. On that screen you'd get some /really/ sparse links so it might be better to fix the width of the navigation or alternatively set a max-width. The only problem there is in needing a javascript fix for =IE6. Keep us posted, i'm interested in seeing what you come up with, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote:
I think this is probably obvious to me but at the certainty of sounding
stupid I'll ask.
I am working on a liquid / fluid layout, 3 columns using floats. If it's
relevant this is the rough layout: http://pamshop.com/Template1/exp10.html
I'm considering using a one image rollover navigation thing. Haven't done it
yet but essentially there will be a graphic image as a background. Since the
divs are all in percentages, is there anyway I could get that graphic to not
break on either a smaller or larger monitor resolution ?
TIA
Mark
Hi Mark,
Try adding in your css-styles:
=
#mainNav li {
background:
url('http://home.tiscali.nl/developerscorner/imaging/images/gradient300x50.png');
margin: 2px 10px 0 0;
}
=
and alternatively adding to this li:
=
background-position: 50% 0;
=
.. and you know! (trying = knowing ;-) ).
A background-img is always seen through the viewport of the box in which
it is settled. The only thing is that the img has to be wide enough for
the highest resolution.
Some more in The Port-hole Theory:
http://home.tiscali.nl/developerscorner/port-hole/porthole.htm
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
On 5/4/06, Mark Fellowes [EMAIL PROTECTED] wrote: I think this is probably obvious to me but at the certainty of sounding stupid I'll ask. I am working on a liquid / fluid layout, 3 columns using floats. If it's relevant this is the rough layout: http://pamshop.com/Template1/exp10.html I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? So what you are saying is that the links will have images, but you will do them as backgrounds? If they are without text, it's going to be hard to make them look good. Centering is one option, but I might have a couple better ideas: 1. Text links with non-repeated background images, like here: http://christianmontoya.com With text on one side and graphics on the other, they can separate but still be balanced. 2. Inline image links. You can use this technique for the rollovers: http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ or look in the comments for a possibly better technique: http://www.thevisualprocess.com/dev/rollover or you could just use Javascript rollovers... unobtrusively, please. This way you can make the images 100% of the container width, so they'll scale with the column; this has problems of its own, since the images probably won't look too good. It depends on the images used. Some images scale better than others. Hope it helps. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari not loading style sheet
Was just browsing this site in Safari and noticed it's not pulling the style sheet. Firefox is though...Just thought it was strange...any ideas why? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] First load problem
[EMAIL PROTECTED] wrote: For some reason the screenshot didnt go through. here it is again, http://uniquethrudesign.com/aamml_problem.jpg Thanks Brian Quoting [EMAIL PROTECTED]: I know a majority of you have a major problem with this site that I coded. But was wondering if anyone has any experiance with the problem I am having below. I am having a problem when I load the website for the first time on a browser that is not maximized. The weird thing is, this is only a problem the very first time I load the site ? once I refresh it ? it straightens out ok. The problem does not seem to happen when my browser window is maximized. screenshot of first load and the test page can be found at http://ad.aaml.uniquethrudesign.com/ Brian, I can't reproduce this on FF or IE 6 on WinXP. What browser are you having a problem with? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Mark -Original Message- From: [EMAIL PROTECTED] Sent: Thursday, May 4, 2006 6:20 PM -07:00 To: Mark Fellowes [EMAIL PROTECTED] Cc: css list list [EMAIL PROTECTED] Subject: [css-d] Liquid layouts with graphics I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? So what you are saying is that the links will have images, but you will do them as backgrounds? If they are without text, it's going to be hard to make them look good. Centering is one option, but I might have a couple better ideas: snip __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Targeting (or Hiding from) NS7 ?
Is there a hack that targets older versions of Gecko (NS7 and even NS6) while leaving better rendering engines alone (or, conversely, a hack that Firefox, Safari, Opera, etc. understand which old gecko does not)? (The summary of hacks at http://www.dithered.com/css_filters/ seems to be down.) Thanks, Bill ~~~ Bill Merikallio Art Director Scott Design, Inc. WE'VE MOVED! 2425 Porter Street, Suite 2 Soquel, CA 95073 Phone: (831) 475-9800, x19 Fax: (831) 475-9801 Serving up hot design since 1993 http://www.hotdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Mark, If you are just changing background color on rollover, and using a pretty standard looking font, I see no reason to use images at all. Just style real text and give the a elements background colors. This will be much more flexible and accessible. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting (or Hiding from) NS7 ?
Bill Merikallio wrote: Is there a hack that targets older versions of Gecko (NS7 and even NS6) while leaving better rendering engines alone (or, conversely, a hack that Firefox, Safari, Opera, etc. understand which old gecko does not)? Bill, I've never needed to hack for NS7 (nor do I think there's a reliable way to do so, anyway), and I bet we can find a way for you to avoid such hacks as well. Can you post the page with the problem? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari not loading style sheet
Ugg...forgot to include a link. But I think I have figured it out. Safari has problems when the shorthand for the background property is not written correctly. Although I thought this only affected earlier versions of safari. Looks like it has to be it though as safari loads the link styles and some other styles that are written before the first incorrect shorthand background is written in the stylesheet. http://www.extendedstayamerica.com/minisite/?Portal=1hotelID=694 Was just browsing this site in Safari and noticed it's not pulling the style sheet. Firefox is though...Just thought it was strange...any ideas why? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari not loading style sheet
Well, it wasnt the shorthand for the background property. It was a couple of unneeded characters. On 5/4/06, D Ross [EMAIL PROTECTED] wrote: Ugg...forgot to include a link. But I think I have figured it out. Safari has problems when the shorthand for the background property is not written correctly. Although I thought this only affected earlier versions of safari. Looks like it has to be it though as safari loads the link styles and some other styles that are written before the first incorrect shorthand background is written in the stylesheet. http://www.extendedstayamerica.com/minisite/?Portal=1hotelID=694 Was just browsing this site in Safari and noticed it's not pulling the style sheet. Firefox is though...Just thought it was strange...any ideas why? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Hi Mark, So combining this example with the first post, I understand you ask: - how can I make this ul-box-img to be liquid, shrinking or expanding together with the left column? I think there are 2 possibilities (if I'm wrong, I'll be corrected I hope ;-) ): 1. the box has a fixed height. That means the titles of the menu-items have to be images too, for otherwise the items can escape from the box when the visitor is enlarging the font-size. In this case you can add an #ulwrapper around the ul. You cut the img in 2 parts, and then give the #ulwrapper the leftside border part of the img as bg-img. The rest of the img you can use as bg-img in the ul itself: positioned at 100% 0 (beginning at the the right side; going to the left as far as needed). 2. The ul has no fixed height. In this case the whole image has to be liquid: as well horizontally (adapting to the screen width) as vertically (adapting to the font-size). Then a kind of liquid corners/borders will be the solution. Two small images are needed (one for the top and bottom parts, one for the sides along the li's). As example how this can be done with css: http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-08a.htm - Next task will be the hovering over the li-items, I guess that can be made with another (combined) img that is called in the right position at hover. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting (or Hiding from) NS7 ?
On May 4, 06, at 12:17 PM|May 4, Zoe M. Gillenwater wrote: Bill Merikallio wrote: Is there a hack that targets older versions of Gecko (NS7 and even NS6) while leaving better rendering engines alone (or, conversely, a hack that Firefox, Safari, Opera, etc. understand which old gecko does not)? I've never needed to hack for NS7 (nor do I think there's a reliable way to do so, anyway), and I bet we can find a way for you to avoid such hacks as well. Can you post the page with the problem? Hi Zoe, The pages are for a client's intranet, so I can't post 'real pages.' I've posted a pared down version here: http://hotdesign.com/post/css-d/bcnav/ The CSS file is here: http://hotdesign.com/post/css-d/bcnav/brandcenter.css It works in everything but NS7 and IE7 (must be something about the number 7). Any help anyone can provide would be greatly appreciated. Thanks, Bill __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd Firefox Bugs
On May 3, 2006, at 7:37 PM, francky wrote: Yes, I agree. In css-3 it might be possible with the new border- image property. [snip] Ahh... Pipe dreams :-/ I can't wait, though. And full support for display: table-*! It will be a new era of web design, indeed. IMO it will be extremely difficult to make an acid proof universal cross browser css-only solution with only one div. Universal: fitting around whatever dimensions of the content, having the option of transparent outsides of the corners (scrollable over a fixed non uni colored background), and so on. I appear to have gotten pretty close and may be able to get even closer. The only limitation is with IE6, in which JS will have to be enabled to allow for the expression CSS properties to work. Otherwise, the :before and :after pseudo-elements do the trick quite nicely on real browsers. *cough cough* I'm afraid to even try IE 5... [snip] As a working draft I made a test page with the Liquid Corners method, avoiding the javascript you used: http://home.tiscali.nl/developerscorner/liquidcorners/test-calpoly- new.htm [snip] Awesome work! It works perfectly in FF and Safari. This is a great middle-ground solution and I may even use it in the final site I'm working on until I can finish my holy grail solution to the box problem. Philippe's suggestions (in this thread) are going to help immensely, as well. You guys rock! I'll post my progress sometime next week, work schedule permitting. Thanks! -Tyson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting (or Hiding from) NS7 ?
Bill Merikallio wrote: http://hotdesign.com/post/css-d/bcnav/ It works in everything but NS7 and IE7 (must be something about the number 7). Comment: you should test with browser-option 'minimum font size = 14px (or larger)' in Firefox and others, and 'ignore font size...' in IE/win. Doesn't look too good. Don't know about NS7, but my NS7.2 presents that minimal page like all the other browsers. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting (or Hiding from) NS7 ?
Yes! There is a hack for this, and it is a lifesaver.
One main problem I have with 7.1 and below is that they misinterpret
the correct parent when absolutely positioning a child within a
relatively positioned box - the absolutely positioned box goes to the
grandparent instead of the parent. NN7.2 and equivalent Gecko browsers
fixed this.
The site was thomas.tanreisoftware.com/csshacks.html, but it's down.
Here's what to do, from Google's cache of the site:
---
The following non-valid variant of the Star-7 hack targets only older
Gecko browsers (from Firebird 0.6 and before, including Netscape 6-7.1
but not 7.2). Unfortunately it is also read by Safari 1.3 (maybe
higher) for some strange reason, even though this is not supposed to
happen. Also, ancient versions of Opera seem to also apply the rule
but this is easy to overcome by throwing in the not selector. Safari
isn't as easy to tame.
html*#whatever:not(foo), foo:-moz-any-link { ... }
You're probably wondering what we can do to drop Safari? It's easier
than it seems. We simply use the following rule, which only works on
elements that aren't empty:
html*#whatever:not(:empty) { ... }
I have verified that this fools Safari 1.3 and 2.02 (416.12). I am not
certain of newer versions of Webcore, but for now it is a viable hack.
-
It may not be pretty, but it works, and the are some pesky differences
between 7.1 and 7.2, so I've found I have to use it once in awhile.
Zoe, there really are a few(!) cases where this kind of hack is
necessary :)
If you can solve your problem a different way, that's best, but if you
need to hack, this one works like a charm.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] text position relative to image width
Hi, I've just subscribed to this list and I see there are more than just a few perplexed souls trying to untangle CSS. As I've tried out different CSS strategies, what defeats me is that there are so many variables to keep track of. I thought this would be a simple exercise: One image in the center of each page. The image has a wide border on the right side. Inside the border I want to have some text near the bottom. This much I can do. Here's the problem: Images on different pages vary in width. So I was hoping that using CSS I could make the text that appears in the right border area to be positioned relative to the width of the image. Not fixed over the same area from page to page. But after trying hundreds of combinations of positioning, floating, margin-widths, percentages, spans, divs, nesting, etc... it ain't working. You can see my examples here: http://www.walteralbertson.com/css_testing/boxes2a.html http://www.walteralbertson.com/css_testing/boxes2b.html (I'm using Firefox to view it) I currently have the left position of the text box set to 0 because I'm wondering why it should be in this location when set to 0; kind of slightly off center? So, anyway, am I mistaken to think that such a thing can be done? Is there a solution? Any ideas would be appreciated. -walter __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] page check :: ~dL
I'd appreciate your comments an suggestions on this pagehttp://www.dlaakso.com/jewels/index-v1.html . It seems to be doing alright in browsercam, and 'live' on my end(famous last words :-P ). The horror show(css) is embedded. Thanks, ~davidLaakso PS non-css related aside: I think I may have gotten carried away with the 'tbnt' on the headings, and weak in contrast in some stuff...? -- http://www.dlaakso.com/gustave/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check :: ~dL
I'd appreciate your comments an suggestions on this pagehttp://www.dlaakso.com/jewels/index-v1.html . It seems to be doing alright in browsercam, and 'live' on my end(famous last words :-P ). The horror show(css) is embedded. Thanks, ~davidLaakso PS non-css related aside: I think I may have gotten carried away with the 'tbnt' on the headings, and weak in contrast in some stuff...? Hey David. Looks good in Firefox and IE6 on WinXP/SP2 as far as I can tell. You're right though about the headings. Manuscript.gif totally obfuscates the word Gems in that heading...for me at least. But then I am about 80% colorblind, so maybe it's ok for others. Still looks a far sight better than its predecessor http://www.dlaakso.com/jewels/index.html Nice work. Bill Brown Webmaster, MacNimble.com ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Konqueror and display:table
Anyone has access to Konqueror 3.5.x ? I see some pretty wrong display of elements with display:table adjacent to floated blocks. http://dev.l-c-n.com/IEW/table-formatting-context.php The offending elements slide *under* the left hand floated blocks. That is contrary to anything it should do. The computed width appears correct though. Hint: Gecko displays this correctly. (I am checking with Konqueror 3.5.2; I thought previous versions were handling this correctly). Thanks. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Targeting (or Hiding from) NS7 ?
Bill Merikallio wrote:
http://hotdesign.com/post/css-d/bcnav/
It works in everything but NS7 and IE7 (must be something about the
number 7).
Hi Bill,
Not a number 7 ;-) : also Netscape 6 under Win98SE: is not good. See
screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-brandcenter-NS6.gif
Opera 7.54 under Win98SE is going wrong too (Opera 8.01 o.k., as is
Mozilla 1.7.1; besides cross browser remarks). Screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-brandcenter-Op7.54.gif
- As Georg noticed, there are some font-size troubles.
I guess #mainnav {font-size: 1px;} will avoid the peeping under of the
no-style text when the font-size (now: fixed on 10px) is enlarged in
other browsers than IE. Maybe also a line-height of 1px is needed,
and/or a span around the text with { margin-left: -px; }.
And some varia:
The submenu's don't have a hierarchical relationship with the connected
menu-items [1]. Can be partially solved by giving the menu-items a h2
to distinguish them from the submenu items. But I think the css should
better provide real submenu's with new ul-li's inside the li's of the
main menu items.
As I'm always reading with the mouse, I saw that when hovering over a
submenu, the submenu is flashing away. Checked: this is cross browser...
I suspected a margin between the submenu-items, that would cause loosing
focus when hovering over it, so letting disappear the whole thing. Yes:
every time I hovered slowly from the one submenu-item to the next, the
submenu disappeared.
- Heavily searched in the css, but couldn't find. ??? At last I
discovered: wrong diagnosis! :-) Even when staying upon a link in the
submenu, after a short while the submenu is flashing away, and no time
to click or to read the other links. It is the javascript doing it! [2]
The #navskip is hidden by the #mainnav ul {margin-left: -190px}. Means:
at font-enlarging the left margin of the menu is shifting to the right.
Probably can be solved with #navskip { margin-left: -px; height:
0px; } + some fine tuning, and no negative margin for the #mainnav ul.
Checking the html-validator showed a double used ID. You never know:
after repairing that, some browsers might perform better.
Greetings,
francky
[1] One of the consequences of this approach: with a no-style view it is
not clear which are menu-items, which are submenu-items, and which item
is a submenu-item of which main item. Screenshot:
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-brandcenter-nostyle.gif
[2] I guess the setTimeout should be replaced by an onMouseOut-event. -
But a good alternative would be the use of a css-driven submenu like the
proven concept of the Sons of Suckerfish.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
