Forum Moderators: not2easy

Message Too Old, No Replies

CSS Help

I love CSS, but I'm still new to it.

         

phidentity

8:05 pm on Jan 31, 2004 (gmt 0)

10+ Year Member



body
{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #DC143C;
margin: 0px;
background-image : url(bg.jpg);
background-repeat : repeat-y;
background-color : #87CEEB;
}

.nav
{

position: absolute;
top: 10px;
left: 10px;
width: 130px;
height: auto;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height : 110%;

}

.content

{

margin-left: 190px;
margin-right: 500px;
margin-top: 13px;
padding: 20px;
background-color : #87CEFA;
color : Black;
border : 2px dotted white;

}

.bate

{

color : #DC143C;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
margin-left: 190px;
margin-right: 500px;
margin-top: 13px;
border: 2px dotted white;
background : #ADD8E6;
}

.header

{

margin-top: 10px;
margin-left: 160px;
margin-bottom: 10px;
margin-right: 30px;
background-color : #ADD8E6;
color : #DC143C;
border : 2px dotted #E0FFFF;
}

.box

{
background-color : #F8F8FF;
color : #DC143C;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
margin: 2px;
margin-top: 15px;
border: 2px dotted #87CEEB;
}

.navbox
{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10pt;
padding: 3.5pt;
margin: 2pt;
border : 1.5px dotted #7B68EE;
color : Black;
background-color : #66CDAA;
}

h1
{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 18pt;
font-style : normal;
font-variant : normal;
font-weight : bolder;
text-align : center;
text-decoration : none;
line-height : 110%;
word-spacing : 3px;
color : #DC143C;
}

a:link {/*normal links in the text*/
color: blue;
text-decoration : none; }
a:visited {
color: blue;
text-decoration : none; }
a:hover {
text-decoration : underline;
color : #DC143C;
}

ol.lroman
{
list-style-type: lower-roman
}

HTML/PHP:

<html>
<head>
<link rel="stylesheet" href="bucha-style.css" type="text/css">
<title> Jon Buchans webpage</title>
<meta keywords = "Jon Buchan">
<meta description = "Jon Buchans Web-site.">
</head>

<body>

<div class="nav">

<?php global $db_list;

$database = "****xx";

$conn = @mysql_connect("xx","xx","xx")
or die ("Sorry");

@mysql_select_db($database) or die ("unable to select database!");

$query = "SELECT * FROM links WHERE page='main'";

$result = mysql_query($query);

$num = mysql_numrows($result);

$i=0;

while($i< $num){

$url=mysql_result($result,$i,"url");
$text=mysql_result($result,$i,"text");

if( file_exists( $url ) )
{
echo("<div class=\"navbox\">"."<a href=\"$url\">".$text."</a>"."</div>");
}
else
{
echo("<div class=\"navbox\">".$text."</div>");
}

$i++;
}

?>

</div>

<div class="content">

<?php global $db_list;

$database = "x";

$conn = @mysql_connect("x","x","x")
or die ("Sorry");

@mysql_select_db($database) or die ("unable to select database!");

$query = "SELECT * FROM content WHERE page='Home' ORDER BY time_of_entry DESC";

$result = mysql_query($query);

$num = mysql_numrows($result);

$i=0;

while($i< $num){

$content=mysql_result($result,$i,"content");
$date=mysql_result($result,$i,"date_of_entry");
$time=mysql_result($result,$i,"time_of_entry");
$headline_one=mysql_result($result,$i,"headline_one");

echo("<h1>".$headline_one."</h1>");
echo("<b>Date: ".$date." Time:".$time."</b>");
echo("<p>".$content."</p>");

$i++;
}

?>

<div class="box">
© Jon Buchan 2004. <a href="mailto:sneak@bucha.net?subject="bucha.net">Mail</a>
</div>

</div>
<div class="bate">

Random Bate Phrase:

<?php

$arr_num = mt_rand(0, 4);

$bate_phrase = array();

$bate_phrase[0] = "\"What would you do if dave squashed and died?\"";
$bate_phrase[1] = "\"There is millions of rains coming over!\"";
$bate_phrase[2] = "\"I think, DRE, will be most listend album.\"";
$bate_phrase[3] = "\"LI-ON!\"";
$bate_phrase[4] = "\"Where IS the blast off?\"";

echo("<p>".$bate_phrase[$arr_num]."</p>");

?>

</div>
</body>
</html>

My Question:

How can I make another box, on the right, I have no idea how to do this, i've tired and obviouslly failed.

I've looked at guides on the internet but don't understand. Do I use position:float? Or what?

Cheers :)

Jon

auxum

4:12 am on Feb 1, 2004 (gmt 0)

10+ Year Member



though I cannot scoop your code and test with it, as I am unable to get to my php server... this is scooped from someone elses question - already seemed answered by the time I got back to it. I think it will show you the answwer, fairly clearly if not somewhat verbosely. (doctype and other standard tags removed)
hope it helps, as it shows boxes in a variety of positions.

<html>
<head>
<title>EXample</title>
<style>
.menu-rt {
width: 100px;
height: 100%;
float: right;
clear: right;
background: #FFD3D3;
}
.menu-lf {
width: 100px;
height: 100%;
float: left;
clear: left;
overflow: hidden;
background: #D3FFD3;
}
.menu-tp1 {
width: 100%;
height: 50px;
overflow: hidden;
background: #C3C3FF;
}
.menu-tp2 {
width: 100%;
height: 50px;
overflow: hidden;
background: #010101;
color: #FFFFFF;
}
.main01 {
width: 100%;
height: 100%;
overflow: scroll;
background: #C3C3C3;
}
.table01{
border=0;
cellpadding=0;
cellspacing=0;
width="2048";
height="2048";
}
</style>
</head>
<body>

<div class=menu-tp1>
example 1 of position for top.
</div>

<div class=menu-lf>
<UL>
<LI>left
<LI>b
<LI>c
<LI>menu
</UL>
</div>

<div class=menu-rt>
<UL>
<LI>right
<LI>b
<LI>c
<LI>menu
</UL>
</div>

<div class=menu-tp2>
example 2 of position.
</div>

<div class=main01>
<table class=table01>
<tr>
<td>
This table is this big to demonstrate
the scroll effect.
</td>
</tr>
</table>
</div>

</body>
</html>