New to CSS. Can someone help convert what I have listed?

HTML & CSS
1

I have rarely used CSS and can’t find anything even similar on the web, design-wise, to look at their CSS… so I thought I would ask here. Is it possible to use CSS and produce these same results, but have a border around the outside of the 1000 width. Also, if this is possible, can I insert a table inside of it under the image and login information provided?

<CENTER>
<TABLE WIDTH="1000" BGCOLOR="#FFFFFF" BORDER="1" CELLPADDING="0" CELLSPACING="0">

  <TR>
    <TD WIDTH="400" HEIGHT="50" ALIGN="LEFT" VALIGN="TOP"><IMG SRC="../images/control_panel.jpg" HEIGHT="50" WIDTH="300"></TD>
    <TD WIDTH="350" HEIGHT="50" VALIGN="TOP" ALIGN="RIGHT"><A HREF="adminlogout.php"><IMG SRC="../images/admin_logout.gif" BORDER="0"></A><BR /><BR /><FONT COLOR="#000040" FACE="tahoma,verdana" SIZE="2"><?php echo "Logged in as: " . $_SESSION['admin_admin']; ?></FONT><BR /><FONT SIZE="2" FACE="tahoma,verdana" COLOR="#000040"><?PHP ECHO DATE("D M d, Y"); ?></FONT></TD>
  </TR>
2

[quote=“gregs, post:1, topic:99253”]
Is it possible to use CSS and produce these same results, but have a border around the outside of the 1000 width. Also, if this is possible, can I insert a table inside of it under the image and login information provided?
[/quote]Yes it’s possible - to both questions.

3

First get the HTML right:

<img src="../images/control_panel.jpg" alt="control panel">
<a href="adminlogout.php"><img src="../images/admin_logout.gif" alt="admin logout">
<?php echo "Logged in as: " . $_SESSION['admin_admin']; ?>
<?PHP ECHO DATE("D M d, Y"); ?>

Only once you have all of the pre 1997 code removed from the HTML can you then start styling it with CSS to define how it should look at different screen sizes and on different devices.

4

Here’s a rough guide to doing it with CSS. (I wouldn’t user <br> elements in the final result, using margins/paddings etc. instead, but this is a start.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.container {width: 1000px; margin: 0 auto; border: 2px solid #000; display: table; tble-layout: fixed;}
.container div {display: table-cell; font-family: tahoma, verdana, sans-serif; vertical-align: top;}
.left {width: 530px; border-right: 2px solid #000;}
.right {text-align: right; color: #000040; font-size: 0.75em;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
img {border: none;}
</style>
</head>
<body>

<div class="container">
	<div class="left">
		<img src="../images/control_panel.jpg" alt="control panel" height="50" width="300">
	</div>
	<div class="right">
		<a href="adminlogout.php">
			<img src="../images/admin_logout.gif" alt="admin logout">
		</a>
		<br>
		<span>
			<br>
			<?php echo "Logged in as: " . $_SESSION['admin_admin']; ?><br>
			<?PHP ECHO DATE("D M d, Y"); ?>
		</span>
	</div>
</div>

</body>
</html>