63 replies [Last post]
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Since everything is

Quote:

Since everything is defined in the css, including the bg image, it is trivial to switch left for right, or to have dynamic widths.

Whether it's trivial I'd say completely depends on what and where you're using the image.

I have a page, a very stable page, with faux columns (one of my first pages ever, with all the problems of a First Page : ) and it's an image with a border on one side repeated-y. To switch to the right side, I'm redoing the image, and if I have a picky boss who frequently goes about changing places of things, you can start redoing images and redoing images whereas in CSS alone you just change a single line, or two, of text in a text editor. I just find it easier.

Absinthe, that thing you linked to, I'm not sure what that is... it does have divs in divs, though he's got like 5 gazillion boxes and I have 3. I first saw this explained by softnmore on another forum and thought, whoa.

Here's a bad one I grabbed to show someone once: http://stommepoes.nl/matryoshka.html

It's hackey (in that a height is set) and just something one *could* use. Without setting the height on babushka, you'd still have equal-height columns, but not 100% high columns. In a design like yours, with a set height, you can just set the height of babushka to whatever the height of the whole page chunk is.

The person who this was set up for had a click-and-grow expanding tree thingie in one of the columns... I think the right one. So, if that side grew, it would make the left column grow too, but not the middle (though we were assuming that poster would have background images on at least the mother div if not also the right column div).

I'm no expert, but I fake one on teh Internets

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

so I amde all these changes,

so I amde all these changes, and now I tried to move them all to a .css file and include it with a tag. They all seem to work except the body one, if I take that into the css file then the background logo goes away... what am I doing wrong?

http://www.smalllockandkey.com/

This is in the HTML (with the body left in, it works, if I take it out it stops working. The rest of the styles seem to work fine though.)

    <link rel="stylesheet" type="text/css" href="smalllock.css">
    <style type="text/css">
/*<![CDATA[*/
  body {
    background-image: url(images/logoemb.jpg); 
    color: white;
    font: 100% arial, sans-serif;
    margin:50px 0px; 
    padding:0px; 
    }
 
/*]]>*/
</style>

This is the CSS

<style type="text/css">
/*<![CDATA[*/
  body {
    background-image: url(images/logoemb.jpg); 
    color: white;
    font: 100% arial, sans-serif;
    margin:50px 0px; 
    padding:0px; 
    }
 
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
 
  h1 {
    color: #79E1FB; 
    margin-bottom: 0;
    margin-left: 282px;
    margin-top: 0;
    }
 
  h2 {
    color: #79E1FB; 
    font-size: medium; 
    padding: 0 .5em;
    }
 
  :link    { color: green; }
  :visited { color: green; }
  :active  { color: green; }
 
 
  #container {
    background: #770000 ;
    border: 8px outset gray;
    color: white;
    margin:0px auto; 
    overflow: hidden; 
    width: 800px; 
    }
 
  #header {
    border: 4px solid black;
    }
 
  #addr {
    background-color: #770000; 
    color: yellow; 
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 312px; 
    margin-top: 0;
 
    }
 
  #tagline {
    font-size: x-large; 
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 282px;
    margin-top: 0;
    }
 
  #banner {
    background-color: blue; 
    color: yellow;
    }
 
  #contcontainer {
    background-image: url(images/4colbkg.png);
    overflow: hidden; 
    }
 
  * html #contcontainer {
    width: 100%;
    }   
 
  .content {
    color:white;
    float: left;
    padding-left: 4px;
    width: 195px;
    }
  .content li span {
    color: yellow;
    }
  #contentFoot {
    border-top:   4px solid black;
    border-right: 4px solid black;
    border-left:  4px solid black;
 
    font-size: x-large; 
    margin: 0;
    text-align: center; 
  }
 
  #footer {
    border: 4px solid black;
    float: left; 
    font-size: x-large; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    width: 793px; 
  }
  #colophon {
    background-color: #ffffcc; 
    color: black; 
    font-size: small;
    padding-top: 3em;
  }
  ul.hnav {
    background-color: #000077; 
    border-bottom: 4px solid black; 
    color: white; 
    font-weight: bold; 
    float: left; 
    width: 793px; 
    list-style-type: none;
    margin:0; 
    padding:0; 
    text-align: center; 
  }
  ul.hnav li {
    color: white; 
    display:inline; 
    font-size: medium;
  }
 
  ul.hnav a { 
    background-color:#000077; 
    border-right:1px solid white; 
    color:white; 
    float:left; 
    padding:0.2em 0.6em; 
    text-decoration:none; 
    width:7em; 
  }
  ul.hnav a:hover {background-color:#ff3300}
  #logo { padding: 3px; float: left;}
/*]]>*/
</style>

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Ok, I see it now!!!

Ok, I see it now!!! Apparently I can't have the style tag inside the CSS file... Should I be trying to keep the CDATA tag in there either?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Absinthe wrote:<snip> Should

Absinthe wrote:

Should I be trying to keep the CDATA tag in there either?

No.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

@Sp: The picky boss is no

@Sp: The picky boss is no different a problem than you'd have anyway when creating any bg image. Moving from one side to the other, given an asymmetric image, is no more than a trivial exercise.gt@aretha:~$ convert myimage.png -flop myreverseimage.png

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

just one more

just one more question:

Looking back at the CSS changes what was this for:

  * html #contcontainer {
    width: 100%;
    }   

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

just one more

just one more question:

Looking back at the CSS changes what was this for (does it only help for IE6):

  * html #contcontainer {
    width: 100%;
    }   

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

@gary yeah, GIMP's got a

@gary yeah, GIMP's got a flip transformation in the menu too (which I use now and then). The command line one is much cooler though, of course : )

absinthe:
Not sure, but probably for Haslayout.

A static block is already 100% wide, so with no width set on the normal declaration, I'm guessing its added there for IE6 to set Layout on the box. Then it will wrap floated children (incorrectly). Overflow: hidden is doing that for the smarter browsers, though I could be completely wrong here because normally you wouldn't need to hide a width declaration like that, and you would of course want IE7 to get haslayout as well. The only reason I can think to hide it is if you wanted to add sidepadding or side margins for the modern browsers. 100% width means you can't add more to it.

So actually I'm confused what it's doing there.

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Absinthe wrote:just one more

Absinthe wrote:

just one more question:

Looking back at the CSS changes what was this for (does it only help for IE6):

  * html #contcontainer {
    width: 100%;
    }   

It's strictly an IE thing. The "* html" is a hack seen only by IE≤6. It does, indeed, set hasLayout. It is a simple and safe hack, as no other browser reacts to it. I couldn't use the normal Holly Hack of {height: 1px;} because of the {overflow: hidden;} which good browsers and IE7 support, so width seemed a good property. There were other choices.

@Sp: I hid it because of a personal prejudice against adding properties that could have potentially bad side effects to the general set of rules, and when IE6 goes to that special hell that awaits it, it will be trivial to remove all traces of it ever having existed. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

This will be one thing that

This will be one thing that I merely accept.

I am curious however as to the * ... what is that referring to?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 37 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

In truth, the html element

In truth, the html element is the top element in the hierarchy. There is no ancestor to html. The asterisk "*" coming before the html says, "where html is descended from any other element, …." Only IE6 and earlier fall for the ruse, making it a good selector combo to feed stuff to IE6.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Lawlz, nice

Lawlz, nice explanation.

IE7 falls for a different (set) rule:

stuff like *+html, *:first-child html or something similar... etc.

I actually try to leave as many triggers out in the open, with a comment afterwards explaining it, because if it's safe to use out in the open I feel more honest about it : ) And usually can hit IE7 on the way if needed.

*duh, I'd forgotten that overflow other than default triggers Haslayout in IE7... the reason only IE6 needed the width.. bleh. : )

I'm no expert, but I fake one on teh Internets

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

This is really

This is really fascinating... The inner workings are truly amazing. I am guessing, however, that it simply bores most folks who just want to get in the driver's seat and turn the key, and don't care how the engine works...

I appreciate you all taking the time to help and show me some of the pointers here. Hopefully, I will be able to answer someone else's question some day and contribute back...

The final cut on the whole site is up now, I still have to go back and disable the menu items for the pages they are on but otherwise I have applied the styles across the site.