Re: [css-d] align image to bottom right corner
On Sat, 25 Aug 2007, David Merchant wrote:
I am trying to place the file cabinet image in the bottom right hand
corner of a div. I've searched wiki, the web and poked around the
archives and what solutions I've seen I can't get to work.
It might be easier to analyze the situation if you posted the URL(s) of
your best attempt(s), or some attempts.
There are two simple strategies that might be applied:
1) Background image. You would use something like
background: url(cabinet.gif) no-repeat right bottom;
for the div element. You would need to take care of avoiding any of the
div content covering the image.
2) Positioned image. You could set
position: relative;
for the div element (just to make it possible to position the image
relative to the div), and you would include an img element, like
img src=cabinet.gif alt=
inside the div element (somewhere - choose the placement according to how
it should be rendered in non-CSS situations), and then position it, e.g.
(assuming you have div id=foo.../div markup)
#foo img { position: absolute; right: 0; bottom; }
Here, too, care is needed to avoid overlap of the image and the
rest of the content.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] align image to bottom right corner
Ehm... do you have any reference to see what you're talking about (a link)? If all you want to do is put an image at that position, set it as the background, i.e. background: #fff url(path/to/image) right bottom no-repeat; · #fff is the background color, it can be omitted or set to 'transparent' (without the quotes) · 'url' is an actual keyword, and the path should not be between quotes · reference: http://www.w3.org/TR/CSS1#background Rafael. David Merchant wrote: I am trying to place the file cabinet image in the bottom right hand corner of a div. I've searched wiki, the web and poked around the archives and what solutions I've seen I can't get to work. Yes, I'm a bit green when it comes to CSS, green enough that maybe I am not searching correctly because of my ignorance. Can someone point me to a resource that will answer this question? Many thanks, David Merchant __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Beginner layout suggestions?
Hi Allison,I think that it may be difficult to have your css based design
render the same way in all browsers and monitors or systems. Research and
looking at various surveys of browser support may be useful. This article on
browser support at Yahoo may be
helpful.http://developer.yahoo.com/yui/articles/gbs/http://www.codestyle.org/css/BrowserConfiguration.shtmlI
think with regard making css layouts or designs cross-browser compatible it
may be good to keep designs simple, to test your design on your selected target
browsers, to provide alternative css for particular browser problems, to detect
browsers through a server-side or client-side (javascript) script and link the
necessary css for that particular browser.While searching for an answer to your
question regarding guidelines for designing for browser compatibility I found
that the link below helps to address your
question.http://www.webreference.com/authoring/style/sheets/browser_support/I
think when starting out designing using css for layout it would be good to
design using valid html or xhtml and valid css. Different browsers have
different support for standard specifications for CSS and XHTML. Keeping your
code valid based on standards provides a good starting point for fixing
problems for particular browsers.You can validate your XHTML and CSS using the
links below:For XHTMLhttp://validator.w3.org/For
CSShttp://jigsaw.w3.org/css-validator/Test your design first using Firefox,
since Firefox more closely renders standard CSS better than IE.If the design is
rendering properly in Firefox, then check if you are encountering problems with
IE6. Also then test for IE7. I think these 'modern' browsers are the most
commonly used today and have the best support for current standards.At times it
would be difficult to setup a system where you have all the different browsers
and screen resolutions so using a service like browsercam for example will help
you to see how your page is rendered on a particular browser or
system.http://www.browsercam.com/These links also provide information regarding
the most common problems related to IE rendering of
CSS:http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bughttp://css.maxdesign.com.au/listamatic/about-boxmodel.htmhttp://www.alistapart.com/stories/doctype/Other
common IE problems:http://www.positioniseverything.net/ie-primer.htmlFor
inspiration in creating CSS designs check
out:http://www.cssbeauty.com/http://www.csszengarden.com/For Web 2.0 styles
check out this
tutorial:http://www.webdesignfromscratch.com/current-style.cfmGood luck in your
work.Best regards,Alex--Alexander R. TorrijosWeb
DeveloperMobile: +63 921 838 0382Res: +63 2 822
7219http://www.stormwild.com--Date: Thu, 23 Aug
2007 10:55:49 -0400From: [EMAIL PROTECTED]: [EMAIL PROTECTED]: Re: [css-d]
Beginner layout suggestions?Hi AlexThanks a lot for your email and help. It
gave me a good starting point yesterday morning. I messed around all day with
it, and I'm starting to see why CSS is so useful.Do you have any
suggestions/guidelines as to how to design for browser compatibility? I am
trying to focus on IE and Firefox and already have major differences between
the two. I'm sure I will learna and read much more as I go along with this
process.Again, thanks for your help.AllisonOn 8/22/07, Alex Torrijos [EMAIL
PROTECTED] wrote:Hi Allison,I'm a bit of a newbie to CSS myself but I found
this tutorial useful in attempting to use CSS for
layout.http://www.maxdesign.com.au/presentation/process/The basic process of
converting your design from an image mock-up to an XHTML and CSS page is to
first look at the design and identify containers. For example, in your design
for the Skeet'r Beat'r website, you can basically create containers for various
parts of the design which will be marked up using divs. The header and footer
sections are two containers, the left sidebar is another, the main content
column and navigation are also containers for content. These containers can
also be wrapped within another main container.In your XHTML page within the
body tag you can mark up the containers like this:bodydiv
id='container'div id='header'/div !-- end header --div id='nav'/div
!-- end nav --div id='left_sidebar'/div !-- end left_sidebar --div
id='main_content'/div !-- end main_content --div id='footer'/div !--
end footer --/div !-- end container --/bodyIn the external CSS
stylesheet to which your page is linked to you can have a better idea of how to
mark-up the containers to match your design by first setting different
background colors for each container. For example:#container { background:
#00EE00;}#header { background: #00EECC;}and so forth.Once you have the colors
in place you need to specify the CSS to build and position these containers.
In the header css you can specify a background image which is basically a thin
vertical slice of
Re: [css-d] align image to bottom right corner
On Sun, 26 Aug 2007, karuna sagar k wrote:
For the solution mentioned below - Positioned Image:
could you elaborate on why do we need to style the div with {position:
relative;}?
To elaborate on my parenthetic remark (just to make it possible to
position the image relative to the div): Setting position: relative does
not affect the placement of the div itself but turns the div into a
positioned element. A positioned element creates a frame of reference, a
coordinate system, so that you can position other elements - such as the
image here - relative to it.
Also, couldn't we just style img with {position: relative; right: 0;
bottom: 0;}?
That wouldn't affect its position at all.
Both absolute and relative positioning is relative, just relative to
different things. Relative positioning (position: relative) is relative
to the position where the element would appear in the normal run of
layout. Absolute positioning (position: absolute) is relative to a
coordinate system established by another element.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] more IE 6 problems
Hello, I am having some positioning problems with IE 6 - it looks correct in IE 7, Firefox, and Safari ( I don't know about any others). On the home page, there is extra white on the right hand side of the container, you can see it here - http://www.jgardnerdesigns.com/ Then on the FAQ page the question mark image displays in the middle of the page instead of to the left. You can see it here - http://www.jgardnerdesigns.com/faq.htm Any help or guidance would be greatly appreciated - I don't know what I would do without this group!! Thanks, Jennifer Ready for the edge of your seat? Check out tonight's top picks on Yahoo! TV. http://tv.yahoo.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] more IE 6 problems
JGardner wrote:
On the home page, there is extra white on the right hand side of the
container, you can see it here - http://www.jgardnerdesigns.com/
That seems to be caused by your
#container #content-home #services-box{
margin-right:5px;
}
it seems you don't need it.
Then on the FAQ page the question mark image displays in the middle of the
page instead of to the left. You can see it here -
http://www.jgardnerdesigns.com/faq.htm
Oh, I remember this one. I actually never knew why was it there
(what triggers it), but it disappears if you use any border on the (top
side of the) container, and that's what I did, sorry I can't help you
more than this. Anyone else?
Rafael.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] color consistency, accuracy
sounds like a problem with photoshop or your pc -how are you and your clients calibrating your monitors? Listsmem escribió: Has anyone else noticed this problem before? Open a solid color jpeg in photoshop and use a digital color meter to read its hex value. Then drag and drop the same jpeg file into a web browser and then meter it again. The color values aren't the same. I've found that the browser tends to render it lighter, requiring adjustments to the jpeg before posting to the web. Is this because of the browser, operating system, monitor calibration (gamma) or some other factor? Clients are frequently asking me why the color of the site I build is slightly different than the color of the mockup they give me, even jpeg mockups. Thanks for any help with this matter, especially a technical discussion of why this occurs and any best practices to alleviate this issue. ~Ben __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ Be a better Heartthrob. Get better relationship answers from someone who knows. Yahoo! Answers - Check it out. http://answers.yahoo.com/dir/?link=listsid=396545433 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] css-d Digest, Vol 57, Issue 28
I will be away on vacation until September 4th. I will reply to requests on my return. Best regards, Terri Phillips __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Re: Beginner Layout suggestions
I have found this to be a great resource for modern CSS page layouts, and it's free! http://blog.html.it/layoutgala/ -- E. Michael Brandt www.divaHTML.com divaPOP : standards-compliant popup windows divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] color consistency, accuracy
Listsmem wrote: Has anyone else noticed this problem before? [trimmed] ~Ben Yes. But since it is not necessarily a specific css related problem, you may (?) find http://webdesign-l.com/ a better place to seek an answer. Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] color consistency, accuracy
Hi David, Thanks for the link, I'll definitely check it out. I *do* think this is a CSS related problem just because we are so often trying to match text, borders, blocks of background color (all specified with CSS) to images which are generated from some image editing program or another. I found this article by heavyweight Dave Shea- http://www.mezzoblue.com/archives/2007/06/18/shifting_bac/ It was really helpful and I think covers about 90% of what I am trying to figure out. Hope it helps anyone else out there struggling with this. BL On Aug 26, 2007, at 7:15 PM, David Laakso wrote: Yes. But since it is not necessarily a specific css related problem, you may (?) find http://webdesign-l.com/ a better place to seek an answer. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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: color consistency, accuracy
I *do* think this is a CSS related problem just because we are so often trying to match text, borders, blocks of background color (all specified with CSS) to images which are generated from some image editing program or another. Off topic - no more on this subject please (except that as I'm already cluttering your inboxes...) The bottom line for making sure that your images will display consistently is an issue of using the right colour profile in your image editing program and/or embedding the relevant profile info in your image. Hence the safest policy (usually) is just to stick to the basic RGB profile. Your photoshop is probably using sRGB by default (thanks Adobe). In the future, when CSS3 becomes a reality then colour will become a CSS issue http://www.w3.org/TR/2003/CR-css3-color-20030514/ And proper colour management is arriving in browsers... http://blogs.adobe.com/jnack/2007/06/safari_brings_c.html ... although that may create more problems than it solves if past form is anything to go by http://hsivonen.iki.fi/png-gamma/ Anyhow, start here http://en.wikipedia.org/wiki/Color_management But none of this is really on topic for a list about the nitty gritty of using CSS. So no more discussion of this on list though please. Unless anyone has anything constructive to say about the CSS3 color module... Alex css-d moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] align image to bottom right corner
I already have a background image, a paper background. However, your post got me thinking, I can have another div inside, and set the file cabinet picture as the background to it. After a couple of minutes I got that working nicely. Except the text overlaps the image, so now I'm working at getting the paragraph tags to have enough padding or margin on the right that they won't overlap the image, but so far I can't seem to override the inherited styles for the paragraphs. TTFN, David At 09:32 PM 8/25/2007, Rafael wrote: If all you want to do is put an image at that position, set it as the background, i.e. background: #fff url(path/to/image) right bottom no-repeat; · #fff is the background color, it can be omitted or set to 'transparent' (without the quotes) · 'url' is an actual keyword, and the path should not be between quotes · reference: http://www.w3.org/TR/CSS1#backgroundhttp://www.w3.org/TR/CSS1#background __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] A solution (Re: align image to bottom right corner)
Silly me, I didn't put the period before my cabinet style
.cabinet { margin-right: 7em; }
works a lot better than
cabinet { margin-right: 7em; }
As an English instructor, I should be more careful about my punctuation :-).
I'm able to have the paragraphs have a large
enough right margin to not overwrite the cabinet
image. Thanks Raphael, your suggestion put me on
the right track. It looks and works great (even
if I resize the browser window).
TTFN,
David
At 09:32 PM 8/25/2007, Rafael wrote:
If all you want to do is put an image at
that position, set it as the background, i.e.
background: #fff url(path/to/image) right bottom no-repeat;
· #fff is the background color, it can be
omitted or set to 'transparent' (without the quotes)
· 'url' is an actual keyword, and the path should not be between quotes
· reference:
http://www.w3.org/TR/CSS1#backgroundhttp://www.w3.org/TR/CSS1#background
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] li second line outdenting, how do you get it flush left?
I put a list together for a staff directory and one of them has a much
too long title.
I decided to use a br to move the title to the second line but now it
outdents it
I have it coded like this:
ul id=staff1 class=nobullet
listrongAdmin
Staff/strong/li
liChuck Lindley,
Administrator/li
liJoanne Beasley, Comptroller/li
liKathy de Domingo, br
Director of Performance
Improvement/li
/ul
The style is set for:
ul.nobullet { margin: 0; list-style: none inside}
Is there some selector to get rid of the outdenting?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] li second line outdenting, how do you get it flush left?
On Sun, 26 Aug 2007, Robert Lane wrote:
I put a list together for a staff directory
It seems that wish to make the list unbulleted and indented just a little.
The style sheet
ul.nobullet { margin: 0; list-style: none inside}
is somewhat unsafe for the purpose. Different browsers have different
default rendering for lists. Or, rather, they might have roughly the same
rendering but achieved in different methods in terms of CSS. The browser
default style sheets might do the indent using left margin _or_ left
padding for the list _or_ for the list items. So if you wish to get any
indentation (or non-indentation) different from the default, it's best to
start by killing all indents, e.g.
ul.nobullet, ul.nobullet li { margin: 0; padding: 0; }
and then add a setting for the _desired_ indentation.
and one of them has a much
too long title.
I decided to use a br to move the title to the second line but now it
outdents it
This seems to result from your use of the value inside. It means that the
list bullet appears inside the list item box, not to the left of it, so
some space is reserved for it - even when there is no bullet.
Consequently, subsequent lines start at the left with no indentation (on
browsers on which your margin: 0 setting kills the default indentation).
So the situation is a bit confusing. It's better to create the desired
indentation directly using margin or padding, rather than nonexistent
inside bullets. This also gives you better control over the _amount_ of
indentation.
Moreover, I suspect that you will later wish to have the continuation line
of a list item indented more than the initial line. Otherwise, in the
absence of bullets, it will be difficult to see that a title relates to
the preceding name instead of being an item in the list. One way of
achieving such indentation is to use text-indent with a negative value.
Example:
ul.nobullet { margin: 0 0 0 1.5em;
padding: 0;
list-style: none; }
ul.nobullet li { margin: 0; padding: 0; }
ul.nobullet li { text-indent: -0.5em; }
This results in a 1em (1.5em - 0.5em) indentation of the items and 1.5em
indentation of their continuation lines.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
