Please please help! Having trouble combining 2 css docs into 1 & getting it to work!

Discussion in 'CSS' started by dae666, Mar 19, 2008.

  1. #1
    Can someone please help with this CSS problem, its driving me crazy...!

    I have the main doc 3_col_day.html that links to 2 style sheets, one for text (text_n_colors.css) and one for layout (3_col.css).

    I have another doc (fig4.31_display_rollover4.html) showing 5 animated banners with a subtle rollover, this has embeded css built into the doc and links to csshover.htc (not sure what this is)

    What i've been trying for days to do is to have the 5 banners sitting within the main content area of 3_col_day

    I cant figure how to combine the embeded CSS with the attached file (it makes sense to combine the embed css into text_n_colors.css

    whatever I try either breakes the site apart completely, or I loose the hover functionality... can enyone help or offer some advice?

    I have attached all the files in question if anyone is brave enough to take a look...

    cheers guys,

    DAE666
     

    Attached Files:

    dae666, Mar 19, 2008 IP
  2. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #2
    the csshover.htc is a method to make IE6 accept :hover on elements other than the A. Best advice I can give you right now is to strip out 90% of what's in those files and make it work on a page by itself. Then add it back into the layout. There's a lot of stuff in those files to sort through.
     
    shallowink, Mar 19, 2008 IP
  3. dae666

    dae666 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Shallowink,

    I have one html page where it works by itself in the zip file (the hovers on the banner: fig4.31_display_rollover4.html) and its this i'm trying to put into the main page itself, but it keeps breaking the content area everytime I try it...

    Am I copying and pasting into wrong part of doc, i've tryed it loads of times and I keep getting similar results...

    thanks for responding,

    DAE
     
    dae666, Mar 20, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Css hover should be only its own file, with no other added CSS in it. It sits in the root folder on your server. The only reference to it that your CSS should have is this:

    * html body {behavior: url(csshover.htc);}

    You'll have to add this AFTER consolidating your multiple css sheets into one... OR you could add (to every single HTML page so this is not the best option) a style tag in the <head> with the above code.

    <head>
    stuff...
    <style>
    * html body {behavior: url(csshover.htc);}
    </style>
    </head>
    <body>
    stuff...

    This would at least keep hover working for IE6 until the CSS is put together... but all that work should be done offline and test everything except hover in IE6.
     
    Stomme poes, Mar 20, 2008 IP
  5. dae666

    dae666 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi Stomme,

    I can get the hover functionality to work ok, but I was wondering where the code should go in the different CSS files when I consolidate them, and what to do with duplication of code.

    Its the breaking of the main webpage that is causing me the real problems tho' and I'd like to find a way of putting the banners in the content area whilst still keeping the structure the same.

    thanks,


    DAE
     
    dae666, Mar 20, 2008 IP
  6. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #6
    Ok, I see what the problem could be. The second file is using the P tag as its container tag to display the hover effect. This line wouldn't work for a page but works in an example:

    p {position:absolute; display:none; width: 468px; left:5px; top:65px; border:0; padding:0; background-color:#f0f0f0;}

    So I would go through those and assign a class to the P's used for hover and change that rule to match it.
     
    shallowink, Mar 20, 2008 IP
  7. dae666

    dae666 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    so how would I go about doing that...?!, this is how the code currently looks in html:

    <body>
    <div class="video_selection">
    <a href="#"><img src="images/kangoo.gif" alt="Renault" /></a>
    <p> Renault Advertising campaign 468x60 'Kangoo' </p>
    <div class="clearthefloats"></div></div>

    how would the css look for the new class, and would it go in the text_n_colors.css file?
     
    dae666, Mar 20, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Ack. I'm likely misunderstanding what's going on, but what was it? There was code in one stylesheet to emulate hover?

    Consoladate all your styles to make everything look the way you want. But as far as I know you don't need to have anything special for the hover. The CSShover is a larger file than, say, the Suckerfish JS because Csshover creates its own new classes for the hovered stuff and feeds it to IE6. So unlike with Suckerfish-stlye JS, you shouldn't need to add anything new to the html OR the CSS to make hover work.

    So what's this p doing?? I might be having a blonde moment tho.

    *edit:
    
    <body>
    <div class="video_selection">
    <a href="#"><img src="images/kangoo.gif" alt="Renault" />
    <p> Renault Advertising campaign 468x60 'Kangoo' </p></a>
    </div> 
    
    Code (markup):
    So the p is a caption for the banner?
    Also removed clearthefloat cause you could do overflow:hidden prolly which would make the html cleaner.

    *edit 2 I don't open zips, is why I don't see anything : )
     
    Stomme poes, Mar 20, 2008 IP
  9. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #9
    Heh blonde moment, i have a life like that. The example file uses the P as the hidden element. So if used on a page, no text!!!

    Take the current P and
    <p class="hovered"> Renault Advertising campaign 468x60 'Kangoo' </p>

    p.hovered {position:absolute; display:none; width: 468px; left:5px; top:65px; border:0; padding:0; background-color:#f0f0f0;}
    div:hover p.hovered, p.hovered:hover {display:block;}

    Dunno what the p#specialpara is all about. That probably won't fix it but its a start. Far as what file etc it goes in, it shouldn't matter what css file its in as long as it uses classes. I would slap it into the css file at the end after it was proven to work.
     
    shallowink, Mar 20, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ooooh... when the <a> is hovered over, the <p> is supposed to appear.

    I'd do like I did, wrap the p in the a (or, conversely, set the hover on the div which contains the p). You shouldn't have to set a special hover class if you're using csshover. It makes its own classes for you and sticks them in the CSS for you (why I like it). This is why csshover works on everything you stick :hover on.

    And then, to prevent IE being all stupid, I'd either make the colour change (from the same as background to something visible), visibility (from hidden to visible) OR change position (from left a gazillion px to left: 0) instead of changing display. Changing display means you usually have to add some other change too to get it set off in IE (go figgur).
     
    Stomme poes, Mar 20, 2008 IP
  11. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #11
    Actually no, there is an img that triggers the hover effect. To put that effect using the P or a Div, a class is going to have to be set. Else those style rules will apply when other elements are hovered. So the .hovered isn't there for the hover, its there so we can have text on the rest of the page. Its on his page examples but most times I set the hover htc so its only feed to IE6<. Here's the code from the example page(page2):

    
    <div class="video_selection">
      <a href="#"><img src="images/kangoo.gif" alt="Renault" /></a>
      <p> Renault Advertising campaign 468x60 'Kangoo'  </p>
    <div class="clearthefloats"></div></div> 
    
    Code (markup):
    And the CSS :

    
    <style type="text/css">
    body {
    behavior:url(csshover.htc); 
    background-color:#FFF;}
    img {border:none;}
    div {
    position:relative; top:5px; 
    width:468px; 
    border:0; 
    padding:5px;}
    h2, p {
    font-size:.7em; 
    font-family:Arial, sans-serif; margin:0;}
    p {
    position:absolute; 
    display:none; 
    width: 468px; 
    left:5px; top:65px; 
    border:0; 
    padding:0; 
    background-color:#f0f0f0;}
    p#specialpara {
    position:relative; 
    top:25px; left:30px; 
    color:red; 
    background:#EEE;}
    div:hover p, p:hover {
    display:block;}
    
    
    <style type="text/css">
    body {background-color:#FFC;}
    p {margin:0 0 15px 0;} /* provides space between each item */
    img {float:left; 
    margin:0 8px 0px 0;}
    .clearthefloats {clear:both;}
    </style>
    
    Code (markup):
    Ain't sure why there's two style tags but whatever. I tend to come up with a solution and just use it. I tested that with an example file and it should work fine if its added to a full page. Course I only tested it in FF cause I don't want a headache this early in the morning :) Aren't you breaking like 16 different rules by wrapping the P in the A? Not that I care.
     
    shallowink, Mar 20, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Yeah I'm breaking rules wrapping the p in the a... what I should have done is wrapped the p's text in the a. I don't have the excuse of early morning here, just stoopidity on my part : )

    I'm guessing that other tag is for some box that's maybe not on that page?

    Hmmm... you only want to target the p's which are children of that div.videoselection whenever the img/a in div.videoselection is hovered?

    div.videoselection a:focus > p, div.videoselection a:hover > p, div.videoselection a:active > p {
    visibility: visible (or whatever);
    }
    The a could be the image, but since the image is wrapped in an a anyway, less work for IE... so because of the combinator issue, you'd have to go with something like
    * html div.videoselection a:hover .videoselection p {
    whatever hover;
    }

    I think.
     
    Stomme poes, Mar 20, 2008 IP
  13. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #13
    Which box? the clearthefloats one? or #specialpara? I think #specialpara is another example or something.

    Should work or looks right to me. I just thought using the class would be an easier example to follow.
     
    shallowink, Mar 20, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Oh, who knows, it could... the only thing I can see that would trip it up the way you have it is the display: block on the p might not be enough to trigger the p to actually show in IE... adding something like, background-color: #fff or something, or visibility:visible... whatever might be needed because sometimes IE won't just let something change display states. It's not Haslayout, just something weird about IE.

    Yeah I means the specialpara one.
     
    Stomme poes, Mar 20, 2008 IP
  15. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #15
    I just checked IE6, course it doesn't work. I assumed the original did work in IE6. It doesn't either. Ok, so if I'm going to screw around with IE6 and hover, I might as well make it work for a paid project and then post the results.
     
    shallowink, Mar 20, 2008 IP