Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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)
    (You have to highlight the text to see it, its black)

    Code:
    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;
    }
    Code:
    <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>
    Attached Thumbnails Attached Thumbnails I can draw a picture of it but I can't seem to make it happen...a table-replaysechelp.jpg  
    Last edited by njfail; 12-10-2010 at 04:05 AM.

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This should do the trick:

    Code:
    <!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>

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Start with fixing the errors in your markup, see http://validator.w3.org/check?verbos...hq%2Findex.php

    PS: When making a new web page, always use a Strict DOCTYPE
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Start with fixing the errors in your markup, see http://validator.w3.org/check?verbos...hq%2Findex.php

    PS: When making a new web page, always use a Strict 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.

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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=encodeURIComponent(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=encodeURIComponent(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>
    Code:
    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
    Last edited by njfail; 12-12-2010 at 09:17 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •