Re: calling all CSS gurus
you've specified the height of your Nav element to be 1.6em so it's being honored by the clearing div as such height. Clear out the height specification and it flows fine. -- You scumbag, you maggot You cheap lousy faggot Happy Christmas you arse I pray God its our last ~| Create robust enterprise, web RIAs. Upgrade integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:263044 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: calling all CSS gurus
You are a awesome!!! Thank you so much. Zaphod Beeblebrox wrote: you've specified the height of your Nav element to be 1.6em so it's being honored by the clearing div as such height. Clear out the height specification and it flows fine. -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 ~| Create robust enterprise, web RIAs. Upgrade integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:263047 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: calling all CSS gurus
You are awesome!! Thank you very much! Zaphod Beeblebrox wrote: you've specified the height of your Nav element to be 1.6em so it's being honored by the clearing div as such height. Clear out the height specification and it flows fine. -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 ~| Create robust enterprise, web RIAs. Upgrade integrate Adobe Coldfusion MX7 with Flex 2 http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:263048 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: calling all CSS gurus
This would not necessarily be the cause of your CSS issues, but I noticed
from your code that you have multiple elements on the page with
id=shadow. While this will work in most browsers, its not standards
compliant and could possibly give you problems in the future. Try changing
it to class=shadow and then changing your CSS to .shadow instead of
#shadow.
On 12/6/06, Jake Churchill [EMAIL PROTECTED] wrote:
I have a problem that I've had on multiple occasions and I'm sick of
hacking it. I need some help. The problem can be seen at
http://dialsmi.cfwebtools.com/jake.cfm.
The problem is that the div id contentWrap contains the div id sideNav
and div id content. contentWrap has a blue background, content a red
background and the sideNav is the menu links on the left.
The problem is that the menu extends below the contentWrap and I thought
that contentWrap would wrap around everything it contained. So, how in
the world do I go about getting content wrap to wrap around the sideNav
as well?
Here's the code:
body id=typeB
div id=wrap
div id=header
div style=margin-left:300px;
a
href=/index.cfm?objectid=5491AFF2-9027-F64A-7993A956A7E10AE6img
src=/wsimages/employmentButton.gif/a
span style=width:20px;nbsp;/span
a
href=/index.cfm?objectid=54937F73-9027-F64A-797505E1D361DAECimg
src=/wsimages/contactUsButton.gif/a
/div
/div
div id=contentWrap
div id=sideNav
ul id=navlia href=/span
id=shadowHome/spanspan id=textHome/span/a/lili a
href=/index.cfm?objectid=5487BAEB-9027-F64A-799A1A29E723B693span
id=shadowCompany/spanspan id=textCompany/span/a/lili a
href=/index.cfm?objectid=5487BAFA-9027-F64A-793380B58CA5C17Fspan
id=shadowCommunities/spanspan
id=textCommunities/span/a/lili class=activea
href=/index.cfm?objectid=586F1BB5-9027-F64A-791209B9FD2878ECspan
id=shadowNews/spanspan id=textNews/span/ali
class=subItema
href=/index.cfm?objectid=586F1BD4-9027-F64A-79F7516491A44872span
id=shadow1Press Releases/spanspan id=text1Press
Releases/span/ali class=subItema
href=/index.cfm?objectid=586F1BE3-9027-F64A-79CAD1CE5870CFC9span
id=shadow1New Locations/spanspan id=text1New
Locations/span/a/lili a
href=/index.cfm?objectid=53A526B3-9027-F64A-791C7F0E2300AC45span
id=shadowContacts/spanspan id=textContacts/span/a/li/ul
/div
div id=content
h1News/h1
/div
div style=clear:both;/div
/div
/div
/body
Here is the CSS
#header {
height:219px;
margin:50px 10 10 10;
background-image: url('/wsimages/DialSeniorManagement.jpg');
background-repeat:no-repeat;
background-position: center;
}
#wrap {
align:center;
}
#nav {width: 169px; padding: 0;margin: 0;list-style: none;line-height: 1;}
#nav ul {width: 169px;list-style: none;line-height: 1}
#nav {height: 1.6em;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active
{text-decoration:none;cursor:pointer}
#nav a:link {color:#fff}
#nav a:visited {color:#fff}
#nav a:hover,a:active {background-color:#336699;}
#nav a {display: block;background:#99;padding: 4px
10px;position: relative;}
#nav li {border-bottom: 1px dashed #CC;margin: 0;}
#shadow {color:#66;position:absolute; left: 12px; top:6px; }
#text {color:#FF;position: relative; top:0; left:0;}
#shadow1 {color:#66;position:absolute; left: 29px; top:6px; }
#text1 {color:#FF;position: relative; top:0; left:0;}
#nav li li {float: none;border-bottom:1px solid #3F6AB7}
#nav li ul {background: #99;font-weight:normal;width: 10em;}
#nav li.active ul li a{background:
#99;font-weight:normal;position: relative;}
#nav li:hover ul, #nav li.sfhover ul {left: auto}
#nav li.active a {background:#336699;filter:shadow;}
#nav li.subItem a{background: #99; padding-left:2em;}
#nav li.subItem a:hover{background: #336699;}
#nav li.activeSubItem a{background: #336699; padding-left:2em;}
#nav li.activeSubItem a:hover{background: #336699;}
#nav li.active li {border-bottom:1px solid #333}
#sideNav {
width:169px;
float:left;
margin-bottom:50px;
}
/* =LAYOUT TYPE B */
#typeB #contentWrap {
background: blue url(../wsimages/content_wrap_dial_2col.gif)
repeat-y 0 0;
margin: auto;
width: 799px;
text-align: left;
clear:both;
}
#typeB #utility {
float:left;
width:165px;
margin-top:0px;
}
#typeB #content {
width:600px;
background-color:red;
float:left;
margin:0px 0px 20px 15px;
}
--
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
RE: calling all CSS gurus
Jake I answered your question earlier, but I don't know if it ever went
through.
To contain something that is floated, float the parent as well.
Sandra Clark
==
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-Original Message-
From: Jake Churchill [mailto:[EMAIL PROTECTED]
Sent: Wednesday, December 06, 2006 12:00 PM
To: CF-Talk
Subject: calling all CSS gurus
I have a problem that I've had on multiple occasions and I'm sick of hacking
it. I need some help. The problem can be seen at
http://dialsmi.cfwebtools.com/jake.cfm.
The problem is that the div id contentWrap contains the div id sideNav and
div id content. contentWrap has a blue background, content a red background
and the sideNav is the menu links on the left.
The problem is that the menu extends below the contentWrap and I thought
that contentWrap would wrap around everything it contained. So, how in the
world do I go about getting content wrap to wrap around the sideNav as well?
Here's the code:
body id=typeB
div id=wrap
div id=header
div style=margin-left:300px;
a
href=/index.cfm?objectid=5491AFF2-9027-F64A-7993A956A7E10AE6img
src=/wsimages/employmentButton.gif/a
span style=width:20px;nbsp;/span
a
href=/index.cfm?objectid=54937F73-9027-F64A-797505E1D361DAECimg
src=/wsimages/contactUsButton.gif/a
/div
/div
div id=contentWrap
div id=sideNav
ul id=navlia href=/span
id=shadowHome/spanspan id=textHome/span/a/lili a
href=/index.cfm?objectid=5487BAEB-9027-F64A-799A1A29E723B693span
id=shadowCompany/spanspan id=textCompany/span/a/lili a
href=/index.cfm?objectid=5487BAFA-9027-F64A-793380B58CA5C17Fspan
id=shadowCommunities/spanspan
id=textCommunities/span/a/lili class=activea
href=/index.cfm?objectid=586F1BB5-9027-F64A-791209B9FD2878ECspan
id=shadowNews/spanspan id=textNews/span/ali class=subItema
href=/index.cfm?objectid=586F1BD4-9027-F64A-79F7516491A44872span
id=shadow1Press Releases/spanspan id=text1Press
Releases/span/ali class=subItema
href=/index.cfm?objectid=586F1BE3-9027-F64A-79CAD1CE5870CFC9span
id=shadow1New Locations/spanspan id=text1New
Locations/span/a/lili a
href=/index.cfm?objectid=53A526B3-9027-F64A-791C7F0E2300AC45span
id=shadowContacts/spanspan id=textContacts/span/a/li/ul
/div
div id=content
h1News/h1
/div
div style=clear:both;/div
/div
/div
/body
Here is the CSS
#header {
height:219px;
margin:50px 10 10 10;
background-image: url('/wsimages/DialSeniorManagement.jpg');
background-repeat:no-repeat;
background-position: center;
}
#wrap {
align:center;
}
#nav {width: 169px; padding: 0;margin: 0;list-style: none;line-height: 1;}
#nav ul {width: 169px;list-style: none;line-height: 1}
#nav {height: 1.6em;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active
{text-decoration:none;cursor:pointer}
#nav a:link {color:#fff}
#nav a:visited {color:#fff}
#nav a:hover,a:active {background-color:#336699;}
#nav a {display: block;background:#99;padding: 4px
10px;position: relative;}
#nav li {border-bottom: 1px dashed #CC;margin: 0;}
#shadow {color:#66;position:absolute; left: 12px; top:6px; }
#text {color:#FF;position: relative; top:0; left:0;}
#shadow1 {color:#66;position:absolute; left: 29px; top:6px; }
#text1 {color:#FF;position: relative; top:0; left:0;}
#nav li li {float: none;border-bottom:1px solid #3F6AB7}
#nav li ul {background: #99;font-weight:normal;width: 10em;}
#nav li.active ul li a{background:
#99;font-weight:normal;position: relative;}
#nav li:hover ul, #nav li.sfhover ul {left: auto}
#nav li.active a {background:#336699;filter:shadow;}
#nav li.subItem a{background: #99; padding-left:2em;}
#nav li.subItem a:hover{background: #336699;}
#nav li.activeSubItem a{background: #336699; padding-left:2em;}
#nav li.activeSubItem a:hover{background: #336699;}
#nav li.active li {border-bottom:1px solid #333}
#sideNav {
width:169px;
float:left;
margin-bottom:50px;
}
/* =LAYOUT TYPE B */
#typeB #contentWrap {
background: blue url(../wsimages/content_wrap_dial_2col.gif)
repeat-y 0 0;
margin: auto;
width: 799px;
text-align: left;
clear:both;
}
#typeB #utility {
float:left;
width:165px;
margin-top:0px;
}
#typeB #content {
width:600px;
background-color:red;
float:left;
margin:0px 0px 20px 15px;
}
--
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
Omaha, NE 68154
http://www.cfwebtools.com
402-408-3733 x103
~|
Create robust enterprise, web RIAs.
Upgrade
Re: *** SPAM *** RE: calling all CSS gurus
Yes, it came through. Thanks!
Sandra Clark wrote:
Jake I answered your question earlier, but I don't know if it ever went
through.
To contain something that is floated, float the parent as well.
Sandra Clark
==
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-Original Message-
From: Jake Churchill [mailto:[EMAIL PROTECTED]
Sent: Wednesday, December 06, 2006 12:00 PM
To: CF-Talk
Subject: calling all CSS gurus
I have a problem that I've had on multiple occasions and I'm sick of hacking
it. I need some help. The problem can be seen at
http://dialsmi.cfwebtools.com/jake.cfm.
The problem is that the div id contentWrap contains the div id sideNav and
div id content. contentWrap has a blue background, content a red background
and the sideNav is the menu links on the left.
The problem is that the menu extends below the contentWrap and I thought
that contentWrap would wrap around everything it contained. So, how in the
world do I go about getting content wrap to wrap around the sideNav as well?
Here's the code:
body id=typeB
div id=wrap
div id=header
div style=margin-left:300px;
a
href=/index.cfm?objectid=5491AFF2-9027-F64A-7993A956A7E10AE6img
src=/wsimages/employmentButton.gif/a
span style=width:20px;nbsp;/span
a
href=/index.cfm?objectid=54937F73-9027-F64A-797505E1D361DAECimg
src=/wsimages/contactUsButton.gif/a
/div
/div
div id=contentWrap
div id=sideNav
ul id=navlia href=/span
id=shadowHome/spanspan id=textHome/span/a/lili a
href=/index.cfm?objectid=5487BAEB-9027-F64A-799A1A29E723B693span
id=shadowCompany/spanspan id=textCompany/span/a/lili a
href=/index.cfm?objectid=5487BAFA-9027-F64A-793380B58CA5C17Fspan
id=shadowCommunities/spanspan
id=textCommunities/span/a/lili class=activea
href=/index.cfm?objectid=586F1BB5-9027-F64A-791209B9FD2878ECspan
id=shadowNews/spanspan id=textNews/span/ali class=subItema
href=/index.cfm?objectid=586F1BD4-9027-F64A-79F7516491A44872span
id=shadow1Press Releases/spanspan id=text1Press
Releases/span/ali class=subItema
href=/index.cfm?objectid=586F1BE3-9027-F64A-79CAD1CE5870CFC9span
id=shadow1New Locations/spanspan id=text1New
Locations/span/a/lili a
href=/index.cfm?objectid=53A526B3-9027-F64A-791C7F0E2300AC45span
id=shadowContacts/spanspan id=textContacts/span/a/li/ul
/div
div id=content
h1News/h1
/div
div style=clear:both;/div
/div
/div
/body
Here is the CSS
#header {
height:219px;
margin:50px 10 10 10;
background-image: url('/wsimages/DialSeniorManagement.jpg');
background-repeat:no-repeat;
background-position: center;
}
#wrap {
align:center;
}
#nav {width: 169px; padding: 0;margin: 0;list-style: none;line-height: 1;}
#nav ul {width: 169px;list-style: none;line-height: 1}
#nav {height: 1.6em;}
#nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active
{text-decoration:none;cursor:pointer}
#nav a:link {color:#fff}
#nav a:visited {color:#fff}
#nav a:hover,a:active {background-color:#336699;}
#nav a {display: block;background:#99;padding: 4px
10px;position: relative;}
#nav li {border-bottom: 1px dashed #CC;margin: 0;}
#shadow {color:#66;position:absolute; left: 12px; top:6px; }
#text {color:#FF;position: relative; top:0; left:0;}
#shadow1 {color:#66;position:absolute; left: 29px; top:6px; }
#text1 {color:#FF;position: relative; top:0; left:0;}
#nav li li {float: none;border-bottom:1px solid #3F6AB7}
#nav li ul {background: #99;font-weight:normal;width: 10em;}
#nav li.active ul li a{background:
#99;font-weight:normal;position: relative;}
#nav li:hover ul, #nav li.sfhover ul {left: auto}
#nav li.active a {background:#336699;filter:shadow;}
#nav li.subItem a{background: #99; padding-left:2em;}
#nav li.subItem a:hover{background: #336699;}
#nav li.activeSubItem a{background: #336699; padding-left:2em;}
#nav li.activeSubItem a:hover{background: #336699;}
#nav li.active li {border-bottom:1px solid #333}
#sideNav {
width:169px;
float:left;
margin-bottom:50px;
}
/* =LAYOUT TYPE B */
#typeB #contentWrap {
background: blue url(../wsimages/content_wrap_dial_2col.gif)
repeat-y 0 0;
margin: auto;
width: 799px;
text-align: left;
clear:both;
}
#typeB #utility {
float:left;
width:165px;
margin-top:0px;
}
#typeB #content {
width:600px;
background-color:red;
float:left;
margin:0px 0px 20px 15px;
}
--
Jake Churchill
CF Webtools
11204 Davenport, Ste. 200b
RE: calling all CSS gurus
On Thursday, 7 December 2006 at 1:13 p.m Sandra Clark wrote:
Jake I answered your question earlier, but I don't know if it
ever went through.
I didn't see it either, but it's not in my spam box!
To contain something that is floated, float the parent as well.
Indeed. Be aware that using this method causes the container to shrink
wrap to the size of its children (the workaround is to add an explicit
width, which you already have). Also, you'll have to add some form of
clear rule immediately following the container if you have anything
below it.
My personal favourite is the overflow: auto method (once again applied
to the container) although if you wish to support IE Mac then you'll
need to use a filter to show that browser overflow: hidden (or you'll
get scrollbars no matter what). You also need to add a width OR a height
to the container to trigger hasLayout in IE6 and below, but all this
isn't quite as bad as it probably sounds (* html contentWrap {height:
1%} will do the job).
Incidentally, the reason removing the height you had set on the Nav
works is because you are actually already using another quite popular
method - an additional clearing div near the end of your code, and that
will work fine. If you go for one of the above solutions you can
happily remove it, although testing is obviously required. However,
since you seem happy enough with this approach, you might want to read
http://positioniseverything.net/easyclearing.html (still quite relevant)
which will help explain things better than I ever could.
HTH
Mark
--
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.
~|
Create robust enterprise, web RIAs.
Upgrade integrate Adobe Coldfusion MX7 with Flex 2
http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:263103
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
