Forum Moderators: not2easy
I'm suffering with what I think should be a simple CSS operation.
I have a picture I'd like to place on every page, at the top left of each page. Then I have this block of text which I want to place to the right of this picture. Sounds simple, but I've lost literally days to it...
What I'm working from at the moment in xhtml is essentially:
<?xml version="1.0" encoding="utf-8"?>
<!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" lang="en" xml:lang="en"><head>
<link rel="stylesheet" media="screen" type="text/css" href="C:\Users\Me\Documents\website\style.css" title="Default" />
<title>The site</title>
</head>
<body>
<div class="intro">
<h1>My Website: welcome hello and gutentag to this site</h1>
<h2> block of text blahaahhahahhasbahalsdf</h2>
</div>
<div id="picture">
<img src="siteicon.gif" alt="site icon">
</div>
</body>
</html>
And in the css (to be honest I haven't got a clue - I've been looking at boxes, margins, tables and meeting failure at every attempt):
.intro {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
}#picture {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
}
Mike
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
.intro {}
#picture {[blue]
float:left;[/blue]
margin:0 210px 20px 170px;
border:1px solid #000;
background-color:#fff;
padding:10px;
}
</style></head>
<body><div id="picture">
<img src="siteicon.gif" alt="site icon">
</div><div class="intro">
<h1>My Website: welcome hello and gutentag to this site</h1>
<h2> block of text blahaahhahahhasbahalsdf</h2>
</div></body>
</html>
birdbrain
