How to make a broken image box?

Thread Solved

Join Date: Dec 2007
Posts: 622
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

How to make a broken image box?

 
0
  #1
Dec 9th, 2008
Here are a few examples:
http://www.greenhamnaturalbeef.com.au/
http://www.quincy.com.au/

Now I dont know what is the name for it?
(anyone help me with the offical name, much appreciated)

What I have analysed is that it is a image broken into 4 parts, top right, bottom and left.
Then within those border images are the navigation bar and the content.

Combined images to make a nice border affect.
Now how is this achieved?

Also achieved is the centering of the 'box' also?
This is an affect I would like to achieve also.

If someone could give me an empty box tutorial, code, etc.
It would be much appreciated.

Thanks, Regards X
Last edited by OmniX; Dec 9th, 2008 at 3:19 am.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 596
Reputation: buddylee17 has a spectacular aura about buddylee17 has a spectacular aura about 
Solved Threads: 125
buddylee17's Avatar
buddylee17 buddylee17 is offline Offline
Posting Pro

Re: How to make a broken image box?

 
0
  #2
Dec 9th, 2008
It's just a bunch of divs nested together with an external CSS file. You should be able to view the source code and see how it is done. You'll also want to look at the css file to see how the elements have been styled. It's all there.
Lost time is never found again.
- Benjamin Franklin
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 622
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to make a broken image box?

 
0
  #3
Dec 9th, 2008
I have done that but there are still missing parts that I cannot get around
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Dec 2007
Posts: 622
Reputation: OmniX is an unknown quantity at this point 
Solved Threads: 9
OmniX's Avatar
OmniX OmniX is offline Offline
Practically a Master Poster

Re: How to make a broken image box?

 
0
  #4
Dec 10th, 2008
Ill just work off the website's code and hope for the best...
Last edited by OmniX; Dec 10th, 2008 at 9:15 pm.
"You never stop learning." - OmniX
Reply With Quote Quick reply to this message  
Join Date: Apr 2005
Posts: 16,264
Reputation: jbennet is a name known to all jbennet is a name known to all jbennet is a name known to all jbennet is a name known to all jbennet is a name known to all jbennet is a name known to all 
Solved Threads: 543
Moderator
Featured Poster
jbennet's Avatar
jbennet jbennet is offline Offline
Moderator

Re: How to make a broken image box?

 
0
  #5
Dec 10th, 2008
Works for me in FF3...
If i am helpful, please give me reputation points.
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 76
Reputation: ccube921 is an unknown quantity at this point 
Solved Threads: 6
ccube921 ccube921 is offline Offline
Junior Poster in Training

Re: How to make a broken image box?

 
0
  #6
Dec 10th, 2008
cross browser problems, that leaves me with more than enough to chew on, but if it is positioning problems here are some things to be known: use margins AND padding (IE only does margins), I posted a compatible centering code here( the last post on the page ). As buddylee said, it was a bunch of nested divs.
Last edited by ccube921; Dec 10th, 2008 at 9:15 pm.
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC