Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS- Help with positioning shapes 2

Status
Not open for further replies.
Xaqte

Xaqte

IS-IT--Management
Oct 4, 2002
971
US
I'm attempting to make a page similiar in design to this:
shapes.jpg


Here is the code that I have so far:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/favicon.ico" type="image/icon"><title>Shapes</title>
<style type="text/css">
body {
  text-align: center;
  }

  .toptriangle {
   position: relative;      
 top: 20px;
   margin: 0 auto;
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-top: 80px solid black;
   border-left: 50px solid white;
   border-right: 50px solid white; 
 }

 .greenbox {
   float: left;	
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-top: 85px solid white;
   border-left: 65px solid green;
   border-bottom: 85px solid white;
 }

 .leftgrnbx {
   float: left;	 
   border-top: 110px solid green;
   border-bottom: 60px solid green;
   border-left: 90px solid green;
   border-right: 60px solid green;
 }   

 .bluebox {
	 float: right;
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-top: 85px solid white;
   border-right: 65px solid blue;
   border-bottom: 85px solid white;
 }

 .leftblubx {
	 float: right;
   border-top: 110px solid blue;
   border-bottom: 60px solid blue;
   border-left: 90px solid blue;
   border-right: 60px solid blue;
   } 
 
   .redbox {
   float: left;	
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-top: 85px solid white;
   border-left: 65px solid red;
   border-bottom: 85px solid white;
 }

 .leftredbx {
   float: left;	 
   border-top: 110px solid red;
   border-bottom: 60px solid red;
   border-left: 90px solid red;
   border-right: 60px solid red;
 }   

 .yellowbox {
	 float: right;
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-top: 85px solid white;
   border-right: 65px solid yellow;
   border-bottom: 85px solid white;
 }

 .leftyelbx {
	 float: right;
   border-top: 110px solid yellow;
   border-bottom: 60px solid yellow;
   border-left: 90px solid yellow;
   border-right: 60px solid yellow;
   } 
  
.bottomtriangle {
   margin: 0 auto;
   clear: left; 
   top: 125%;
   font-size: 0px; line-height: 0%; width: 0px; box-sizing: content-box; -moz-box-sizing: content-box;
   border-bottom: 80px solid black;
   border-left: 50px solid white;
   border-right: 50px solid white; 
 }
</style>
</head>
<body>
	<div class="toptriangle"><!-- --></div>
	<div class="leftgrnbx"><!-- --></div><div class="greenbox"><!-- --></div>
	<div class="leftblubx"><!-- --></div><div class="bluebox"><!-- --></div>
	<div class="bottomtriangle"><!-- --></div>
	<div class="toptriangle"><!-- --></div>
	<div class="leftredbx"><!-- --></div><div class="redbox"><!-- --></div>
	<div class="leftyelbx"><!-- --></div><div class="yellowbox"><!-- --></div>
	<div class="bottomtriangle"><!-- --></div>
</body>
 </html>

The above code can be seen at Any help on positioning the shapes to be more like the picture would be greatly appreciated! I apologize in advance if my server is down... can't always keep it up :)

Thanks,
X
 
Sort by date Sort by votes
1. Your server was down.
2. Doctype helps you make a better page. You have incomplete doctype (= no doctype). Pick one from here.
3. What is a css property [tt]box-sizing: content-box[/tt] and what does that do in your code?
4. I guess we'll have more when we see the picture you're trying to make.
 
Upvote 0 Downvote
Thanks for replying Vragabond!
Sorry, try this:
shapes.jpg

Page can be found at:
Please excuse parent site!

The code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/favicon.ico" type="image/icon"><title>Shapes</title>
<style type="text/css">
body {
  text-align: center;
  }

  .toptriangle {
   position: relative;      
 top: 20px;
   margin: 0 auto;
   font-size: 0px; line-height: 0%; width: 0px;
   border-top: 80px solid black;
   border-left: 50px solid white;
   border-right: 50px solid white; 
 }

 .greenbox {
   float: left;    
   font-size: 0px; line-height: 0%; width: 0px;
   border-top: 85px solid white;
   border-left: 65px solid green;
   border-bottom: 85px solid white;
 }

 .leftgrnbx {
   float: left;     
   border-top: 110px solid green;
   border-bottom: 60px solid green;
   border-left: 90px solid green;
   border-right: 60px solid green;
 }   

 .bluebox {
     float: right;
   font-size: 0px; line-height: 0%; width: 0px;
   border-top: 85px solid white;
   border-right: 65px solid blue;
   border-bottom: 85px solid white;
 }

 .leftblubx {
     float: right;
   border-top: 110px solid blue;
   border-bottom: 60px solid blue;
   border-left: 90px solid blue;
   border-right: 60px solid blue;
   } 
 
   .redbox {
   float: left;    
   font-size: 0px; line-height: 0%; width: 0px;
   border-top: 85px solid white;
   border-left: 65px solid red;
   border-bottom: 85px solid white;
 }

 .leftredbx {
   float: left;     
   border-top: 110px solid red;
   border-bottom: 60px solid red;
   border-left: 90px solid red;
   border-right: 60px solid red;
 }   

 .yellowbox {
     float: right;
   font-size: 0px; line-height: 0%; width: 0px;
   border-top: 85px solid white;
   border-right: 65px solid yellow;
   border-bottom: 85px solid white;
 }

 .leftyelbx {
     float: right;
   border-top: 110px solid yellow;
   border-bottom: 60px solid yellow;
   border-left: 90px solid yellow;
   border-right: 60px solid yellow;
   } 
  
.bottomtriangle {
   margin: 0 auto;
   clear: left; 
   top: 125%;
   font-size: 0px; line-height: 0%; width: 0px;
   border-bottom: 80px solid black;
   border-left: 50px solid white;
   border-right: 50px solid white; 
 }
</style>
</head>
<body>
    <div class="toptriangle"><!-- --></div>
    <div class="leftgrnbx"><!-- --></div><div class="greenbox"><!-- --></div>
    <div class="leftblubx"><!-- --></div><div class="bluebox"><!-- --></div>
    <div class="bottomtriangle"><!-- --></div>
    <div class="toptriangle"><!-- --></div>
    <div class="leftredbx"><!-- --></div><div class="redbox"><!-- --></div>
    <div class="leftyelbx"><!-- --></div><div class="yellowbox"><!-- --></div>
    <div class="bottomtriangle"><!-- --></div>
</body>
 </html>

Again, thanks in advance for any help/experience!

X
 
Upvote 0 Downvote
I'm not expect enough in CSS to even try this one. Just wanted to tell you that I think the background design is pretty interesting. I hope you find a way to implement it. If anyone can help Vragabond or one of the other CSS gurus here should be able to.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
I can't see what the matter with the code you have so far. It displays the same in all the three browsers I can test with and every link I clicked I get the same site. I can't help you if I don't know where you're aiming at. Maybe I just missed it.
 
Upvote 0 Downvote
I need to center all the red, green yellow, and blue boxes around the triangles in the center. I would like the outcome to appear as two X's stacked on top of each other in the white space. Again, thanks for responding!
 
Upvote 0 Downvote
Also, the two middle triangles have a space between them :(
 
Upvote 0 Downvote
1. Two middle triangles have a space between them because the down pointing one has [tt]top: 20px;[/tt] set to it. Remove that and you're ok with that. If you would like to get everything just closer together, wrap it all up in another div that has a smaller, fixed width. How's that?
 
Upvote 0 Downvote
Vragabond, can you take a look at it now? I can post the code back here if you think I should. I've implemented the idea you suggested, and Its getting closer. The problem now is the white space between the top boxes and the bottom boxes needs to be decreased... any ideas? Thanks again for any help/experience!
 
Upvote 0 Downvote
This seems to work in IE6 and Firefox.
Not sure what exactly is going on, I just tweaked a couple of things.
I did cheat a little and add 2 new classes for the second pair of triangles.
Then I applied some position offsets for the bottom set of shapes.
The style rules could almost certainly be optimised a bit.

May I ask why you are trying to do this?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/favicon.ico" type="image/icon"><title>Shapes</title>
<style type="text/css">
body { text-align: center; width:500px;}

.toptriangle { border-top: 80px solid black; border-left: 50px solid white; border-right: 50px solid white; margin: 0pt auto; position: relative; top: 50px; font-size: 0px; line-height: 0%; width: 0px; -moz-box-sizing: content-box; }

.toptriangle2 { border-top: 80px solid black; border-left: 50px solid white; border-right: 50px solid white; margin: 0pt auto; position: relative; top: -50px; font-size: 0px; line-height: 0%; width: 0px; -moz-box-sizing: content-box; }

.greenbox { border-top: 85px solid white; border-left: 65px solid green; border-bottom: 85px solid white; float: left; font-size: 0px; line-height: 0%; width: 0px; -moz-box-sizing: content-box; }

.leftgrnbx { border-style: solid; border-color: green; border-width: 110px 60px 60px 90px; float: left; }

.bluebox { border-top: 85px solid white; border-right: 65px solid blue; border-bottom: 85px solid white; float: right; font-size: 0px; line-height: 0%; width: 0px; -moz-box-sizing: content-box; }

.leftblubx { border-style: solid; border-color: blue; border-width: 110px 60px 60px 90px; float: right; }

.redbox { border-top: 85px solid white; border-left: 65px solid red; border-bottom: 85px solid white; float: left; font-size: 0px; line-height: 0%; width: 0px;position:relative;top:-100px; -moz-box-sizing: content-box; }

.leftredbx { border-style: solid; border-color: red; border-width: 110px 60px 60px 90px; 
position:relative;top:-100px;float: left; }

.yellowbox { border-top: 85px solid white; border-right: 65px solid yellow; border-bottom: 85px solid white; float: right; font-size: 0px; line-height: 0%; width: 0px;position:relative;top:-100px; -moz-box-sizing: content-box; }

.leftyelbx { border-style: solid; border-color: yellow; border-width: 110px 60px 60px 90px;position:relative;top:-100px; float: right; }

.bottomtriangle { border-left: 50px solid white; border-right: 50px solid white; border-bottom: 80px solid black; margin: 0pt auto; clear: left; top: 125%; font-size: 0px; line-height: 0%; width: 0px; 
position:relative; top:-50px;-moz-box-sizing: content-box; }


.bottomtriangle2 { border-left: 50px solid white; border-right: 50px solid white; border-bottom: 80px solid black; margin: 0pt auto; clear: left; top: 125%; font-size: 0px; line-height: 0%; width: 0px; 
position:relative; top:-150px;-moz-box-sizing: content-box; }

</style>
</head>
<body>
	<div class="toptriangle"><!-- --></div>
	<div class="leftgrnbx"><!-- --></div><div class="greenbox"><!-- --></div>
	<div class="leftblubx"><!-- --></div><div class="bluebox"><!-- --></div>
	<div class="bottomtriangle"><!-- --></div>

	<div class="toptriangle2"><!-- --></div>
	<div class="leftredbx"><!-- --></div><div class="redbox"><!-- --></div>
	<div class="leftyelbx"><!-- --></div><div class="yellowbox"><!-- --></div>
	<div class="bottomtriangle2"><!-- --></div>
</body>
 </html>

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Upvote 0 Downvote
Foamcow, Great job!! I thank you very much! I've been working very hard to try to accomplish this & couldn't have done it w/o your help. I've tried to change this up a bit & center it all, but can only accomplish this in IE. I've added the following in the style:
Code: 
#container {
    width: 50%;
   }
And a update to the body:
Code: 
<body>
 <div id="container">
    <div class="toptriangle"><!-- --></div>
    <div class="leftgrnbx"><!-- --></div><div class="greenbox"><!-- --></div>
    <div class="leftblubx"><!-- --></div><div class="bluebox"><!-- --></div>
    <div class="bottomtriangle"><!-- --></div>

    <div class="toptriangle2"><!-- --></div>
    <div class="leftredbx"><!-- --></div><div class="redbox"><!-- --></div>
    <div class="leftyelbx"><!-- --></div><div class="yellowbox"><!-- --></div>
    <div class="bottomtriangle2"><!-- --></div>
    </div>
</body>
 </html>
Page can be found at:

I just need help to get my body centered. Thanks again for any help/experience!
 
Upvote 0 Downvote
Code: 
#container {
    width: 50%;
    margin: 0 auto;
}
What you were doing, was aligning text to the center, not block elements. This is how block element is centered. Basically it says that element should apply equal margins to left and right side that are just big enough to make it 100% with the width (in your case, that would be 25% each). But auto value is there so that no matter how much the width is, element will be centered.
 
Upvote 0 Downvote
Vragabond, thanks again! However, when the window is minimized its distorted... I was hoping to avoid this.
Thanks again!
 
Upvote 0 Downvote
Make the width a fixed value rather than a percentage value. That way a scrollbar will appear in the smaller window and the whole thing will remain the same no matter what the window size.
 
Upvote 0 Downvote
Thanks Vragabond & Foamcow! I think this solves my problems.
 
Upvote 0 Downvote
Let me just say that it was a pleasure helping such an interesting project and especially someone as observant and thankful as you. You implemented all advice we gave you in the website as soon as possible. Something we don't see around here that often. Congratulations on design.
 
Upvote 0 Downvote
My friend has a similar page on his site, with numerous validation errors & one clunky image. I just wanted to see If this could be done without images. Again, Bravo to all that helped!

X
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
639
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
693
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top