...

View Full Version : Problem with image placment



Ani[|]al
11-23-2011, 12:20 AM
Hi there all i have been reading the forums for a while but signed up tonight as the advice on this forum is fantastic hopefully some one will be of help with a issue i am having

For collage i need to complete a website layout based on the below image please forgive the messy code i am very new to the code side as you can see i am unable to format the images in the correct position

Site needs to look this way

http://i2.photobucket.com/albums/y40/b-master/homepagemockup.jpg

Site Link (http://www.bmaster.0sites.net/)

CSS CODE



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>John Leslie | Garden Design</title>
<link href="css/garden.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
<div class="sidebar1">
txt
</div>
<div class="content">
<div class="img"> <img src="images/grdns_country_01.jpg" alt="" width="124" height="122" />

<div class="desc">
<h3>GARDENS</h3>
<pre>Click for details</pre>
</div>
</div>
<div class="img"> <img src="images/feat_thm_water.jpg" alt="" width="124" height="122" />

<div class="desc">
<h3>WATER</h3>
<pre>Click for details</pre>
</div>
</div>
<div class="img"> <img src="images/feat_thm_wood.jpg" alt="" width="124" height="122" />

<div class="desc">
<h3>WOOD</h3>
<pre>Click for details</pre>
</div>
</div>
<div class="img"> <img src="images/feat_thm_general.jpg" alt="" width="124" height="122" />

<div class="desc">
<h3>GENERAL</h3>
<pre>Click for details</pre>
</div>
</div>
</div>
<div class="sidebar2"><br />

<p><a href="#">Home</a></p>
<p><a href="#">Gallerys</a></p>
<p><a href="#">Features</a></p>
<p><a href="#">About Us</a></p>
<p><a href="#">Contact Us</a></p>

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



HTML CODE



@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
padding: 0;
color: #666;
}

ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {/* Htag padding */
margin-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #A99C7C;
}
/* Start of imgage center layout */
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width: auto;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:right;
font-weight:normal;
width:auto;
margin:2px;
}
/* End of imgage center layout */

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

a:visited {
color: #FFF;
text-decoration: underline;
}

a:hover, a:active, a:focus {
text-decoration: blink;
color: #9C0;
font-size: 100%;
line-height: inherit;
font-family: Arial, Helvetica, sans-serif;
}

.container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
overflow: hidden;
}

.sidebar1 {
float: left;
width: 20%;
height: 900px;
background-image: url(../images/left_panel.png);
background-repeat: no-repeat;
}

.content {
padding: 0px 0;
width: 60%;
float: left;
color: #666;
}

.sidebar2 {
float: left;
width: 20%;
height: 900px;
background-image: url(../images/right_panel.png);
background-repeat: no-repeat;
color: #CCC;
font-weight: bold;
font-style: italic;
}

.content ul, .content ol {
padding: 0 15px 15px 40px;
}



Thank you very much in advance greatly appericated

Excavator
11-23-2011, 12:39 AM
Hello Ani[|]al,
Without your images it's hard to see what the problem is... a link to the test site would be best since this question involves images.

Have you tried floating those images instead of using display: inline; ... ?

Ani[|]al
11-23-2011, 12:57 AM
thanks for the fast reply Excavator i have added the site link to my orignal post

many thanks

Excavator
11-23-2011, 01:09 AM
Yes, a good example of why a link works best - if you remove this bit I've highlighted in red, things will look a bit different.

padding: 0;
color: #666;
}

ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {/* Htag padding */
margin-top: 0px;
padding-right: 15px;
padding-left: 15px;
color: #A99C7C;
}
/* Start of imgage center layout */
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width: auto;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:right;

See the links about validation in my signature line below. Pretty handy and they will help you a lot.



.

Ani[|]al
11-23-2011, 01:16 AM
amazing i cant thank you enough i have been staring at code for 4 hours i really appericate all your help :)

*update i have checked the links in your sig extremly helpfull not 100% sure i understand the CSS errors its throwing up and how to fix them

sorry if this is basic info i am still learning

Excavator
11-23-2011, 02:28 AM
al;1162133']
sorry if this is basic info i am still learning

Still learning is the secret!

Look what clear: both; can do for your h1. Just to test, add a background color before and after the clear: both;.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum