probs with CSS layout

liunx

Guest
Hello, how do you make all three images combined without seams, so that they are together in one row?
the page is at <!-- m --><a class="postlink" href="http://mkashlev.dyndns.org:7771/ISSI2003-web/div1.html">http://mkashlev.dyndns.org:7771/ISSI2003-web/div1.html</a><!-- m -->
The code is as follows:

<?xml version="1.0"?>
<!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>
<title>CSS TEST</title>

<style type="text/css">
body {
margin:9px 9px 0 9x;
padding:0;}
#level0 {
background:#FC0;}
#logo {
width:97px;
height:79px;
background-image: url("images/Weizmann-Institute.gif"); background-repeat: no-repeat;}
#vrtop{
height:79px;
width:8px;
margin-left:97px;
padding-left:0px;
background-image: url("images/about_02.gif"); background-repeat: no-repeat;}
#titlebar{
height:79px;
width:521px;
margin-left:105px;
padding-left:0px;
background-image: url("images/title-about.gif"); background-repeat: no-repeat;}
</style>

</head>



<body>
<div id="level0">
<div id="logo">
<div id="vrtop">
<div id="titlebar">


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

</html>Just to let you know, what you are doing here breaks the utility of CSS design. CSS is meant to style pages and achieve layout without breaking the semantics of the page.
<div id="masthead">
<h1><img src=http://www.webdeveloper.com/forum/archive/index.php/"logo.gif" alt="">
<span>About the program</span>
</h1>
</div>
And the relevant CSS may be:
#masthead {background: #fc0}
#masthead h1 {width: 626px; height: 79px;
background: #00f url('about.gif') no-repeat top right}
#masthead h1 span {display: none}
#masthead img {width:97px; height: 79px;
border: none; padding-right: 4px;
border-right: 1px solid white; margin-right: 3px;


Note: code not tested. some tweaking may be required.
 
Back
Top