...

View Full Version : Displying three image elements together?



stfc_boy
10-19-2009, 06:10 PM
Hello,

I'm trying to create a container so that the three graphical elements, ie the arrow, the edit button and the exit button (cross) all appear alligned nicely.

Now i've got the container to work, but can't get the graphical elements to line-up and the grey top bar does noit appear in Firefox, but does in IE.

My Code I have is here (http://www.inspireaway.co.uk/question.php)

Thanks

met
10-19-2009, 07:48 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boxes</title>
<style type="text/css">
<!--
/* Start the stylesheet */

* {
padding: 0;
margin: 0;
}
body {
font: normal 11px verdana, arial, verdana, helvetica, sans-serif;
background: #ECECEC;
color: #000;
}
#wrapper {
margin:auto;
width: 1025px;
border: 1px solid #cccccc;
padding: 10px;
background-color: #FFFFFF;
min-height:200px;
position:relative;
z-index:2;
}

.box {
background:#FFF;
margin-bottom: 15px;
padding-bottom: 6px;
width:310px;
height:200px;
border: 1px solid #CCC;
margin-bottom:5px;
margin:auto;
float:left;
margin-right:25px;

}
.box-top { /*The top grey bit*/
height: 10px;
width:310px;
background:#CCC; margin:auto;
}
.header {
background: #336699; margin-left:-5px;
color: #fff;
font-size: 1.4em;
text-shadow: #777 1px 1px 1px;
padding-top:5px;
padding-bottom:5px;
margin-bottom:10px;
width:320px;
}
p.left { float:left; display:inline; }
img.left { float:left; display:inline; margin-left:5px; }
img.right { float:right; display:inline; margin-right:5px; }
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
<div class="box-top"></div>
<div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
<p class="left">Here is a heading</p>
<img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
<div style="clear:both;"></div>
</div>
<p>Here is some text</p>
</div>
<div class="box">
<div class="box-top"></div>
<div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
<p class="left">Here is a heading</p>
<img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
<div style="clear:both;"></div>
</div>
<p>Here is some text</p>
</div>
<div class="box">
<div class="box-top"></div>
<div class="header"> <img class="left" src="http://www.inspireaway.co.uk/down_arrow.jpg" width="14" height="14" alt="title" />
<p class="left">Here is a heading</p>
<img class="right" src="http://www.inspireaway.co.uk/edit.jpg" width="50" height="16" alt="title" /> <img class="right" src="http://www.inspireaway.co.uk/close.jpg" width="16" height="16" alt="title" />
<div style="clear:both;"></div>
</div>
<p>Here is some text</p>
</div>
</div>
</body>
</html>



you'll want to tweak it but the images line up as you wanted.

replaced the h3 with a <p and a class> as I was testing, using a h3 should make no difference but be careful with padding/margin etc.

I extended #wrapper to fit it all in but you can refine it as required.

displays in ie+ff as shown



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum