Re: [css-d] CSS Search form
Check out this quick example I put together: https://gist.github.com/blakehaswell/5055785 -- Blake Haswell http://simpleweb.com.au/ Anthony wrote: What is the best way to implement a search as below using css? If someone could post a link of an example in action that would be great. http://img199.imageshack.us/img199/7381/search.gif Anthony __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
Or CSS: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/ -- Blake Haswell http://simpleweb.com.au/ Tedd Sperling wrote: On Jan 13, 2013, at 10:12 PM, Anthonyagav...@gmail.com wrote: The zebra stripes effect doesn't work... Did you know you could do that with php? Here's an example: http://webbytedd.com/b/color-rows/ The page should have a .php suffix -- or -- a htaccess file that calls the php interpreter to work on html file. Cheers, tedd _ t...@sperling.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
Anthony wrote: What am I missing? A link? It's hard to tell what the problem is from that code snippet. -- Blake Haswell http://simpleweb.com.au/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Space Grudge Match: br vs css
david wrote: Update: after posting that, I saw someone else mention song lyrics or poetry. Being a writer of both, all I can say is - that each line is easily handled as a separate paragraph, with CSS controlling line spacing and left/right margins. But each line is *not* a paragraph. Each line is a line of a stanza (in my mind, marked up pretty appropriately with the p tag). Or, in other words, and the end of each line is a line-break. I think there are only two really appropriate ways to mark-up poetry. Using pre tags, or using paragraphs to mark-up the stanza's and the br tag to show line-breaks. Possibly using an OL to mark it up as an ordered list, but that's only an option if you need to have the line numbers written, and even then I think it's pretty messy. -- Australian Web Designer - http://www.blakehaswell.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Space Grudge Match: br vs css
br and br / have no semantic value. Those are presentational markup that should never have been in HTML. I disagree. In terms of song lyrics, poetry, and sometimes even mailing addresses I generally think that br is a perfectly acceptable solution that *does* have semantic value and fulfils the requirements as well as or better than pre or other available solutions. -- Australian Web Designer - http://www.blakehaswell.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page loading in 2 visible steps
The first step can display for as long as a second or two. The sylesheet is @import. Is this something I need to tweak or do they? This is something you can fix. It is known as the Flash of Unstyled Content (FOUC). You can find out more about it at http://www.bluerobot.com/web/css/fouc.asp/. Basically the easiest solution is to scrap the @import and use LINK elements to reference your stylesheets. -- Australian Web Designer - http://www.blakehaswell.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
On 4/28/07, John Wells [EMAIL PROTECTED] wrote:
I'm so defeatedI need help.
Have you tried using absolute positioning? Floats have a nasty habit
of breaking in IE.
Something like this:
div id=header/div
div id=container
div id=nav/div
div id=content/div
/div
div id=footer/div
#container {
position: relative; // position hook for #nav
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 25%;
}
#content {
padding-left: 25%; // width of #nav
}
--
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I've died and gone to CSS hell
On 4/28/07, John Wells [EMAIL PROTECTED] wrote: Blake, Seems to prevent pushing the #content div below the #navigation div, but it still allows overlap. Anyway to get around this? Umm... Try word-wrap: break-word; ... It's not supported in Firefox yet, but I think it's supported in IE and in Safari. I haven't done any testing with it, though, so your mileage may vary. Other than that, maybe you could throw overflow: auto; on the #content div, but it's not exactly pretty. -- Australian Web Designer - http://www.blakehaswell.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble styling a complex list item (includes illustration)
On 4/24/07, Gwyn Perry [EMAIL PROTECTED] wrote:
I'm looking for the best way to do this (HTML+CSS), to work with
modern browsers and degrade nicely for others.
This should work, and the code is about as minimal as it can be I
guess. This is just the bare bones, and obviously you can go ahead and
apply any colours or styles that you want.
HTML:
div
h4Section Heading Goes Here/h4
ul
li
h5Title Goes Here/h5
em21 Apr/em
pLorem ipsum dolor sit amet, consehellip;/p
/li
/ul
/div
CSS:
div {
width: 31em;
margin: 1em;
}
ul {
list-style: none;
}
li {
position: relative; /* This is a positioning hook for the EM element */
padding-left: 3em; /* Width of EM element + whatever space you want
around it */
}
em {
position: absolute;
top: 0;
left: 0;
width: 2em;
}
--
Australian Web Designer - http://www.blakehaswell.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Two Problems – IE6 and Opera 8
The page I'm talking about can be found here: http://teamredux.com/oup/index.htm The CSS file can be found here: http://teamredux.com/oup/css/screen.css The first, and most pressing problem I am having is that IE6 is creating margins in-between list items in the Latest Newsletter Articles lists. My second problem is that in Opera the list items in my nav bar are aligning in the middle, vertically, when they should be butting against the bottom like they do in Firefox and IE. Check the site out in Firefox to see how it should be looking. Thanks for your help, Blake. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:auto; Used for scrolling other conent... Techniques, likes, dislikes?
On 7/9/06, Micky Hulse [EMAIL PROTECTED] wrote: Micky Hulse wrote: I do not have the link anymore, but I remember seeing one example a while back that used transparent png's to mask the top and bottom of the div with a fade-like effect... thought that was interesting way to spice-up a div with overflow:auto. Hi Micky, Is this http://designbyfire.com/ what you were thinking of? I also think it is an interesting idea, but it all fails pretty horribly in IE, so that almost destroys all merit of its use on anything for clients. :-( I have seen some other examples, but can't think of the links. Ciao, Blake __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you make columns reach the bottom?
On 7/9/06, Tammy Grossbauer [EMAIL PROTECTED] wrote:
I'm trying to make a column background color go all the way to the footer
without content filling the div.
This is the solution I have found multiple times on the internet:
background: #003399 url(images/blue.jpg) repeat-y;
Now this should be working, but isn't. I've tried it inside of a float and
an absolute positioned div. I've tried a square 5x5 pixel image and one that
is the width of the column (159px). The image doesn't seem to want to go to
the bottom.
Does anyone know what is wrong with this or maybe have a different solution?
I think the problem with your code is that you have applied that to
the DIV that you want the background to fill. What you want to do is
apply that to the #container DIV, and then make sure it aligns with
the column that you want it to.
e.g.
The HTML:
div id=container
div id=left
...
/div
div id=right
...
/div
/div
And then, the CSS:
#container { width: 500px; background: url(/images/blue.gif) right top
repeat-y; }
#left { width: 350px; float: left; }
#right { width: 150px; float: left; }
I hope that solves the problem.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Organizing CSS
On 1/28/06, Bill Moseley [EMAIL PROTECTED] wrote:
which I don't want to effect other elements.
Is it possible to simply add an ID to the table element, and edit the CSS
file appropriatly?
table#specifictable th {
border-bottom: 1px solid #666;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inline style works, Class does not
On 1/28/06, cj [EMAIL PROTECTED] wrote:
my guess would be that your image is no longer referenced correctly.
make sure the url in your css is relative to the css file's location.
I agree, this is the most likely problem. If the directory looks like this:
--[-]my webpage
[-]css
--stylesheet.css
[-]images
--orangedot.gif
Simply change your CSS to:
ul.orange-bullet {
list-style-image: url(../images/orangedot.gif);
}
This should solve your problem.
--
http://blake.f2o.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
