Thu, 2007-09-20 13:29
Heya, im at the moment trying to build up my new site with div but can't seem get it to work. I want a design which look like this: http://www.csszengarden.com/?cssfile=159/159.css . With borders on the right and left side which casts a shadow. How is this possible, do you use image-repeat:y? Question nr 2, which is the best way to construct a site in CSS, is it with divs all over the page. Im thinking to build it like this: opinions please.
| Attachment | Size |
|---|---|
| layout.GIF | 10.2 KB |
Thu, 2007-09-20 13:49
#1
You've got to break out of
You've got to break out of the tables based layout mentality. You don't make filler divs like you had to with tables. That background is one image repeated vertically, not five separate images. Divs are invisible unless you make them visible and you can place them within the constraints of a background image using margins and padding.
Thu, 2007-09-20 14:05
#2
help with your layout
I wouldn't say their is any best way to construct a CSS site, the best method normally comes down to the requirements of the particular site.
The design which you refer to has one container div which is centered in the middle of the page which holds all the content.
The pink check can be set on the background-image property of the body tag, this could be (and should be) achieved using one small image which can be repeated horizontally (repeat-x) and vertically (repeat-y) to fill the screen.
The shadow effect could be achieved using a number of techniques, personally i'd acheive this by setting the container background to a vertically repeating image giving the correct padding to ensure text does not spill onto the shadow.
If all this has gone over your head then I suggest some reading into setting background images on divs, in particular how to use background-repeat.
Thu, 2007-09-20 15:25
#3
Um, why haven't you simply
Um, why haven't you simply looked at the css and html for that page? If you have trouble understanding how something in the source works, feel free to ask.
cheers,
gary
Thu, 2007-09-20 16:57
#4
Wow, wonderful forum, very
Wow, wonderful forum, very kindly of you to reply :thumbsup:! This background in the body repeat seems like a great idea, but i've one question about it. Let's say for eg. that I want a layout looking like this: How can I achieve the large flower to the top left if the background is supposed to repeat itself?
| Attachment | Size |
|---|---|
| layout2.gif | 62.16 KB |
Thu, 2007-09-20 19:02
#5
Set the repeating background
Set the repeating background (the white box with red flowers) as the BODY element's background, and set the big red flower to be a non-repeating background of the HTML element.
Let us know if you don't quite know how to implement that.
Thu, 2007-09-20 20:29
#6
Thank you thepinapplehead,
Thank you thepinapplehead, that's one way of doing it. I found another way to do it when looking in the css code from the zengarden site:
"background:url(../images/bgimage.jpg) repeat-y center top fixed;"
I understand the part with repeat-y, but "center top fixed" exactly what does this code do? WC3school seems to be down atm so I can't do a search there.
Fri, 2007-09-21 11:44
#7
Shorthand
"background:url(../images/bgimage.jpg) repeat-y center top fixed;"
is the shorthand equivalent of:
background-image: url(../images/bgimage.jpg);
background-repeat: repeat-y;
background-position: center top;
background-attachment: fixed;
center top specifies where the image should start repeating from, or if it's set to no-repeat, where it should be placed.
Fixed specifies if the background image should stay in place when the page is scrolled, or move up accordingly.
Fri, 2007-09-21 21:20
#8
Thanks Pineapple , great
Thanks Pineapple 
, great explanation. I've got another question 
, I hope i can achieve this with CSS. On my page there's div called main where all the information will be displayed, my wish is to have this tag at a minimum height of 700px BUT when the div get overflowed it's just supposed to expand. How can this be done? I tried something like "height: 600px, 100%" but it doesn't work.
Fri, 2007-09-21 21:43
#9
{ min-height: 700px;
{ min-height: 700px; }
Beware - min-height doesn't work in all browsers.
Sat, 2007-09-22 11:03
#10
Wow it works , thanks Katie.
Wow it works , thanks Katie. In which browsers doesn't it work?
Sat, 2007-09-22 11:27
#11
The answer to that is to
The answer to that is to check in your installed browsers and see 
fwiw IE versions < 7 do not understand 'min' properties but the height property is incorrectly parsed to expand with content rather than remaining at it's stated fixed height so you need to employ 'height' for these browsers only.
Sat, 2007-09-22 17:39
#12
as in, #container {
as in,
#container {
min-height: 700px;
}
* html container {height: 700px;}
is that right?
Sat, 2007-09-22 21:54
#13
thepineapplehead wrote:as
thepineapplehead wrote:
as in,
#container {
min-height: 700px;
}
* html container {height: 700px;}
is that right?
#container {
min-height: 700px;
}
* html #container {height: 700px;}
You forgot the octothorp. (Ye-es! I actually saw someone else use the term—I mean other than the more erudite from this forum. )
cheers,
gary
Sun, 2007-09-23 14:50
#14
and for those not erudite or
and for those not erudite or initiated in to the arcane world of the coders sect the reference is to the sign that is commonly known as a 'hash' or 'pound sign'