[css-d] min-width, width, max-width
Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen is to
wide, the height is so height that we will have a scroll, hence, not being able
to see the video at all.
Is there a way that you may know about, so that we can archive something like
this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
On Oct 18, 2012, at 13:06 , mem wrote:
Hello all,
I'm trying to make a certain video responsive.
width: 100% or max-width:100% and height: auto; will do.
Now, the problem is, in order to maintain the aspect ratio, if the screen is
to wide, the height is so height that we will have a scroll, hence, not being
able to see the video at all.
Is there a way that you may know about, so that we can archive something like
this
video {
max-width: 100%;
height: auto;
}
BUT avoiding the scroll bar to appear, without using overflow:hidden; ?
this doesn't seem to be possible, for logical reasons.
If we wish to keep the aspect ratio, then, if the width augments, the height
augments…
We may try to force it, just to see where we can get, and make something like:
width: 100% height: 100% …
but I've test this earlier and width didn't get the totality of the containers
width.
I believe this is undoable…
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
i don't really understand. Are you constraining the height somewhere else ?
I believe not. But perhaps that is what I should do ?
This works perfectly fine in my test:
div { border: 2px solid red; max-width: 85%; }
video { max-width: 100%; height: auto; width: 100%; }
The video resizes and keeps its aspect ratio (no height is specified
elsewhere - not using the width and height attribute on the html element)
divvideo controls=controls
source src=video.mp4 type=video/mp4
alt text
/video/div
On top of the video we have content.
At the bottom (the footer) we have content.
The video should stay on the middle of that.
The video should always be be, totally visible.
Here's a test case:
!DOCTYPE html
html lang=en
head
meta charset=utf-8
titleHello User!/title
style type=text/css
div#video-border { border: 2px solid red; }
video { max-width: 100%; height: auto; width: 100%; }
/style
/head
body
div
div
Im the navigation!! Wupii
/div
div
pI'm more text, more things/p
pI'm more text, more things/p
/div
div id=video-border
video controls=controls
source src=http://video-js.zencoder.com/oceans-clip.webm;
type=video/webm /
alt text
/video
/div
div id=footerpI'm the footer hello/ppI'm the footer yeah
again/p/div
/body
/html
Philippe
--
Thanks for your reply, for such an ignorant question.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] min-width, width, max-width
I had a problem with the video aspect ratio that make me doubt of css and html. The problem however was within the aspect ratio and NOT html and css. To cut the story short: height: auto; max-width: 100%; do the job perfectly. I will pushing myself severely. Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a div
Other more experienced may help better then me. Still. I would play with floats. 1) Add overflow:hidden; to your #container 2) Add float: left; to both: vmenu and content; 3) Add overflow:hidden; to your #content 4) Group on a div, your h3 and img inside #content; 5) Float left your blue div; 6) Float left your red div; 7) Give your #footer the following: clear: both; (or left); From here, validate your markup and css, and if in doubt, post back. k. regards, mem On Sep 27, 2012, at 16:24 , Del Wegener wrote: Good Morning; A colored illustration of my problem is at http://www.alliedcorrosion.com/products/aa_testing.php My question also appears in the green box in that illustration. I have a pretty standard vertical menu (orange) on the left with content (gray) on the right. At the top of the content area will appear a left div (blue) and right div (red). Below those two is to be a div (green) which is as wide as the gray content div (and is inside that content div) and touches the bottom of the longer of the blue or red div. When I use clear:both or clear:left, the green div clears the menu div which puts it far to far down the page. How do I fix this? Thanks Del __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning Div Order with Media Queries
On Sep 19, 2012, at 22:07 , Matthew Willis wrote: Hi CSS List, I am working on a site with a responsive layout via media queries and I'm having some difficulties. I need it set up so when the width of the screen is above 768px, a div containing logo appears as the first element, and then a div containing the navigation menu as the next element. However, on any screen 768px wide or less, the menu should sit above the logo. I would advice against that. If you wish to tweak the structure, then perhaps you are looking for different websites. One for mobile and another for the other media ? If you wish not to have different websites, then, what reason could one have to change the structural markup ? If you still desire that, perhaps you can float your later div, and add a considerable padding to your first div achieving a reordered effect ? - Matthew Only my 2 cents. Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid layout - how to make images to scale ?
On Aug 30, 2012, at 19:59 , Micky Hulse wrote: Looks like images are scaling in Firefox latest on Mountain Lion. What browser are you not seeing scaling? The only image that does not scale is the #highlight-wrapper because it's a bg image. Hm… Here's my test case, and what I do expect to happen: Test case: Browsers: Firefox 15.0 / Chrome 21.0 IOS: MAC OS X Lion - 10.7.3 Resolution: 1920x1200 What I get: I get an image that doesn't scale until the end of it's container. The img width won't fit the article element that contains it. What I do expect: I expect the image to enlarge, until it reaches the end it's container. Visually, I'm expecting the image to be as wide as the paragraph immediately below, in a way that, the right side of the image stays vertically aligned with the right side of the paragraph below. k. regards, mem Maybe I'm missing something? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] liquid layout - how to make images to scale ?
On Aug 30, 2012, at 19:59 , Micky Hulse wrote: Maybe I'm missing something? No. But I was. :) I was thinking that the max-width will format my img to be as wide as the container but it doesn't. I either should use width. Or upload a bigger image and use max-width to get the desired effect. Thanks again for taking your time. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] trouble with @font-face
You are declaring a font-face and you are using that same name to declare the
font. So, as far as I can tell, that seems to be ok.
The problem being, the path of the font files.
I've noticed that you are calling your fonts css twice.
On your head you are targeting fonts.css with this:
@font-face {
font-family: 'ChunkFiveRegular';
src: url('chunk-webfont.eot');
src: url('chunk-webfont.eot?#iefix') format('embedded-opentype'),
url('chunk-webfont.woff') format('woff'),
url('chunk-webfont.ttf') format('truetype'),
url('chunk-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
On your master styles.css you are importing this:
http://www.integrityheatingair.com/stylesheets/fonts.css
@font-face {
font-family: 'ChunkFiveRegular';
src: url('../chunk-webfont.eot');
src: url('../chunk-webfont.eot?#iefix')
format('embedded-opentype'),
url('../chunk-webfont.woff') format('woff'),
url('../chunk-webfont.ttf') format('truetype'),
url('../chunk-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Perhaps if you have only one, you can narrow the problem. :)
k. regards,
mem
On Jul 9, 2012, at 16:29 , Chris Kavinsky wrote:
I'm having some issues getting @font-face to wok on a site and I'm sure I'm
missing something simple. Its a static html site (for now) and got the font
from fontsquirrel.com. I originally had the font files in a subdirectory
and the stylesheets in another, so thought that was the problem.
- I moved both the CSS and font files into the root, no luck
- I tried both relative and absolute paths in the CSS to the font files, no
luck
- I cut and pasted the CSS code from the fontsquirrel-generated file, no
luck
Here's the link to the site. Hopefully someone can see what I'm obviously
overlooking:
http://integrityheatingair.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper DIV vs. BODY
On Jun 21, 2012, at 18:35 , David Hucklesby wrote: What benefit is there to a wrapper DIV on a web page? It seems to me that the BODY element serves all that's needed for styling a page. It can have a width; can be centered with auto side margins; can have its own background; has a new block-formatting context; and elements can be positioned relative to it. All this without any CSS that a wrapper DIV may need to have these properties. I can only imagine there is some CSS reason for the extra markup, but so far have not found it. Anyone? I agree with your assumptions. I still use some wrapper element here and there, on given cases. For example: I normally use one wrapper element when I wish to make a visual distinction. Regardless the monitor / resolution, I wish that my content (inside that wrapper) stays centered, but still, allow users with big monitors to see a visual continuation flow by adding some background to the body. Perhaps I'm not seeing it properly, but until know, I'm taking the body element as the viewport area and the wrapper as the content container area; Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Wrapper DIV vs. BODY
On Jun 21, 2012, at 18:47 , mem wrote: Perhaps I'm not seeing it properly, but until know, I'm taking the body element as the viewport area and the wrapper as the content container area; [SIC] now instead of know. (and possible other issues as well); __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Destroys Website
On Jun 19, 2012, at 21:15 , Brett Goodrich wrote: Check out http://ccbci.org/the-courses/ Perhaps you may wish to validate your markup and check again IE results. Otherwise, you will end up having to much trouble debugging it. Cheers mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie8 and ie9 font-size em issue and container to narrow.
Please take a look on the following page:
http://teias.dev/about
By looking into good browsers and IE you will find two issues:
1)
The point was to have the background narrow then the line-height so, I've come
up with this:
article header hgroup h1 {
display:inline-block;
padding-top: 5px;
margin-right:2px;
}
article header hgroup h1 span {
display:inline-block;
background: #d8e5e4;
font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
padding-left: 2%;
line-height: .9;
font-size: 2.6em; -- ON IE 9 (at least) we get a HUGE font instead of the
desired size like seen on good browsers;
}
ISSUE:
The font size on hgroup h1 span is HUGE.
The way I found to fix was to pass that font-size declaration to it's parent
- is this ok ?
2)
article is taking 70% of something else, but not the intended container.
As you can see, ALL article content is to narrow when compared with the same
article rendered on good browsers.
Haven't found any way to properly solve this.
Any clue ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie8 and ie9 font-size em issue and container to narrow.
bad link. My bad.
http://dev.teias.org.pt/about
k. regards,
mem
On Jun 13, 2012, at 13:05 , mem wrote:
Please take a look on the following page:
http://teias.dev/about
By looking into good browsers and IE you will find two issues:
1)
The point was to have the background narrow then the line-height so, I've
come up with this:
article header hgroup h1 {
display:inline-block;
padding-top: 5px;
margin-right:2px;
}
article header hgroup h1 span {
display:inline-block;
background: #d8e5e4;
font-family: 'MisoLight', 'Helvetica Neue',Helvetica,Arial,sans-serif;
padding-left: 2%;
line-height: .9;
font-size: 2.6em; -- ON IE 9 (at least) we get a HUGE font instead of the
desired size like seen on good browsers;
}
ISSUE:
The font size on hgroup h1 span is HUGE.
The way I found to fix was to pass that font-size declaration to it's
parent - is this ok ?
2)
article is taking 70% of something else, but not the intended container.
As you can see, ALL article content is to narrow when compared with the same
article rendered on good browsers.
Haven't found any way to properly solve this.
Any clue ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie8 and ie9 font-size em issue and container to narrow.
Hello, Thanks again. 2/ Not sure what you mean regarding the width of the article; however, once issue 1/ is resolved, then issue 2/ may no longer be problematic [IE 8/9 will resolve itself] ? I was seeing the site on a 1024 resultion on IE, and I missed a rule there. So it wasn't an issue. All clear. ps- I will request the list help once I start dealing with my first (oh yeah) mobile friendly (or at least, mobile colleague) version. :) Thanks a lot, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering a form inside multiple divs
Can you please provide us a link?
You have several other classes and elements that my apply, and it would be
important to see them all.
Cheers,
mem
No dia 12 de Jun de 2012 19:45, Mark Weiss dadwe...@mac.com escreveu:
I need to center this form inside multiple divs
I have tried setting the margins I have tried doing them auto and setting
the widths and feel like I am just casting about.
Can someone help me figure this out?
I have tried:
.loginpanel {
text-align: center;
margin-left: 10em;
margin-right: 10em;
width:100em;
}
.loginpanel {
text-align: center;
margin-left: auto;
margin-right: auto;
width:100%;
}
Not working.
Here's the css.
div class=loginpanel
h2Returning to this web site?/h2
div class=subcontent loginsub
div class=desc
Login here using your username and password
br
(Cookies must be enabled in your browser)
span class=helplink
/div
(here is the form I want to center in the browser page)
form id=login method=post action=
http://sionline.mrooms.net/login/index.php;
div class=loginform
div class=form-label
label for=usernameUsername/label
/div
div class=form-input
input id=username type=text value=
size=15 name=username
/div
div class=clearer/div
div class=form-label
label for=passwordPassword/label
/div
div class=form-input
input id=password type=password
autocomplete=off value= size=15 name=password
input id=loginbtn type=submit
value=Login
div class=forgetpass
/div
div class=clearer/div
/div
/form
/div
Thank you.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Jun 7, 2012, at 8:46 , Philippe Wittenbergh wrote: Le 7 juin 2012 à 06:23, mem a écrit : So, perhaps this is what I'm not getting: if we float an element to the right, for example, but we give it a width of 100% what will that float: right visually accomplish ? Nothing,… maybe ? No, not really nothing. Floating elements has lots of implications (not only for the element itself, but for the flow of the document). Floating that element might have implications for how the content (descendants) of that element affect the element itself. Floating the element also affects margin-collapsing. It will affect how subsequent block elements behave. For example, floating the element establishes a block formatting context (css2.1:9.4.1) - as such it will contain floated descendants. -- Philippe Wittenbergh http://l-c-n.com I will note that. When the time comes, I will properly read and study the replies provided and other that may follow. note: That reply was intended to leave yesterday (prior to Georg reply), but it got stuck on outbox box for some reason. Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] pseudo classes and background position elements - a test case
I should work, and study the previous post answers, still, I'm also trying to understand this (no floats involved issue) :) Please check the following test case: http://jsfiddle.net/NU3ZR/ This works, but I don't understand what is the role of left: 0; here. Obviously (or not), I tried to make: left: 50%; but the triangle don't get centered as expected. It only gets centered when we: 1) place that left: 0%; (and perhaps (not tested) to 100%); 2) define the background image to be horizontal positioned to 50%; Can anyone please care to clarify what's the role of left:0; here ? k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help on understanding a float behavior with a % margin
Hello all, Can you please take a look on the following snipped and either edited and/or explain here, why, when we add a *percentage* value on margin, we get some li to drop the float ? http://jsfiddle.net/vNmjS/ k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Jun 6, 2012, at 18:02 , Georg wrote:
On 06.06.2012 18:16, mem wrote:
Can you please take a look on the following snipped and either edited and/or
explain here, why, when we add a *percentage* value on margin, we get some
li to drop the float ?
http://jsfiddle.net/vNmjS/
Question: how wide is the float? :-)
I believe it is, as wide as their contents.
And that should be X% wide.
But not 100% wide, unless, their contents correspond to the totality of the
container.
I still not get with if we do px or em it don't drop, and if we use % it
drops...
A more normal way to do this, is to declare...
div#container {
float: right; /* or 'left' */
text-align: right;
width: 100%;
}
...which provides enough space in most cases. The ul itself will of course
work fine as only container, with a similar styling.
I see that we float right an element of 100% width. That seems to take no
effect on their contained elements, it only takes effect when we text-align:
right the inline or text elements inside.
Indeed it works but I still don't totally understand the solution.
Why should we declare a width of 100% will it not normally taken as 100% by
default ?
Please discard all nonsense that I may be saying here.
regards
Georg
Thanks a lot,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on understanding a float behavior with a % margin
On Jun 6, 2012, at 20:55 , Tom Livingston wrote:
On Wed, Jun 6, 2012 at 2:51 PM, mem talofo.l...@gmail.com wrote:
On Jun 6, 2012, at 18:02 , Georg wrote:
On 06.06.2012 18:16, mem wrote:
Can you please take a look on the following snipped and either edited
and/or explain here, why, when we add a *percentage* value on margin, we
get some li to drop the float ?
http://jsfiddle.net/vNmjS/
Question: how wide is the float? :-)
I believe it is, as wide as their contents.
And that should be X% wide.
But not 100% wide, unless, their contents correspond to the totality of the
container.
I still not get with if we do px or em it don't drop, and if we use % it
drops...
A more normal way to do this, is to declare...
div#container {
float: right; /* or 'left' */
text-align: right;
width: 100%;
}
...which provides enough space in most cases. The ul itself will of course
work fine as only container, with a similar styling.
I see that we float right an element of 100% width. That seems to take no
effect on their contained elements, it only takes effect when we text-align:
right the inline or text elements inside.
Indeed it works but I still don't totally understand the solution.
Why should we declare a width of 100% will it not normally taken as 100% by
default ?
Floating an element causes it to constrict to the width of it's contents, no?
Yes. You are right.
So, perhaps this is what I'm not getting:
if we float an element to the right, for example, but we give it a width of
100% what will that float: right visually accomplish ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering contents on a div horizontally - text-align center or not ?
And, as example, say you want the odd centered image in a paragraph with
left- or right-aligned text, you may markup and style it something like
this...
pSome left-aligned text above#8230; img class=tac src=... alt= /
#8230; and below a centered image./p
p {text-align: left;}
p img.tac {display: block; margin: .4em auto;}
...and the now block-level styled image will split the text vertically and
stay centered in the paragraph.
regards
Georg
Thanks a lot Georg,
I've played with your example a little. I leave a link if someone else in the
near future wishes to play with those concepts.
http://jsfiddle.net/Wz4Ck/9/
Regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] centering contents on a div horizontally - text-align center or not ?
Hello,
I have those divs with a width of 33% each. (yes, they are three) :)
All contents inside, like p, img, and perhaps other divs, should be place at
the center horizontally.
Here's what I have that works:
#bottom-left-column,
#bottom-middle-column,
#bottom-right-column {
float:left;
width:33%;
text-align:center; /*center contents on those boxes*/
/*border: 1px dashed magenta;*/
}
My question is:
It seems to me that, using text-align:center; should serve the propose of
centering text and NOT img and other nested divs, am I wrong ?
What would be the proper way, for doing this ?
I've tried:
margin-left: auto;
margin-right: auto;
Nothing happened.
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering contents on a div horizontally - text-align center or not ?
On May 22, 2012, at 13:26 , Georg wrote:
On 22.05.2012 06:34, mem wrote:
My question is: It seems to me that, using text-align:center; should
serve the propose of centering text and NOT img and other nested
divs, am I wrong ?
Yes, in that 'text-align: center' centers inline-level elements/content and
not block-level elements. Since you can alter inline-level elements to
become block-level elements, and the other way round, you have to keep
track of what level each element actually is at when you style nested
elements.
An 'img' is for instance inline-level by default, and will therefore be
centered by 'text-align: center', if you haven't redefined the 'img' to
become a block-level element by means of a general or specific declaration
for images.
Also, elements nested inside an element with 'text-align: center' declared on
it, will inherit that declaration unless or until you override it by another
'text-align' declaration. So although nested block-level elements won't
themselves be centered, their inline-level content will be centered by the
inherited declaration.
Philippe has covered the rest... :-)
regards
Georg
Thanks a lot for those clarifications. Let's see if I get this:
So, precisely speaking, even if we have a *p* and the text inside the *p*
appears centered, the *p* himself doesn't.
We may think that *p* (a block level element by default) is centered, where, in
fact, only the text inside is.
Plus:
So even if we have a nested div with some text and images inside, that div (a
block element by default) will NOT be centered, but it will seem to be, because
their contents, mostly texts and the images (inlines by default), will be
centered.
Example:
http://jsfiddle.net/Wz4Ck/
So, using text-align center as I did:
#bottom-left-column,
#bottom-middle-column,
#bottom-right-column {
float:left;
width:33%;
text-align:center; /*center inline contents and text on those boxes*/
}
Is perfectly valid. We can do it, if we understand what we are centering, what
we wish to center, and the nested effects that has.
Is this ok ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout with irregular shapes - what techniques are available for us today ?
Assuming your fluid layout is taking tablets in the mix the images
need to fold from a full window to 1024 [tablet horizontal] and 768
[tablet vertical].
One approach you might consider for the large yellow-gold shape is to
set as a foreground image:
img{display:block;width:100%;height:auto;}
And superimpose the white text on top of that image.
By thinking on David suggestion I just thought :
Instead of superimpose the white text on top of an image, it's possible to use
media queries to change the background of that element, when window is narrow
then x ?
Or this is not acceptable ?
Thanks a lot,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image merged with backgound with gradient
On May 19, 2012, at 20:30 , David Laakso wrote: On Sat, May 19, 2012 at 2:58 PM, meera kibe meera_k...@yahoo.com wrote: I want to implement the following: A image merged with a background with gradient. Something similar to http://www.sittercity.com/au-pair in the Find available au-pairs. I would appreciate any advice Thanks Meera Hello, David L. suggestion is the most clear way of doing it I believe since it doesn't require extra elements on your markup. As a drawback, since it's cs3, it will only target modern browsers. Not sure if this works but, if you wish to target older browsers but not that old as IE6, perhaps you can do like this: a) create an element A that contains and image. b) create an element B that contains the image container A; c) On element B you may repeat a certain image to make the gradient feel. d) On element A you may create that background image with a transparency so that the gradient may appear behind. k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image merged with backgound with gradient
On May 19, 2012, at 20:30 , David Laakso wrote:
On Sat, May 19, 2012 at 2:58 PM, meera kibe meera_k...@yahoo.com wrote:
I want to implement the following:
A image merged with a background with gradient. Something similar to
http://www.sittercity.com/au-pair in the Find available au-pairs.
I would appreciate any advice
Thanks
Meera
You might consider using CSS3 for the gradient.
Please see the .box_gradient {..} generator here:
http://css3please.com/
Silhouette the image with a transparent background and use absolute
positioning top right to put it on top of the gradient box.
By taking David L. suggestion:
About the CSS3 options, if you need to play on the background with both, image
and gradient, this may work:
I.e - an image on our background, on the bottom left of a given container, and
a gradient from right to left.
background-color: #f6f6f6;
background-position: bottom left;
background-repeat: no-repeat;
background-image: url(image_url), -webkit-gradient(linear, right, left,
from(#f6f6f6), to(#fff)); /* Saf4+, Chrome */
background-image: url(image_url), -webkit-linear-gradient(right, #f6f6f6,
#fff); /* Chrome 10+, Saf5.1+ */
background-image: url(image_url), -moz-linear-gradient(right, #f6f6f6,
#fff); /* FF3.6+ */
background-image: url(image_url), -ms-linear-gradient(right, #f6f6f6,
#fff); /* IE10 */
background-image: url(image_url), -o-linear-gradient(right, #f6f6f6, #fff);
/* Opera 11.10+ */
background-image: url(image_url), linear-gradient(right, #f6f6f6, #fff);
Cheers,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] image merged with backgound with gradient
By taking David L. suggestion: About the CSS3 options, if you need to play on the background with both, image and gradient, this may work: I.e - an image on our background, on the bottom left of a given container, and a gradient from right to left. background-color: #f6f6f6; background-position: bottom left; background-repeat: no-repeat; background-image: url(image_url); /*so that if the browser doesn't support the next lines, the image still appears */ background-image: url(image_url), -webkit-gradient(linear, right, left, from(#f6f6f6), to(#fff)); /* Saf4+, Chrome */ background-image: url(image_url), -webkit-linear-gradient(right, #f6f6f6, #fff); /* Chrome 10+, Saf5.1+ */ background-image: url(image_url), -moz-linear-gradient(right, #f6f6f6, #fff); /* FF3.6+ */ background-image: url(image_url), -ms-linear-gradient(right, #f6f6f6, #fff); /* IE10 */ background-image: url(image_url), -o-linear-gradient(right, #f6f6f6, #fff); /* Opera 11.10+ */ background-image: url(image_url), linear-gradient(to right, #f6f6f6, #fff); Cheers, mem Correction - this will work: background-color: #f6f6f6; background-position: bottom left; background-repeat: no-repeat; /* --- added*/ background-image: url(image_url); /*so that if the browser doesn't support the next lines, the image still appears */ background-image: url(image_url), -webkit-gradient(linear, right, left, from(#f6f6f6), to(#fff)); /* Saf4+, Chrome */ background-image: url(image_url), -webkit-linear-gradient(right, #f6f6f6, #fff); /* Chrome 10+, Saf5.1+ */ background-image: url(image_url), -moz-linear-gradient(right, #f6f6f6, #fff); /* FF3.6+ */ background-image: url(image_url), -ms-linear-gradient(right, #f6f6f6, #fff); /* IE10 */ background-image: url(image_url), -o-linear-gradient(right, #f6f6f6, #fff); /* Opera 11.10+ */ /* --- added the to*/ background-image: url(image_url), linear-gradient(to right, #f6f6f6, #fff); Cheers, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check please
Can you please view this website and give me your comments? Especially from technical point of view. Any quirks or strange behaviour or whatever? I hope i will get an overview of how this site works/acts on different browsers and platforms. http://beta.sterrenhofje.nl If you wish to allow users with bigger font sizes to read the information on your site, and if you wish to target your site for other platforms other then a specific standard view, I will start thinking about digging into the world of fluid css design. I'm a beginner myself on those matters, but I believe that, according the your goals, that's the way your site, technically speaking, should go. Thank you, Erik Visser Cheers, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout with irregular shapes - what techniques are available for us today ?
One approach you might consider for the large yellow-gold shape is to
set as a foreground image:
img{display:block;width:100%;height:auto;}
And superimpose the white text on top of that image.
Thanks. I will search for ways to place the text on top of the image.
Perhaps, by putting it as position absolute, inside the same container as the
image.
+1 for taking into consideration that white text on a white page will
be unreadable for users who employ a healthy minimum font-size or
those who may scale the fonts.
Ok. Indeed, we must be careful to, when the user resizes, that white text
should never pass that yellow-gold shape, and the same goes for footer.
Best,
David Laakso
Thanks a lot, again.
I will now deal with it and test a lot. :)
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fluid layout with irregular shapes - what techniques are available for us today ?
Hello all, I have this irregular layout that needs to be done: --- HEADER HERE --/-_-_--- --~~---/''' FOOTER --- So: /-_-_ and ~'''~ and /''' are fancy things that the layout have. Some of them are curves. Visually, this seems that one div is overlapping the other div and have irregular shapes. One possible solution is to crop images in a way that the end of one div glues with the beginning of another div, giving the impression that they are one solo unit. Another possible yet incredibly laborious solution would be to draw this all thing with CSS polygonon like the frog on css-tricks. I'm totally new to this irregular challenges and my question is: What techniques exist that allow us to accommodate the irregular nature of a given layout with a fluid layout choice ? k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fluid layout with irregular shapes - what techniques are available for us today ?
Hello again, Thanks for the feedback. Here is the URL containing the layout : http://www.tiikoni.com/tis/view/?id=a4f3585 I was thinking about: 1) doing some crops on those irregular shapes. 2) make use of background image property. 3) make sure the crops are much more wider in order to accommodate higher resolutions. May this be a good approach ? Or should I be brave and go for some sort of sliding doors technique ? I see nothing else to do here. Please note: I don't care if IE7 and earlier versions aren't targeted. A mobile version was not purchased by the client so, we don't have that need here. Thanks a lot. k. regards, mem On May 18, 2012, at 1:23 , David Laakso wrote: On Thu, May 17, 2012 at 3:09 PM, mem talofo.l...@gmail.com wrote: What techniques exist that allow us to accommodate the irregular nature of a given layout with a fluid layout choice ? k. regards, mem Most all of us face that situation on a daily basis particularly if the need at-hand is to hit desktop, high-dpi laptop, tablet, and and an assortment of various mobile-handsets from one address. It might be to your advantage to provide the list with picture of exactly what it is that your client's print-media designer has decided she would like to make happen on the Web: A picture is worth a thousand words. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional styles don't seem to apply - why?
Thank you all. It was a path issue, regarding the server side programming language in question. K. Regards, and thanks again for your availability, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Compatibility mode - forced to not appear
This a little of topic, but still css related. :) I'm desperate. :) Indeed. Any known way to force the browser to not use compatibility mode at all ? (without going to each bad browser users and yelling at them that, despite not being there fault on such a stupid decision, they still shouldn't use it) ? :) k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Compatibility mode - forced to not appear
On Jan 13, 2012, at 10:43 , Philip TAYLOR wrote: Won't the correct DTD (e.g., HTML 4.01 Strict) accomplish that ? Arrgh! My bad. I'm talking about an HTML5 page. Something like this seems to help, but I've seen a lot of comments telling that, that isn't applied on all users. meta http-equiv=X-UA-Compatible content=IE=edge mem wrote: This a little of topic, but still css related. :) I'm desperate. :) Indeed. Any known way to force the browser to not use compatibility mode at all ? (without going to each bad browser users and yelling at them that, despite not being there fault on such a stupid decision, they still shouldn't use it) ? :) k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Compatibility mode - forced to not appear
On Jan 13, 2012, at 12:01 , Philippe Wittenbergh wrote: On Jan 13, 2012, at 7:52 PM, mem wrote: Something like this seems to help, but I've seen a lot of comments telling that, that isn't applied on all users. meta http-equiv=X-UA-Compatible content=IE=edge it is supposed to work, according to the MS docs or, if you're on apache 2, stick this in your .htaccess file or your apache config: Header set X-UA-Compatible IE=Edge hasn't failed for me. yet. Ahhh .htaccess file. Seems to be the right place to go for such a bad behavior. I will use that indeed. Thanks a lot. m. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] conditional styles don't seem to apply - why?
Hello all,
I have this on my application:
!--[if lt IE 9]
link rel=stylesheet href=badbrowser.css/
![endif]--
Earlier I have declared the main.css (the one valid for all), with this:
#some-selector {
width: 16em;
}
On this badbrowser.css I have:
#some-selector {
width: 14em;
}
But when I look on IE8 he get's width:16em; no matter what.
I can absolutely guarantee that the selector is the same.
What am I doing wrong? Is the the expected behavior ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grfx/text alignment
On Jan 8, 2012, at 21:00 , Kim Brooks Wei wrote: HI People, I'm having trouble figuring out how to align pictures and text here http://is.gd/B7MBSg. I got a 404 page, perhaps it's another page, since I see no petition graphic there. k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Where is the document for the syntax @media (-webkit-transform-3d)?
On Dec 27, 2011, at 17:28 , Peng Yu wrote: Hi, Where are things like -webkit-transform-3d that can be used with @media documented? -webkit- is a vendor specific prefix, cf. section: 4.1.2.1 http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords -webkit- specifically it seems to be Apple related layout engine. So best info I know about this is: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/%28null%29-SW1 -- Regards, Peng Hope this helps, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css to suit the cms
On Dec 26, 2011, at 13:11 , Ram wrote: Any tips or pointers in terms of CSS while replicating the site in CMS? Hello, I'm a little fish, and this is a little tip that I'm not even sure if it's a good one. But, if your CMS makes some inline styles, it would be nice to develop your own CSS and place !important on those rules that you know your CMS shouldn't override; k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two validator parse errors - why ?
Hello all, If we validate this CSS as CSS 3 : http://dev.zoom.org.pt/ You will see that the validator will trow two parse errors. I don't understand what am I missing here; The css related file should be: http://zoom.dev/styles/main.css Any clue about how can we fix those errors ? Thanks in advance, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two validator parse errors - why ?
On Dec 26, 2011, at 13:58 , Jukka K. Korpela wrote: 2011-12-26 15:29, mem wrote: If we validate this CSS as CSS 3 : http://dev.zoom.org.pt/ You will see that the validator will trow two parse errors. Both error messages are caused by the same syntax error, namely the use of 1. as a line-height value. In CSS, a number that contains a decimal point needs to have at least one digit after the point, so you need to use just 1 or 1.0 or perhaps some other well-formed value. (Setting line-height: 1 usually creates too tight setting.) Thanks a lot for the clarifications. The css related file should be: http://zoom.dev/styles/main.css That's not the CSS file referenced in the HTML document specified, and zoom.dev doesn't even seem to exist. Indeed dev.zoom.org.pt since that address is a local one. Sorry. :( Yucca Thanks a lot. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] off-topic gmail delay
Hello all, I've asked some questions and I had some answers. I've also replied to those answers. So please do not take me as rude for not replying. I have indeed replied, but it happens that this gmail account was having some delay on delivering the messages, and that delay is something that I'm totally unaware. For the time being, I am not even sure if those replies have already arrived to the list. Sorry for this off-topic consideration. k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] input field extra bottom space on IE7
Hello all, This seems to be working, thanks to some valuable members input and considerations: http://help.nuvemk.com/testStructure2/ On IE7 however, our input fields seem to have an extra bottom space that I can't identify if it's margin or padding, but the issue is there. Can please someone help me to fix it ? (how can one see a visual image of margin or padding on IE developer toolbar ?); Thanks a lot, m. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] navigation list with bullet and background color change.
Thank you all, again. :) Issue solved. M. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] navigation list with bullet and background color change.
I'm trying to make a list that will change tree things on hover: text color; background color; bullet image; Can I please ask you guys to have a look here: http://jsfiddle.net/4PUFa/5/ It seems that, when we mouse hover the padding area, we will have a red text over a red background, a bad combination that should never arrive. Can I have your help in order to solve this for good ? k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] header vanishes on ie7 and ie8
Hello all, Can anyone point me out why, here, the header vanishes on IE 7 and IE 8 ? http://help.nuvemk.com/testStructure/ thanks a lot, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] header vanishes on ie7 and ie8
On Nov 27, 2011, at 11:29 , Jukka K. Korpela wrote: 2011-11-27 11:44, mem wrote: Can anyone point me out why, here, the header vanishes on IE 7 and IE 8 ? http://help.nuvemk.com/testStructure/ A tricky bug, but the fix seems to be surprisingly simple: add the body tag. Caveat: I have analyzed the bug and tested the fix using IE 9 (Win 7) with browser mode set to IE 7, not using real IE 7. Looking at the page on IE 9 in browser mode IE 7 and hitting F12 and then inspecting the document tree, I noticed that IE shows there the header element as sub-element of head, not body. So it apparently does not get right where the body starts, and the explicit body tag (right after /head of course) helps here. Yucca Thanks a lot Yucca, How did I forgot the body tag?! omg… :( Again, thanks, k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav not floating right
Page with only one header set in it. Please see http://chelseacreekstudio.com/me1.html Page should hold and show now in IE/8 and IE/7. Probably needs a little adjustment for IE/7 [guessed-- no IE/7 hereabout now]. Not sure that repeating the header the way you've done in your sample is going to buy you much more than grief but I am always open to precarious adventures… http://help.nuvemk.com/zoomHomePage/ FF 7, IE 9, Chrome 15, Safari 5.1 - seems to render and allow 2 times zoom; IE 7 is a complete mess, it should never be perfect but at least preserve the info. IE 8 - I can even see nothing then the background. I've used some display:inline-block; to contain the floats, because overflow hidden will not work since I'm using borders with shadows. But perhaps clearfix should be used instead ? @David: Can you please post back your link if possible ? http://chelseacreekstudio.com/me1.html If not, no problem. Either way, I will try to remake the all think again, since I do believe it would be hard to fix all issues here. :/ Regards, Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] center vertically - a quest
Hello all, again. This is hard. (At least it seems to be); I should have a container of a min-width and min-height defined so that, if the image inside that container is very tiny, the container should maintain is position, by having the contained image centered, both vertically and horizontally. We will not know image dimensions. The only thing we know is that, why will not be wider or higher then a certain value. Excluding good browsers, the solution must work on ie8 and sup; I can't find a way to vertically and horizontally center those images, and keeping a min-height and width defined. Can I have your help please? cf: .logo-organization-home http://help.nuvemk.com/centerImages/centerplease.php http://help.nuvemk.com/centerImages/style.css Thanks, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center vertically - a quest
On Nov 16, 2011, at 22:47 , mem wrote: Hello all, again. This is hard. (At least it seems to be); I should have a container of a min-width and min-height defined so that, if the image inside that container is very tiny, the container should maintain is position, by having the contained image centered, both vertically and horizontally. We will not know image dimensions. The only thing we know is that, why will not be wider or higher then a certain value. Excluding good browsers, the solution must work on ie8 and sup; I can't find a way to vertically and horizontally center those images, and keeping a min-height and width defined. Can I have your help please? cf: .logo-organization-home http://help.nuvemk.com/centerImages/centerplease.php http://help.nuvemk.com/centerImages/style.css Additional notes: 1) .logo-organization-home or, a container of this, should be floated left; (because this will fit the layout like this, and that the reason I leave that property defined there. 2) This is semantically relevant information and not decorative, so using background position may not fit on this case. Thanks a lot! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] box-shadow don't display on the right side
Hello all,
I'm building the following:
http://help.nuvemk.com/floatedFluidLayoutHtml5/
http://help.nuvemk.com/floatedFluidLayoutHtml5/style.css
Line 125 and next I have:
#navigation-and-slideshow {
width: 100%;
overflow: hidden;
background-color: #fff;
padding: 10px 1%;
box-shadow: 1px 1px 3px #999;
}
The right shadow will however appear if I change the width to: 97% or less;
How can I fix this behavior in order to have the shadows properly showed with
the proper width ?
Tested on FF 7.0.1 Mac Os X;
Thanks a lot,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] box-shadow don't display on the right side
Hey men, Hello, Thanks for the reply. If the shadow only displays when your container is set to 97% then you should change the width to 97%. :) In order to keep the alignment with the #top container that had no shadow, I had to change is width as well. The shadow is added to the outside of your container. If you don't allow enough space around your container to the right and bottom (in your case) then the containing element (header will eclipse the shadow. So shadows are like: outside the width? I mean, when I say to the container: please be 100% I was expecting it to also contain the shadow, but perhaps it shouldn't be that way, and I should properly read the box model ? :/ Just as curiosity, will the same be valid for borders ? FWIW, in Chrome 98% seems to work just fine. Unfortunately not in FF at least this version; So, I've defined a width of 97% for the container. I've defined a width for the head with 99% (with 100 I wouldn't have them aligned); I've changed the margin that was pushing the image to the right to: 1.9% instead of 2%; http://help.nuvemk.com/floatedFluidLayoutHtml5/index_solved.php http://help.nuvemk.com/floatedFluidLayoutHtml5/style_solved.php Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] nav not floating right
Hello all, http://help.nuvemk.com/floatedFluidLayoutHtml5/index_1.php Please ignore the overall lock of the page. The issue seems to be on the nav element inside #top; #top nav On good browsers, it floats to the right; On the others, IE 7 and IE 8, it doesn't seem to float the nav element. I thought that it could be because I've floated without explicit declared a width, but even with a width it keeps it's behavior. What could this be ? k. regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav not floating right
On Nov 16, 2011, at 24:49 , Philippe Wittenbergh wrote: On Nov 16, 2011, at 9:33 AM, mem wrote: IE 7 and 8 do not understand the html5 'nav' element at all. You need some js to 'explain' that element to those browsers. Search for 'HTML5 shim' Thanks. Done it. Forgot about that. Long time since I play with it I guess. I've added the following between the head tags: !--[if lt IE 9] script src=//html5shim.googlecode.com/svn/trunk/html5.js/script ![endif]-- http://help.nuvemk.com/floatedFluidLayoutHtml5/index_1.php The problem seems to persist on both: ie7 and ie8; Any clue? :( __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav not floating right
On Nov 16, 2011, at 1:04 , David Laakso wrote: Greetings from Tijuana. Please see http://chelseacreekstudio.com/me.html In the head of the document... !--[if lt IE 9] script src=//html5shim.googlecode.com/svn/trunk/html5.js/script ![endif]-- thanks. I notice you didn't choose float the nav, but instead text-align right the ul; I've tried to reproduce that with no success: http://help.nuvemk.com/floatedFluidLayoutHtml5/index_2.php http://help.nuvemk.com/floatedFluidLayoutHtml5/style_2.css I'm to tired already perhaps and it could be something really obvious that I'm not getting… :s K. Regards, m. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table Trouble in IE
On Nov 14, 2011, at 20:14 , Nancy Timper wrote: Hi, Thanks much for ideas / suggestions…. Hello, Before you attempt to fix any css issue at all, you must first validate your markup. Otherwise, it's very difficult (if not impossible) to fix whatever error you may have on styling your page. Clear your errors, and post back your questions, and someone may help you then. :) Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 15, 2011, at 2:02 , David Laakso wrote: http://help.nuvemk.com/css/layout_structure_home.pdf Regards, Jorge Amado Interesting visual, Jorge. A little top-heavy for mobile - handsets [as is]with all that navigation, though. Fwiw, please see: http://chelseacreekstudio.com/me.html This end OS X 10.4 and Android/2.2.2 [ low end smart-phone]. View in IE/6.0 if you seek only a 960 fixed width site… Thanks a lot for your work there. Really! I've been looking into the different evolutions since this weekend, and I'm still totally amazed with the flexibility there implemented. Unfortunately I doubt that, at this time, I can pull something with so many images, and nested elements and still preserve that flexibility showed there. Since copy/paste is not a good method for learning, I will take what I can understand and see how it goes. Work in progress… Note: my name isn't Jorge Amado, that was just a pseudonymous due to the fact you pointed my posts as novels, and Jorge Amado was a master on tv novels in Brazil :) Regards, Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 15, 2011, at 2:02 , David Laakso wrote: This end OS X 10.4 and Android/2.2.2 [ low end smart-phone]. View in IE/6.0 if you seek only a 960 fixed width site... Media queries will be my friends if the client requests mobile support. This site target is: . IE7 and up; . Good browsers; . No handled devices; Plus the main navigation will slide to the right side, so it will be horizontal. (the sub items as two wide to fit the vertical space available), and because of that, handled devices must stay out and only play if we specifically draw a version for them. K. Regards, m. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 11, 2011, at 2:51 , David Laakso wrote: I'd suggest that you simply put a full and complete rough layout /on your server/ that reflects your intended final goal. Allow it to speak for itself. No novella to accompany it is needed. http://help.nuvemk.com/css/layout_structure_home.pdf Regards, Jorge Amado ;) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 10, 2011, at 5:42 , G.Sørtun wrote: If you say so. I often let 'html' alone do the fill viewport job, leaving 'body' open for other jobs. How to use elements depends mainly on degree of legacy browser support. I didn't know that html would also be a container somehow. I always thought that it was something behind the all thing. :) Guess not. Let's use html for that then and liberate the body. :) 60em may be somewhat equal to 960px under certain, very limited, conditions. If you're happy with that there's no need to mess with both units, just make up your mind whether it's 'em' or 'px' or some other unit you're gonna rely on ... and test well. Almost there, so it could be a nice idea to use px and em for those cases (and they could be a lot) where, 960px don't correspond to 60em. Because, by doing both containers one in px and another in em, we guarantee (I still miss how) that even if the default user font is other then 16px the max width will apply ? You have told earlier that: If those containers have 'width: 100%' declared they can be styled to interact in perfect harmony with min/max-width declared with different units. Can you please elaborate a little bit more ? What role will play width: 100% related with two different units, and two different containers. Please have a look here: http://cssdesk.com/mmpL4 (you can contract the code declarations to the left for a better view); ps - I've just found this cssdesk.com and I'm happy. :) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
For this question sake, it was never in question if I would prefer to use a px
or a em based layout.
By taking a look into David L. website, I can see one can use px, % and no unit
if we know what we are doing with such a precision. I'm not on that level. :)
So,
1) The font-size on the html will be declared as 100%;
2) I will never apply the font-size on any container (other then html), and I
will strictly use it on p, span, anchors labels, and other close to text
elements (not sure how to call this group);
Felix as pointed out that rem would be better then em. He has not specified
but, after some reading here and there, it seems that, the issue relies on the
fact that, if we use em, we will have a so called compounding effect and the
same will NOT occur with rem;
Also, I've been told that if I choose to use .em for margins and paddings, I
may have issues if, for example, I wish to place, side by side, a p and a h1 by
doing:
p, h1 {
padding-left: 10em;
}
Since I will not get the same horizontal space as one could expected when doing
this rule. (because h1 has a bigger font then p);
By looking on the layout I have in hands, I believe I would never have this
scenario.
Is there any other pitfall that we should be aware of when adoption such a
position ?
By taking this example here:
http://cssdesk.com/PBbWK
I have two questions:
1) Let's suppose I would drop the em for margin and padding, what values in %
should I place there instead to preserv the same look and feel ?
2) I'm trying to stress test a little and see the so called compounding effect
- but no luck so far. What am I missing? (yes I want to provoke it so that, if
it arrives during the development I can deal with it.)
Thanks again,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 10, 2011, at 21:43 , David Laakso wrote: Try to avoid any situation requiring both h and v scrolling. Set the fonts so they are readable by children of all ages. Above all else, keep it simple Please see... http://chelseacreekstudio.com/mem.html While you send it I was already doing some changes on a layout that will be closer to the final intended one. I will start small. Here's what I have so far: Not *yet* with max-width and min-width; Not *yet* with % applied; http://cssdesk.com/KrDWX 5 issues / questions: 1) The margin-top of #header p don't seems to visually return any effect. Why ? It's not inline is it? 2) the margin top applied to the #footer doesn't seem to take any visual effect neither. Why? 3) On the #news element - why if we put width: 100% it breaks the container ? 4) .moreDetail should be always x units up counting the bottom of their parents #news-block-a and #news-block-b 5) should we use min-height instead of height on those three blocks: #newsletter-block #news-block-a #news-block-b Thanks a lot, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css measures - em grid system makes sense ?
Hello all, On my css layouts, I tend to use *em* for font size and *px* for all the rest. However, I wish not to follow this path any longer, since I wish to embrace the *em* for [almost] all the development. Problem: we use a *960px grid* for styling most of our pages, so the margin or paddings and widths are given on px, and if we convert those, sometimes, we will get weird stuff like: 0.345 em. Question: Will it make sense to create a grid based on *em* ? The point is to allow us to start drawing more user friendly measures like .5em or .4em and avoid .453 em stuff. What do you think ? Note: This is just a question, if it does make sense to you, just tell me and explain me why so that I could understand and I can leave with that. K. Regards, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 9, 2011, at 16:59 , David Laakso wrote: On 11/9/11 8:35 AM, mem wrote: What do you think ? It makes no difference whether the grid is set to px, em, or percent width. The problem still remain the same-- if and when a user scales up the fonts she will be confronted with a situation of having to scroll both vertically and horizontally to read the page. The use of min-width, max-width, width can be used and adjusted to suit the particular layout at hand and alleviate this issue. Just how that is done and whether they are set in px, em, or percent -- or some combination thereof -- is the real problem. I hate when I don't even know what is my issue, and then, someone else points it out for me. :) Indeed that is the main issue around the original question. :) 1) I'm prepared for place the margins, paddings and even images on *em* ; 2) Since rem is not supported on recently old browsers like ie7 and ie8 I prefer not to use it and deal with the so called compounding issues that may arrive. I still thanks Felix for the important note about the fact that pixels are still not as friendly as we think they are. 3) With Barney I'm not prepared for having a gigantic horizontal scroll that is neither designer nor user friendly at all. In this case, should we consider the use as max-width ? By taking into consideration point 1) (that I will choose em for padding and margins), and assuming 3) max-width could prevent the gigantic horizontal scroll bar traveling by the user, two questions rises: Question A) What unit should we use ? I've seen on some sites the option for max-width: 100% I've seen max-width defined with: em; I've seen it with px; Question B) If we do so on the container wouldn't we end up with some overlapping things on a certain zoom in scale ? If so, how would we avoid it ? - Will we avoid it by dropping this idea of making margins and paddings with EM and use % instead ? (whispering to myself: please say no, please say no… Agains't David Hucklesby, I'm not that used to think with % - unfortunately for me.); K. Regards, M. Best, ~d PS Been a long time. Nice to see you onthe list… Thanks. The honor is totally mine, to count on this list expertise. Indeed I've been off of css for several months, let's see if I can stay for good this time. :) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 9, 2011, at 19:50 , G.Sørtun wrote:
On 09.11.2011 19:51, mem wrote:
Question A) What unit should we use ? I've seen on some sites the
option for max-width: 100% I've seen max-width defined with: em;
I've seen it with px;
To make a flexible layout play well across the increasing spread of large and
small screens/devices, I often start out with the following mix for main
container...
width: 99%; min-width: 560px; max-width: 76em;
...which makes reasonably good use of available window-width without becoming
too wide or too narrow. Modifying these values along with other layout
details at both ends and at certain intermediate window-widths for capable
browsers in a small number of mediaqueries, for improved results.
Sorry for not saying this earlier. I'm not taking into consideration handled
devices nor netbooks and mobiles.
Only pc and laptop monitors.
I understand that this *only* is... weird. Anyway.
a) The layout is planned for a given minimal resolution (1024), centered.
b) If the user has a very wide screen and very hight resolution the layout
should not stretch to much.
c) If the user has a low resolution and a 14'' monitor the layout should not
present and absurd horizontal scroll.
d) The layout should keep (the best we can) their proportions.
For d) we will use em or % or a mix. Ok.
For c) we can make use of min-width so that it shrinks to (750px) but not more
than that.
For b) we would have to make use of max-width - so that, even if the user as
very large screen the layout will not stretch to much to the sides.
*For a) I don't see what can we do.*
I mean if we have something like:
#container {
margin: 0 auto;
max-width: 1260px;
min-width: 780px;
}
it will assume the max-width value as width correct ?
If so, how can I declare those base 60em as stated on a) ?
Please… be patient. :)
Note:
Sorry about the test case not being here, I can do that but with a considerable
amount of time, since I'm working locally with no proper ftp connection or
shared host service to upload; I know that we all have some web services
solutions quite handy for testing .css, js and html mix, but, unfortunately,
those don't allow us to text page zoom that is a major concern here. I will
configure that, and see if I use it more often in the future.
I still however have, some theoretical questions do clear. :)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css measures - em grid system makes sense ?
On Nov 9, 2011, at 22:48 , G.Sørtun wrote: On 09.11.2011 22:24, mem wrote: it will assume the max-width value as width correct ? Yes, but I advice against relying on default behavior across browser-land - especially for legacy browsers - when adding 'width: 100%' (or something) costs so little. I understand and will take it as a golden rule. Better to explicit declare that to expect that the browser will do that accordingly. We have suffered enough with IE and old FF for not learning with mistakes. :) If so, how can I declare those base 60em as stated on a) ? If the layout permits you can declare 'max-width: __px' on one container and 'max-width: __em' on another. Ok. And why will I need one in px and another in em ? I'm not getting what will that do, should that have the same measures like: 960px and 60em ? Remember also that 'body' is just another container in standard-based web design, so the number of containers in a layout can be kept relatively small without loosing styling-flexibility. Great recall. I presume that body will have some sort of background image so I cannot narrow it, and it should be as wide as the viewport unfortunately. If those containers have 'width: 100%' declared they can be styled to interact in perfect harmony with min/max-width declared with different units. So this means adding and extra container with no semantic propose other then dealing with this ? I normally tend to avoid extra markup. regards Georg Thanks for your patience. I'm trying to understand how will rules behave here, but I'm getting a little lost… Thanks again, mem __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Organization
Hello all, I have just finished the wireframes phase for this project, and now the designer is creating the final layouts for each of those pages. I must develop the CSS for those 100 pages and I'm really afraid about the fact that, I will have, almost surely, rules that will overwrite each other and it will be a mess, sooner or later. Let's say the designer has establish a vertical space between the h2 titles and the rest, to be something around 10px. Let's suppose that by looking to those wireframes, I can say that all my h2 will have a padding-bottom of 10px. However, if later on, I create a rule telling that the ul will have a margin top of 5px... (because almost all may have that attribute) if I place the h2 on top of this ul, instead of the desired 10px, we will end up with 15px... and there, I ask: where/how should I subtract those extra 5 ? This is only an example, this is some sort of conflict that happen A LOT while I'm creating the css. So I would like to ask, without generating must discussion around it, what methodologies should we look at, in order to start and organize our work, while creating the css files, preserving the DRY principle? Thanks in advance, Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
On 30-08-2011 19:31, Ingo wrote: mem schrieb am 30.08.2011 19:31 I must develop the CSS for those 100 pages and I'm really afraid about the fact that, I will have, almost surely, rules that will overwrite each other and it will be a mess, sooner or later. Here is an interesting discussion: http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ Best, Ingo @Igo: Thanks a lot, very interesting reading. I have a lot to think about now. @Philip Taylor: on that specific case, your suggestion may well be taken into consideration. Cheers, Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Sprite technique question
Context:
#menu li a {
background:url('image/menu.png') no-repeat;
width:100%;
height:100%;
display:block;
}
Add on:
#menu li {
height: 100px;
width: 200px;
}
As are inline-level elements so width and height do not apply unless you
style them as block-elements.
ok. :)
Note that the background shows in both cases,
You mean when we have display:block; or the default display:inline, correct?
it is just that the box is bigger once it is styled as block.
Here is the main doubt: how do you know that it will be enough
bigger to display the background?
Or, saying otherwise, when we set a to display block it will be ALWAYS
as bigger as the container allows it to be.
In this case, the container will be a fixed width and height of the
parent li element.
Yes?
The width does not have to be explicit though as by default the value is
auto and it will fill the parent container.
I would love to have a cheat-sheet so that I can see what is the
default position and display values of elements... :D :D
:D ?
And height:100% is not a sure thing ;-)
So, should we consider other way for giving height to our a elements,
either then the couple: height:100%; + display:block; ?
ie. line-height + display:block; ?
--
Regards,
Thierry
Thanks a lot.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [+] Sprite technique question
On Oct 23, 2010, at 8:07 PM, MEM wrote: Height: 100% only works if the height of the parent element is known, as in your code snippet: Ok. It's 100% of a given height. 100% is a relative measure, hence, we need to have a reference. Slowly... I'm getting somewhere. :s Philippe Thanks a lot, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sprite menu
2010/10/23 MEM tal...@gmail.com: Hello (again), I'm trying to accomplish the following: http://www.occ.nuvemk.com/CssMarcio/secundariaOcc.html With the above CSS: http://www.occ.nuvemk.com/CssMarcio/occ.css The floats seem to be understood on latest FF, Opera and Mac Safari - But on IE8 the clear seems to clear more then what it should. I will not say that it's IE8 fault etc... cause normally I'm the issue. :s Can I have your help? I have: a) corrected the markup. b) contain the floats with overflow property applied on the ul. c) give a explicit width to the ul so that, the out of the flow element could not go more upper then what it should. Seems to be ok now. http://www.occ.nuvemk.com/CssMarcio/secundariaOcc2.html Thanks for the previous answers... ;) Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sprite technique question
Hello all,
On a sprite technique we often see something like this:
#menu li a {
background:url('image/menu.png') no-repeat;
width:100%;
height:100%;
display:block;
}
Why, when we set the display to block, the width and height properties
seem to realise the background image presence and, because of that,
the width and height setted to 100% will exactly fit the background
image size?
To be more clear - I'm not properly getting the relation between this
triad: background image, display:block; and width or height.
Can I have a push?
K. Regards,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 'Reverse' adjacent sibling selector?
+1 Tim: Have a look here: http://archivist.incutio.com/viewlist/css-discuss/112698 Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating images - understanding the details
I'm absolutely no guru here (not anywhere), and I'm sure you will get
better replies.
Still:
2010/8/18 Keith Purtell keithpurt...@keithpurtell.com
{float: right; width: 15em; margin: 1 1em 1em; padding: 0.25em;}
First, I don't understand width. It's not the width of my image; what is
it doing?
To know what it's doing, you need to tell where it is been applied.
What is the *selector* part of your code line?
Second, I especially don't understand how he has illustrated margin. Why
do '1' and '1em' and '1em' follow each other that way, and what are they
accomplishing.
Not sure why we specify units on some cases and others don't, but
by having margin: 1 1em 1em; It's a shortcut way to declare margin
properties. In your case it's the same as:
margin-top: 1; (the first '1' that appears on the shortcut version)
margin-right: 1em; (the first '1em' that appears on the shortcut version)
margin-left:1em; (again, the first '1em' that appears on the shortcut version)
margin-bottom: 1em; (the second '1em' that appears on the shortcut version).
Third, the padding. Why is it necessary and how is it affecting the the
flow of text around my images?
I believe the box-model could provide you same answers to that ;)
http://www.w3.org/TR/CSS2/box.html
- Keith Purtell
Regards,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] remove white space on td with image inside without using display:block; ?
2010/7/16 Philippe Wittenbergh e...@l-c-n.com:
On Jul 16, 2010, at 12:10 AM, MEM wrote:
td img {vertical-align: bottom; } /* or top */
?
Thank you. That worked on the browser preview but not on hotmail and
gmail clients. :(
Have you checked what the computed value is for the offending image ?
Firebug or the Web Inspector in Chrome/Safari are very helpful tools for
that. Those will also tell you what style(s) are applied to the image.
Thank you both. Actually, I was relating the Firebug to my own
development process, that I didn't considered using it for view other
pages. :s
Of course it should give me some nice information to work with.
Adding thin lines and strong colors can help debugging and I really
need to remember that as well when I'm stuck like this.
Anyway, and believe it or not, a css solution was the best option and
the one that display consistently cross several mail clients, on web
or desktops. :s
I should send it for investigation perhaps. :s
I'm glad it worked, but I'm not convinced, and that white space (if it
is a white space) needs to be deal with. I will take your suggestions
on a next html mail adventure.
Thank you again,
Márcio
ps- David L., I've not forget the list that I have to understand and follow.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] remove white space on td with image inside without using display:block; ?
Hello all, Is there a way to remove the white space inside a td that contains an image, without using display:block; ? The reason why I can't use display:block; relies on the fact (so I believe) that some e-mail clients don't support it. Is there another way for removing them? Thanks a lot in advance, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] remove white space on td with image inside without using display:block; ?
2010/7/15 Philippe Wittenbergh e...@l-c-n.com:
On Jul 15, 2010, at 10:37 PM, MEM wrote:
Is there a way to remove the white space inside a td that contains an
image, without using display:block; ?
td img {vertical-align: bottom; } /* or top */
?
Philippe
Thank you. That worked on the browser preview but not on hotmail and
gmail clients. :(
Maybe the issue is not display:block; related. :s
I'm having:
a) all in one line,
b) inline css applied
c) cellpadding and cellspacing set to 0
d) display:block; only; OR vertical-align:bottom/top; only; OR
vertical-align and display together;
e) I have also tried to set margin-top:0 margin-bottom:0; line-height:0;
I'm so clueless... :s
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ie7 and Safari 5 issues.
Hello all, I believe we can now see all the information regardless the viewport size. I've added the position fixed property only for those that have a width and height greater then a certain value. I've used media queries and add a js to deal with IE versions. Users that zoom in text, on the fixed version will still have problems. I realize that. I would like to request your help, for two big issues that I'm unable to solve: The URI: www.nuvemk.com/nascer/ The CSS: http://www.nuvemk.com/nascer/Css/Main.css 1) IE 7 - it seems that it adds a 309px offset on the left side of #wrapper-esquerda I have set no left property value for this #wrapper-esquerda, and the offset still applies on a fixed position. Could it be related with the right-wrapper margin? Any help on how can we fix this? 2) In Safari 5.0 - #contactos-content and #a-nuvemk-content seems that their width is not respected. Thanks in advance, Márcio ps-I'm on Safari 5.0 windows version, but I can't find inspect element option anywhere. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie7 and Safari 5 issues.
2010/7/11 Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk: Oh, that is /desperately/ slow, Márcio : 23 seconds to complete loading. I am afraid I wouldn't be willing to wait that long in the real world. I really think you need to reduce the complexity and increase the efficiency. Philip Taylor Yes. :( I'm thinking about ajax, and image size reduction. Maybe that will do it. But apart from that, the ie7 and safari, but mostly the ie7 issue, is quite a serious one because IE7 is the main browser around here. And even if they have ie8, the compatibility (arrGHR) mode may be enabled. :s __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie7 and Safari 5 issues.
2010/7/11 Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk: OK, again not an answer to your real problem, Márcio, but as a visitor I would expect to be able to click on the + sign, not on the text, in order to expand the view. Philip Taylor Yes. It was on my list before, I end up forgetting. Now we can click on the plus sign/minus and it will expand/contract. And we can also click on the text and the same thing will happen. The ie7 issue stays a mystery to me. I've added a left value on a IE7 and below css. And the issue is solved, or hacked around. The next issue, is the Safari, I'm already playing with the element inspector (going to preferences on Safari did the trick), but still no luck so far. Thanks for point out some issues here and there, they are more then welcome. :) I have a life to learn about this. :D The Safari issue, stills there. :( Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] sticky footer issue in Opera 10.6
2010/7/11 Debbie Campbell d...@redkitecreative.com: I'm using the footerStickAlt sticky footer method on this site-in-progress: http://www.redkitecreative.com/projects/optienz/jobs/ It seems to be working fine in FF, Safari, Chrome, IE8/7 but is breaking in Opera 10.6 I'm on Vista and in Opera 10.6 the footer stays at the bottom, just like in other browsers that I've tested. I see no difference between Opera 10.6 and FF 3.6 for example. Cache? K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie7 and Safari 5 issues.
2010/7/11 MEM tal...@gmail.com: The Safari issue, stills there. :( Márcio Well If I was Safari I would do the same. Strange however that others don't follow. My #wrapper-esquerda element was defined with a overflow:hidden; property. (at the time I wanted to contain something perhaps), since it was contained already, the overflow:hidden was hidding the overflow content. :) Oh well... removed overflow:hidden from the #wrapper-esquerda seems to have done it. :D Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie7 and Safari 5 issues.
2010/7/11 Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk: MEM wrote: Thanks for point out some issues here and there, they are more then welcome. :) I have a life to learn about this. :D OK, then another one :-) When I click on the first +, it expands (reveals) that region; when I click on the second +, it expands (reveals) that region; but when I click on the third +, it expands (reveals) that region, yet contracts (conceals) the first two. But I didn't ask it to, nor did I want it to. ** Phil. Yes. :) The reason why we cannot have all expanded it's because, if we have all expanded the portfolio 100% height cool effect is lost. K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie7 and Safari 5 issues.
2010/7/11 Philip Taylor (Webmaster, Ret'd) p.tay...@rhul.ac.uk: OK, but will your visitors think it cool ? Or would they prefer to have control over what is concealed and what is revealed. They sure prefer to have control and I sure prefer to give them that control, to show or hide, and to do, only what is expected to do. I'm not a designer but I like to discuss those matters with them when they first present me the layout to construct. The options were: Either we have this vertical effect, or we had a true accordion solution (that I personally dislike for the same reasons you have pointed), or, as a third solution, the one actually on the forge. As a user, when I'm viewing some images, I would love to have the maximum comfort and space available for them. That was the compromise. Perfect solution, I've never found one. :) But I'm sure keep on trying and that's why I love all the comments I may get. ;) As one potential visitor to your site, I would find it infuriating if it insisted on hiding the first two regions just because I wanted to take a look at the third ... ** Phil. Well, here I would say, that I will be very angry as well, but on one condition, if, for some reason, it was important to have (for cross-data proposes or something else), access to both information at the same time. I cannot see a reason for doing so on this context. (that doesn't mean that no one else sees one, of course, still, that is something that I would like to see how the end users will react to that, by thinking out loud), and if it's really a big usability issue, then the vertical portfolio effect will be dropped. K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
The URI is the same, some js errors will be taken care later. http://www.nuvemk.com/nascer/ Taking seriously (as ever) this list suggestions, I will then start with the screen size issues. Then, pass to IE7 issues. If I properly understood Philippe Wittenbergh, by using @media screen, we can target the width of the viewport. Since this was designed for a 1024 maximized window, we are talking of 955px wide more or less. However, the main issue, as David tests suggested, seems to be the height more then the width, even if, both, need to be taken care of. If I properly understood the advantage of media query over a js solution, is that media query, actually, allow us to read the width and the height of the viewport. So, if we have side bars or top bars on our browser, we can actually target those spaces as well. We will then, see the actual site on a 1024x768 pixel, add some top and lateral bars, and see what space we have left on the view port. We will then, change website proportions to accommodate this constrains. We will do the same for 1152x720 and 1280x720 dimensions. And have a separate css for each of those. Or, better yet, have only declared those properties that directly imply the layout size. If the user as a resolution narrow then this width, a full vertical height version will be used. What are your thoughts on this workflow? Please advice, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Header Text too close to the Menu in IE
2010/7/6 Dipesh Parmar dipesh.par...@ntlworld.com: I've been developing a site www.audiocatz.com and had a few layout problems which have all been eradicated and validated except one. The only problem i have left is the header text is too close to the menu in internet explorer and i cant find a way of keeping the original space which shows up fine in Safari, Firefox etc. Can anyone help? regards Dipesh Even if it works, I believe we need no div surrounding our ul because both are blocks. So the problem may be related with something else. Still, I haven't and I can't test it right now, but I've noticed that the div you have surrounding your UL isn't containing your list. If you give a overflow:auto; and a specific width, on the div, could that help ? Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help on avoid background-image to move while scrolling the page.
Hello all, First I must excuse myself for such a poor semantic structure on my markup. I've not yet found a way to proper do that on this layout structure. Html: http://www.nuvemk.com/nascer/ Css: http://www.nuvemk.com/nascer/Css/Main.css The intended result is to allow the scroll to happen, without the slashes of the background-image to move on the left side. So, left side is fixed, and the right side should contain scrolling information. The background can follow that scrolling information of the left side. But, on the left side, that blink effect... Is there a way out of this? I understand that if I use the same background on the left and right side of this, at some scrolling point, we will see discrepancies on x-axis of those lines... All this has been based on those evil slashes... I can't (don't want to) believe that after all this nothing can be done to prevent it... Please advice... Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
2010/7/4 MEM tal...@gmail.com: Is there a way out of this? background-attachment: fixed; Seems to be the solution. I'm now aware this layout is a mess on ie7. True that ie6 is not a target browser, but ie7 is. I will accept some advices about where should I start to solve this ie7 issues. :D (hasLayout must be an issue somehow but, that fixed position seems to not be respected...) Thanks in advance, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
2010/7/4 David Laakso da...@chelseacreekstudio.com: Your uri is: http://www.nuvemk.com/nascer/ All good things in due time. You have a way to go before concerning yourself with IE/7.0. Resolve compliant browser issues first. Ok. Expand the menu thingy and view your page at: 640 x 480 800 x 600 1024 x 768 1152 x 870 For the last hours I was working on the right side of this. Because nothing will appear on the right side, except if a given event occurs. I'm still working there. So it will be more narrow (if that was the question, and it will not (so I hope) override. The minimum resolution that this was planned was to: 1024 x 768; Fwiw, the IE CCs should follow rather precede... link rel=stylesheet href=Css/Main.css/ link rel=shortcut icon href=/favicon.ico !--[if lte IE 8] script type=text/javascript src=Js/html5.js/script ![endif]-- !--[if lte IE 7] link rel=stylesheet href=Css/MainIe.css / ![endif]-- Thanks. So first we read the main css, and then, if the browser is of a given sort add additional rules. Is it like this that we should understand? Ok. I will work on containing some things on the right side, once it's done, I will test the resolutions from 1024x up. And once I see the results I post back the same uri with new information. Best, ~d Thanks a lot. Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
2010/7/4 Claude Needham gxx...@gmail.com: However, if possible, the page should render in a reasonable fashion even for those without javascript. Regards, Claude Needham Thanks Claude, I'm trying to hide divs only by using javascript, and not CSS, so that, if no javascript engine is present, then, all divs should be visible. That's the first step. Then, I will try to lay down the layout in a way so that all can be visible. It's not the best we can do on this cases, I realize that, but it's a start. :) And it will be done, just not immediately. Or better yet, maybe we verify if js is enable, if not, show a nojsFriendly page. Still working... Thanks you, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
2010/7/4 David Laakso da...@chelseacreekstudio.com: Keep in mind that they way it is set now, that users will not be able to access all the items in the left column, and/or they will not see the footer, with or without javascript enabled-- at 1024x768, 1152x870, and 1280x960. Wow. Yes know I see... In other words, there is a need to somewhat limit the content in the sidebar, or it will not be accessible in short windows. A good way to handle the left column is to set it for now without javascript. Hmm... No js at this moment will require a lot of rethinking the all scheme... :s Maybe it's because I have overflow:hidden on my menu contents maybe if I change them to auto... once they expand, we can probably have a scrool... ? Or... what if we define a fixed height. Like min-height will the the height of all items expanded... I have to think about it... IE/7 may impose even more restricted height for that column. Not sure what your plan is for all the content in it, but it may be worth while considering a three column layout something like what Georg has...? http://www.gunlaug.no/tos/moa_8d.html It's a lot different from what actually is in place. As the previous, that will require a total remake of it, I cannot afford that. :( ~d Thank you David for your good testing skills... I have a long list of fixes already but that one sure deserves the maximum priority. Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help on avoid background-image to move while scrolling the page.
2010/7/5 Philippe Wittenbergh e...@l-c-n.com:
Fwiw, I noticed that you are using JS to (eventually) load stylesheets
depending on the user screen resolution.
Don't. This is the wrong way to solve this.
For one thing, the is absolutely no guarantee that the screen width will be
the browser window width (or even the available space within the browser
window…). Although the screen width of the monitor in front of me is 1680px,
the browser window is ~1150px wide (and never wider). And before anybody
argues that most people browse with maximised windows, the user can have
sidebars open. I'm always surprised at how wide some IE users keep that
sidebar open.
You can use media queries for better (and faster, more flexible) results, e.g
@media screen and and (max-width:1280px) { /* stuff here */ }
http://www.w3.org/TR/css3-mediaqueries/
There is a for once not-so-bad article on ALA on the subject:
http://www.alistapart.com/articles/responsive-web-design/
(you could use js as a fallback for older browsers (IE6 - 8) that don't
support media queries)
Philippe
---
Thank you Philippe I wasn't aware of that... well... more or less.
This is a work in progress, with many errors to solve and to put it better.
Thank you for you comment.
I will take note on that one as well.
Best regards,
Marcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css possibilities on a described layout - scrolling one given div
Hello all, I have a layout structure problem in hands that I would love to deal with, by using CSS but I'm not sure, if it can be done using only css. And if it can, what will be a nice way for doing so. So, I would like to ask list advice on this. I've seen last David Laakso sugestion on a pass thread: http://chelseacreekstudio.com/ca/cssd/ee.html And the effect, is more or less the same. On the left side, we will have a menu. On the right side, we will have a 100% height div. If the content on that right side div is higher then the viewport height, then we will(must) have a scroll. But, this scroll should affect only that right side div. I know that there are some scripts that we may use to scroll a given div. I would like to avoid them. I know that a iframe could also be a possibility but, that will lead us to use yet another file to deal with, so I would like to avoid that as well. Probably a fixed position on the left side, and then, the scroll will seem to affect only the right side? (Sorry for not providing an image of that, if requested however, I will try to figure out a visual representation asap and send an access link to it). Thanks in advance, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css possibilities on a described layout - scrolling one given div
2010/6/30 Tim Climis tcli...@exchange.iu.edu: That's the way i would do it. It won't work in IE6, since that browser doesn't support position: fixed. so if you need it in that browser too, I think you'll have to go with a script. ---Tim In this case, IE6 is not a requirement. Thanks for your opinion. The layout will be more complex then the description here presented, still, that helps take some issues out. K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css possibilities on a described layout - scrolling one given div
Position: fixed [1] is what you want. Since you do not need to hit IE/6 the file does not need to be in quirksmode, and no scripting [IE expressions] needed. These are various examples by Anne van Kesteren [2]. This example by George Sortun is a 3col layout based on Anne van Kesteren [3]. This a 2 col example that I did based on a stripped version of Georg's layout [4]. [1] http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning [2] http://limpid.nl/lab/css/fixed/header-and-footer [3] http://www.gunlaug.no/tos/moa_8d.html [4] http://chelseacreekstudio.com/ca/cssd/5.html Best, ~d Thanks you so much. I will deal with it this weekend, let's see what we can get from this fixed experience. Please don't remove the [4] (at a first glass) I believe I will take it as reference. But I will not copy. I will try to understand. If I do, I write. If not. I ask. If I still don't get it. I quote. :) K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centered nav over an image /?
http://ecoitsf.com/test.html I would like a background image to sit behind the nav at 100% of the page. Hello, Have you tried to put a div containing your navigation and, inside that div, have a background-image property defined pointing to your image? What kind of image? Do you intend to repeat over the x-axis ? Regards, Márcio ps- Note as well, that despite the fact that it works, div align, I believe, as been deprecated. You can give a width to your element, and add margin:0 auto; for centering it. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page not loading properly in IE8
Pages on this WordPress site are not always loading correctly in IE8: http://www.tomlinsondesigns.com/projects/ If you don't see it, you should when you move to different pages - sometimes the white background is missing and other design elements in the sidebar and footer are moved. Can someone advise? This only seems to be happening in IE. -- Debbie www.redkitecreative.com For inconsistent results I believe that, the first thing that you should do is to remove the html validation errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.tomlinsondesigns.com%2Fprojects%2F And, if any, the css validation ones as well. If, after that, you still have your issues, I'm sure a proper help will come :) K. Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fixes needed for IE 6.0
2010/5/29 Kim Brooks Wei kimi@kimbwei.com:
Hi People,
hi. Kimi
This site http://bit.ly/uVTaf works well in all the browsers I need
(Safari , Firefox and IE 7.0+) except IE 6.0. Are there fixes I can
install to make it work in 6.0 too?
On your homewrap div, have you tried to contain the floats with:
div#homewrap
{
overflow:hidden;
... all your other rules here...
}
That, with a width defined (that you already have: 45em) could solve
some of your IE6 issues I believe.
You may have other containers that are not containing the floats. If
so, I believe you can repeat the steps above.
Another thing - there's an extra space in the page navigation that I
can't get ride of. You can see the space at the bottom of the menu's
sub menu ul when the submenus are visible (in service and portfolio).
, Tested on (last) FF, and IETester IE6, IE7, IE8, I was unable to see
that extra bottom space on the submenu
Thanks,
Kimi
K. Regards,
Márcio
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Making a simple form look identical across the main browsers
2010/4/28 jeffrey morin rufus2...@gmail.com: Am I missing something? Jeff Allow me Jeff, you are missing the main point here. A very big main point. Designing for web is not, the same thing as designing for paper. Even designing for paper is not a guarantee that all will be equal seen by everybody. Can you have the same monitors with the same definitions, with the same browsers, and a same par of eyes for everyone? Yes. Hard task. But possible. But even if you do that... I believe subjective will beat you for good. ;) The main point you are missing is a theoretical understanding about what design is, and what are is goals. Main point: You are wasting your energies on a almost impossible and, even worst, not even important, task. :) Regards, Márcio __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
