Jump to content

How to recreate this


ryy705

Recommended Posts

Hello,

 

I am trying to learn css by examining various sites I see online.  But I'm stumped on this one.  And since this is just a pic can't see the css.

How did they get the 'suncasting' logo to spill over to the box on the right?

Any ideas?

 

 

 

Link to comment
Share on other sites

I am trying to learn css by examining various sites I see online.

 

That is probably about as difficult a way to learn CSS as you can get. Sit down and spend some time learning the basics first, then put together a couple sites, and after that you can start deconstructing sites, as you will be able to understand what exactly it is that they are doing.

Link to comment
Share on other sites

If you are interested in my method of doing this effect, then have a look at my blog in IE7+ (or better browser).

 

Basically i just placed additional divs using absolute positioning, and applied a z-index to each of these elements. That would have been much harder using floats, since it would require a lot of div wrapping, which i wont get into.

 

The way not to do this effect, is by simply applying a background to the entire page/element, or to slice up an image and put it into a table.

 

 

Please note that for absolute positioning to work inside the element, rather then having all elements being positioned relative to the root, you will need a wrapper and position that wrapper, that can be done by simply applying position: relative;.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.