Re: [css-d] centering divs within divs / jumping columns
Stuart King wrote:
If I have a 2 column layout with a footer.
The content background is 780px by 412px.
How do I make sure that the content div is the same dimensions, even with
little content (I want the entire background to show)
example:
http://www.triviumwine.com/continuum_site/pages/vision.html
Underneath this - how do I place the footer.
thank you.
1/ Backup your entire current CSS for the above page in case you need to
go back to it.
2/ Replace your entire current CSS for the above page with this:
html, body {
margin : 0;
padding : 0;
}
body {
background-color : #fff;
color : #493415;
font : 100%/1.8 Verdana, Arial, Helvetica, sans-serif;
text-align : center;
}
#outerWrapper #contentWrapper {
overflow : hidden;
border : 1px solid red;
}
* html #outerWrapper #contentWrapper {
overflow : visible;
border : 1px solid red;
} /*for ie/6*/
img {
display : block;
}
h1 {
color : #960711;
font-size : 120%;
font-weight : normal;
line-height : 1.8;
letter-spacing : 0.4em;
}
h2 {
color : #960711;
font-size : 100%;
line-height : 1.8;
letter-spacing : 0.4em;
margin : 0;
}
p {
font-size : 90%;
font-family : Times New Roman, Times, serif;
font-style : italic;
line-height : 1.8;
text-align : center;
}
a:link {
font-size : 75%;
color : #a88243;
}
a:visited {
color : #a88243;
}
a:hover {
color : #00;
}
a:active {
color : #960711;
}
.psanserif {
color : #960711;
text-align : center;
font-style : normal;
letter-spacing : 0.2em;
}
#leftColumn1 ul {
list-style-type : none;
margin : 0;
padding : 0;
}
#leftColumn1 li a {
display : block;
color : #f9f2c7;
padding : 4px 0 4px 2px;
width : 145px;
font-size : 80%;
}
#leftColumn1 li a:hover, #leftcol li a:focus {
background-color : #6f5020;
color : #e3d7a5;
}
#leftColumn1 a#current {
background-color : #694c1e;
color : #f9f2c7;
}
#botmenu {
text-align : center;
margin : 50px 0 0 0;
font-size : 75%;
color : #a88243;
}
#outerWrapper {
margin : 50px auto 0 auto;
text-align : center;
width : 780px;
background : url(../images/cont_bk.jpg);
}
#outerWrapper #contentWrapper #leftColumn1 {
float : left;
padding : 24px 0 0;
width : 148px;
}
#outerWrapper #contentWrapper #content {
margin : 0 0 0 148px;
padding : 10px 24px 10px 24px;
}
table {
font-size : 75%;
text-align : center;
}
#outerWrapper #footer {
background-color : red;
clear : both;
}
*Note* that this was done live in the Firefox Web Developer Toolbar
thing tand that it has not been checked.
Is this /any/ close to what you have in mind?
When you reply, please reply to the list as well as 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/
Re: [css-d] centering divs within divs / jumping columns
I agree. (Not about the 'brightest star'!!! g). It works fine in IE6, IE7, Firefox, Opera and Safari, apart from Firefox rendering the footer with more height than you intended. Could it be that your browser didn't refresh after you tried it when it was wrong? Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: David Laakso To: Stuart King Cc: css discuss Sent: Friday, April 04, 2008 5:44 AM Subject: Re: [css-d] centering divs within divs / jumping columns Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... __ 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] centering divs within divs / jumping columns
Alan K Baker wrote: http://www.triviumwine.com/continuum_site/pages/vision.html I agree. (Not about the 'brightest star'!!! g). It works fine in IE6, IE7, Firefox, Opera and Safari, apart from Firefox rendering the footer with more height than you intended. Could it be that your browser didn't refresh after you tried it when it was wrong? Regards, Alan. Alan, I suggest that you resize the text in all browsers that you are using to test in. It would seem the default font settings (like minimum font height) is different in Firefox as for the other browsers. Seems like I repeating myself by signing off. :-) Alan http://css-class.com/test/ __ 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] centering divs within divs / jumping columns
Hi CSS'ers . . .
I am still having trouble. How do I get the footer down underneath the
wrapper. The height of the body should be 412 px with the footer (CONTINUUM)
directly below.
URL
http://www.triviumwine.com/continuum_site/pages/vision.html
thanks.
--s
On Sun, Mar 30, 2008 at 11:52 PM, David Laakso [EMAIL PROTECTED]
wrote:
Stuart King wrote:
1.: http://www.triviumwine.com/continuum_site/pages/wine.html
http://www.triviumwine.com/continuum_site/pages/vintage.html
2. http://www.triviumwine.com/continuum_site/pages/vision.html
--s
Remember, not to forget, you've got two CSS files. And pages with
different markup for the same element.
1/
These must be in this order (lvha) in the CSS, to work (or color, if you
will) properly:
a:link{ color: red }/* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links*/
Your markup on that page reads p class=botmenu/p
but you have no CSS p.menu.
Add this to the CSS file and tweak the margin top to position it
p.botmenu {margin: 45px 0 0 0;}
2/
In my Mac OS X 10.4.11 the horizontal menu appears to be centered
horizontally (if that's what you mean) in the content division in the Mac
browsers you list; and, in same for XP IE/6.0. But then I do not own a pixel
ruler on either OS, and judge measurement visually. If you seek pixel
perfection, someone else can help.
If you want to center it, more or less, vertically tweak the margin top on
this selector:
#botmenu { margin: 20px 0 0 0;
}
If the font is too small adjust:
a:link {
font-size: 80%;
}
Reset the link order as above [1/].
As far as the font is concerned in IE, you get either Verdana or Arial
(trust me, there ain't gonna be anyone in their right mind running around to
make sure it is consistent to whether you're rendering Verdana or Helvetica
on their Mac with whatever they got on their pc).
From a pragmatic view, you're fine with the bottom nav set as you have it.
If you're into semantics, /perhaps/ it might be set as a horizontal list.
If stability is your bag, you may want to consider /all the text/, not
just the horizontal nav, is set on something that is static. Consequently,
with user discretion, the text shoots out the bottom and heads for South
America with font-scaling.
__
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] centering divs within divs / jumping columns
Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... __ 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] centering divs within divs / jumping columns
Stuart King wrote: I am probably not explaining myself. H ow do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) as the entire background with the footer underneath On Thu, Apr 3, 2008 at 9:44 PM, David Laakso [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... I don't know. When you reply, hit reply all, so that your question goes to the list, too. Then someone who understands your question will reply to it. -- 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] centering divs within divs / jumping columns
Sorry . . . If I have a 2 column layout with a footer. The content background is 780px by 412px. How do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) example: http://www.triviumwine.com/continuum_site/pages/vision.html Underneath this - how do I place the footer. thank you. On Thu, Apr 3, 2008 at 10:00 PM, David Laakso [EMAIL PROTECTED] wrote: Stuart King wrote: I am probably not explaining myself. H ow do I make sure that the content div is the same dimensions, even with little content (I want the entire background to show) as the entire background with the footer underneath On Thu, Apr 3, 2008 at 9:44 PM, David Laakso [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Stuart King wrote: I am still having trouble. How do I get the footer down underneath the wrapper. The height of the body should be 412 px with the footer (CONTINUUM) directly below. URL http://www.triviumwine.com/continuum_site/pages/vision.html thanks. --s I am not the brightest star in the sky so I may be missing something that is obvious. But on this end, it appears that it is rendering as anticipated. If you want to keep the text from heading toward South America with user discretion to scale fonts, then there may be some question... I don't know. When you reply, hit reply all, so that your question goes to the list, too. Then someone who understands your question will reply to it. -- 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] centering divs within divs / jumping columns
Stuart King wrote:
1.:
http://www.triviumwine.com/continuum_site/pages/wine.htmlhttp://www.triviumwine.com/continuum_site/pages/vintage.html
2. http://www.triviumwine.com/continuum_site/pages/vision.html
--s
Remember, not to forget, you've got two CSS files. And pages with
different markup for the same element.
1/
These must be in this order (lvha) in the CSS, to work (or color, if you
will) properly:
a:link{ color: red }/* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links*/
Your markup on that page reads p class=botmenu/p
but you have no CSS p.menu.
Add this to the CSS file and tweak the margin top to position it
p.botmenu {margin: 45px 0 0 0;}
2/
In my Mac OS X 10.4.11 the horizontal menu appears to be centered
horizontally (if that's what you mean) in the content division in the
Mac browsers you list; and, in same for XP IE/6.0. But then I do not own
a pixel ruler on either OS, and judge measurement visually. If you seek
pixel perfection, someone else can help.
If you want to center it, more or less, vertically tweak the margin top
on this selector:
#botmenu {
margin: 20px 0 0 0;
}
If the font is too small adjust:
a:link {
font-size: 80%;
}
Reset the link order as above [1/].
As far as the font is concerned in IE, you get either Verdana or Arial
(trust me, there ain't gonna be anyone in their right mind running
around to make sure it is consistent to whether you're rendering Verdana
or Helvetica on their Mac with whatever they got on their pc).
From a pragmatic view, you're fine with the bottom nav set as you have it.
If you're into semantics, /perhaps/ it might be set as a horizontal list.
If stability is your bag, you may want to consider /all the text/, not
just the horizontal nav, is set on something that is static.
Consequently, with user discretion, the text shoots out the bottom and
heads for South America with font-scaling.
__
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] centering divs within divs / jumping columns
1. URL:
http://www.triviumwine.com/continuum_site/pages/wine.htmlhttp://www.triviumwine.com/continuum_site/pages/vintage.html
Problem: the link (vintage/production) - I can't get the hover to change
colors or to position the text down on the page - horizontal to the Contact
menu item in the left column.
2. URL: http://www.triviumwine.com/continuum_site/pages/vision.html
Problem: div id=botmenu
Mac (opera, firefox, safari) - small and positioned to the left instead
of being centered in the content wrapper.
PC ie6: off center in content wrapper and the font is not the designated
font or font color.
Should I be using a ul for more stability? What would be the best practice
in this situation?
thank you.
--s
please help.
On Sat, Mar 29, 2008 at 9:51 AM, David Laakso [EMAIL PROTECTED]
wrote:
Stuart King wrote:
Awesome . . .
How would I keep the div id=botmenu at the same bottom position on
several pages with different amounts of text?
thank you.
--s
1. URL:
http://www.triviumwine.com/continuum_site/pages/vintage.html
2. URL:
http://www.triviumwine.com/continuum_site/pages/vision.html
#botmenu { border:1px solid fuchsia;
/*top: 319px;delete*/
/*width: 613px;delete*/
text-align: center;
margin: 50px 0 0 0; :: amend and tweak ::
/*position: absolute;*/
/*left: 191px;delete*/
font-size: 75%;
color: #A88243;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
One way is to assign a body id [1] and and adjust the margin-top of the
above ruleset.
[1] http://www.maxdesign.com.au/presentation/page-id/
PS For a lot of reasons, when you reply: hit reply-all so it goes to the
list, too.
--
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] centering divs within divs / jumping columns
Hi CSS'ers . . . Help! I have tried numerous ways to fix the following two problems - in vien . I checked and both pages were validated. I do not know what is wrong: 1. URL: http://www.triviumwine.com/continuum_site/pages/vintage.html Problem: div id=leftColumn1 Looks great in Mac (opera, firefox, safari) - in windows ie6 the column is placed about 300px above the background and content wrapper. 2. URL: http://www.triviumwine.com/continuum_site/pages/vision.html Problem: div id=botmenu Mac (opera, firefox, safari) - small and positioned to the left instead of being centered in the content wrapper. PC ie6: off center in content wrapper and the font is not the designated font or font color. please help. thank you. --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] centering divs within divs / jumping columns
Stuart King wrote:
1. URL: http://www.triviumwine.com/continuum_site/pages/vintage.html
Problem: div id=leftColumn1
Looks great in Mac (opera, firefox, safari) - in windows ie6 the column
is placed about 300px above the background and content wrapper.
2. URL: http://www.triviumwine.com/continuum_site/pages/vision.html
Problem: div id=botmenu
Mac (opera, firefox, safari) - small and positioned to the left instead
of being centered in the content wrapper.
PC ie6: off center in content wrapper and the font is not the designated
font or font color.
--s
1/
Adding this in the conditional comment for IE will enclose and position it:
* html #outerWrapper #contentWrapper #content {border: 1px solid
blue/*test*/; overflow: visible;}
2/
The absolute positioning is not necessary.
#botmenu { border:1px solid fuchsia;
/*top: 319px;delete*/
/*width: 613px;delete*/
text-align: center;
margin: 50px 0 0 0; :: amend and tweak ::
/*position: absolute;*/
/*left: 191px;delete*/
font-size: 75%;
color: #A88243;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
FWIW, you may want to take into account that some users may prefer to
increase the font-sizes...
--
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] centering divs within divs / jumping columns
Stuart King wrote:
Awesome . . .
How would I keep the div id=botmenu at the same bottom position on
several pages with different amounts of text?
thank you.
--s
1. URL:
http://www.triviumwine.com/continuum_site/pages/vintage.html
2. URL:
http://www.triviumwine.com/continuum_site/pages/vision.html
#botmenu { border:1px solid fuchsia;
/*top: 319px;delete*/
/*width: 613px;delete*/
text-align: center;
margin: 50px 0 0 0; :: amend and tweak ::
/*position: absolute;*/
/*left: 191px;delete*/
font-size: 75%;
color: #A88243;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
One way is to assign a body id [1] and and adjust the margin-top of the
above ruleset.
[1] http://www.maxdesign.com.au/presentation/page-id/
PS For a lot of reasons, when you reply: hit reply-all so it goes to the
list, too.
--
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/
