[WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Aligning a menu to the bottom of a div
Hi Micheal, if you change the containing DIV to a em based height then
adding a em value to the margin-top selector in your css would ensure it
stays at the bottom even if the page is resized. Nice easy solution and
makes it accessible in all browsers then.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 22:56
To: wsg@webstandardsgroup.org
Subject: [WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.524 / Virus Database: 270.5.6/1577 - Release Date: 28/07/2008
06:55
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Aligning a menu to the bottom of a div
If I wanted to replace my pixels with em's what would I do? I've seen
some discussion of them but aren't an expert. I did a fix with margin
that did work
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Essential eBiz Solutions Ltd wrote:
Hi Micheal, if you change the containing DIV to a em based height then
adding a em value to the margin-top selector in your css would ensure it
stays at the bottom even if the page is resized. Nice easy solution and
makes it accessible in all browsers then.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 22:56
To: wsg@webstandardsgroup.org
Subject: [WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Why css settings a background image in the body tag wouldn't work
I have set a background image in my body tag
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/background.jpg)
font-size:10px;
}
I am finding I am having to put this info instead in my div's
Im sure it is some silly problem
Thanks
--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Why css settings a background image in the body tag wouldn't work
On Tue, Jul 29, 2008 at 7:48 PM, Michael Horowitz
[EMAIL PROTECTED] wrote:
I have set a background image in my body tag
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/background.jpg)
font-size:10px; }
I am finding I am having to put this info instead in my div's
Im sure it is some silly problem
Thanks
--
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
You forgot the semicolon (;) at the end of the background-image property.
Gonzalo
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Why css settings a background image in the body tag wouldn't work
On Wed, Jul 30, 2008 at 10:48 AM, Michael Horowitz [EMAIL PROTECTED] wrote: I am finding I am having to put this info instead in my div's Im sure it is some silly problem Could you post some HTML/CSS? If it's a silly problem then it's probably syntax, or that relative paths are different from the HTML to CSS, etc. .Matthew Holloway http://holloway.co.nz/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Why css settings a background image in the body tag wouldn't work plus 2nd issue of space between divs
Sure happy to give you my current css.
Add in a 2nd problem I use margin-top in #header ul li to move my header
to the bottom of the header div. But when I do that it puts blank space
between the #header and the #mainNav and #content below it.
Should I be wrapping those two div in another di and clearing it like I
have a clear on my footer?
Thanks for the help this is only my 2nd tableless site.
#wrapper {
width: 800px;
position:relative;
left: 50%;
margin-left: -400px;
}
#header{
width: 800px;
height: 80px;
background-image:url(../images/header.jpg)
}
#header ul li{
float:right;
font-size:10px;
height: 80px;
margin-top: 45px;
}
#header ul a {
text-decoration:none;
color:#00;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/background.jpg)
font-size:10px;
}
#mainNav{
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
height: 380px;
width: 150px;
float: left;
font-size:10px;
background-image:url(../images/background.jpg)
}
#mainNav ul a {
text-decoration:none;
color:#00;
}
#content{
width: 600px;
float:right;
font-size:10px;
color:gray;
background-image:url(../images/background.jpg)
}
#footer{
clear:both;
width: 800px;
background-image:url(../images/background.jpg)
}
ul {
list-style-type: none;
}
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Matthew Holloway wrote:
On Wed, Jul 30, 2008 at 10:48 AM, Michael Horowitz
[EMAIL PROTECTED] wrote:
I am finding I am having to put this info instead in my div's
Im sure it is some silly problem
Could you post some HTML/CSS?
If it's a silly problem then it's probably syntax, or that relative
paths are different from the HTML to CSS, etc.
.Matthew Holloway
http://holloway.co.nz/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Aligning a menu to the bottom of a div
Michael Horowitz wrote:
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top.
Try this
#header {
position: relative;
height: 5em;
background: #CCC;
}
#header ul {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
text-align: right;
background: #900;
}
#header ul li {
display: inline;
background: #5D2;
}
Position relative on the header will make it the container for the
absolutely positioned list.
Bruce
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Why css settings a background image in the body tag wouldn't work
Just rechecked was missing a ; at the end of the backround image css ie background-image:url(../images/background.jpg) instead of background-image:url(../images/background.jpg); Strange it worked in the divs I would have thought it would break everywhere. ..Now if I can just find someone to tell me why I am getting space between by header div and the rest of the site Michael Horowitz Your Computer Consultant http://yourcomputerconsultant.com 561-394-9079 Matthew Holloway wrote: On Wed, Jul 30, 2008 at 10:48 AM, Michael Horowitz [EMAIL PROTECTED] wrote: I am finding I am having to put this info instead in my div's Im sure it is some silly problem Could you post some HTML/CSS? If it's a silly problem then it's probably syntax, or that relative paths are different from the HTML to CSS, etc. .Matthew Holloway http://holloway.co.nz/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Why css settings a background image in the body tag wouldn't work plus 2nd issue of space between divs
On Wed, Jul 30, 2008 at 11:29 AM, Michael Horowitz [EMAIL PROTECTED] wrote: Sure happy to give you my current css. Missing semi-colon at the end of the line? .Matthew Holloway http://holloway.co.nz/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Aligning a menu to the bottom of a div
I'm not expert either but to make an expandable/retractable design using
em's instead of pixel will make each element resize in relation to each
other. i.e.
#header ul li{
float:right;
font-size:1ems;
height: 6ems;
margin-top: 0.5ems;
}
If you use that kind of method then it will resize very nicely. I haven't
managed to work out a pixel to ems calculator although I know there are some
sites out there with some really useful guides. I'm still slaved to
Dreamweaver so I design the work and ems by sight until it looks right, then
I test it against the browsers, not an exact science sadly. I'll see if I
can dig up the reference sites I've used in the past.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 23:46
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Aligning a menu to the bottom of a div
If I wanted to replace my pixels with em's what would I do? I've seen
some discussion of them but aren't an expert. I did a fix with margin
that did work
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Essential eBiz Solutions Ltd wrote:
Hi Micheal, if you change the containing DIV to a em based height then
adding a em value to the margin-top selector in your css would ensure it
stays at the bottom even if the page is resized. Nice easy solution and
makes it accessible in all browsers then.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 22:56
To: wsg@webstandardsgroup.org
Subject: [WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.524 / Virus Database: 270.5.6/1577 - Release Date: 28/07/2008
06:55
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Aligning a menu to the bottom of a div
Hi, if you want to replace pixels with ems the easiest and quickest way is to
use the em calculator, you can find it here http://riddle.pl/emcalc/ if you are
not already aware of it.
Hope this helps
If I wanted to replace my pixels with em's what would I do? I've seen
some discussion of them but aren't an expert. I did a fix with margin
that did work
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Essential eBiz Solutions Ltd wrote:
Hi Micheal, if you change the containing DIV to a em based height then
adding a em value to the margin-top selector in your css would ensure it
stays at the bottom even if the page is resized. Nice easy solution and
makes it accessible in all browsers then.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 22:56
To: wsg@webstandardsgroup.org
Subject: [WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Barry Wardrop
redRoute Creative
t: +44 01502506832
w: www.redroutecreative.co.uk
e: [EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Removing space from division between header and content wasWhy css settings a background image in the body tag wouldn't work
I made some changes that I think resolved the problem (at least in
Dreamweaver)
#header ul li{
float:right;
font-size:10px;
margin-top: 50px;
padding-bottom:10px;
}
Now here is my question someone mentioned starting to use em instead of
pixels for all of this. How does this work?
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Matthew Holloway wrote:
On Wed, Jul 30, 2008 at 10:48 AM, Michael Horowitz
[EMAIL PROTECTED] wrote:
I am finding I am having to put this info instead in my div's
Im sure it is some silly problem
Could you post some HTML/CSS?
If it's a silly problem then it's probably syntax, or that relative
paths are different from the HTML to CSS, etc.
.Matthew Holloway
http://holloway.co.nz/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Aligning a menu to the bottom of a div
That's a great resource, I image the node would be any div or relative item
contained within the div.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Barry
Sent: 30 July 2008 00:41
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Aligning a menu to the bottom of a div
Hi, if you want to replace pixels with ems the easiest and quickest way is
to use the em calculator, you can find it here http://riddle.pl/emcalc/ if
you are not already aware of it.
Hope this helps
If I wanted to replace my pixels with em's what would I do? I've seen
some discussion of them but aren't an expert. I did a fix with margin
that did work
Michael Horowitz
Your Computer Consultant
http://yourcomputerconsultant.com
561-394-9079
Essential eBiz Solutions Ltd wrote:
Hi Micheal, if you change the containing DIV to a em based height then
adding a em value to the margin-top selector in your css would ensure it
stays at the bottom even if the page is resized. Nice easy solution and
makes it accessible in all browsers then.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Michael Horowitz
Sent: 29 July 2008 22:56
To: wsg@webstandardsgroup.org
Subject: [WSG] Aligning a menu to the bottom of a div
I have a horizontal menu in my header div and I would like it to be
aligned at the bottom of my div instead of the top. I've used
vertical-align: bottom but that isn't working
#header ul li{
float:right;
font-size:10px;
height: 80px;
vertical-align: bottom;
}
A 2nd question originally put my height in the header element but when I
added the #header ul li I found it stopped working so I moved it there.
I would love any ideas why I needed to do that.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Barry Wardrop
redRoute Creative
t: +44 01502506832
w: www.redroutecreative.co.uk
e: [EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
No virus found in this incoming message.
Checked by AVG.
Version: 7.5.524 / Virus Database: 270.5.6/1577 - Release Date: 28/07/2008
06:55
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Firefox 3 and fieldset elements
Hi all, Just wondering if anyone can shed some light on this - I have a relatively positioned element with a nav element inside this. * The relatively positioned element has a 4em top margin and 40px top padding. * The nav element is positioned absolutely (top 0; right 25px) with a negative top margin the same as it's height (3em). If the relatively positioned element is a div, this displays fine in Safari 3, FF3 and Opera 9.5. However, if I change this element to a fieldset, it breaks under FF3. http://www.perkler.com/ff3_problem/div.html http://www.perkler.com/ff3_problem/fieldset.html To make matters worse, Firebug reports no difference in the computed styles between the div and fieldset elements. In fact, when using Firebug to highlight the navigation element, it shows a ghost element where the navigation should be. The problem is the same whether the page is served as text/html or application/xml+xhtml. Cheers, Adam *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Firefox 3 and fieldset elements
I would generally avoid a fieldset for navigation item's. If you can accomplish the effect you want with div's then use your div's. The main time a fieldset is used is to hold form element's. This is from the W3C site http://www.w3.org/TR/WCAG10-HTML-TECHS/ The following HTML 4.01 mechanisms group content and make it easier to understand.: * Use FIELDSET to group form controls into semantic units and describe the group with the LEGEND element. * Use OPTGROUP to organize long lists of menu options into smaller groups.. * Use tables for tabular data and describe the table with CAPTION. * Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP. * Nest lists with UL, OL, and DL. * Use section headings (H1 - H6) to create structured documents and break up long stretches of text. Refer to the following section for more information. * Break up lines of text into paragraphs (with the P element). * Group related links. Refer to the section Grouping and bypassing links All of these grouping mechanisms should be used when appropriate and natural, i.e., when the information lends itself to logical groups. Content developers should not create groups randomly, as this will confuse all users. Your list is using the ul and li selector's which the fieldset element is not designed to work with -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Adam Cooper Sent: 30 July 2008 02:35 To: wsg@webstandardsgroup.org Subject: [WSG] Firefox 3 and fieldset elements Hi all, Just wondering if anyone can shed some light on this - I have a relatively positioned element with a nav element inside this. * The relatively positioned element has a 4em top margin and 40px top padding. * The nav element is positioned absolutely (top 0; right 25px) with a negative top margin the same as it's height (3em). If the relatively positioned element is a div, this displays fine in Safari 3, FF3 and Opera 9.5. However, if I change this element to a fieldset, it breaks under FF3. http://www.perkler.com/ff3_problem/div.html http://www.perkler.com/ff3_problem/fieldset.html To make matters worse, Firebug reports no difference in the computed styles between the div and fieldset elements. In fact, when using Firebug to highlight the navigation element, it shows a ghost element where the navigation should be. The problem is the same whether the page is served as text/html or application/xml+xhtml. Cheers, Adam *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- No virus found in this incoming message. Checked by AVG. Version: 7.5.524 / Virus Database: 270.5.6/1577 - Release Date: 28/07/2008 06:55 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Out of Office AutoReply: WSG Digest
Thanks for your email. I'm out of the office at the AMA conference from Tuesday 29 - Thursday 31 July without access to my mailbox. If your enquiry is urgent please contact the main office: [EMAIL PROTECTED], tel: 0161 234 295 or call my mobile 07721 895 569. _ Ben Le Jeune Marketing Services Manager Arts About Manchester T: 0161 234 2963 F: 0161 234 2966 W: www.aam.org.uk This message has been scanned for viruses by BlackSpider MailControl - www.blackspider.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Re: WSG Digest
I am out of the office until August 4th and will not be able to access email regularly until my return. If this is urgent, please call me at 617 515 7579. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
