[css-d] UL align - question.
Hello,
Problem:
1) How can I change the align of the UL list to the right ?
2) After that, how can I add a right margin to it so that the lists
stays away from the right screen border?
Inside a container div with this properties:
#container {
width:933px;
margin:0px auto 0px auto;
overflow:hidden;
}
I have this code to start making a navigation menu:
.mainlinks#navigation {
width:933px;
margin:0px auto 0px auto;
height:50px;
background-color:#FF9933;
}
. mainlinks#navigation ul{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
}
* html . mainlinks#navigation ul{ /*IE only rule. Delete extra
margin-bottom*/
margin-bottom: 0;
}
. mainlinks#navigation ul li{
display: inline;
}
. mainlinks#navigation ul li a{
float: left; /*If I change this value to right I get the itens align on the
right side BUT the items orders are wrong.!*/
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
.mainlinks#navigation ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}
I'm stuck here. I have tried text-align:right; on the #navigation BUT,
nothing happens. I've also tried (desperately) making text-align:right; on
all the # but nothing! :(
Help! Plz. :(
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question.
MEM wrote:
1) How can I change the align of the UL list to the right ?
It depends on what you mean by that. You can set
ul { text-align: right; }
to align each line in the list content to the right. But this might not be
what you really want. I suspect that you also want to put the list bullets
to the right - otherwise it looks a bit odd. In that case, things are a bit
tricky.
You can set
ul { direction: rtl; }
but then there will be surprises if you have directionally neutral parts of
text, like (1), in the content. In that case, I'm afraid you would have to
add extra markup for them, like lispan.../span/li, and use e.g.
ul li span { unicode-bidi: embed; direction: ltr; }
2) After that, how can I add a right margin to it so that the
lists stays away from the right screen border?
The obvious answer is something like
ul { margin-right: 1em; }
If that doesn't do what you want, then you need to specify what you really
want.
If you use the technique I mentioned for putting the bullets on the right,
then the default margin will be on the right (since that's part of the
defined meaning of direction: rtl).
Inside a container div with this properties:
Please post a URL in future when describing specific problems. A URL is
_much_ more useful than fragments of code.
. mainlinks#navigation ul{
You have syntax errors in your CSS code. It's advisable to use the checker
http://jigsaw.w3.org/css-validator/
I'm stuck here. I have tried text-align:right; on the #navigation BUT,
nothing happens.
Probably the CSS syntax errors cause that.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question.
David Laakso wrote:
MEM wrote:
Hello,
Problem:
1) How can I change the align of the UL list to the right ?
2) After that, how can I add a right margin to it so that the lists
stays away from the right screen border?
. mainlinks#navigation ul li a{
float: left; /*If I change this value to right I get the itens align
on the
right side BUT the items orders are wrong.!*/
}
I'm stuck here. I have tried text-align:right; on the #navigation BUT,
nothing happens. I've also tried (desperately) making
text-align:right; on
all the # but nothing! :(
Have you tried position: absolute on the ul?
Please see http://www.chelseacreekstudio.com/ca/cssd/test-63.html
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Conceptual Guidance - content outside viewport
Heya All, I've been trying to find a solution to a concept I want to implement in a template I'm working on. I want to have a variable width, centered content block which has a background image that is wider than the content and doesn't create scroll bars when the viewport is reduced to the width of the content or less. The methods I've tried so far have either failed to achieve the outcome of have resulting in scroll bars making the extra imagery accessible. Initially I would be aiming to get an image in the background but I can see numerous uses for actual content in the area the viewport ignores (content img with a background image behind for effects or dynamic effects not critical for content). There is no overflow code that allows the content to be rendered outside its block and not to instigate scroll bar creation. I've tried negative margin blocks which create a scroll bar. If I haven't made the concept clear enough (most likely) here is a fixed width site with a basic version of what I'm after... http://www.sc2armory.com. That site uses a fixed background image on a fixed width site but I need the background imagery split into two chunks so the content can vary width dynamically. At the moment all I need is a direction of attack. I'm sure it is possible to produce the effect I'm after i just don't know the technique and can't find it so far. Wesley Lamont __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question.
MEM wrote:
Hello,
Problem:
1) How can I change the align of the UL list to the right ?
2) After that, how can I add a right margin to it so that the lists
stays away from the right screen border?
. mainlinks#navigation ul li a{
float: left; /*If I change this value to right I get the itens align on the
right side BUT the items orders are wrong.!*/
}
I'm stuck here. I have tried text-align:right; on the #navigation BUT,
nothing happens. I've also tried (desperately) making text-align:right; on
all the # but nothing! :(
Have you tried position: absolute on the ul?
Please see http://www.chelseacreekstudio.com/ca/cssd/test-63.html
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Sidebar not expanding content div
Hi all, works in IE but in all others can't figure out why the sidebar is extending past the container vs. the container expanding to fit. I have done this many times before, though slightly different layouts and not had problems. Maybe a fresh pair of eyes... http://chromacreative.com/testingserver/tritech/site/template.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Basic CSS Question: Why no background when no height value is defined?
CSS Basic Question: Background Color:
If I quit the height value, I get no background color. Why?
I want a background color, but I don't want the extra bottom space that the
height value gives to me. :s
How can we have a background without the height?
Here is the code.
.mainlinks#navigation {
position:relative;
width:933px;
margin:0px auto 0px auto;
height:50px;
background-color:#FF9933;
}
Thanks again,
Márcio
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center problem - img gallery
Good afternoon Philippe, It was foretold that on 01/11/2008 @ 11:04:04 GMT+0900 (which was 00:04:04 where I live) Philippe Wittenbergh would write: snipped a bit when you scale down the font-size, you bump into the min- width set on #container (width set in em, it will scale up/down with font-resizing, but at one point the width will be smaller than the min- width) But the gallery will continue to scale down, that is the width will become smaller than the that of the column. I see ... The whole layout depends on the fact that i wanted everything scale nicely with font-setting but keep the logo centred at all times (i.e. not scale). So the min-width (in px) is set to the width of the logo (in ems). It's like you say... at one point it _will_ break. As far as i could tell when bumping up the font-size it's doing all right, just when scaling down the font-size it will break. -- Best regards, Luc _ Using the best e-mail client: The Bat! version 4.0.18 with Windows XP (build 2600), version 5.1 Service Pack 2 and using the best browser: Opera. A prune is a plum with experience. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar not expanding content div
Christopher Kip wrote:
Hi all,
works in IE but in all others can't figure out why the sidebar is
extending past the container vs. the container expanding to fit. I
have done this many times before, though slightly different layouts
and not had problems. Maybe a fresh pair of eyes...
http://chromacreative.com/testingserver/tritech/site/template.html
Try:
#footer {clear: both;}
Whatever this is, why does it have a height set on it? Or, why does it
have two different heights set on it?
.pagewrapper #viewercontainer {
height: 1400px;
height: 95px;
}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Basic CSS Question: Why no background when no height value is defined?
Thanks...
I've but overflow: hidden; (but my nav items disappear). :s
I just wanted to understand why, but I understand that THAT could be a bit
difficult if we don't see all the code and examples...
Anyway, I have put the height value and I was getting a difference on 1px
between IE and FF, but now, (I don't know why) it's ok.
So no problem. Thanks a lot.
Q:How can I had space between li on a ul ?
R:Use the margin value not the padding one. :D
(this is only to stay on the mailing list).
Thanks a lot all, for the help. I now have a nice layout with 3 columns and
a navigation that is ugly, and with redundant CSS code (I'm sure of it), but
it will get better.
Regards,
Márcio
-Original Message-
From: David Laakso [mailto:[EMAIL PROTECTED]
Sent: sábado, 1 de Novembro de 2008 17:10
To: MEM
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Basic CSS Question: Why no background when no height
value is defined?
MEM wrote:
CSS Basic Question: Background Color:
If I quit the height value, I get no background color. Why?
Because, I guess, it has no layout (no dimension).
I want a background color, but I don't want the extra bottom space that
the
height value gives to me. :s
How can we have a background without the height?
Here is the code.
.mainlinks#navigation {
position:relative;
width:933px;
margin:0px auto 0px auto;
height:50px;
background-color:#FF9933;
}
Thanks again,
Márcio
Re-set to:
.mainlinks#navigation {
position:relative;
width:933px;
margin:0px auto 0px auto;
height:50px; - :: delete ::
padding: 0 0 1.75em 0;- :: add and check with font-scaling
::
background-color:#FF9933;
}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Conceptual Guidance - content outside viewport
WEZ! wrote: At the moment all I need is a direction of attack. I'm sure it is possible to produce the effect I'm after i just don't know the technique and can't find it so far. This method may be a place to start... http://www.gunlaug.no/tos/moa_40.html - Only content-container creates horizontal scroll-bars. - Content-container can scale - I've used em-width. - Visual background positions adjusts horizontally relative to content-container on both sides. - Can easily handle multiple backgrounds inside/outside viewport. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Basic CSS Question: Why no background when no height value is defined?
MEM wrote: Q:How can I had space between li on a ul ? R:Use the margin value not the padding one. :D (this is only to stay on the mailing list). Thanks a lot all, for the help. I now have a nice layout with 3 columns and a navigation that is ugly, and with redundant CSS code (I'm sure of it), but it will get better. Regards, Márcio Increase the padding right and padding left on the ul li a selector? PS Please bottom post. http://css-discuss.incutio.com/?page=GmailAndCssDiscuss __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Basic CSS Question: Why no background when no height value is defined?
On Sun, Nov 2, 2008 at 3:21 AM, MEM [EMAIL PROTECTED] wrote:
CSS Basic Question: Background Color:
If I quit the height value, I get no background color. Why?
Try adding:
.mainlinks#navigation { overflow: hidden; }
It sounds like your nav items are floated, and therefore the container
will not explicitly stretch to accommodate them unless you force it
to.
--
Blake Haswell
http://www.blakehaswelll.com/ | http://blakehaswell.wordpress.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar not expanding content div
Christopher Kip wrote:
works in IE but in all others can't figure out why the sidebar is
extending past the container vs. the container expanding to fit. I
have done this many times before, though slightly different layouts
and not had problems. Maybe a fresh pair of eyes...
http://chromacreative.com/testingserver/tritech/site/template.html
Maybe this'll help:
.pagewrapper #container {
overflow: hidden; /* -- Compliant Browser Float Clearing */
}
Best,
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Sidebar not expanding content div
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
discuss.org] On Behalf Of Bill Brown
Sent: Saturday, November 01, 2008 11:51 AM
To: Christopher Kip
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Sidebar not expanding content div
Christopher Kip wrote:
works in IE but in all others can't figure out why the sidebar is
extending past the container vs. the container expanding to fit. I
have done this many times before, though slightly different layouts
and not had problems. Maybe a fresh pair of eyes...
http://chromacreative.com/testingserver/tritech/site/template.html
Maybe this'll help:
.pagewrapper #container {
overflow: hidden; /* -- Compliant Browser Float Clearing */
}
I'd move this to #content as it seems to be a closer ancestor.
But the interesting part is that the issue appears to be related to a
missing class in the styles sheet. There is a structural hack in the
markup to clear floats after #mainContent:
br class=clearfloat /
But I can't find .clearfloat in the sheet.
In any case, your suggestion should allow the OP to remove the above from
the markup.
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question.
Jukka K. Korpela wrote:
MEM wrote:
1) How can I change the align of the UL list to the right ?
It depends on what you mean by that. You can set
ul { text-align: right; }
to align each line in the list content to the right. But this might not be
what you really want. I suspect that you also want to put the list bullets
to the right - otherwise it looks a bit odd. In that case, things are a bit
tricky.
You can set
ul { direction: rtl; }
but then there will be surprises if you have directionally neutral parts of
text, like (1), in the content. In that case, I'm afraid you would have to
add extra markup for them, like lispan.../span/li, and use e.g.
ul li span { unicode-bidi: embed; direction: ltr; }
2) After that, how can I add a right margin to it so that the
lists stays away from the right screen border?
The obvious answer is something like
ul { margin-right: 1em; }
If that doesn't do what you want, then you need to specify what you really
want.
If you use the technique I mentioned for putting the bullets on the right,
then the default margin will be on the right (since that's part of the
defined meaning of direction: rtl).
Inside a container div with this properties:
Please post a URL in future when describing specific problems. A URL is
_much_ more useful than fragments of code.
. mainlinks#navigation ul{
You have syntax errors in your CSS code. It's advisable to use the checker
http://jigsaw.w3.org/css-validator/
I'm stuck here. I have tried text-align:right; on the #navigation BUT,
nothing happens.
Probably the CSS syntax errors cause that.
http://sandyfeldman.com/test/testlist.html
is this something like what you mean?
Sandy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question.
Sandy wrote: http://sandyfeldman.com/test/testlist.html is this something like what you mean? Pardon? Your two-liner was preceded by a comprehensive quote of my message. That wasn't very constructive, and it seems that you didn't really want to ask _me_ anything - your demo doesn't use the technique I described. Instead, it suppresses the default bullets and uses background images to create bullets on the right. An interesting trick, and it avoids need for extra markup. On the other hand, it implies, among other things, that on printing, there are no bullets (since background images are normally not used there). This might not be serious for a navigation menu, though, since it should probably be completely suppressed in a print style sheet. (But how many authors do that?) -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] UL align - question. (sorry)
http://sandyfeldman.com/test/testlist.html is this something like what you mean? Pardon? Your two-liner was preceded by a comprehensive quote of my message. That wasn't very constructive, and it seems that you didn't really want to ask _me_ anything - your demo doesn't use the technique I described. Instead, it suppresses the default bullets and uses background images to create bullets on the right. An interesting trick, and it avoids need for extra markup. On the other hand, it implies, among other things, that on printing, there are no bullets (since background images are normally not used there). This might not be serious for a navigation menu, though, since it should probably be completely suppressed in a print style sheet. (But how many authors do that?) sorry Jukka. I thought that this list included the previous post in a new one, and I jumped the gun, replied to your email instead of to the original poster, and I wasn't reading carefully either or I would have given print style a thought. s/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Basic CSS Question: Why no background when no height value is defined?
MEM wrote:
CSS Basic Question: Background Color:
If I quit the height value, I get no background color. Why?
Because, I guess, it has no layout (no dimension).
I want a background color, but I don't want the extra bottom space that the
height value gives to me. :s
How can we have a background without the height?
Here is the code.
.mainlinks#navigation {
position:relative;
width:933px;
margin:0px auto 0px auto;
height:50px;
background-color:#FF9933;
}
Thanks again,
Márcio
Re-set to:
.mainlinks#navigation {
position:relative;
width:933px;
margin:0px auto 0px auto;
height:50px; - :: delete ::
padding: 0 0 1.75em 0;- :: add and check with font-scaling ::
background-color:#FF9933;
}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Still have not solved...
Hello, I never did get any of the info on how to solve the problem I was having with my div being cut off in IE6, I was hoping someone could help me? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
