23 replies [Last post]
ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

Sorry to post this... I am sure this has been answered before I am just not sure I know what I am looking for. Been searching and trying things out for two days and still have not figured this out. Sad

I am trying to lay out a new blog in CSS and am running against a wall here. Not sure if its my css, or the html.

I am trying to put a white block in the center of the page horizontaly and 100% of the height. so far it just pushes the white up to the top of the bage in a 20 pixel bar accross the top of the page. If I give it a pixel value it pushes down, but I need it to expand with the page as content length changes.

Here is my HTML code:

<body>
<div id="mainwraper">
	<div id="headerimg"><h1>Heather & Mark</h1></div>
	<div id="title"><h2>Bits & pieces of our lives</h2></div>
	<div id="globalnav">
		<ul id="globalnavul">
		<li id="linkhome"><a href="/">Home</a></li>
		<li id="linkjournal"><a href="/">Journal</a></li>
		<li id="linkphotos"><a href="/">Photos</a></li>
		<li id="linkwedding"><a href="/">Wedding</a></li>
		</ul>
  </div>
</div>

and here is my css for the body and the wraper:

body {
	background-image: url(background.gif);
	margin: 0px;
	padding: 0px;
	height: 1000px;
}
#mainwraper {
	background-color: #FFFFFF;
	width: 620px;
	height: 100%;
	border: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #D5D5D5;
	border-left-color: #D5D5D5;
	position:relative;
	text-align: left;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}

I thought this would be a simple fix but two days? am I just an idiot or what?

Thanks in advance.

neelyakeirma
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-10-29
Posts: 9
Points: 0

100% Height and Centered

Try height: auto on both the body and the #mainwraper instead of specifying a height. You'd think the height: 100% would work, but I couldn't get it to work for me - auto on both did.

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

Nope... That had the same effect. it just bunches up at the top of the page.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

Rather than tying yourself up in knots, can't you just include the white space and side borders in your background image as that will then tile down the page giving you the effect you want without worrying about how deep your container div is :?:

Life's a b*tch and then you die!

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

roytheboy wrote:
Rather than tying yourself up in knots, can't you just include the white space and side borders in your background image as that will then tile down the page giving you the effect you want without worrying about how deep your container div is :?:

I could, but Then I would add a few extra k to the page size. plus I really want to learn how to do it correctly.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

Well as far as I'm concerned that IS the correct way to do it, in that it works and it's simple so who's to say that it is incorrect?

As for the file size; if you really wanted to be pedantic then look into the whole issue of server, bandwidth and browser overhead. I think you'll find that the miniscule filesize difference in whatever your body background image is at the moment and what it would be with some white and two border pixels in it, would be more than compensated for by the saving in the browser not having to render the white background and borders; plus the CSS file will be leaner. But you really are talking inconsequential values here and if they mean that much to you then learn CSS shorthand and save yourself some more bits and bytes Wink

Life's a b*tch and then you die!

neelyakeirma
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2004-10-29
Posts: 9
Points: 0

100% Height and Centered

what's the positioning like in your other divs (float, absolute...)? Because it sounds as though your #mainwrapper isn't actually wrapping around the others - If they're position: absolute, that takes them out of the mainwrapper div...

I'd run into this same problem, but fixed it by having the body and container (mainwrapper) with height: auto and having the other generic div elements (menu, content, etc) float inside the container.

Suzy
Suzy's picture
Offline
Regular
Last seen: 11 years 31 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

your bar is a margin..

Quote:
Well as far as I'm concerned that IS the correct way to do it, in that it works and it's simple so who's to say that it is incorrect?

in 2 words.. Collapsing Margins

What should work and what does work are 2 x different things Wink so I understand ApletFx's question.. though the answer may not be as easy as yours it is the correct one..

First the margins of the <h1> in the top section of code is collapsing according to recs, and producing the gap (not IE though).. second even if you know this and know how to "fix" it for your design (adding borders or padding) then IE doesn't like that because it can't cope with really collapsing default margins so you need to specifically give it (element in question) margins.

So although one method may work.. if you really want to learn it then it's a bad o'l world.. (but it's one heck of a lot better than it was a few years ago Wink)

ca

Suzy

Suzy
Suzy's picture
Offline
Regular
Last seen: 11 years 31 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

100% Height and Centered

sorry roytheboy but if you start compensating for browser differences with a background image then surely that's only going to cause further problems later..

if of course you're already aware of this then I humbly apologise..

Suzy

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

roytheboy wrote:
Well as far as I'm concerned that IS the correct way to do it, in that it works and it's simple so who's to say that it is incorrect?

As for the file size; if you really wanted to be pedantic then look into the whole issue of server, bandwidth and browser overhead. I think you'll find that the miniscule filesize difference in whatever your body background image is at the moment and what it would be with some white and two border pixels in it, would be more than compensated for by the saving in the browser not having to render the white background and borders; plus the CSS file will be leaner. But you really are talking inconsequential values here and if they mean that much to you then learn CSS shorthand and save yourself some more bits and bytes Wink


I think you might be missing me here. I am just trying to learn it the right way. and be considerate to people on dial-up. The page design would require a large 57k background if I were to do it as you said. compared to a 6k tiling background image. doing it the other way. I have seen it done on many of the sites on css zen garden so I know it is possible. I just cant seem to figure it out. As far as server hits goes a 57k background image being hit on every page adds up to a lot not a little.
Quote:

what's the positioning like in your other divs (float, absolute...)? Because it sounds as though your #mainwrapper isn't actually wrapping around the others - If they're position: absolute, that takes them out of the mainwrapper div...

I'd run into this same problem, but fixed it by having the body and container (mainwrapper) with height: auto and having the other generic div elements (menu, content, etc) float inside the container.


the other elements are a mix of absolute and relative positioned id's. For instance the <h1> is an absolutely positioned background image. and the List items for the links are floated block elements inside another absolute positioned div (globalnav). Should I not use absolute positioned elements if I want it to work? Thanks for the tips so far guys.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

ApletFX - 57kb!!! I don't know what your site looks like (and that's obviously a problem here) but you have a tilling background image within <body>. So I assumed that you'd used a thin slice of an image and that adding a white box from top to bottom with left and right borders was just a case of changing the image by a few dozen pixels. When you said that it would increase the file size I assumed that you were talking bits or bytes. Without understanding what your page looks like I have obviously assumed things incorrectly so I am sorry for pushing the point. Do I take it then that you can't use a tilling image slice? Can I see the site please (a screen shot will do) as I am now intrigued as to why you need a 57k image.

As for the absolutely positioned divs: by taking the divs out of the flow of the page (as you are), you are not giving your wrapper any content. I'm on dodgy ground when it comes to stretching divs to 100% but I can tell you for sure that you're going about things in totally the wrong way.

Post a link so that we can stop guessing how to help you and start understanding what you've done and what you need to do.

cssangel - collapsing margins??? Either you or I have completely misunderstood the problem ...probably me Wink. As I understand it, ApletFX wants a white box stretching from top to bottom of the viewport, with a 1px border left and right. I don't understand where collapsing margins come into this; but then I know you know your stuff so I am now assuming that I have completely lost the plot of this thread.

Is it just me or are we all talking at crossed purposes here?

Okay; it's just me :? :? :? Laughing out loud Maybe things will look clearer in the morning. Goodnight.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% Height and Centered

ApletFX,
this topic seems to have caused a lot of confusion, you really ought to have provided a little more of the CSS - actually all of it would help - as at the moment it's hard to tell how the page is flowing but your indication that absolute positioned containers are in use suggests the problem which to my mind is one of a clearing fix to expand your white mainwrapper around the dynamic content and the the use of floats not absolutes but then again maybe I've missed the point as well, which is why more code is required and maybe a link if the site is live (is this a Wordpress blog?)

cssangel, I fail to see at this stage where collapsing margins figure in this problem :?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

100% Height and Centered

Read and weep:

<!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=us-ascii" />
    <style type="text/css">
    /*<![CDATA[*/
/*Much of code taken from
http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3
with additional annotations provided by myself*/
    /* commented backslash hack to hide from early IE Mac \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {
    margin:0;
    padding:0
    }
    body {
    text-align:center;/*hack for IE5 centering*/
    background:#fff url('http://www3.ns.sympatico.ca/d.elliott/watercolor_iris.jpg') repeat-x fixed 50% 50%;
    }
    #outer{
    min-height:100%;
    margin-bottom:-50px;/*space for footer*/
    height:auto;
    }
    * html #mainwrapper{height:100%;}
    #mainwrapper {
    width: 620px;
    min-height:100%;
    margin:0 auto -50px auto;/*note -ve margin for footer space*/
    height:auto;
    border-color:#9178A8;
    border-style:solid;
    border-width: 0 2px 0 2px;
    border-top:1px solid #fff;
    background: transparent url('http://www3.ns.sympatico.ca/d.elliott/white_trans.gif') repeat;
    text-align:left;
    }
    #footer {
    width:100%;
    clear:both;
    height:50px;
    background-color: #9178A8;
    color: #000000;
    }
    #clearit {
    clear:both;
    height:50px;
    }
    div>p {
    margin:0;/*Get rid of Mozilla extra paragraph margins*/
    }
    #minHeight{/*safari wrapper thanks to Tim Connor*/
    float:left;
    width:0px;
    height:100%;
    margin-bottom:-52px;
    } 
    * html #minHeight{
    margin-bottom:-50px;/*for IE*/
    }
    /*]]>*/
    </style>
</head>

<body>
    <div id="minHeight"></div><!--Safari hack -->
    <div id="mainwrapper">
        <div id="headerimg">
            <h1>Heather &amp; Mark</h1>
        </div>
        <div id="title">
            <h2>Bits &amp; pieces of our lives</h2>
        </div>
        <div id="globalnav">
            <ul id="globalnavul">
                <li id="linkhome"><a href="/">Home</a></li>
                <li id="linkjournal"><a href="/">Journal</a></li>
                <li id="linkphotos"><a href="/">Photos</a></li>
                <li id="linkwedding"><a href="/">Wedding</a></li>
            </ul>
        </div>
        <div id="clearit"></div>
    </div>
    <div id="footer">
        &copy; Heather &amp; Mark &ndash; 2004.10.29
    </div>
</body>
</html>
With a bit of artistic license thrown in.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

Sorry for the extra & un necessary confusion. Next time I will be sure to post the full code. I post on other forums and its frowned upon to post extranious code.

In my case I couldn't even get a simple test page to work. :oops: CSS is not my strong suite as you all can tell. I just look at css zen garden and think... "That is how it should be done." Complete seperation of presentation and content.

DCElliott - Thanks for posting your code. I see you added some extra stuff. I think all the browser hacking stuff is a bit mind numbing at the moment. I hope I can get it with some experimentation.

Here is my code before any of your implimented sugestions. mostly for the record.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Heather & Mark</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/classic/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outerframe">
<div id="mainwraper">
	<div id="headerimg"><h1>Heather & Mark</h1></div>
	<div id="title"><h2>Bits & pieces of our lives</h2></div>
	<div id="globalnav">
		<ul id="globalnavul">
		<li id="linkhome"><a href="/">Home</a></li>
		<li id="linkjournal"><a href="/">Journal</a></li>
		<li id="linkphotos"><a href="/">Photos</a></li>
		<li id="linkwedding"><a href="/">Wedding</a></li>
		</ul>
  </div>
	<div id="sidewraper">
		<div id="tidbits">
		<h3>Tid Bit's About Us</h3>
		<p>Hello all, just thought you might like a change of scenery. Heather & I put our heads together and came up with a new website that we thought was pleasing to look at, and served as a good resource for our pu and comming events.</p> 
		</div>
  </div>
  <div id="blogwraper">
  <!--- <div id="blogtoday">[ Todays Topics ]</div> --->
  <div class="blogtitle"><h4>Something to Talk About</h4></div>
  <p>Knight Rider, a shadowy fight into the dangerous world of a man who does
    not exist. Michael Knight, a young loner on a crusade to champion the cause
    of the innocent, the helpless in a world of criminals who operate above the
    law.

80 days around the world, we'll find a pot of gold just sitting where the rainbow's
    ending.</p>
  <p>Time - we'll fight against the time, and we'll fly on the white wings
      of the wind. 80 days around the world, no we won't say a word before the
      ship is really back. Round, round, all around the world. Round, all around
      the world. Round, all around the world. Round, all around the world.  </p>
  <p>Ten years ago a crack commando unit was sent to prison by a military court
      for a crime they didn't commit. These men promptly escaped from a maximum
      security stockade to the Los Angeles underground. Today, still wanted by
      the government, they survive as soldiers of fortune. If you have a problem
      and no one else can help, and if you can find them, maybe you can hire
    the A-team.</p>
	<div class="blogfooterwraper">
	<div class="blogcomments">Comments (0)</div>
	<div class="blogdate">10/25/2004</div>
	</div>
  </div>
</div>
</div>
</body>
</html>

and the css

body {
	background-image: url(background.gif);
	margin: 0px;
	padding: 0px;
}
#mainwraper {
	background-color: #FFFFFF;
	width: 620px;
	height: 100%;
	border: 1px;
	border-left-width: 1px;
	border-right-style: solid #D5D5D5 solid #D5D5D5;
	position:relative;
	text-align: left;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}
h1, h2, h3 {
	display: none;
}
#headerimg {
	background-image: url(header.gif);
	position: absolute;
	height: 86px;
	width: 443px;
	top: 30px;
	left: 95px;
}
#title {
	height: 22px;
	width: 580px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #333333;
	position: relative;
	top: 125px;
	left: 20px;
	border: 1px solid #D5D5D5;
	background-image: url(title.gif);
	background-repeat: no-repeat;
}
#title b {display:none;}
.divider {
	background-image: url(stars.gif);
	height: 22px;
	width: 36px;
	position: relative;
	background-repeat: no-repeat;
}
#sidewraper {
	position: absolute;
	height: 100%;
	width: 175px;
	left: 20px;
	top: 172px;
	border: 1px dashed #D5D5D5;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	line-height: 15px;
	color: #666666;
	text-decoration: none;
	padding-right: 5px;
	padding-left: 5px;
}
#tidbits {
	background-image: url(tid_bits.gif);
	background-repeat: no-repeat;
	position: absolute;
	height: 13px;
	width: 174px;
	top: 20px;
	padding-top: 15px;
}
#globalnav {
	position: absolute;
	height: 20px;
	width: 580px;
	top: 148px;
	left: 20px;
	border: 1px solid #d5d5d5;
}
#linkhome {
	display: block;
	list-style-type: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-variant: small-caps;
	font-size: 11px;
	font-weight: bold;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #d5d5d5;
	padding-left: 35px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-right: 35px;
}
#linkjournal {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	list-style-type: none;
	float: left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #d5d5d5;
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 22px;
	padding-left: 22px;
}
#linkphotos {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	list-style-type: none;
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #d5d5d5;
	float: left;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 23px;
	padding-left: 23px;
}
#linkwedding {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	font-variant: small-caps;
	font-size: 11px;
	display: block;
	list-style-type: none;
	float: left;
	padding-top: 3px;
	padding-right: 20px;
	padding-bottom: 3px;
	padding-left: 20px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #d5d5d5;
}
#linkwedding a:link, #linkphotos a:link, #linkjournal a:link, #linkhome a:link,
#linkwedding a:visited, #linkphotos a:visited, #linkjournal a:visited, #linkhome a:visited {
	color:#333333;
	text-decoration: none;
}
#linkwedding a:hover, #linkphotos a:hover, #linkjournal a:hover, #linkhome a:hover {
	color:#006699;
	text-decoration: none;
}
ul {
	display: inline;
}
#blogwraper {
	position: absolute;
	top: 172px;
	left: 199px;
	border: 1px dashed #d5d5d5;
	right: 20px;
}
h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #333333;
	font-variant: small-caps;
	letter-spacing: 3px;
	padding-left: 3px;
}
.blogcomments {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	text-transform: lowercase;
	color: #666666;
	float: left;
	padding-left: 3px;
}
.blogdate {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	text-transform: lowercase;
	color: #006699;
	text-align: right;
}
.blogfooterwraper {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dashed;
	border-bottom-style: dashed;
	border-top-color: #d5d5d5;
	border-bottom-color: #d5d5d5;
	padding: 3px;
	width: 395px;
}
#blogtoday {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #CCCCCC;
	text-align: center;
	letter-spacing: 3px;
	padding-top: 5px;
}

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

...and given how the background gif has now become central to the post: what does it look like?

In fact, just post a link - pleeeeeease :roll:

Life's a b*tch and then you die!

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

Here is the background its 72x2000 pixels large. Most people won't have a 2000 pixels wide but I want to make sure it does not repeat or cut off for people viewing with large monitors. especially since many of my friends have cinema displays. Hence the desire to use a simple 72x72 repeating background and do what DCElliott demonstrated. I think it is the absolutely positioned elements. Like I said I am pretty new to css and still struggling to nail down the proper structure and of course deal with all the hacks for different browsers. Almost makes me want to go back to tables Shock JK

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

ApletFX,

Right; now that I have seen the image in question, I can tell you that filesize is not a problem if you prepare the image correctly. Forget the 75Kb image Shock and try 3Kb for size Cool.

(1) Your image is too wide. Anybody with a cinema display (like me) that views their browser at full screen (not like me) must find reading the text on fluid sites almost impossible. I would say that a width of 1268px is more than adequate to ensure that 99% of people see the full background, but if you have a border left and right, and don't repeat the image in the x axis, then they'll think the 'secondary' white margins are part of the design. To be honest, you could come even narrower, but let's stick with your preferences for this exercise.

(2) Your image is too tall. The 36px high pattern repeats vertically within your 72px high slice.

(3) Your image should be saved as a gif or a png. JPEG is for photos; GIF is for flat colours. Because your image has been 'jpeged' it is now covered in compression artefacts but just to prove a point I have recreated it pixel-by-pixel in its original three colours (two greys and white). When I then saved it as a PNG file the size came down to 1Kb - yes, that's one Kb. However, png is not totally supported yet, so I saved it as a 3.5Kb GIF. I have attached it to this post for you.

You are free to do what you like with your page. If DCElliott has given you the layout information that you were looking for then that's great. He knows far more than me about CSS and I hope he'll still help me out if I ever get stuck with something.

But going right back to your original post, I still stand by my first suggestion of looking for the simplest answer, and I feel that a repeating background image that includes your white box is it. And if that is not the 'correct' solution then I am sorry but I was only trying to help.

The only reason that I have gone this far with preparing your image correctly, is to try and help you understand why I suggested it. Call it pride; proving a point; not wanting to feel stupid; whatever!

I hope this has helped you in some way, even if it's just with issues of image files. Good luck with the rest of your site. Smile

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

100% Height and Centered

http://www3.ns.sympatico.ca/d.elliott/demos/apletfx.html is a working demo.

Man - you gotta lose that absolute positioning - it is killing you. I made the same mistake when I started doing CSS, thinking- Oh! absolute positioning - I can put things just where I want them. And after a heap of hurt I learned better. Use absolutes only for horizontal and vertical centering and certain special effects - everything else should be managed with positioning "in the flow" and floats. Even the neat footer trick I am using is NOT done with absolute - the whole document flows and adapts to window size and font size as the user wishes.

I created a tileable version of your bg graphic - only 5k in size. I still used my transparent background for the wrapper area but you could change it to a color of your choice instead.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

Nice work DC. Don't think for a minute that I have been suggesting that your solution is wrong, because I'm not. I had not even looked at the issue of how ApletFX's page was structured. I was just making a 'conceptual' suggestion regarding the use of the background image to ensure that his 'column' always ran from top to bottom Smile

Life's a b*tch and then you die!

ApletFX
Offline
Regular
Sacramento
Last seen: 15 years 17 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

100% Height and Centered

Wow, thats great! Thanks for the tips about absolute positioning. I will certainly avoid using them when attempting this type of layout in the future.

Thank you all so much for your assistance. I really do appreciate it.

I will surly post back with more problems, and hopefully a link to see a working demo of it. I just set up some temporary DNS to my server for testing, So I should have that by tonight.

Suzy
Suzy's picture
Offline
Regular
Last seen: 11 years 31 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

100% Height and Centered

Quote:

cssangel - collapsing margins??? Either you or I have completely misunderstood the problem ...probably me Wink. As I understand it, ApletFX wants a white box stretching from top to bottom of the viewport, with a 1px border left and right. I don't understand where collapsing margins come into this;

I haven't misunderstood Wink perhaps a bit premature...

but as always with CSS there is a choice.. DC's code will likely do the job Wink

Suzy

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

100% Height and Centered

Actually roytheboy, its 430 bytes if you png it with 3 colors - that makes a whack of difference.

And, ApletFX - don't get hassled on the hacks - there are really only a couple and they are well documented to take care of well-documented browser inconsistencies. The biggest thing is to get away from the concept of "ice" - the pixel-perfect table layouts that rely on rigid display of content and where you hope they have IE because you can enforce your wishes with all those px and pt font sizes to keep the content from escaping your carefully laid out boxes. Melt the ice and go "liquid" - or at least "jello" with a design that have some adaptive flexibility. Besides, blogs and such are supposed to be more informal and give you a chance to experiment and innovate. If you want to use more real estate with an adaptive two or three column design just say the word - there are a ton of templates out there to do just that.

Good luck.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 17 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

100% Height and Centered

DCElliott wrote:
Actually roytheboy, its 430 bytes if you png it with 3 colors - that makes a whack of difference.

DC - the whole point of my post was that I was talking about a 1268px-wide slice of an image, not a small x-y tile. The pattern repeat for the tile is 60x36 pixels, and if you save that as a 3-col GIF using any image compression software, the file size comes out at a miniscule 440 bytes. As for the size of a PNG, well that depends upon the software used but I tend to stay away from PNG at the moment for as brilliant as it is in many instances (but by no means all), it has backward compatibility issues and needs some serious hacking to work with alpha channels on IE6 (but let's not go there as the subject is too deep for a Sunday Wink ). PNG will have it's day for sure, but I'm sticking with JPEG and GIF until PNG's support is improved by Micro$oft.

cssangel - I still don't understand what you were getting at by offering the issue of collapsing margins as a choice to the issue of faux-columns. What am I missing :? ?

ApletFX - this is a great thread that's kicking up some healthy dialogue. Well done Smile. I have attached the tiny gif tile in case you want to use it.

For the record: I am writing this with a smile on my face and a willingness to learn, as whilst I am relatively new to CSS, I am no novice to the business and I will always have a healthy respect for my peers Cool

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

100% Height and Centered

I'll willingly concede the point roytheboy - I am no graphics expert (and sorry for my misinterpretation of what you were trying to do/illustrate). My understanding of png was that alpha channel support was nonexistent on IE without using the hack of applying a filter to all pngs though Javascript. But definitely not Sunday afternoon stuff. Shock Still, I thought "regular" 3 channel pngs were generally well supported on modern browsers. It is not a big deal because my graphics program doesn't support png-alpha anyhow.

ApletFX wrote:
I will surly post back
Please don't, we get enough surly posts here. Laughing out loud

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS