Re: [css-d] 2 more problems (div width issues)
Rory Bernstein wrote: > > > Ah, but: this will be in a CMS, and I have no way of knowing what the > width of the various pages will be. It depends on what images the > client sticks in there. So, I need an "all purpose" soluiton that will > work with any with. Why can't the prev/next buttons that go on the > right edge just float:right at the edge of that conaining div? That being the case, as previously mentioned, I think you'll need a programming language to calculate the unknown variable of width. Perhaps someone else on the list knows a way to make this happen with CSS: I regret I do not. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ 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] 2 more problems (div width issues)
>> Thank you for this D. Yes, the width would change from page to page, and I'd
>> need the prev/next button to always be at the proper location as that width
>> changes. There must be some way to get the structure of the divs right, so
>> that the width created by the book images can be used by the prev/next
>> buttons? That is what I am trying to do, but I have not got it yet...
>> R
>>
>
> I suppose you could assign a different id to the body declaration for each
> page?
> html
>
>
>
> /*and so on*/
> CSS
> body#a01 {width: 4800px/*add*/;}/*add new selector*/
> body#a02 {width: 3600px/*add*/;}/*add new selector*/
> body#a03 {width: 2900px/*add*/;}/*add new selector*/
> /*and so on*/
>
> /*add new selector*/
> #prev_next a {
> float:right;
> color: #000;
> text-decoration: none;
> }
Ah, but: this will be in a CMS, and I have no way of knowing what the width of
the various pages will be. It depends on what images the client sticks in
there. So, I need an "all purpose" soluiton that will work with any with. Why
can't the prev/next buttons that go on the right edge just float:right at the
edge of that conaining div?
__
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] 2 more problems (div width issues)
Rory Bernstein wrote:
>> Rory Bernstein wrote:
>>
>>> Now I have a new problem with this template:
>>> http://rorybernstein.com/francesca_proto/book1.html
>>>
>>> I added a 2nd set of previous/next buttons, which should go all the way out
>>> at the right end of the content (scrolling right).
>>> Rory
>>>
>>>
>> body {
>> width: 4800px/*add*/;
>> }
>>
>> /*add new selector*/
>> #prev_next a {
>> float:right;
>> color: #000;
>> text-decoration: none;
>> }
>>
>> If the width above is an unknown variable from page to page I think
>> you'll need a programming language to calculate it. However, someone
>> else on the list may know a way to do this with CSS.
>>
>> Best,
>> ~d
>>
>
> Thank you for this D.
> Yes, the width would change from page to page, and I'd need the prev/next
> button to always be at the proper location as that width changes. There must
> be some way to get the structure of the divs right, so that the width created
> by the book images can be used by the prev/next buttons? That is what I am
> trying to do, but I have not got it yet...
> R
>
>
>
I suppose you could assign a different id to the body declaration for
each page?
html
/*and so on*/
CSS
body#a01 {width: 4800px/*add*/;}/*add new selector*/
body#a02 {width: 3600px/*add*/;}/*add new selector*/
body#a03 {width: 2900px/*add*/;}/*add new selector*/
/*and so on*/
/*add new selector*/
#prev_next a {
float:right;
color: #000;
text-decoration: none;
}
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
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] 2 more problems (div width issues)
> Rory Bernstein wrote:
>>
>> Now I have a new problem with this template:
>> http://rorybernstein.com/francesca_proto/book1.html
>>
>> I added a 2nd set of previous/next buttons, which should go all the way out
>> at the right end of the content (scrolling right).
>> Rory
>>
>
>
> body {
> width: 4800px/*add*/;
> }
>
> /*add new selector*/
> #prev_next a {
> float:right;
> color: #000;
> text-decoration: none;
> }
>
> If the width above is an unknown variable from page to page I think
> you'll need a programming language to calculate it. However, someone
> else on the list may know a way to do this with CSS.
>
> Best,
> ~d
Thank you for this D.
Yes, the width would change from page to page, and I'd need the prev/next
button to always be at the proper location as that width changes. There must be
some way to get the structure of the divs right, so that the width created by
the book images can be used by the prev/next buttons? That is what I am trying
to do, but I have not got it yet...
R
__
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] 2 more problems (div width issues)
Rory Bernstein wrote:
>
> Now I have a new problem with this template:
> http://rorybernstein.com/francesca_proto/book1.html
>
> I added a 2nd set of previous/next buttons, which should go all the way out
> at the right end of the content (scrolling right).
> Rory
>
body {
width: 4800px/*add*/;
}
/*add new selector*/
#prev_next a {
float:right;
color: #000;
text-decoration: none;
}
If the width above is an unknown variable from page to page I think
you'll need a programming language to calculate it. However, someone
else on the list may know a way to do this with CSS.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
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] 2 more problems (div width issues)
>> Now I have to get the layout working in ie7! The book images are pushed down
>> way too low on the page. Any suggestions?
> The correction for IE 7.0 is:
> *:first-child+html #book_images {min-height: 1px;}
> Reference:
>
> Best,
> Helen Keller
Thanks, Helen! (David?) That IE7 fixed worked like a charm I never would have
figured that out, and I don't even understand the syntax. But I'll work on that
on my own...
Now I have a new problem with this template:
http://rorybernstein.com/francesca_proto/book1.html
I added a 2nd set of previous/next buttons, which should go all the way out at
the right end of the content (scrolling right). I can't get it to go out to the
page's right end as the book images do. I moved the div's with those buttons
inside the div that contains the book images, but still does not work. I put
red and blue borders onto 2 of the containing divs to see why, and it is clear
that those containers "end" at the spot where the rightmost prev/next button
set is, but I don't know why they don't continue to the right end. I want the
2nd set of pre/next to continue right and always be as far right as the last
book image.
Thank you so much for your help,
Rory
__
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] 2 more problems (div width issues)
Rory Bernstein wrote:
>
>>
>>> On this page:
>>> http://rorybernstein.com/francesca_proto/book1.html
>>>
>>>
> Now I have to get the layout working in ie7! The book images are pushed down
> way too low on the page. Any suggestions?
>
> Rory
>
>
>
The correction for IE 7.0 is:
*:first-child+html #book_images {min-height: 1px;}
Reference:
Best,
Helen Keller
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
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] 2 more problems (div width issues)
On Mar 19, 2010, at 3:23 PM, Peter Abramowicz wrote:
> On 19/03/2010 9:14 AM, Rory Bernstein wrote:
>>
>> Peter, thank you for this solution. It works perfectly. Now I just have to
>> ask: How are the photos in #book_images being aligned to the bottom of the
>> div? I don't understand what makes that happen. There doesn't seem to be any
>> rule for that. I am mystified!
>>
>> A new question for everyone!
>>
>> On this page:
>> http://rorybernstein.com/francesca_proto/book1.html
>>
>> The text in the left nav that is contained in is not
>> getting as small as I want it (this the black text starting with "The
>> Portraits of Francisco Clemente..."). This is the CSS for .small:
>> .small {font-size: 0.8em;}
>>
>> But I can't seem to get it go go any smaller. The rule works when I make the
>> text bigger. Is there some sort of "floor" to font-size that won't let me
>> make it smaller?
> Hi Rory,
>
> The answer to your first question is that the default settings in browsers
> for images is vertical-align: baseline.
>
> As to the font size, this could be an issue with your browser settings, I was
> able to quickly made text completely unreadable in both ff and ie. Here is an
> article I would recommend -http://www.gunlaug.no/contents/wd_1_03_04.html.
>
> --
> Peter Abramowicz
> Arachne Web Designs
> 403.990.6016
> www.arachne-design.com
Re: font size: Ah, I see. I looked at the page on another computer and sure
enough the font is smaller.
Thanks for the info on vertical-align: baseline. I did not know that.
I so appreciate your help. Now I have to get the layout working in ie7! The
book images are pushed down way too low on the page. Any suggestions?
Rory
__
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] 2 more problems (div width issues)
On 19/03/2010 9:14 AM, Rory Bernstein wrote:
> Peter, thank you for this solution. It works perfectly. Now I just
> have to ask: How are the photos in #book_images being aligned to the
> bottom of the div? I don't understand what makes that happen. There
> doesn't seem to be any rule for that. I am mystified!
>
> A new question for everyone!
>
> On this page:
> http://rorybernstein.com/francesca_proto/book1.html
>
> The text in the left nav that is contained in is
> not getting as small as I want it (this the black text starting with
> "The Portraits of Francisco Clemente..."). This is the CSS for .small:
> .small {font-size: 0.8em;}
>
> But I can't seem to get it go go any smaller. The rule works when I
> make the text bigger. Is there some sort of "floor" to font-size that
> won't let me make it smaller?
Hi Rory,
The answer to your first question is that the default settings in
browsers for images is vertical-align: baseline.
As to the font size, this could be an issue with your browser settings,
I was able to quickly made text completely unreadable in both ff and ie.
Here is an article I would recommend
-http://www.gunlaug.no/contents/wd_1_03_04.html.
--
Peter Abramowicz
Arachne Web Designs
403.990.6016
www.arachne-design.com
__
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] 2 more problems (div width issues)
On Mar 19, 2010, at 2:37 AM, Peter Abramowicz wrote:
> On 18/03/2010 2:40 PM, Rory Bernstein wrote:
>>
>> Hi All, me again.
>>
>> http://rorybernstein.com/francesca_proto/book1.html
>>
>> So, I now have a new page. On the URL above, I have 2 problems:
>>
>> 1. I want the div called #book_images to have the images it containts to sit
>> on the bottom of that div (bottom aligned). I tried changing the position to
>> absolute and using bottom: 0; but it does not work; it puts the whole div in
>> a totally different place (moves it up and almost totally out of the
>> window). Here's the rules for that div now (the blue border is just so you
>> can see it better):
>> #book_images {
>> position: relative;
>> border: 1px solid blue;
>> width: auto;
>> overflow: hidden;
>> }
>>
>> 2. I want that same div to always be just as wide as it needs to be to
>> contain whatever images might be there, as they go out horizontally to the
>> right. If the images are fewer, I don't want the page to scroll out farther
>> than it needs to go. Currently, its parent-parent container
>> (#nav_item_container) has a fixed width; if I don't use this fixed width,
>> the whole div moves down under #nav. And, I don't want to break the layout
>> if the images that get put in there exceed that width. How do I code this
>> for a variable width in the best way? Part of the trouble seems to be that
>> my #nav div has to have a fixed width (200px), because it has text in in
>> that I want to wrap if that text gets longer (don't want the text in there
>> to push that div wider). So, since that has a fixed width, the layout gets
>> messed up if I don't set a fixed width for the parent-parent div. Am I being
>> unreasonable to expect that I can have a changing width for this div, and
>> that they will always keep going ou
>> t
>> to the right, and keep the scrollbars to always fit to the existing width
>> of the images, even as that changes? This will go into a CMS and the client
>> will have the freedom to put a lot of images in there, and I want it to work
>> at whatever width those images turn out to be.
>>
>> Thanks in advance,
>> Rory
>>
> Try this:
>
> #nav_item_container {
>
> }
>
> #item {
> padding: 0 0 20px 0;
> }
>
> #book_images {
> white-space: nowrap;
> }
>
> #book_images img {
> padding-right: 10px;
> }
>
> --
> Peter Abramowicz
> Arachne Web Designs
> 403.990.6016
> www.arachne-design.com
Peter, thank you for this solution. It works perfectly. Now I just have to ask:
How are the photos in #book_images being aligned to the bottom of the div? I
don't understand what makes that happen. There doesn't seem to be any rule for
that. I am mystified!
A new question for everyone!
On this page:
http://rorybernstein.com/francesca_proto/book1.html
The text in the left nav that is contained in is not
getting as small as I want it (this the black text starting with "The Portraits
of Francisco Clemente..."). This is the CSS for .small:
.small {font-size: 0.8em;}
But I can't seem to get it go go any smaller. The rule works when I make the
text bigger. Is there some sort of "floor" to font-size that won't let me make
it smaller?
Thanks for your help with the horizontal div problem; much, much appreciated!
Rory
__
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] 2 more problems (div width issues)
Hi All, me again.
http://rorybernstein.com/francesca_proto/book1.html
So, I now have a new page. On the URL above, I have 2 problems:
1. I want the div called #book_images to have the images it containts to sit on
the bottom of that div (bottom aligned). I tried changing the position to
absolute and using bottom: 0; but it does not work; it puts the whole div in a
totally different place (moves it up and almost totally out of the window).
Here's the rules for that div now (the blue border is just so you can see it
better):
#book_images {
position: relative;
border: 1px solid blue;
width: auto;
overflow: hidden;
}
2. I want that same div to always be just as wide as it needs to be to contain
whatever images might be there, as they go out horizontally to the right. If
the images are fewer, I don't want the page to scroll out farther than it needs
to go. Currently, its parent-parent container (#nav_item_container) has a fixed
width; if I don't use this fixed width, the whole div moves down under #nav.
And, I don't want to break the layout if the images that get put in there
exceed that width. How do I code this for a variable width in the best way?
Part of the trouble seems to be that my #nav div has to have a fixed width
(200px), because it has text in in that I want to wrap if that text gets longer
(don't want the text in there to push that div wider). So, since that has a
fixed width, the layout gets messed up if I don't set a fixed width for the
parent-parent div. Am I being unreasonable to expect that I can have a changing
width for this div, and that they will always keep going out to the right, and
keep the scrollbars to always fit to the existing width of the images, even as
that changes? This will go into a CMS and the client will have the freedom to
put a lot of images in there, and I want it to work at whatever width those
images turn out to be.
Thanks in advance,
Rory
__
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/
