Trying to replicate something i can do using tables but instead using CSS
In the past I would create a center section that uses table cell back ground image attribute to create an endlessly vertical expanding and repeating middle section of the website design. The purpose is so that the middle section can have as much or as little content as you want
An example can be seen here:
webtempest.biz/MICROICONS...mmandos.htm
In the past I would create a center section that uses table cell back ground image attribute to create an endlessly vertical expanding and repeating middle section of the website design. The purpose is so that the middle section can have as much or as little content as you want
An example can be seen here:
webtempest.biz/MICROICONS...mmandos.htm
posted by:
|
San Diego
|
-
Re: CSS
Mon, May 14, 2007 - 9:30 PMjsut dont assign a height to your div and it will expand witht he content. if you use elements inside that div that use positioning or are floated make sure you use overflow: auto; (without a height assigned but wiht a width assigned) so that it expands with them. use auto for left and right margins to center this div in the window. a typical setup might look like this:
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#shell {
margin-left: auto;
margin-right: auto;
width: 750px;
}
#masthead {
width: 100%;
height: 80px;
}
#footer {
width: 100%;
height: 30px;
}
#main {
width: 710px;
padding: 20px;
background-image: url(path/to/image.jpg);
background-repeat: repeat-y;
background-position: center;
}
</style>
</head>
<body>
<div id="shell">
<div id="masthead"><!-- mathead/header content --></div>
<div id="main">
<!-- main content -->
</div>
<div id="footer"><!--footer content --></div
</div>
</body>
</html>
Now if you want it to always fill the window that can get trick, but if you just need it to expand with the content its cake. -
-
Re: CSS
Mon, May 14, 2007 - 10:18 PMI will try this out and see what i get - thanks for the fast response - -
-
Re: CSS
Thu, May 17, 2007 - 11:03 AMok i am not having much luck -
Here is an example of a page with repeatable graphics...
webtempest.biz/templatecss.htm -
-
Re: CSS
Thu, May 17, 2007 - 1:09 PMIts because youre using absolute positioning and none of your elements are nested. Is there a reason every element is freefloating and positioned by coordinate instead of relying on document flow and nesting??? -
-
Re: CSS
Thu, May 17, 2007 - 9:14 PMyes its because this is the code that image ready dumps out. I am trying to find a way to make it so i dont have to write the code from scratch each time i cut up a design. I dont mind going in after the fact and tweaking the code. I do all work in a code editor (Homesite) rather than a wysiwyg. So i kinda get what your saying - i feel like i am getting close to where i actually get how CSS works but i am not quite there yet. So do you think this code is total junk - or is it possible to go in and make some systematic changes to make it so its nested uses document flow. I am trying to figure this out as a solution for how I do pages in the future so i am thinking about how to do this work each time i create a design. Image ready is nice because it dumps out all your code and cuts up your design and saves out the images for you. -
-
Re: CSS
Thu, May 17, 2007 - 9:55 PMWell the code is total junk, there is no denying that. IR notoriously generates crappy code. Fireworks (my personal preference over IR/Photoshop) isnt much better, but a tad better. That said you might be able to get it closer if you tweak some of your export settings. I abandoned photoshop for actual composit->export web work long ago so im not all that familiar with the newer options but i suspect theres probaly somewhere to control (at lease at a minimal level) how the code is output in terms of structure (ie. tables, css-positioned, css-flowed, etc.). Youll have to poke around in there to figure all that out i suppose.
All that said, yes you could possibly rework what you have now into a flowed document but youre probably going to have to cut and paste every div at one point or another to get the structure right. then youre going to have to go back and modify all the css to match. Additionally loking at how youve sliced this youre going to have to go back to the drawing board there too. Essentially youll be redoing it all. With that in mind i would say working from scratch would probably be faster. Its more typing sure, but depending on your skill level its probably actually more efficient. Its always good to look for the best methods of doing things, but you have to be able to realize when there is no "fast" or "easy" way to accomplish something. Some things just take time, and the more you do it the less time it will take. -
-
Re: CSS
Thu, May 17, 2007 - 10:00 PMthis is a test case i made for someone on hear awhile back to demonstrate float clearing. take a look at the source to see how the elements are nested and the cs rules associated with them. While the layout is differnt from what youd be using the same rules apply. your source should look more like this and not so much like what you have now.
wtf.vectrbas-d.com/tribe/breaktest.html -
-
-
This is the maximum depth. Additional responses will not be threaded.
Re: CSS
Fri, May 18, 2007 - 3:15 PMNoproblem. Hope it helps, not confuses ;-)
-
-
-
-
-
-
-
