...

View Full Version : I can draw a picture of it but I can't seem to make it happen...a table



njfail
12-10-2010, 04:33 AM
could someone help me design this in html//css?
When I try to make it happen it has abnormal spaces inside of it, and it ends up breaking to another line :(

I pretty much want it to be exactly like the picture, except without the boxes//boarders around the words on the left side.

could someone help me with the code involved in making this picture happen?


Edit:
I tried doing it with divs instead, but that doesn't even show the background color for some reason....
(page is @ njfail.com/replays/2kings/xindex.php (http://www.njfail.com/replays/2kings/xindex.php))
(You have to highlight the text to see it, its black)


box1 {
width: 300px;
height: 200px;
display:inline;
position: relative;
background-color:#959595;
}
box2 {
width: 130px;
height: 200px;
display:inline;
position: relative;
background-color:#959595;
}
box3 {
width: 125px;
height: 125px;
display:inline;
position: relative;
background-color:#959595;
}
box4 {
width: 170px;
height: 200px;
display:inline;
position: relative;
background-color:#959595;
}
box5 {
width: 170px;
height: 25px;
display:inline;
position: relative;
background-color:#959595;
}
box6 {
width: 170px;
height: 150px;
display:inline;
position: relative;
background-color:#959595;
}
box7 {
width: 170px;
height: 25px;
display:inline;
position: relative;
background-color:#959595;
}


<div id="box1">
<div id="box2">
<div id="box3">
picture
</div>
player1 z vs player2 p
</div>
<div id="box4">
<div id="box5">
caster's name
</div>
<div id="box6">
description
</div>
<div id="box7">
rating
</div>
</div>
</div>

philstricker
12-10-2010, 09:37 AM
This should do the trick:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layout</title>
<style type="text/css">
/* Start Main DIVs */
#container
{
width: 480px;
border: 1px solid #000;
height: 200px;
}
#left_container
{
width: 130px;
float: left;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #000;
padding: 10px;
height: 180px;
}
#right_container
{
padding: 10px;
width: 309px;
float: right;
height: 180px;
}
/* End Main DIVs */

/* Start #left_container elements */
#picture
{
height: 80px;
margin-bottom: 5px;
}
#mapname
{
padding-bottom: 5px;
height: 16px;
}
#player1_div
{
padding-bottom: 5px;
height: 16px;
display: block;
}
#player2_div
{
height: 16px;
display: block;
}
#player1, #player2
{
width: 105px;
float: left;
}
#z, #p
{
width: 20px;
float: right;
}
#vs
{
text-align: center;
padding: 6px 0 10px 0;
height: 16px;
}
/* End #left_container elements */

/* Start #right_container elements */
#casters_name
{
height: 16px;
padding-bottom: 5px;
}
#description
{
height: 138px;
padding-bottom: 5px;
}
#njfail
{
height: 16px;
}
/* End #right_container elements */

</style>
</head>
<body>
<div id="container">
<div id="left_container">
<div id="picture">
picture
</div>
<div id="mapname">
mapname
</div>
<div id="player1_div">
<span id="player1">player1</span> <span id="z">z</span>
<div class="clear">
</div>
</div>
<div id="vs">
vs
</div>
<div id="player2_div">
<span id="player2">player2</span> <span id="p">p</span>
<div class="clear">
</div>
</div>
</div>
<div id="right_container">
<div id="casters_name">
caster's name
</div>
<div id="description">
description
</div>
<div id="njfail">
NJFAIL rating
</div>
</div>
</div>
</body>
</html>

njfail
12-11-2010, 07:20 AM
Thank you for the help :)

But theres still a couple problems;


I put a background on the main container, and now the bottom words are outside of the container (player2 and njfail rating).


the Z vs P (I changed it to T) isn't lined up with the player1 and player 2

The VS should be centered between the player names (or at least between them and almost center)


Is there a way to declare a container, then use absolute values WITHIN that container? So instead of absolute values being from the top left corner of the screen, they're from the top left corner of the container that we're dealing with?

Heres a link to it on my site.
http://njfail.com/replays/reddhq/index.php

abduraooft
12-11-2010, 02:31 PM
Start with fixing the errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnjfail.com%2Freplays%2Freddhq%2Findex.php

PS: When making a new web page, always use a Strict DOCTYPE (http://www.alistapart.com/articles/doctype/)

njfail
12-11-2010, 11:53 PM
Start with fixing the errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnjfail.com%2Freplays%2Freddhq%2Findex.php

PS: When making a new web page, always use a Strict DOCTYPE (http://www.alistapart.com/articles/doctype/)

why strict?

Thank you for the links though, apparently my pages have a lot of errors :(
But I do say that the overall page is a bit un-organized and poorly written, as the link I supplied is just a test page that isn't actually part of the website yet.

But is there a way to use absolute value that sets the corner of a container as the 0px 0px mark instead of having the 0px 0px start at the top left of the person's screen?
That way I can position elements of the table and copy/paste the overall code and just edit the information for each section to create multiple tables.

njfail
12-12-2010, 10:14 AM
Ok, so I've read that you can manipulate absolute values inside of specific div's if you set the parent div to
position: relative;

and set the child-divs to
position: absolute;

I set the main container for the 'table' to relative, then I positioned everything on the left side using absolute.
However, when I got to the right side...everything is off... When I say that, I mean, I calculated the exact pixel values that it SHOULD be, but its not placing the items in those places...not even close...
I'm currently toying with negative absolute values just to get things into the right place.

Any idea on why this is happening?
When I float the right container, it goes under the entire parent container...
I tried deleting position: relative; from the parent container, and making both 'subcontainers' (left and right) as relative...but that wasn't working.
Heres the code I've written so far:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="/njstyler3.css" TYPE="text/css" MEDIA=screen>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
<title>Starcraft II Replays</title>
<meta name="Copyright" content="&copy; 2010 NJFAIL">
<meta http-equiv="Content-Language" content="EN-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Description" content="NJFAIL is a community site focused on Starcraft II, featuring pro-gaming news and information, videos, strategy, and replays, casts, and the latest info from Blizzard.">
<meta name="keywords" content="Starcraft II, starcraft 2, sc2, wc3, warcraft, blizzard, best rts, computer game, tournaments, tournaments with prizes, gosu, pro replays, real time strategy, videogame, gaming community, clan, league, guild, terran, zerg, protoss, starcraft, clan wars" />
</head>
<body>
<div id="pagewidth" class="clearfix">
<div id="container">
<?php include $_SERVER['DOCUMENT_ROOT'] . '/header.php'; ?>
<div id="leftcol">
<!-- Begin: adBrite, Generated: 2010-11-06 1:45:18 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0000FF';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'FFFFFF';
var AdBrite_Border_Color = 'CCCCCC';
var AdBrite_URL_Color = '008000';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1743973&zs=3330305f323530&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1743973&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
<!-- End: adBrite -->
<br />
<!-- Begin: AdBrite, Generated: 2010-08-14 18:41:20 -->
<script type="text/javascript">
var AdBrite_Title_Color = '0033FF';
var AdBrite_Text_Color = '0099FF';
var AdBrite_Background_Color = '000000';
var AdBrite_Border_Color = '000000';
var AdBrite_URL_Color = '0033FF';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=1729706&zs=3330305f323530&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=1729706&afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
<!-- End: AdBrite -->
</div>
<div id="maincol">
<br />
<div id="containerbox">
<div id="subcontainerleft">
<div id="mappicture">
<img src="/njfail_images/LostTemple.jpg" alt="Lost Temple">
</div>
<div id="mapname">
<p>Lost Temple</p>
</div>
<div id="player1name">
<p>KeKeZergRush</p>
</div>
<div id="vs">
<p>vs</p>
</div>
<div id="player2name">
<p>HeMo</p>
</div>
<div id="playerracetop">
<p>Z</p>
</div>
<div id="playerracebottom">
<p>T</p>
</div>
</div>
<div id="subcontainerright">
<div id="caster">
<p>reddhq</p>
</div>
<div id="video">
<p>Youtube video goes here!</p>
</div>
<div id="njfailrating">
<p>NJFAIL Rating: 10/10</p>
</div>
</div>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT'] . '/footer.php'; ?>
</div>
</div>
</body>
</html>



html, body{
margin:0;
padding:0;
text-align:center;
background-color:#000000;
}

#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}

h1 {color:#0066FF;}

h2 {color:#0066FF;}

h3 {color:#0066FF;}

p {color:#0099FF;}

p1 {
font-size: 20px;
color:#0033FF;
}

ul.a {
list-style-type: circle;
color: #0099FF
}

///////////////////////////////This starts the 'table' css/////////////////////////////
#containerbox {
width: 500px;
height: 250px;
background-color: #686868;
position: relative;
}
#subcontainerleft {
width: 150px;
height: 250px;
float: left;
padding: 10px;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #000000;
}
#mappicture {
width: 125px;
height: 125px;
position: absolute;
top: 10px;
left: 10px;
}
#mapname {
width: 130px;
height: 15px;
position: absolute;
top: 140px;
left: 10px;
}
#player1name {
width: 120px;
height: 15px;
position: absolute;
top: 161px;
left: 10px;
}
#player2name {
width: 120px;
height: 15px;
position: absolute;
top: 193px;
left: 10px;
}
#playerracetop {
width: 10px;
height: 15px;
position: absolute;
top: 161px;
left: 130px;
}
#playerracebottom {
width: 10px;
height: 15px;
position: absolute;
top: 193px;
left: 130px;
}
#vs {
height: 15px;
position: absolute;
top: 177px;
left: 130px;
}

#subcontainerright {
width: 328px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: #989898;
}
#caster {
width: 100px;
height: 16px;
position: absolute;
top: -12px;
left: 125px;
}
#video {
width: 348px;
height: 204px;
position: absolute;
top: 10px;
right: -20px;
}
#njfailrating {
width: 150px;
height: 15px;
position: absolute;
top: 230px;
left: 157px;
}

/////////////////////////////////table css ends here!///////////////////////////

#pagewidth{
width:90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}

#header1 span {
display:block;
position:relative;
margin:0 auto;
padding:0;
height:150px;
width:800px;
}

#header2 span {
display:block;
position:relative;
margin:0 auto;
padding:0;
height:100px;
width:728px;
}

#header3 span {
display:block;
position:relative;
margin:0 auto;
padding:0;
height:100px;
width:500px;
}

#leftcol{
width:320px;
float:left;
position:relative;
background-color:#000000;
}

#maincol{background-color: #000000;
width:400px;
float: left;
display:inline;
position: relative;
}

#mainhead span {
margin:0 auto;
padding:0;
width: 350px;
display: block;
position: relative;
}

#mainl{background-color: #000000;
width: 150px;
padding: 10px;
float: left;
display: inline;
position: relative;
}

#mainm{background-color: #000000;
width: 150px;
padding: 10px;
float: right;
display: inline;
position: relative;
}
#mainr{background-color: #000000;
width: 100px;
padding: 10px;
float: left;
display: inline;
position: relative;
}

#rightcol{
width:200px;
float:right;
position:relative;
background-color:#000000;
}

#footer {
clear:both;
margin:0 auto;
padding:0;
height:75px;
width:970;
}

#footer ul{
text-align:center;

#footermenu a:hover {
color: #0099FF;
text-decoration: underline;
}

#footermenu a{
color: #0033FF;
text-decoration: none;
}

/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}


example @ http://njfail.com/replays/reddhq/index2.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum