14 replies [Last post]
u66lan
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-09-05
Posts: 20
Points: 0

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.

AttachmentSize
layout.GIF10.2 KB
Triumph (not verified)
Anonymous's picture
Guru

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.

jamstar
Offline
newbie
Last seen: 15 years 20 weeks ago
Joined: 2007-09-19
Posts: 3
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

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

u66lan
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-09-05
Posts: 20
Points: 0

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?

AttachmentSize
layout2.gif 62.16 KB
thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

u66lan
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-09-05
Posts: 20
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

u66lan
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-09-05
Posts: 20
Points: 0

Thanks Pineapple , great

Thanks Pineapple Laughing out loud, great explanation. I've got another question Tongue, 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.

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 7 years 14 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

{ min-height: 700px;

{ min-height: 700px; }

Beware - min-height doesn't work in all browsers.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

u66lan
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2007-09-05
Posts: 20
Points: 0

Wow it works , thanks Katie.

Wow it works Laughing out loud, thanks Katie. In which browsers doesn't it work?

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

The answer to that is to

The answer to that is to check in your installed browsers and see Wink

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.

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 41 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

as in, #container { 

as in,

#container { min-height: 700px; }

* html container {height: 700px;}

is that right?

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 49 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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. Laughing out loud)

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.

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

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'

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