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.
Related
The problem is that #lesson containers do not fit inside the #container. How can I make that only 3 containers fit into one column? CSS ninjas, I need your help :)
My CSS: #container - main container, #first - green container, #lesson- gray divs.
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
HTML:
<div id="container">
<div id="first">
<tpl for=".">
<div class="lesson"; >
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</tpl>
</div>
<div id="second">
</div>
</div>
For fitting the containers on the big one you just need to remove the height 100% from the id first
#first { /* height: 100% */ }
Codepen http://codepen.io/noobskie/pen/dYGLeo
It seems to be working fine for me here. Are you sure you dont have any other css being applied and overwriting rules somewhere?
HTML
<div id="container">
<div id="first">
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
<div class="lesson">
<p class="txt"><b>Lesson:</b> {lesson} </p>
<p class="txt"><b>Score:</b> {score}</p>
</div>
</div>
</div>
CSS
#container {
position: relative;
top: 70px;
left: 80px;
width:100%;
height:80%;
}
#first {
background-color: #A1D490;
width:45%;
height:100%;
float:left;
border:2px solid black;
margin: 5px;
}
.lesson {
position: relative;
background-color: #DCDDDE;
margin:10px;
width:200px;
height:200px;
border:1px solid;
text-align: center;
}
I have got a problem with my 3 columns layout (960.css).
This is the condition:
c-left,c-center,c-right
The query ORDER BY id_post DESC LIMIT 6 inside center column to show article as many as 6 articles works, but when i use LIMIT 12 it doesn't. columns-right will be in down side.
Any thoughts?
html:
<div class="grid_4">
<div class="populer_left">
<div class="title_kiri">
Berita Terpopuler
</div>
<div class="batas_tengah"></div>
<div class="b_populer">
<?php include 'beritapopuler.php';?>
</div>
</div>
</div>
<div class="grid_7">
<div class="populer_center">
<div class="title_tengah">
Berita Terbaru
</div>
<div class="batas_tengah"></div>
<div class="isi_berita">
<?php include 'loadar.php'; ?>
</div>
</div>
</div>
<div class="grid_5">
<div class="populer_right">
<div class="title_kanan">
Opini
</div>
<div class="batas_tengah"></div>
<div class="b_opini">
<?php include 'beritaopini.php'; ?>
</div>
</div>
</div>
Style:
.populer_left {
float:left;
width:220px;
height:auto;
clear:both;
padding-bottom:15px;
background:#29aa6b;
border-radius:2px;
}
.populer_right {
float:right;
width:280px;
height:auto;
clear:both;
padding-bottom:15px;
background:#3f83ab;
border-radius:2px;
}
.populer_center {
float:left;
display: inline-block;
vertical-align:top;
width:400px;
height:auto;
background:#0e62aa;
border-radius:2px;
}
You can use display table, and table-cell property.
Here: Fiddle http://jsfiddle.net/LUCNY/10/
#wrapper { border: 2px solid red;overflow:hidden; display: table; width:900px;}
.populer-left {
width: 220px;
display:table-cell;
float:left;
padding-bottom:15px;
background:#29aa6b;
border-radius:2px;
}
.populer-center {
display:table-cell;
width: 400px;
float:left;
background-color: green;
background:#0e62aa;
padding-bottom:15px;
border-radius:2px;
}
.populer-right {
display:table-cell;
width: 280px;
float:left;
padding-bottom:15px;
background:#3f83ab;
border-radius:2px;
}
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>
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
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