SitePoint Sponsor

User Tag List

Page 2 of 5 FirstFirst 12345 LastLast
Results 26 to 50 of 101
  1. #26
    SitePoint Zealot MacRankin's Avatar
    Join Date
    Sep 2002
    Location
    London
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't been to these forums in a while now. I've been over on the Killersites forums, and this is where i've been laying down all my dodgy experiments.

    1st Notes:
    I've edited out my holy grail no.8 that was here for a little while, mostly because it wasn't all that appreciated as i had hoped it would be, but i will carry on trying to better it, and if i do i can't promise that i'll be posting it in this section, as there is no double posting allowed.

    Anyway, here is something that i hope you will appreciate; it is a centered horizontal menu bar list with equal width buttons. The buttons themselves aren't images, just simple text on a background-color.

    Initially, i was only able to get this thing to work in Mozilla 1.2.1 for the Mac platform, but with the help of billyboy over at the Killersites forums we were able to crack it. You will find a more complete summary of this horizontal list on those forums.

    Blah DL 8

    The latest thing that i'm attempting to do is to create a 'faked table'. I've got a little table on my website that i use for dates, issue numbers, and magazine names. I was hoping to replace it with this faked table, but as you'll see the css code is humongous, and it's only humongous because i wanted to keep my 'zebra stripes' intact.

    Faked Table Display:

    Table Forge No.4


    2nd Notes
    I thought it might be an idea to edit this post for a second time inorder to put in a link above to direct you to the Blah DL 8 summary over at the Killersites forums, and also to drop in another Definition List tip & trick.

    I used to have a couple of lists (#listleft & #listright). They were both identical, and allowed me to fool most browsers into displaying each list side-by-side, where each line of text, say in, #listleft would also be level with a line of text in #listright.

    This next one will allow you to twin two columns in a dl, or definition list:

    Twin List 9
    Last edited by MacRankin; May 30, 2006 at 06:47.
    We Brits do things differently. But we still get shot at.

  2. #27
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just found this one recently, since it was not yet in this list, i al adding it:
    http://www.brunildo.org/test/
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  3. #28
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by motion-ex
    Just found this one recently, since it was not yet in this list, i al adding it:
    http://www.brunildo.org/test/
    Great link! Bookmarked. Thanks.

  4. #29
    SitePoint Zealot MacRankin's Avatar
    Join Date
    Sep 2002
    Location
    London
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hoverbox List

    I wanted to find a way to enhance my dodgy definition lists (TwinLists) to include images and text side-by-side.

    Quite recently, i came across Nathan Smith's, 'hoverbox', and realised that this was something i could use or adapt to carry on using images in almost the same style as i use on my home page without losing too much continuity.

    As you may already know, a hoverbox allows you to seemingly enlarge a smaller image. There are in fact two images, one that has been restricted via some piece of css code that you actually see, and a 'preview' image that does this hoverbox, or lightbox enlarging trick.

    Hoverbox Image Gallery:
    http://sonspring.com/journal/hoverbox-image-gallery

    Err, anyway, i'm pretty sure that i've managed to get it to look the way i want it to look across all browsers, but as for the actual hoverbox part doing its magic - now that is something that is quite out of my hands, and i have no idea if it actually works in anything other than Mozilla 1.2.1 and iCab 3.0.1, so i'll just leave it in your capable hands...

    http://www.macrankin.co.uk/web_proje...erlist_09.html


    2nd Notes: (hoverlists updated!)

    The above hoverlist has been completely overhauled, err, but not by me. billyboy - a pc using and php code-crunching guru has solved yet another one of my dodgy dl lists.

    So i'm editing this post just in case some of you are tearing your hair out trying to get this thing to work. I doubt that you are, but just in case.

    Look ma, no workarounds...

    bb hoverlist:
    http://www.macrankin.co.uk/web_proje...hoverlist.html

    P.S. You can find billyboy's comments regarding his overhaul of this particular hoverbox list over on the killersites forum.

    http://www.killersites.com/mvnforum/...ad?thread=5535
    Last edited by MacRankin; Oct 2, 2006 at 19:56.
    We Brits do things differently. But we still get shot at.

  5. #30
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the CSS resource!
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  6. #31
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great list thanks!
    Visit My Site: Free Web Hosting

  7. #32
    SitePoint Addict savagepriest's Avatar
    Join Date
    Mar 2006
    Location
    India
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks this is what I really needed

  8. #33
    SitePoint Member
    Join Date
    May 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I need a CSS tutorials (the basics). I don't want to read voluminous books. I want to watch video presentations, perhaps in CD-rom format.

    Suggestions will help.

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It costs a fortune but Eric Meyer has one here:

  10. #35
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Writing color style in different formats in CSS :
    (Web-NamedColors, HEX/HTML, RGB, RGB&#37

    1---------------------------------------------------------
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: DeepPink;
    }

    2---------------------------------------------------------
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FF1493;
    }

    3---------------------------------------------------------
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgb(255,20,147);
    }

    4---------------------------------------------------------
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: rgb(100%,8%,58%);
    }


    Go to: http://www.design-lib.com/, you can use online color mixer to convert in above formats and online Color Scheme Tool to make a color schemes.

  11. #36
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since the subject's been brought up, here are a few more color references:

    D9r Color Links
    Color Schemer
    color cube
    WEB SAFE COLOR CHART

  12. #37
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much webnauts! your a genius!

  13. #38
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display: inline and Height

    Can someone tell me why when I set my div's display to inline the height:39px property doesn't work?

    Thanks
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Opt1,

    You should really have posted this in your own thread but I'll answer it now I'm here

    When you set an element to inline then dimensions don't apply because the element is "inline". Vertical margins are also ignored.

    If you need to set dimensions then you can either float the element or leave it as block level. Or alternatively you can use padding on inline elements to create some vertical height but this will be unreliable if the height is greater than the line-height etc.

    It all depends on exactly what you are trying to do.

  15. #40
    SitePoint Evangelist optl's Avatar
    Join Date
    Oct 2004
    Location
    Washington DC
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Sorry for not creating a thread.
    For the phrase "Bethesda home architect", my clients
    websites occupy 6 of the first 8 results
    on the 1st page of Google. My Secret SEO Strategy Revealed

  16. #41
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.styleignite.com is also a useful resource.
    FWDitON.com - the funny email repository

  17. #42
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    Another one

    I just found another trick, from browservulsel, for definition lists.

    I like using definition lists to show the results of a form. They're great. Except when you want to style them. I was always floating the dt left and giving it a width... but unlike in a form where i can wrap a label-input pair in a div which can clear the floats, dl's can't hold anything other than dt's. Adding extra dt's or dd's simply for clearing was not acceptable... what to do when the dt's text was much larger/longer than the dd's? (It's fine the other way around.) The dd's kept wrapping up to the dt above, making the whole set-up useless.

    The technique on Browservulsel was not to float anything, but to give the dt a set width (in em's for text-resize), and then give the dd's a left margin a bit bigger, and a negative top margin to pull it up alongside the dt. The dt's and dl's have to be given min-height settings (height for IE6). I've found they line up quite well for the eye; however they do not line up well enough for bottom or top borders to line up. Text enlarge shows it stable and safe-- no wrapping or other strange things.

    I hope this helps anyone else having clearing problems with definition lists. It was driving me nuts.

    And surely a Crusty here has an even better way, which I would like to hear. I've fallen in love with DL's.

  18. #43
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    nd surely a Crusty here has an even better way, which I would like to hear. I've fallen in love with DL's.
    lol - you mean something like this

    http://www.pmob.co.uk/temp/definition-list.htm

  19. #44
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Lawlz, yes. That one reminds me on one softnmore posted on DP (maybe he got it from you?) where a three-column page kept the length of the center column as it grew using floats enclosing floats enclosing floats. But should float:none be targetted only to IE6? Eh, playing with it now.
    I understand that IE encloses its floats and makes the next box sit by itself... but I don't understand why that box will ride up alongside as if it too were a float. The next box should sit beneath like any other box, right? This would totally anwswer a question I ran into redoing someone else's page where something was floated left, another box came along afterwards (not floated), and trying to use top marign to push box 2 down made big differences betweeen IE and RoW as RoW used the bottom of the float as a reference while IE used the top of the body/ultimate container as reference. Left a nice bald spot on the side of my head, that one did.

  20. #45
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    But should float:none be targetted only to IE6? Eh, playing with it now.
    Yes only IE needs the float:none because it doesn't honour the clear:both on the dt and will let the dd slide higher than it should. It should start level with the cleared element but ie will slide it higher than it should. All other browsers (that i've tested) do not have this problem.

    Therefore for IE we simply set "haslayout" to be true on the DD which has the same effect as overflow (other than visible) has in other browsers. This means that the DD forms a rectangular block to the side of the floated element and can be pushed away by margins on the float onto the correct position.

    Now because the DD is statically placed the clear:both on the DT has the effect of creating a new line and all content starts level and doesn't float higher than it should because its not a float anymore and static content won't rise higher than the floated content (that has clear:both applied) above it in the html.

    Regarding margins on floats and static content you should know that margins on static content alongside a float will have n o effect from the float but slide under until they reach the containing block. You can#t put a margin on a static element that sits under float unless the margin is tall enough to reach the edge of the containing block instead.

    However when an element in IE has "layout" then it takes its margins from the float instead (other browsers behave the same way if overflow other than visible has been set as margins on elements that have overflow set do not collapse ).

    I have a nice little article here that explores these differences.

    Hope that helps

  21. #46
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Regarding margins on floats and static content you should know that margins on static content alongside a float will have n o effect from the float but slide under until they reach the containing block. You can't put a margin on a static element that sits under float unless the margin is tall enough to reach the edge of the containing block instead.

    However when an element in IE has "layout" then it takes its margins from the float instead (other browsers behave the same way if overflow other than visible has been set as margins on elements that have overflow set do not collapse ).
    Ah, that's what it was, I remembered it backwards-- IE was using the float's bottom as a reference instead of the top of the body.

    My question about targetting IE6 referred to IE7, but I see that it's doing the same thing. I wonder if it's safer to say if lte IE7 since we dunno if IE8 will commit this sin.

    Yes, the article is very nice. I had wondered why you had clear: both when everyone was only floated left...
    clear:both - ensures that no floating content is on either side of the element.
    clear:left - ensures that no floating content is to the left of the element.
    I thought clear referred to the direction of the float above it, not where that float was in relation to the clearing element. This is good to know, if I understand it correctly.
    I'll be reading more deeply into this-- thanks a lot. I'm now able to add borders to my dt/dd groups : )

  22. #47
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    My question about targetting IE6 referred to IE7, but I see that it's doing the same thing. I wonder if it's safer to say if lte IE7 since we dunno if IE8 will commit this sin.
    Yes, it would be better to target lte IE7 as IE8 is going to be a completely different kettle of fish

    I am guessing that IE8 won't need it but I'm not downloading the beta ie8 just yet as I don't want to break my computer. I might mess about with the virtual hard disk image (VHD) if I get time in the not so distant future but its pointless to start looking at bugs and rendering issues on a moving target so I will wait a bit

  23. #48
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I agree.

    At the bottom of the article you mention "problems/bugs with clear: left and clear: right, for another day..." Since this is from 2005, have you written such an article yet? I always used the more specific one as the default and both only when there were indeed "both" directions.

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No I never got round to documenting the bugs but there's already some information here about floats and clearing.

    The main thing to remember in IE is that if you float an element left and then float an element right then you won't be able to clear them. Ie only clears floats that float in the same direction.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    .left{
        float:left;
        width:200px;
        height:200px;
        background:red;
    }
    
    .right{
        float:right;
        width:200px;
        height:200px;
        background:green;
        clear:both;
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="left">Left</div>
    <div class="right">Right float won't clear in IE</div>
    </body>
    </html>

  25. #50
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Really? Wth? But if there's another element after .right that clears:both then that will clear everyone right?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •