I have a minor issue here. I'd like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?
http://jsbin.com/ewihuh/1/edit
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0px auto;
}
.right1, .right2 {
color:white;
float:right;
width:100px;
background:green;
}
Live Demo
Hi now change to your html code and some change to css
Css
.headertop {
width:100%;
background:black;
text-align:center;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin:0 auto;
}
.right1, .right2{
color:white;
float:right;
width:100px;
background:green;
}
HTML
<div class="headertop">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
<div class="centerblock">Centered</div>
</div>
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="rights">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
text-align:center;
position:relative;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0 auto;
}
.rights {
position:absolute;
right:0;
top:0;
width:100px;
}
.right1, .right2 {
color:white;
width:50px;
background:green;
float:left;
}
DEMO: http://jsbin.com/ewihuh/7/edit
Related
I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.
I have done this:
<div id="Table">
<div id="row">
<div id="col">
<img src="01.png" alt="">
</div>
<div id="col">
<img src="02.png" alt="">
</div>
<div id="col">
<img src="03.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="04.png" alt="">
</div>
<div id="col">
<img src="05.png" alt="">
</div>
<div id="col">
<img src="06.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="07.png" alt="">
</div>
<div id="col">
<img src="08.png" alt="">
</div>
<div id="col">
<img src="09.png" alt="">
</div>
</div>
</div>
with Css:
<style type="text/css">
<!--
img {
width: 100%;
height: auto;
}
#Table {
display: table;
width: 50%;
}
#row {
display: table-row;
}
#col {
display:table-cell;
}
-->
</style>
UPDATE:
I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.
https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0
JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/
I'm working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.
It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Here is the code for an example similar to yours.
JSFiddle
HTML
<div id="wrapper">
<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>
</div>
(Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)
html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
#wrapper {
height:100%;
width:100%;
}
.image-holder {
width:50%;
position:relative;
}
.image-background {
width:100%;
display:block;
}
.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}
Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you'll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.
For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.
.table {
display:table;
width:50%;
margin:0;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
}
.col {
display:table-cell;
border:none;
}
.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}
Updated Redesign Using a Flexable Image Background
According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.
JSFiddle
.price-container {
position:relative;
padding:0;
display:table;
width:50%;
}
.image-bg {
display:block;
position:absolute;
top:0;
left:0;
min-height:100%;
/* min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
width:100%;
height:auto;
margin:0;
padding:0;
z-index:-1;
}
.table-holder {
z-index:2;
padding:2em;
/* min-width:300px; */
}
.printer-display-table {
width:100%;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
font-family:verdana;
font-size:.6em;
}
.printer-display-table td {
border:solid 1px #000000;
padding:.5em;
}
HTML
<div class="price-container">
<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
<div class="table-holder">
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
</div>
Add display: block and remove width from your img tag to get rid of the cellspacing:
img {
display: block;
height: auto;
}
updated fiddle: http://jsfiddle.net/wdb5gq29/42/
I can't figure out how to set up the box model for my layout.
The "[container|x]" elements you see are placeholders, which are later replaced by php.
Here is a sketch of how it should look like:
I tried to google it and search here on stack overflow and of course I did find a lot about box models and problems with it, but nothing helped me here.
This is what I already have:
html:
<div class='headerimage'>
[container|1]
</div>
<div class='mainwrapper'>
<div class='femininHead'>
[container|2]
</div>
<div class='lineH1'> </div>
<div class='feminin'>
<div class='femininSub1'>
[container|3]
</div>
<div class='lineV1'> </div>
<div class='femininSub2'>
[container|4]
</div>
<div class='lineV2'> </div>
<div class='femininSub3'>
[container|5]
</div>
</div>
<div style='clear:both;'></div>
<div class='maskulinHead'>
[container|6]
</div>
<div class='lineH2'> </div>
<div='maskulin'>
<div class='maskulinSub1'>
[container|7]
</div>
<div class='lineV3'> </div>
<div class='shopButton'>
[container|8]
</div>
</div>
<div style='clear:both;'></div>
<div class='unisexHead'>
[container|9]
</div>
<div class='lineH3'> </div>
<div class='unisex'>
<div class='unisexSub1'>
[container|10]
</div>
<div class='lineV4'> </div>
<div class='unisexSub2'>
[container|11]
</div>
<div class='lineV5'> </div>
<div class='unisexSub3'>
[container|12]
</div>
</div>
</div>
css:
.headerimage {
position:absolute;
left:0px;right:0px;
background-color:#000000;
height:367px;
}
.mainwrapper{
position:relative;
top:367px;
}
.femininHead {
position:relative;
width:800px;
height:87px;
top:50px;
}
.femininHead .image1_headline{
line-height:30px;
font-size:24px;
position:relative;
}
.feminin {
position:relative;
}
.lineH1{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
bottom:2px;
}
.femininSub1 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV1{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV2{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub3{
width:266px;
height:125px;
position:relative;
float:left;
position:relative;
}
.maskulinHead {
position:relative;
width:800px;
height:87px;
top:127px;
}
.maskulinHead .image2_headline{
line-height:36px;
font-size:36px;
right:300px;
}
.lineH2{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:133px;
}
.maskulin {
position:relative;
}
.maskulinSub1 {
position:relative;
width:266px;
height:125px;
float:left;
position:relative;
}
.lineV3{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
position:relative;
height:128px;
width:1px;
}
.shopButton {
width:536px;
height:218px;
float:left;
position:relative;
}
.unisexHead{
width:259px;
height:125px;
position:relative;
line-height:36px;
font-size:36px;
}
.unisexHead .image3_headline{
line-height:36px;
font-size:36px;
}
.lineH3{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:594px;
}
.unisex {
position:relative;
}
.unisexSub1
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV4{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV5{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub3{
width:266px;
height:125px;
position:relative;
float:left;
}
Thanks in advance :)
can't see why box-model can help you with this. maybe you are looking for FlexBox! Or go classic and use display:inline-block for the nested boxes(3,4,5,7,8,10,11,12) and all others just row divs.
But don't use floats any more!
Check out this simplified solution on JSBin.
The basic idea is to wrap all the items except the 1st box in a containing wrapper .wrap. A horizontal margin of auto along with a fixed width will center it in the page. Within that, you have your side-by-side boxes float left and give them fixed widths. The div below them needs to clear the float.
Hope the example is helpful.
I would put the site name in the middle of this header but unfortunately I can not do it, I've tried many combinations but I just can not. I'll post the source
CSS
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.logo {
width:150px;
margin: 0 auto;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
<img src="image.png" />
</div>
</div>
</div>
have no idea how can I do? Thanks
Use Below Code
<style>
.header {
background-color:#00B9ED;
height:50px;
border-bottom:0px;
padding-left:auto;
padding-right:auto;
width:100%;
}
#wrapper {
margin-left:auto;
margim-right:auto;
padding-top:0px;
padding-bottom:0px;
}
.logo {
text-align: center;
}
.logo img {
width:150px;
height:50px;
}
.logo:hover {
height:50px;
background-color:#A9E2F3;
cursor:pointer;
}
</style>
<div class="header">
<div id="wrapper">
<div class="logo">
<a>Bhavin<img src="image.png"></a>
</div>
</div>
</div>
Always try to code with standards. You can use text-align but it is for align paragraph or other elements with text. Insted align I would recommend to use margin:0 auto;width:150px;.
Here you got jsFiddle
try this
CSS
#wrapper {
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
width: 1000px;
}
.logo {
margin: 0 auto;
width: 150px;
}
HTML
<div class="header">
<div id="wrapper">
<div class="logo">
logo<img src="image.png" alt="LOGO"/>
</div>
</div>
</div>
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I am developing a cup system, and I would like to get some advice to the bracket-part. The desirable result should look something like this:
http://www.partyplanning101.com.php5-7.dfw1-1.websitetestlink.com/wp-content/uploads/2009/02/tornament_board.gif
I would like to build op the page using div's combined with CSS - and not tables. How should I make this most optimally? Do any of you have a sample of this?
I am only asking for help regarding the HTML/CSS part, nothing else.
This seemed interesting so I started developing, have to get back to work now so this is how far I got. The basics are laid out for you so you can finish it from here I think, though I will probably finish it in my spare time too and come and post it later
http://jsfiddle.net/AcuPp/
Update:
Finished - http://jsfiddle.net/AcuPp/3/
CSS
#container {
width: 800px;
height: 600px;
float: left;
}
section {
width: 130px;
height: 520px;
float: left;
}
section > div {
width: 100px;
height: 20px;
border: 1px solid #000;
margin: 10px 0;
background: #73789F;
color: white;
padding: 10px 10px 10px 20px;
}
section > div:nth-child(2n) {
margin-bottom: 40px;
}
.connecter {
width: 30px;
height: 520px;
float: left;
}
.line {
width: 30px;
height: 520px;
float: left;
}
.connecter div {
border: 1px solid #000;
border-left: none;
height: 50px;
width: 100%;
margin: 80px 0 0 1px;
}
.connecter div:first-child {
margin: 32px 0 0 1px;
}
.line div {
border-top: 1px solid #000;
margin: 133px 0 0 1px;
}
.line div:first-child {
margin-top: 55px;
}
#quarterFinals > div {
margin-top: 91px;
}
#quarterFinals > div:first-child {
margin-top: 37px;
}
#conn2 div {
margin-top: 133px;
height: 133px;
}
#conn2 div:first-child {
margin-top: 57px;
}
#line2 div {
margin-top: 270px;
}
#line2 div:first-child {
margin-top: 125px;
}
#semiFinals > div {
margin-top: 230px;
}
#semiFinals > div:first-child {
margin-top: 105px;
}
#conn3 div {
margin-top: 125px;
height: 270px;
}
#line3 div {
margin-top: 270px;
}
#final > div {
margin-top: 250px;
}
HTML
<article id="container">
<section>
<div>Player 1</div>
<div>Player 2</div>
<div>Player 3</div>
<div>Player 4</div>
<div>Player 5</div>
<div>Player 6</div>
<div>Player 7</div>
<div>Player 8</div>
</section>
<div class="connecter">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="line">
<div>
</div><div>
</div><div>
</div><div>
</div>
</div>
<section id="quarterFinals">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<div class="connecter" id="conn2">
<div></div>
<div></div>
</div>
<div class="line" id="line2">
<div></div>
<div></div>
</div>
<section id="semiFinals">
<div></div>
<div></div>
</section>
<div class="connecter" id="conn3">
<div></div>
</div>
<div class="line" id="line3">
<div></div>
</div>
<section id="final">
<div></div>
</section>
</article>
My full, working solution is here: http://jsfiddle.net/t9feh/
I would prefer a solution with purely semantic markup that would be easy to read and amend with data that might trickle in later, like who wins each match.
So I started with a markup structure with players nested in matches, and matches nested in rounds.
HTML:
<div class="tournament">
<div class="round quarter-finals">
<div class="match" >
<div class="player">Player 1</div>
<div class="player winner">Player 2</div>
</div>
<div class="match">
<div class="player winner">Player 3</div>
<div class="player">Player 4</div>
</div>
<div class="match">
<div class="player">Player 5</div>
<div class="player winner">Player 6</div>
</div>
<div class="match">
<div class="player">Player 7</div>
<div class="player">Player 8</div>
</div>
</div>
<div class="round semi-finals">
<div class="match">
<div class="player">Player 2</div>
<div class="player winner">Player 3</div>
</div>
<div class="match">
<div class="player">Player 6</div>
<div class="player">Player 7</div>
</div>
</div>
<div class="round finals">
<div class="match">
<div class="player">Player 3</div>
<div class="player"></div>
</div>
</div>
<div class="round">
<div class="champion">
<div class="player"></div>
</div>
</div>
</div>
Note that a class for "winner" can be added to any player, and it will be styled appropriately.
The main challenge then is doing the connectors. Semantic markup means no design hooks. This then requires BG images. I used data-urls (see the utility I used at DataURL.net) to place these on "matches" elements.
CSS:
.tournament{width:720px;}
.round{
float:left;
}
.player{
font-family:arial;
width:120px;
height:20px;
padding:10px;
background:#73789F;
color:white;
}
.player.winner{background:green;}
.match{
padding:5px 50px 5px 0px;
}
/*QUARTER-FINALS*/
.quarter-finals .match{
height:100px;
background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABkAQMAAAD+JvEYAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAAnSURBVCiRY/gPBgcYhjoNBPZQ/v4hQjeAHD0I3IGXRgpXqsbXEKEB2yGL0P7iVKIAAAAASUVORK5CYII=);
}
.quarter-finals .player{
}
.quarter-finals .player:first-child{
margin-bottom:5px;
}
/*SEMI-FINALS*/
.semi-finals .match{
padding-top:30px;
height:185px;
background:right top no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAC5AQMAAABQhv7pAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAArSURBVDiNY/gPBgcYRumBpYHAHsrfP0oPKboBFHmDwB2jNAk0Un77PwxoAJbztvAUr3KAAAAAAElFTkSuQmCC);
}
.semi-finals .player:first-child{
margin-bottom:70px;
}
/*FINALS*/
.finals .match{
padding-top:85px;
height:350px;
background:top right no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAFeAQMAAAD9sN5nAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEwLzEwLzEyGAKeIwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAA0SURBVEiJY/gPBgcYRulRepQmngYCeyh//yg9So/Sg45uAGXSQeCOUXqUHrI0Uj33fxjQAEJS8U50LMSKAAAAAElFTkSuQmCC);
}
.finals .player:first-child{
margin-bottom:180px;
}
/* CHAMP*/
.champion{padding-top:200px;}
You can do that. Alter the below code according to your div position.
CSS
h1 {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
text-align:center;
margin:40px auto;
}
#container {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
text-align:center;
margin:auto;
}
#container a {
display:block;
color:#000;
text-decoration:none;
background-color:#f6f6ff;
}
#container a:hover {
color:#900;
background-color:#f6f6ff;
}
#no1 {
width:190px;
line-height:60px;
border:1px solid #000;
margin:auto;
}
#no1 a {
height:60px;
}
#line1 {
font-size:0;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin:auto;
}
#line2 {
font-size:0;
width:424px;
height:1px;
color:#fff;
background-color:#000;
margin:auto;
}
#line3 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:78px;
float:left;
}
#line4,#line5,#line6 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:140px;
float:left;
}
#no2 {
display:inline;
border:1px solid #000;
clear:both;
margin-left:35px;
float:left;
}
#no2 a,#no4 a,#no8 a {
width:84px;
height:50px;
padding-top:8px;
}
#no3 {
display:inline;
border:1px solid #000;
margin-left:58px;
float:left;
}
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
width:84px;
height:42px;
padding-top:16px;
}
#no4 {
display:inline;
border:1px solid #000;
margin-left:53px;
float:left;
}
#no5 {
display:inline;
border:1px solid #000;
margin-left:55px;
float:left;
}
#line7,#line13 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:219px;
float:left;
}
#line8,#line14 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:281px;
float:left;
}
#no6,#no8 {
display:inline;
border:1px solid #000;
margin-left:107px;
float:left;
}
#line9,#line11,#line15,#line17 {
font-size:0;
display:inline;
width:26px;
height:1px;
color:#fff;
background-color:#000;
margin-top:29px;
float:left;
}
#line10,#line12,#line16,#line18 {
font-size:0;
display:inline;
width:1px;
height:60px;
color:#fff;
background-color:#000;
float:left;
}
#line16,#line18 {
height:30px;
}
#no7,#no9 {
display:inline;
border:1px solid #000;
margin-left:169px;
float:left;
}
.clear {
clear:both;
}
HTML
<div id="container">
<div id="no1">Managing Director</div>
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="no2">Sales & Marketing Director</div>
<div id="no3">Production Director</div>
<div id="no4">Human Resources Director</div>
<div id="no5">Finance Director</div>
<div id="line7"></div>
<div id="line8"></div>
<div class="clear"></div>
<div id="no6">Factory Manager</div>
<div id="line9"></div>
<div id="line10"></div>
<div id="no7">Management Accountant</div>
<div id="line11"></div>
<div id="line12"></div>
<div class="clear"></div>
<div id="line13"></div>
<div id="line14"></div>
<div class="clear"></div>
<div id="no8">Quality Control Manager</div>
<div id="line15"></div>
<div id="line16"></div>
<div id="no9">Financial Accountant</div>
<div id="line17"></div>
<div id="line18"></div>
<div class="clear"></div>
</div>
</body>
</html>
Demo here http://jsfiddle.net/ZRJRj/1/
You want to look at SVG ( http://www.w3schools.com/svg/default.asp ) or, alternatively, Canvas ( http://en.wikipedia.org/wiki/Canvas_element )
I would go with SVG. You'll need to calculate end points for your connector lines with some JavaScript, which you will draw with SVG right in the browser, and abstract it all neatly away behind simple interface. Actually, JavaScript is what will glue your entire application together, SVG is just for drawing, and HTML and CSS will aid you in presenting other parts of it.
Alternatively, you can use SVG to display the entire finals line-up. You will then use JavaScript to manipulate its contents to display proper team titles and relationships.
It will be beautiful.