Help - Search - Members - Calendar
Full Version: CSS header table
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
spadez
What i would like is a table that is about 10px tall but expands all the way across the page no matter how wide the screen is that is right at the top of the page. I would like it to be coloured as well, say black as an example.

Can you please tell me how i might go about doing this?

James



Christian J
How to make a table: http://www.htmlhelp.com/reference/html40/tables/table.html

To make it 10px high you can use the CSS 'height' property, but tables are meant to expand to fit their content, so if the user's text size is too large this will break.

To make the table fill the screen width you can make it 100% wide with CSS, you may also want to set the BODY margin/padding to zero with CSS.

Coloring the table's background can also be done with CSS.

See also http://htmlhelp.com/reference/css/
pandy
You don't need a table to get a colored area. Use a DIV and the CSS Christian mentioned.
spadez
Im having an image at the top left and then i want the section on the right of the image to be coloured the same colour as the bg of the image (black) and expand all the way to the end so its like this:

IMAGE||||||||||||||||||||||]
.....................................]

.....................................]
.....................................]
.....................................]

Is using a table not the best way of doing this? I could tile and image across, but i dont know how to do that, im very new to html and css.
pandy
CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Tester</title>

<style type="text/css">
#header    { background: #f00 }
</style>

</head>


<body>

<div id="header">
<img src="thepic.jpg" width="" height="" alt="Bla bla">
</div>

</body>
</html>


If the image is mostly for decoration and not important you can use a background image instead and make it not repeat (tile). Then you need to set the size of the DIV. height is enough. It will span the whole browser window if you don't do anything to change that.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Tester</title>

<style type="text/css">
#header    { background: #f00 url(thepic.gif) no-repat;
             height: 70px }
</style>

</head>


<body>

<div id="header"></div>

</body>
</html>


It isn't harder than that. You can read the basics about CSS here: http://www.htmlhelp.com/reference/css/
spadez
Thank you so much, that is working now. However when i tried to turn my square box into a rounded box (using a tutorial on the internet) everything screws up (only background shows up). Can you please tell me what is wrong with it, the validator gave me a few minor problems but nothing that would stop it from working.

Here is the code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>MOTD</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-image:url('http://www.hiven.net/files/background.jpg')
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #FFFFFF;
display: table-cell;
visibility: visible;
position: absolute;
border-width: 1px;
border-color: black;

}

/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

.bodytext
{
font-size: 10px;
color: #000000
}

.headline
{
font-weight: bold;
font-size: 24px
}

a:link, a:visited
{
color: #000000;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}

#header    { background: #000000 url(http://www.hiven.net/forums/images/gradients/gradient_tcat.gif) no-repat;
             height: 25px }
</style>
</head>
<body>
<div id="header"><img src="http://www.hiven.net/files/motdhg.gif" /></div>
<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
        <div class="rbcontent">
<?php
$db_host = "****"; // Change this if your MySQL database host is different.
$db_name = "****"; // Change this to the name of your database.
$db_user = "****"; // Change this to your database username.
$db_pw = "****"; // Change this to your database password.
$db_prefix = "***"; //Change this to the prefix of the forum database.

$forum_url = "http://www.hiven.net/forums"; // Change this to reflect to your forum's URL.
$limit = "10"; // Number of posts displayed.
$txtlimit = "25"; // This is the character limit.

// Connecting to your database
mysql_connect($db_host, $db_user, $db_pw)
OR die ("Cannot connect to your database");
mysql_select_db($db_name) OR die("Cannot connect to your database");

if ($limit) {
    $limited = "LIMIT $limit";
}

$thread_sql = mysql_query("select threadid,title,lastpost,firstpostid from $db_prefix thread where visible=1 $wheresql and open=1 $forumid order by lastpost desc $limited");

while($thread_get = mysql_fetch_array($thread_sql))
    {
        $lastpost = $thread_get['lastpost'];
        $tid = $thread_get['threadid'];
        $psql = mysql_query("SELECT postid from $db_prefix post where threadid=$tid order by postid desc");
        $getp = mysql_fetch_array($psql);
        $pid = $getp['postid'];
        $title = $thread_get['title'];
        $title = substr($title,0,$txtlimit);
        
            echo "<li class=\"item\"><a href=\"$forum_url/showthread.php?p=$pid#post$pid\"><span>$title</span></a></li>";
    }
?>
        </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
</body>
</html>
dandyliondancer
i'm not familiar with the "rounded box" method, but normally one would create such effects in photoshop or similar application, and then save them as a regular rectangular jpg or gif. set bg color of your jpg to match bg color of your table or div or use a transparent gif.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.