PDA

View Full Version : more issues aligning text/pictures



uknowmeitsmattp
Jan 15th, 2009, 11:17 PM
I'm using CSS and want to align two images with some text between them, as in the following picture:

7037

As you can see, the lines represent the text I have. Now this seems like it would be simple, but I've tried everything and can't get it to work. Here is the code I have:

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

<html>
<head>

<title>USA WEATHER</title>

<meta name="description" content="The University of South Alabama meteorology website. Model comparison page. Radar, satellite, and surface data for the US. Archived weather data." />
<meta name="keywords" content="USA weather, USA meteorology, University of South Alabama weather, weather.southalabama.edu" />

<link rel="stylesheet" type="text/css" href="default.css" />

</head>

<!--Begin Header-->

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

<!--Begin Links-->

<div id="sidebar">

<ul>
<li><a href="index.html">Home Page</a></li>
<p>
<br>
<li><a href="Models/Models.html">Models</a></li>
<p>
<br>
<li><a href="Radar/Radar.html">Radar</a></li>
<p>
<br>
<li><a href="Satellite/Satellite.html">Satellite</a></li>
<p>
<br>
<li><a href="Surface/Surface.html">Surface Data</a></li>
<p>
<br>
<li><a href="Text_Data/Text_Data.html">Text Data</a></li>
<p>
<br>
<li><a href="Tropical/Tropical.html">Tropical</a></li>
<p>
<br>
<li><a href="Weather_101/Education.html">Weather 101</a></li>
<p>
<br>
<li><a href="Archive_Data/Archive.html">Archive Data</a></li>
</ul>
</div>

<!--Begin Body-->

<div id="main">
<div class="stuff">
<a href="Surface/Surface.html">Surface Data</a><br>
<a href="Surface/Surface.html"><img src="Images/Surface_Icon.PNG"></a></img>
</div>
<div class="stuff">
<a href="Radar/Radar.html">Radar</a><br>
<a href="Radar/Radar.html"><img src="Images/Radar_Icon.png"></a></img>
</div>
<div class="stuff">
<a href="Satellite/Satellite.html">Satellite</a><br>
<a href="Satellite/Satellite.html"><img src="Images/Satellite Icon.PNG"></a></img>
</div>
<div class="clear">
</div>
<div class="stuff">
<a href="Models/Models.html">Models</a><br>
<a href="Models/Models.html"><img src="Images/Model_Icon.PNG"></a></img>
</div>
<div class="stuff">
<a href="Text_Data/Text_Data.html">Text Data</a><br>
<a href="Text_Data/Text_Data.html"><img src="Images/Text_Icon.PNG"></a></img>
</div>
<div class="stuff">
<a href="Tropical/Tropical.html">Tropical</a><br>
<a href="Tropical/Tropical.html"><img src="Images/tropical.jpg"></a></img>
</div>
<div class="clear">
</div>
<div class="stuff">
<a href="Weather_101/Education.html">Weather 101</a><br>
<a href="Weather_101/Education.html"><img src="Images/weather_101.jpg"></a></img>
</div>
<div class="stuff">
<a href="Archive_Data/Archive.html">Archive Data</a><br>
<a href="Archive_Data/Archive.html"><img src="Images/archive_icon.PNG"></a></img>
</div>
<div class="clear">
</div>
</div>

<!--Begin USA Info Table-->

<div id="info">
<p><a href="http://www.southalabama.edu"><img src="http://www.southalabama.edu/meteorologyclub/images/usalogo1.gif" class="left" alt="USA logo.">
<a href="http://www.southalabama.edu/meteorologyclub/"><img src="http://www.southalabama.edu/meteorologyclub/images/usametlogo.png" class="right" alt="USA Meteorology logo." border="0"></p>
<a href="http://www.southalabama.edu">Univ. of South Alabama</a> <a href="http://www.southalabama.edu/meteorology/">Meteorology</a> - Mobile, AL 36688-0002 <br>For comments or questions about our web site please <a href="mailto:[email protected]">contact us</a>. <br>This page was

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script begin
var m = "last updated on: " + document.lastModified + " CT";
var p = m.length-0;
document.writeln("<left>");
document.write(m.substring(p, 0));
document.writeln("</left>");
// End -->
</SCRIPT>

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

The css is external

#header {
width: 1212px;
height: 18%;
background-image: url(Images/home_header.PNG);
padding: 0;
margin: 0;
}

#sidebar {
background-color: black;
float: left;
width: 125px;
height: 100%;
text-align: center;
position: relative;
padding: 0;
margin: 0 ;
}

#sidebar ul {
list-style: none;
padding: 0;
margin: 1em -1em;
}

#sidebar a:link {
color: white;
text-decoration: none;
}

#main {
margin: 0;
padding: 0;
width:100%;
font-size: 1em;
}

#main img {
width: 178px;
height: 159px;
}

#main a:link {
text-decoration: none;
}

#main .stuff {
float: left;
margin-left: 75px;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 25px;
padding-bottom: 25px;
}

#main .clear {
clear: right;
}

#info {
float: left;
margin: 0;
padding: 0;
width: 100%;
font-style: Tahoma;
font-size: 7pt;
font-weight: bold;
text-align: center;
}

#info img {
padding: 0;
margin: 0;
border: 0;
}


Any ideas?

Excavator
Jan 16th, 2009, 01:14 AM
Hello uknowmeitsmattp,
You put stuff beside other stuff by floating it. Have a look at this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #fc6;
text-align:center;
font: 12px "Comic Sans MS";
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 760px;
background: #fff;
margin: 30px auto;
overflow: auto;
}
.stuff {
width: 200px;
height: 200px;
float: left;
background: #F00;
}
.other_stuff {
width: 200px;
height: 200px;
float: right;
background: #3F0;
}
#wrap p {
width: 350px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<div class="stuff">picture in here</div>
<div class="other_stuff">picture in here</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end wrap--></div>
</body>
</html>