Re: [css-d] Making an RTL version of Deco (Drupal Theme)
Hello Farid, Switching an LTR layout to RTL should be straightforward. Vision-wise, it's typically and literally as mirroring the layout. Every single left-aligned element should be right-aligned and vice versa. Here's a list of important things to consider: 1) The most important step is switching the direction in the markup. This is basically done by adding the dir=rtl attribute to the html element. This is a W3C recommendation that the directionality of web page should be declared in the markup. 2) Since you're using a CSS-based layout, then you should be changing the directionality aspects of the presentation. Every left-floated element should be right-floated and vice versa. It's VERY important here to pay careful attention to adjust the padding and margin values to match with the direction. If you've an image that is left-floated and had a right margin, then it should be right-floated and has a left margin. 3) Specifically relating to the above point, you should pay attention that the shorthand form of CSS declarations for padding, margin is on the form: top, right, bottom, left. I see this causing confusion to many beginners. 4) Background images should be also inherit the new directionality. If you something like this: background: #fff url(image.gif) repeat-x top left; it now should be: background: #fff url(image.gif) repeat-x top right; Unless of course it's strictly intended to be on that exact position. 5) Some time you may want to edit the actual graphics of your layout to make them compatible with an RTL layout. For example, if you a faux-column background image that is 160px wide and has a drop-shadow effect on the right, you should use your graphics editor to horizontally flip it. 6) Use text-align: right, instead on all text-related declarations. 7) There are some issues and bugs that you'll encounter, but most of them are trivial IMO. For example, there's no way to support external links styling in RTL layouts, because almost all browsers fail to apply correct padding and margin to inline elements. Also, Firefox (to my surprise :)) has some really annoying and severe bugs in rendering RTL layouts, one of which affects lists that are set to be displayed inline, a technique commonly used in constructing CSS-based navigation. If your site's userbase consists mostly of Firefox users, you'll have to pay more attention to what techniques you're applying. That what came to my mind really now. I'll add to it if I got something else. Good luck, Usamah On Feb 19, 2008 1:32 AM, Farid Jamea [EMAIL PROTECTED] wrote: Deco (http://drupal.org/project/deco) is a drupal theme which I'm thinking about using in my next project. However, I'll be using it with a right to left language; so, basically I'll need everything adjusted for this. I tried to play around with css rules, but eventually I gave up :-) I was wondering if anybody else has used this theme modified for an rtl language? or can give me some general hints to start... There is a demonstration page here: http://www.kvw.be/deco/ This is my humble try so far: http://peyvasteh.com/ Thanks __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Layering of background images help
Hey list,
I have a site that is giving me grief. I want to have an image on top
of two different background images and I just can't seem to figure it
out.
Here are the details...
Temp url: http://69.89.31.183/~pixelago/
Image to layer on top: gif image that is transparent and 210x300px
My template is in WP and as such is in XHTML/CSS and PHP. I have two
different background images being called in the header of the page,
the top part that holds the navigation/website name and the red one
under it.
The CSS that is doing this is:
#header {
float: left;
width: 768px;
padding-bottom: 8px;
background: #FF;
clear: right;
background-image: url(images/header-bg.gif);
background-repeat: no-repeat;
padding-left: 0px;
height: 89px;
margin-top: 13px;
}
And the lower one is:
#navigation {
clear: both;
float: left;
width: 100%;
/*background: url(images/headers/rotate.php) no-repeat 0px
0px;*/
background: url(images/header.gif) no-repeat;
height: 220px;
}
You will see that I have the rotate.php commented out because I was
origninally going to have the lower section have the image built into
that image, but now I want it to float above both of them. If I can
also figure out to have it rotate on page refresh, that will just be
bonus.
So, I have tried to see where to add what to get this image of a skate
sit on the top right third of this page header, and it either breaks the
shell or goes behind the header images, but not on top. Z-index and all
other things I have found on the web just are not working. I don't know
if it because of the PHP or just my lack of understanding CSS...
Probobly that one... : ]
Thanks for the help and suggestions.
Cory
__
css-discuss [EMAIL PROTECTED]
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 an RTL version of Deco (Drupal Theme)
Great Tips. Thank you very much. I'll let you all know how it'll go. On Tue, Feb 19, 2008 at 3:16 AM, Usamah M. Ali [EMAIL PROTECTED] wrote: Hello Farid, Switching an LTR layout to RTL should be straightforward. Vision-wise, it's typically and literally as mirroring the layout. Every single left-aligned element should be right-aligned and vice versa. Here's a list of important things to consider: 1) The most important step is switching the direction in the markup. This is basically done by adding the dir=rtl attribute to the html element. This is a W3C recommendation that the directionality of web page should be declared in the markup. 2) Since you're using a CSS-based layout, then you should be changing the directionality aspects of the presentation. Every left-floated element should be right-floated and vice versa. It's VERY important here to pay careful attention to adjust the padding and margin values to match with the direction. If you've an image that is left-floated and had a right margin, then it should be right-floated and has a left margin. 3) Specifically relating to the above point, you should pay attention that the shorthand form of CSS declarations for padding, margin is on the form: top, right, bottom, left. I see this causing confusion to many beginners. 4) Background images should be also inherit the new directionality. If you something like this: background: #fff url(image.gif) repeat-x top left; it now should be: background: #fff url(image.gif) repeat-x top right; Unless of course it's strictly intended to be on that exact position. 5) Some time you may want to edit the actual graphics of your layout to make them compatible with an RTL layout. For example, if you a faux-column background image that is 160px wide and has a drop-shadow effect on the right, you should use your graphics editor to horizontally flip it. 6) Use text-align: right, instead on all text-related declarations. 7) There are some issues and bugs that you'll encounter, but most of them are trivial IMO. For example, there's no way to support external links styling in RTL layouts, because almost all browsers fail to apply correct padding and margin to inline elements. Also, Firefox (to my surprise :)) has some really annoying and severe bugs in rendering RTL layouts, one of which affects lists that are set to be displayed inline, a technique commonly used in constructing CSS-based navigation. If your site's userbase consists mostly of Firefox users, you'll have to pay more attention to what techniques you're applying. That what came to my mind really now. I'll add to it if I got something else. Good luck, Usamah On Feb 19, 2008 1:32 AM, Farid Jamea [EMAIL PROTECTED] wrote: Deco (http://drupal.org/project/deco) is a drupal theme which I'm thinking about using in my next project. However, I'll be using it with a right to left language; so, basically I'll need everything adjusted for this. I tried to play around with css rules, but eventually I gave up :-) I was wondering if anybody else has used this theme modified for an rtl language? or can give me some general hints to start... There is a demonstration page here: http://www.kvw.be/deco/ This is my humble try so far: http://peyvasteh.com/ Thanks __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] Layering of background images help
Great, thank you so much. I will dig into this and see what I can do.
I have not done a good job of validating yet, but that was next on the list
once I figured this out.
Thank you again for taking the time to help.
Cory
-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED]
Sent: Tuesday, February 19, 2008 11:13 AM
To: Cory Shubert
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Layering of background images help
Cory Shubert wrote:
I have a site that is giving me grief. I want to have an image on top
of two different background images and I just can't seem to figure it
out.
Temp url: http://69.89.31.183/~pixelago/
Layering of images or any other elements can be done in many ways.
Support for multiple backgrounds is still a bit weak, so you'll have to add, or
reuse, a separate element. This separate element can be the image itself (an
img), or any element that can carry a background.
You can then absolute position this element, or float it in a suitable position
and pull/push it into its proper place by its margins.
An example: http://www.gunlaug.no/tos/alien/cs/test_08_0219.html
...using float on a new element, a div #overlay, which is given its own
background. I didn't bother digging for your background, so don't know how that
one will behave.
When using floats this way the separate element(s) must be placed next to the
fix-sized elements it(they) should end up in front of, or else it'll be
impossible to know how far to push/pull it(them) to achieve a stable position.
I've added a 'margin-doubling on floats' fix ('display: inline;) for IE6, and a
'position: relative' for reliable stacking in front.
Note: IE6 show no top-navigation on your page.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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] Layering of background images help
Cory Shubert wrote:
I have a site that is giving me grief. I want to have an image on
top of two different background images and I just can't seem to
figure it out.
Temp url: http://69.89.31.183/~pixelago/
Layering of images or any other elements can be done in many ways.
Support for multiple backgrounds is still a bit weak, so you'll have to
add, or reuse, a separate element. This separate element can be the
image itself (an img), or any element that can carry a background.
You can then absolute position this element, or float it in a suitable
position and pull/push it into its proper place by its margins.
An example: http://www.gunlaug.no/tos/alien/cs/test_08_0219.html
...using float on a new element, a div #overlay, which is given its own
background. I didn't bother digging for your background, so don't know
how that one will behave.
When using floats this way the separate element(s) must be placed next
to the fix-sized elements it(they) should end up in front of, or else
it'll be impossible to know how far to push/pull it(them) to achieve a
stable position.
I've added a 'margin-doubling on floats' fix ('display: inline;) for
IE6, and a 'position: relative' for reliable stacking in front.
Note: IE6 show no top-navigation on your page.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
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
Hayden's Harness Attachment wrote: I am not sure what I am doing wrong. I am using a background URL in a webpage I am designing. The white swoosh is what I want and can not get the Yellw Green above to use my background color.It works fine in other web sites I use it and this server. What am I doing wrong? IE7 and Firefox 2.x are showing the same. HTML http://www.choroideremia.org/new/crf_header.php cSS http://www.choroideremia.org/new/crf_css1.css Angus MacKinnon Angus, It /may/ work out better to put both images on the header-- one called from the source and the other from the CSS. I have no idea how large you guys and your dogs prefer your base font size, but I'd leave it at 100% (default) on the body, and target the selectors for the base size you need. Something like this, maybe like sort of? http://www.chelseacreekstudio.com/ca/cssd/angus.html Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] 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] Compact forms
I've been needing to use compact forms for a few projects. In other words:
the form field's labels need to be INSIDE the input element.
I've been using the following technique (JS), but their is a noticeable lag
as the page loads, and then the script puts the labels into the input box.
http://www.alistapart.com/articles/makingcompactformsmoreaccessible
Would positioning the labels absolutely and way off to the left, and
repeating the labels as the inputs' values be just as accessible? I figure
this would eliminate the form-compacting lag.
Like this:
// CSS
label { position:absolute; left:-999px; }
// HTML
form
label for=firstFirst name/label
input type=text name=first id=first value=First name
onfocus=value='' /
/form
Thanks,
Ben
__
css-discuss [EMAIL PROTECTED]
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] IE6 Not Displaying Absolutely Positioned DIV
Yeah, that showed the positioned element. Is there any way to fix that without bloating it up with an empty DIV? On Feb 20, 2008 9:33 AM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: Can't say for sure, but floats next to absolute positioned elements tend to result in invisible elements. You can test by placing an empty and unstyled div containing only a comment... div!-- --/div ...between the relevant 'A:P' and 'float' elements. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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 Not Displaying Absolutely Positioned DIV
Hi List,
I have a problem with IE6 not displaying the #ranking DIV. I have
searched but I can't find a reason for this problem and my normal
array of solutions to throw at IE6 problems has come up blank. I can't
link to the page on list, but if anyone needs to see it in action
please send me a message off-list. Otherwise the relevant code is
below.
Basically both the #thumbnail and #details DIVs are floated next to
eachother, and #details has 30px padding-left. I want the #ranking DIV
to display in that 30px gap.
-- START --
div class=others
ol
li
div class=thumbnail
div
a href=#
span/span
img
src=images/dummy/melissa.jpg alt= /
/a
/div
/div
div class=details
div class=ranking2./div
h3a href=#Melissa/a span21/span/h3
div class=rating
strongCurrent Rating: 3 stars/strong
ol class=three
li class=one
a href=#1 Star/a
/li
li class=two
a href=#2 Stars/a
/li
li class=three
a href=#3 Stars/a
/li
li class=four
a href=#4 Stars/a
/li
li class=five
a href=#5 Stars/a
/li
/ol
/div
divNSW/div
divLifesaver/div
div class=myprofile
a href=#My Profile/a
/div
div class=voteforme
a href=#Vote For Me/a
/div
/div
/li
/ol
/div
.others { background: #fff; color: #828282;
font-size: 14px;
font-weight: bold; line-height: 16px; padding: 21px 23px; width:
611px; }
.others ol { float: left; list-style: none;
margin-right: -30px; }
.others li { float: left; margin-bottom: 26px;
width: 319px; }
.others div.thumbnail { float: left; }
.others div.thumbnail div { background: #ddd; display: table-cell;
height: 149px; overflow: hidden; text-align: center; vertical-align:
middle; width: 149px; }
.others div.thumbnail div * { vertical-align: middle; }
.others div.details { float: left; padding-left: 30px;
padding-top:
11px; position: relative; width: 140px; }
.others div.details .ranking{ color: #720044; left: 9px; position:
absolute; top: 11px; }
.others div.details h3 { float: left; font-size: 14px;
text-transform: uppercase; width: 140px; }
.others div.details h3 a{ color: #828282; }
.others div.details h3 span { color: #3a3a3a; }
.others div.details .rating { margin-bottom: 4px; }
.others div.details .myprofile a{ background:
url(../images/myprofile2.gif); display: block; height: 39px;
margin-left: -7px; margin-top: 4px; text-indent: -px; width:
105px; }
.others div.details .voteforme a{ background:
url(../images/voteforme2.gif); display: block; height: 21px;
margin-left: -1px; margin-top: 3px; text-indent: -px; width:
112px; }
-- END --
Thanks for any help guys, this one has had me scratching my head for hours.
Cheers,
Blake
__
css-discuss [EMAIL PROTECTED]
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] IE6 Not Displaying Absolutely Positioned DIV
Blake wrote: I have a problem with IE6 not displaying the #ranking DIV. I have searched but I can't find a reason for this problem and my normal array of solutions to throw at IE6 problems has come up blank. Can't say for sure, but floats next to absolute positioned elements tend to result in invisible elements. You can test by placing an empty and unstyled div containing only a comment... div!-- --/div ...between the relevant 'A:P' and 'float' elements. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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] IE6 Not Displaying Absolutely Positioned DIV
On Feb 20, 2008 10:43 AM, Gunlaug Sørtun [EMAIL PROTECTED] wrote: I usually solve/avoid such problems by replacing the 'A:P' styling with a removed float styling... http://www.gunlaug.no/contents/wd_demo_float_03.html ...but can't say if that's an option in your case. Worked a charm. Good technique. :-) Thanks, Blake __ css-discuss [EMAIL PROTECTED] 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] IE6 Not Displaying Absolutely Positioned DIV
Blake wrote: Yeah, that showed the positioned element. Is there any way to fix that without bloating it up with an empty DIV? I usually solve/avoid such problems by replacing the 'A:P' styling with a removed float styling... http://www.gunlaug.no/contents/wd_demo_float_03.html ...but can't say if that's an option in your case. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] 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] wrap text around an absolute image
hello everyone.. Could someone please help? I am working on quite a basic site which has an image positioned absolutely to the right of the page, hanging off slightly. Down the side of the image I have some text which at the moment is forced marginally to the left as a basic column. How do I allow the text to wrap around the image. At the moment the absolute image is taken out of the document flow, so Im not sure how I can get the text to wrap Here is the URL http://www.coloursense.net/testfolder/instructions.html any tips..please.. -- Rob Freeman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] 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] Online CSS Reference available from SitePoint
All, The folks at SitePoint have put together what appears to be a fairly comprehensive online CSS Reference. Check it out: http://reference.sitepoint.com/css Jim __ css-discuss [EMAIL PROTECTED] 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] Online CSS Reference available from SitePoint
That is a good site, I have a book that explains a lot of this information but not all, mostly the information regarding hacks and so forth and what browsers can and can't support. It seems like the newest of all four browsers (IE, FF, Opera, Safari) can do it all now but previous versions were very limited, what if you design your page for the newest and that rare person visits your site using a version of the four browsers that is 2-3 versions behind ? Jim Davis wrote: All, The folks at SitePoint have put together what appears to be a fairly comprehensive online CSS Reference. Check it out: http://reference.sitepoint.com/css Jim __ css-discuss [EMAIL PROTECTED] 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 [EMAIL PROTECTED] 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] wrap text around an absolute image
Rob freeman wrote: How do I allow the text to wrap around the image. At the moment the absolute image is taken out of the document flow, so Im not sure how I can get the text to wrap You can only doing it by getting the image back into the flow ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] 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] wrap text around an absolute image
Rob freeman wrote: How do I allow the text to wrap around the image. At the moment the absolute image is taken out of the document flow, so Im not sure how I can get the text to wrap You can only doing it by getting the image pack into the flow ... -- David [EMAIL PROTECTED] authenticity, honesty, community __ css-discuss [EMAIL PROTECTED] 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] Suckerfish + Sliding Doors IE problem with mouse out
Hello, I have a problem with sliding doors and IE6 and I believe IE7 also. It works perfectly on it's own, but if I plug it into a CMS it doesnt seem to work. The problem is that the sub menus dont disappear when I select a different tab or mouse out of the menu I do nothing at all that is different when I attempt to put this into the cms from my test site, so I am stumped. Maybe some fresh eyes will reveal a stupid mistake. Here's the failing example: http://universityinterview.com/About-CareerCam/ It is the same result for every page. -- Thank You, Parag Jagdale Un-identified LLC www.un-identified.com __ css-discuss [EMAIL PROTECTED] 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/
