Re: [css-d] Alternative Menu suggestions to the Suckerfish
Hi
On 22/09/2007, Alan Gresley [EMAIL PROTECTED] wrote:
On 21/09/2007, David Laakso wrote:
Could you please check the following menu in IE6 and 7? I am told the
menu is not behaving correctly.
http://theriverchurch.info/
Before you rush off delving into more CSS menus, the current problem in IE7
(sticky hover bug) is easy fixed by.
#nav li:hover {background-position: 0 0;}
For the reason why it happens or other fixes please visit.
http://css-class.com/articles/explorer/sticky/index.htm
Other CSS menus can be google with these keywords CSS dropdown menu. Quite
similar but quite different from the suckerfish is this menu.
http://css-class.com/articles/ursidae/index.htm
I've been away for a few days and haven't seent he huge response. Many
thanks to all who have helped. I will be reading replies and looking
into the sticky over the next few days. I will post a url to show the
fix. Once again my huge thanks for the replies.
--
Kind regards
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
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] Use or not to use Css to layout form components
Hi all, I'm primarily a web component developer and now I'm performing two roles (developer/designer) and one doubt always remain in my mind Should I use tables to layout form components such as combos, textboxes and so on ? I think the Css approach for forms very difficult to implement for complex forms :-( Thank you very much Marcos __ 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] Use or not to use Css to layout form components
Marcos wrote: Should I use tables to layout form components such as combos, textboxes and so on ? Please check the list archives. This has been discussed several times. Basically, you can use tables if you like (and you can then do all the styling of a table in CSS, except for the basic tabular presentation), or you can use different CSS techniques. The details strongly depend on the specific form and desired formatting. I think the Css approach for forms very difficult to implement for complex forms :-( Complex forms are generally difficult, and both for usability and for styling, it might be a good idea to consider dividing them into pieces (several pages). But there's nothing particularly complex in the idea of making a form field label a floated element, so that comparable labels have the same width assigned to them. The appearance then almost automatically becomes tabular. -- Jukka K. Korpela (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/
[css-d] centering a horizontally styled ul
Hi all, I'm putting together a little backend control site for a company's manipulation of their customer email list. http://www.cprtools.net/adminemail/test.php un: test pw: test css: http://www.cprtools.net/adminemail/adminstyles.css Layout wise, I'm struggling to get the bottom nav centered, and haven't been able to get that positioning even though I've /margin: auto;/ where I thought it needed to go. Any suggestions would be greatly appreciated. TIA and Best Regards, ~Ray PS This page and it's 'family of like pages' will be password protected and only used by the client's admin people. __ 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 a horizontally styled ul [SOLVED]
On 26/9/07 14:54, Ray Leventhal [EMAIL PROTECTED] wrote: Hi all, I'm putting together a little backend control site for a company's manipulation of their customer email list. http://www.cprtools.net/adminemail/test.php un: test pw: test css: http://www.cprtools.net/adminemail/adminstyles.css Layout wise, I'm struggling to get the bottom nav centered, and haven't been able to get that positioning even though I've /margin: auto;/ where I thought it needed to go. Any suggestions would be greatly appreciated. TIA and Best Regards, ~Ray PS This page and it's 'family of like pages' will be password protected and only used by the client's admin people. __ 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/ Phil Holt wrote: Try adding .nav after the id: #bottom_nav .nav This does it for me in FF. Phil Thanks for the lightening fast reply...AND the solution :) Much much much appreciated. ~Ray __ 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 a horizontally styled ul
Karen Healey wrote: I'm putting together a little backend control site for a company's manipulation of their customer email list. http://www.cprtools.net/adminemail/test.php un: test pw: test css: http://www.cprtools.net/adminemail/adminstyles.css Layout wise, I'm struggling to get the bottom nav centered, and haven't been able to get that positioning even though I've /margin: auto;/ where I thought it needed to go. Zero out the padding on the ul and the nav will center. adminstyles.css (line 71) ul.nav padding:0px; text-align:center; } Hi Karen, Thank you for your reply :) I'll play with your (and Phil's) solution to see what's most efficient. I do appreciate your input! Best regards, ~Ray __ 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] Float Problem in IE6
I'm having problem with a some floats on IE6. Could someone checkout the following page and let me know exactly what is wrong. http://www.ragonline.co.uk/main/ __ 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] Float Problem in IE6
Lyn Williams wrote:
I'm having problem with a some floats on IE6. Could someone checkout
the following page and let me know exactly what is wrong.
http://www.ragonline.co.uk/main/
Some content, or residue from IE's white-space bug, is pushing
mainrightcol from the inside, and IE6 by default doesn't respect
declared dimensions - making mainrightcol too wide.
You can add...
#mainrightcol {overflow-x: hidden;}
...to eliminate IE6' auto-expansion bug and thereby prevent the float
drop.
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] Use or not to use Css to layout form components
I think the Css approach for forms very difficult to implement for complex forms :-( Sometimes difficult things are worth doing anyway. Once you do a few, it gets easier! Complex sets of nested tables are pretty hard, too, as I recall. I highly recommend writing out forms in very clear and correct html, use label and fieldset where it makes sense, make everything as accessible as possible. Once you have a perfect unformatted html form, then go in and start styling. In the end, you'll have cleaner code and a much more useable (and updateable and copyable) form. FWIW, As far as I'm aware, the only thing tables can do for layout that you can't do with css is liquid equal hight columns. best, jason -- http://jasondas.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] Use or not to use Css to layout form components
Marcos wrote: I'm primarily a web component developer and now I'm performing two roles (developer/designer) and one doubt always remain in my mind Should I use tables to layout form components such as combos, textboxes and so on ? I think the Css approach for forms very difficult to implement for complex forms :-( Marcos, I don't think tables make sense unless you have a form where no checkboxes or radio buttons, and since I never have forms like this, I never use tables to lay out forms. Some good semantic list markup makes styling even complex forms not too difficult. This is a great tutorial describing one approach: http://www.sitepoint.com/article/fancy-form-design-css Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Displaying Applicable Styles on Element Mouse Over
Sasha H wrote: I would like to know if there is a means of writing JavaScript that will dynamically display the styles which are currently applied to any DOM element on a web page (i.e., those applied by ID, those applied by class, etc.) as the user moves their mouse over them. Sasha, I suggest you take this question to a list that deals with JavaScript in addition to CSS, such as webdesign-l. While CSS can handle the display of the boxes themselves, it's not meant for dynamically creating data. You'll need some sort of scripting language to pull that information from the DOM and insert it into the page with the proper markup. http://css-discuss.incutio.com/?page=OffTopic Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Displaying Applicable Styles on Element Mouse Over
26 sep 2007 kl. 06.00 skrev Sasha H: I would like to know if there is a means of writing JavaScript that will dynamically display the styles which are currently applied to any DOM element on a web page (i.e., those applied by ID, those applied by class, etc.) as the user moves their mouse over them. Hi, Maybe this link will help you http://msdn2.microsoft.com/en-us/ library/ms438349.aspx (It's a tip for developers dealing with SharePoint themes) I guess you are aware of IE Developer Toolbar? http:// www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511- BB3E-2D5E1DB91038displaylang=en and the dev toolbar for Firefox https://addons.mozilla.org/en-US/ firefox/addon/60 Cheers /oa berg __ 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] liquid equal height columns without tables [WAS Re: Use or not to use Css to layout form components]
Jason Das wrote: FWIW, As far as I'm aware, the only thing tables can do for layout that you can't do with css is liquid equal hight columns. For the record, CSS can do this perfectly well using display: table-cell. It's just IE that can't do it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] menu test - follow up +more
Thank you to everyone who took the time to test my menu! Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. You can see it here - http://www.jgardnerdesigns.com/web-design-services.htm If anyone has any suggestions, please send them my way. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Thank you again for taking the time to help me with this! Jennifer os x 10.4.01 I think the menu is as intended in safari, ff, and camino: but +1 breaks it in all. In opera, the menu is aligned left with the about block breaking left approximately 30px out of the outermost page container. xp ie6 and ie7 on parallels/os x 10.4.01 In ie7 the link blocks break the top of the nav background band approx. 8px. At text-sixe largest they break out the bottom of the background band. In ie6 the menu is the same as opera/mac (it is aligned and breaking left). And, as well, the link blocks break the top of the nav background band approx. 8px. Sorry for all the bad news... Best, ~dL -- 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/ Looking for a deal? Find great prices on flights and hotels with Yahoo! FareChase. http://farechase.yahoo.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] liquid equal height columns without tables [WAS Re: Use or not to use Css to layout form components]
Jason Das wrote: FWIW, As far as I'm aware, the only thing tables can do for layout that you can't do with css is liquid equal hight columns. Zoe wrote: For the record, CSS can do this perfectly well using display: table-cell. It's just IE that can't do it. Actually, I've done this before - 2 columns (I haven't tried to do it with three yet), and *not* using display:table-call. Works fine in IE5+ (and I think I even checked it on IE5 mac and it worked - but it's been a while, so I'd have to check again. I still have the code, though in my little play folder.) I just specifically remember this because the person I did it for wanted pixel-perfection between browsers in the *widths* of said divs (something about a paragraph in the div that spanned the entire width of the content area, but it was either overlapping or underlapping the sidebar by 1 pixel only), but the equal height stuff was no problem...and no, I didn't use a background image, either! Just sayin' - it can be done, and for IE, too :) ~Shelly __ 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] IE6 Non-Existant Class Bug
As you will see if you load the page below... In IE6 the div remains
red, even though it is explicitly set to green in the last rule.
It seems that the middle rule, which targets a non-existant class is
causing the problem. Remove that, and the div is green, even in IE6.
Note: If instead of using the additional class selector in the last
rule, I just use the id, then this problem also goes away.
Has anyone ever experienced this issue? Is there a workaround?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleUntitled/title
style
#testDiv {
background-color: red;
color: #fff;
font-size: 2em;
}
#testDiv.nonExistantClass {
}
#testDiv.foo {
background-color: green;
}
/style
/head
body
div id=testDiv class=foo
This DIV should have a GREEN background. But it doesn't in IE6
/div
/body
/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] using a header inline in a paragraph
Hello all, I'd like to enclose the first sentence of my paragraph in a h2 tag and have it display inline. But I know I can't have a h2 tag inside a paragraph, but I want it to look like I can. :) For example, this is what I WANT to do: _ pimg class=floatleft src=images/frenchie.jpg width=190 height=147 alt=French Bulldog / h2I am a hobby breeder of French Bulldogs in California./h2 I acquired my first French Bulldog... /p _ But I know that I'll need to do it this way instead: _ pimg class=floatleft src=images/frenchie.jpg width=190 height=147 alt=French Bulldog //p h2I am a hobby breeder of French Bulldogs in California./h2 pI acquired my first French Bulldog... /p __ But, as expected, that floats my image to the left, gives me my header and then the paragraph starts below it. I want the paragraph text to start up against the header text. I tried using display:inline in my css for my header, but that didn't do it for me. Any suggestions on how to get what I'm attempting??? Thanks in advance! Erin Spangler www.thedogsonline.com Web Design and Hosting for the Dog Enthusiast __ 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] using a header inline in a paragraph
[EMAIL PROTECTED] wrote: Hello all, I'd like to enclose the first sentence of my paragraph in a h2 tag and have it display inline. But I know I can't have a h2 tag inside a paragraph, but I want it to look like I can. :) For example, this is what I WANT to do: _ pimg class=floatleft src=images/frenchie.jpg width=190 height=147 alt=French Bulldog / h2I am a hobby breeder of French Bulldogs in California./h2 I acquired my first French Bulldog... /p _ But I know that I'll need to do it this way instead: _ pimg class=floatleft src=images/frenchie.jpg width=190 height=147 alt=French Bulldog //p h2I am a hobby breeder of French Bulldogs in California./h2 pI acquired my first French Bulldog... /p __ But, as expected, that floats my image to the left, gives me my header and then the paragraph starts below it. I want the paragraph text to start up against the header text. I tried using display:inline in my css for my header, but that didn't do it for me. Any suggestions on how to get what I'm attempting??? Thanks in advance! Hi Erin, I'd do an inline span style=whatever style you'd like for h2 for the first sentence within the paragraph, to achieve that goal easily. There's likely a more elegant solution; I'm not a big fan of inline styles, but at first glance, that'd be my suggestion. I'm looking forward to others' replies here! HTH, ~Ray __ 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] using a header inline in a paragraph
[EMAIL PROTECTED] wrote: Hello all, I'd like to enclose the first sentence of my paragraph in a h2 tag and have it display inline. But I know I can't have a h2 tag inside a paragraph, but I want it to look like I can. :) Can you tell us why you need to have an H2, specifically, within the paragraph? Why can't you just use a span and style the span? __ 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] using a header inline in a paragraph
URL...? I think H2 usage is for SEO purposes ? Thanks http://dominor.com On 9/26/07, Seth Green [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: Hello all, I'd like to enclose the first sentence of my paragraph in a h2 tag and have it display inline. But I know I can't have a h2 tag inside a paragraph, but I want it to look like I can. :) Can you tell us why you need to have an H2, specifically, within the paragraph? Why can't you just use a span and style the span? __ 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-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] Setting a border-bottom on html/body
Hello list, I'm trying to set a border-bottom on my document. I've tried setting it on both html and body, but I still get a gap between the border and the browser, and then only on some pages. --- Works OK here: http://graphics-plus.co.uk/clients/poeticlicence/demo/diary-index.php Problem here: http://graphics-plus.co.uk/clients/poeticlicence/demo/contact.php CSS here: http://graphics-plus.co.uk/clients/poeticlicence/demo/css/ --- NOTE: The layout is currently only tested in FF! TIA :) __ 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] using a header inline in a paragraph
Yes, that is correct. It's not the text styling (larger, bolder font, etc.) that I'm looking for, it's the SEO purpose of having a proper outline from the heading tags. I'm trying to design for the spiders and the humans. :) No URL yet, although I can pop up a temporary one if necessary. Thanks, Erin Spangler www.thedogsonline.com Web Design and Hosting for the Dog Enthusiast URL...? I think H2 usage is for SEO purposes ? Thanks http://dominor.com On 9/26/07, Seth Green [EMAIL PROTECTED] wrote: [EMAIL PROTECTED] wrote: Hello all, I'd like to enclose the first sentence of my paragraph in a h2 tag and have it display inline. But I know I can't have a h2 tag inside a paragraph, but I want it to look like I can. :) Can you tell us why you need to have an H2, specifically, within the paragraph? Why can't you just use a span and style the span? __ 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-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-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] using a header inline in a paragraph
__ [EMAIL PROTECTED] wrote: Yes, that is correct. It's not the text styling (larger, bolder font, etc.) that I'm looking for, it's the SEO purpose of having a proper outline from the heading tags. I'm trying to design for the spiders and the humans. :) No URL yet, although I can pop up a temporary one if necessary. Thanks, Erin Spangler www.thedogsonline.com Web Design and Hosting for the Dog Enthusiast Erin, If it's for SEO and no other purpose, consider a class for h2 that's display:hidden. Then you can span within your p for the desired visual effect (if any). ~R __ 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] using a header inline in a paragraph
Hi Erin,
I tried using display:inline in my css for my header, but that didn't do
it for me. Any suggestions on how to get what I'm attempting???
Use inline-display both for the header and the following paragraph, like this:
Markup:
pimg class=floatleft src=images/frenchie.jpg width=190
height=147 alt=French Bulldog //p
h2 class=inlineI am a hobby breeder of French Bulldogs in California./h2
p class=inlineI acquired my first French Bulldog... /p
CSS:
.inline
{
display: inline;
}
You might want to adjust font size and font weight as well:
.inline
{
display: inline;
font-size: 1em;
font-weight: normal;
}
That should work as intended.
Cheers,
jens
--
Jens Brueckmann
http://www.yalf.de
__
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] Form styling problems in IE6
Well, I've taken the care to create an interoperable Web page at http://northminpres.org/stewardship.html but of course IDWIMSIE (at least, IE6). Can anyone clue me in to how to address the two biggest problems: 1) The paragraph in the middle of the form, which begins The following questions... overlaps the span above it (i.e., the text appears on top of/behind the other text). I tried wrapping a DIV around the P tag, but to no avail. I suspect it might be something I've done wrong in using a checkbox and an input field in the same span? 2) The Submit and Cancel buttons appear within the boundaries of the final 8x49 text area. Both the XHTML and CSS on this page pass validation. It works pretty well on Firefox (Mac and PC) and Safari. Thanks, Paul __ 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] Setting a border-bottom on html/body
No, didn't fix it here (FF Mac) On 26/09/2007, Walter Kosicki [EMAIL PROTECTED] wrote: Add a minimum height attribute to the body tag of 100%, worked in FF For me -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Office @ GraphicsPlus Sent: Wednesday, September 26, 2007 2:27 PM To: css-d@lists.css-discuss.org Subject: [css-d] Setting a border-bottom on html/body Hello list, I'm trying to set a border-bottom on my document. I've tried setting it on both html and body, but I still get a gap between the border and the browser, and then only on some pages. --- Works OK here: http://graphics-plus.co.uk/clients/poeticlicence/demo/diary-index.php Problem here: http://graphics-plus.co.uk/clients/poeticlicence/demo/contact.php CSS here: http://graphics-plus.co.uk/clients/poeticlicence/demo/css/ --- NOTE: The layout is currently only tested in FF! TIA :) __ 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-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] using a header inline in a paragraph
Hey All,
How about something like this:
html
head
style type=text/css
h2 {
display: inline;
}
p.image {
float: left;
padding: 4px;
margin: 4px;
border: 1px solid #66;
}
p.first {
display: inline;
}
/style
/head
body
p class=imageImage Here/p
h2Lorem ipsum dolor sit amet, consectetuer adipiscing elit./h2
p class=firstAenean non tellus. Vivamus urna odio, lacinia at,
adipiscing et, luctus a, nulla. Donec vestibulum purus ac libero.
Vivamus fringilla. Nulla at risus at est tempor suscipit. Nulla eu felis
vitae neque malesuada suscipit. Sed pretium. Fusce a tortor. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Cras nec mauris. Pellentesque velit ipsum,
condimentum ut, sollicitudin sed, sollicitudin eu, risus. Morbi eu
sapien in ligula pretium vulputate. Integer porttitor. In ut justo. Sed
est orci, feugiat eget, ornare nec, dapibus sed, lorem. Phasellus nibh
nibh, sodales non, convallis in, blandit sed, sapien. Donec commodo
metus quis tellus. Fusce vulputate augue et urna./p
pFusce ut urna id velit vehicula vulputate. Etiam diam odio,
scelerisque eget, consectetuer a, congue sit amet, nunc. Integer lacus
augue, viverra ac, pretium nec, tincidunt in, elit. Mauris rhoncus
scelerisque massa. Nam commodo hendrerit nibh. Nulla facilisi. Duis
lobortis, mi nec imperdiet ultrices, tellus nunc porta metus, ac
scelerisque massa sem at eros. Curabitur sit amet arcu eget nunc
interdum viverra. Donec vel eros. Integer urna ante, accumsan ut,
suscipit id, dictum ut, lectus. Suspendisse vehicula mattis mi./p
/body
/html
- Chris
Ray Leventhal wrote:
[EMAIL PROTECTED] wrote:
Hello all,
I'd like to enclose the first sentence of my paragraph in a h2 tag and
have it display inline. But I know I can't have a h2 tag inside a
paragraph, but I want it to look like I can. :) For example, this is what
I WANT to do:
_
pimg class=floatleft src=images/frenchie.jpg width=190
height=147 alt=French Bulldog /
h2I am a hobby breeder of French Bulldogs in California./h2 I acquired
my first French Bulldog... /p
_
But I know that I'll need to do it this way instead:
_
pimg class=floatleft src=images/frenchie.jpg width=190
height=147 alt=French Bulldog //p
h2I am a hobby breeder of French Bulldogs in California./h2
pI acquired my first French Bulldog... /p
__
But, as expected, that floats my image to the left, gives me my header and
then the paragraph starts below it. I want the paragraph text to start up
against the header text.
I tried using display:inline in my css for my header, but that didn't do
it for me. Any suggestions on how to get what I'm attempting???
Thanks in advance!
Hi Erin,
I'd do an inline span style=whatever style you'd like for h2 for the
first sentence within the paragraph, to achieve that goal easily.
There's likely a more elegant solution; I'm not a big fan of inline
styles, but at first glance, that'd be my suggestion.
I'm looking forward to others' replies here!
HTH,
~Ray
__
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-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] Overspill images outside of content area
Hi all, I have the following website where I want to be able to have the rose flowers to spill outside of the content area. An example of what I want to finally achieve is in the image, which I have also provided the link for below. I have, in the content area, a couple of DIVs holding in the content, they are #content-wrap, #content, #main, and then the individual divs for each piece of content (i.e.'Wedding Info' and 'Location' etc). I think ideally I'd like to have an image on each content section that overflows (also like I have in the image). I have tried applying a negative horizontal to the 'background' style for the left-hand image, but that seems to cut out the image (same with the right-hand image when I apply a horizontal value that is greater that the #content DIV. Can anyone point me in the right direction as I am a relatively noob on this level of CSS :) Current website... http://www.trystandsamthewedding.com/home2.htm Stylesheet... http://www.trystandsamthewedding.com/styles/style.css image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Thanks in advance to those who help. Tryst Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ 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] css and frames
On 9/24/07, Andrew Doades [EMAIL PROTECTED] wrote: Hello, I have been working a a website the needs a menu, I have managed to get my menu and working with css, but the main page is using frames, and the menu is listed down the left frame (on the left side) but some text is long in the buttons, is there a way I can shrink the buttons or allow the buttons/ menu to fix to the text?? We'd need to see the site in order to offer constructive advice, but in general I would put eliminating the frameset at a much higher priority than converting the layout to css. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] Cross-browser Display Issue / Problem With NOSCRIPT Validation
Good evening to everyone. Testbed: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics1.html Testbed CSS: http://www.lostinxlation.net/sandbox3/css/primary.css I'm trying to get this site ready for the final cosmetic touches, and so far it is displaying correctly in the majority of modern browsers WITH JavaScript enabled. Unfortunately, when JavaScript is disabled, almost all browsers render ul#portNav incorrectly. I've had varied results from toggling the positioning between relative and absolute (with the necessary changes to top, left, etc), but nothing that has yielded cross-browser consistency. The goal is to have the ul#portNav display as it does in browsers using JavaScript, even when JavaScript is disabled. Any ideas? Secondly, Opera 9.x has some funky issues in rendering the ul#portNav as well, beyond the above issue. I found that out of FF/NN/IE/Saf/Op, it was the only one that used the primary.css (prior to adding hacks) and rendered that ul as being positioned at the *top* of the container. After adding an Opera hack to the primary stylesheet, I found that it rendered even more oddly once the scripts were turned off, so I added a noscript filter to correct the issue for Opera in the head of the affected pages. Unfortunately, a noscript in the head does not validate for either strict or transitional. Does anybody have any idea how to approach this in a way that will validate? Lastly, before I go in and start adjusting all the fonts to relative sizing, I'd love input from anybody with an eye for typesetting on how to make the right sidebar and the left sidebar look more harmonious. I've been looking at this for so long trying to get everything else sorted out that my eyes already feel like they are about to bleed Thank you in advance for your time and attention. I hope everyone is having a lovely evening. Time for me to go wrangle sick lilliputians... ~~J. (treswife at gmail dot 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] problem vertically aligning within a div
Hi,
I've having problems vertically aligning 2 paragraphs and an image on
the bottom of a div. I can't get them to come off the top of the div.
Here's my HTML:
div id=contentHome
pLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eu
dui ac lectus accumsan semper. Cras in felis. Suspendisse posuere
turpis a est. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Sed lacinia elit et lorem.
Morbi facilisis leo in velit molestie aliquet. Maecenas pulvinar quam
non tellus. Curabitur ac turpis eget dui ullam corper hendrerit.
Maecenas neque. Nulla dignissim risus at orci aliquet./p
div id=interior/div
pCras in felis. Suspendisse posuere turpis a est. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos./p
/div
Here's my CSS:
p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#fff;
font-size:11px;
padding-left:25px;
}
#interior {
width:224px;
height:168px;
background-image:url(images/interior.jpg);
background-repeat:no-repeat;
float:left;
margin-left:25px;
margin-right:25px;
}
#contentHome {
background-image:url(images/home_content_bkgd.jpg);
background-repeat:no-repeat;
width:590px;
height:451px;
float:right;
}
Any help will be greatly appreciated.. thanks!
Steve (sorry about the HTML layout above)
Steve Marshall
Editor - The Night Owl
[EMAIL PROTECTED]
http:\\www.thenightowl.com
-
Member - National Music Critics Association
-
The best place on the web for music reviews
__
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] Overspill images outside of content area
[EMAIL PROTECTED] wrote: http://www.trystandsamthewedding.com/home2.htm image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Background images can't spill out of their own container, so you'll have to offset the entire container(s) if you want a stable spill-over effect. Example: http://www.gunlaug.no/tos/alien/try/test_07_0926.html Such an offset will make the page wider, but the main part will center nicely and stay within whatever width you give the main containers. I've used 'width: 720px'. 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] Cross-browser Display Issue / Problem With NOSCRIPT Validation
J Hodge wrote: Good evening to everyone. Testbed: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics1.html Testbed CSS: http://www.lostinxlation.net/sandbox3/css/primary.css I'm trying to get this site ready for the final cosmetic touches I regret that any font-scaling whatsoever breaks your site with or without javascript enabled in any browser on any operating system. It may be best to tackle that before moving on to other issues. Regards, ~dL -- 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] Cross-browser Display Issue / Problem With NOSCRIPT Validation
Thank you, David. I am aware that scaling is problematic, and was thinking the best approach would be to write the CSS so that the content areas become scrollable once the text size is increased. However, upon further consideration, it occurs to me that that it might also be beneficial to scale up the dimensions of the overall layout as well... the particular layout I'm using was one I picked for some practice in source ordering and the use of relative positioning, and it has certainly posed its own little challenges. =0) Thoughts on the relative merits of scrollable divs and larger dimensions, in this particular context? ~~J. (treswife at gmail dot 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] problem vertically aligning within a div
- Original Message -
From: Steve Marshall [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Wednesday, September 26, 2007 11:57 PM
Subject: [css-d] problem vertically aligning within a div
I've having problems vertically aligning 2 paragraphs and an image on
the bottom of a div. I can't get them to come off the top of the div.
-
Hi,
I can't figure out what you are trying to achieve.
Playing with your code without knowing the context where
it is running I found the following:
Wrap the two paraghaphs and the small image within a div#wrap and add the
following to your CSS:
#contentHome {
position: relative;
...
}
#wrap {
position: absolute;
left: 0;
bottom: 0;
}
Regards
Maurício Samy Silva
http://www.maujor.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] configure full height iframe
is there any way to configure the height of an iframe to expand/contract dynamically with the amount of input? i have tried general things like: height: 100%, height: auto; some various things with divs. -- Bob Meetin dotted i - Internet Strategies Solutions www.dottedi.biz 303-926-0167 __ 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] menu test - follow up +more
JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. Wrong width on menu, combined with IE6' auto-expansion bug. A lethal combination. IE6 also needs to establish a relation between #menuh-container and #menuh. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Float the entire #menuh right, and _contain_ it. Background color goes on #menuh-container. Example: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html New styles for the relevant elements are found in page-head. Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23. 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/
[css-d] negative margins and Ie6
Hi guys, Working on a simple column which has a round right corner on the div (via background image.) the rest of the right had side has a single px border going up it. In order to get the border not to display, i applied a -1px margin right to the element that has the rounded element. this bumped me over in FF and ie7, but no luck in ie6. anyone have a work around? Thanks __ 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] Use or not to use Css to layout form components
OFFTOPIC: Zoe, Wow! I am in the middle of something similar and was doing a little poking around on this web of ours looking for some stuff, and you have hit the nail right on the head. That link was exactly what I needed to see. Thanks!!! Keith On 9/26/07, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Marcos wrote: I'm primarily a web component developer and now I'm performing two roles (developer/designer) and one doubt always remain in my mind Should I use tables to layout form components such as combos, textboxes and so on ? I think the Css approach for forms very difficult to implement for complex forms :-( Marcos, I don't think tables make sense unless you have a form where no checkboxes or radio buttons, and since I never have forms like this, I never use tables to lay out forms. Some good semantic list markup makes styling even complex forms not too difficult. This is a great tutorial describing one approach: http://www.sitepoint.com/article/fancy-form-design-css Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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-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/
