Member Avatar for davy_yg

Hello,

I wonder why the two pictures on the bottom does not want to be aligned with the 2 boxes?

Click Here

Please tell me if there is anything in the codes that I need to change:

aerosol-produk.php

<style type="text/css">
div.ex1
{
align:left;
width:300px;
height:80px;
padding:10px;
border:1px solid black;
margin:100px 0 0 0;
}

div.ex2
{
align:left;
width:300px;
height:80px;
padding:10px;
border:1px solid black;
margin: 50px 0 0 0;
}

div.ex3
{
align:left;
width:300px;
height:80px;
padding:10px;
border:1px solid black;
margin: 50px 0 0 0;
}

div.ex4
{
width:300px;
height:80px;
padding:10px;
border:1px solid black;
margin: -400px 0 0 500px;
}

div.ex5
{
align:left;
width:300px;
height:80px;
padding:10px;
border:1px solid black;
margin: 10px 0 0 500px;
}

img1 
{
padding:5px;
float:left;
}

</style>


<body>
<center>
<div id="container">

<div id="logo2"><img src="images/logo.gif"></div>

<div id="menu"><a href="#">Pengenalan Perusahaan</a>    <a href="Rustoleum2.php">Industrial Product</a>    <a href="#">Aerosol Product</a>    <a href="#">Konsultasi Konsumen</a></div>
<img src="images/banner.gif"><br><br>


</center>

<div class="ex1">
<a href="photos/image1.jpg" title="High Performance Wheel, Hammered, Engine Enamel"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" align="left" style="padding:5px;"/></a><br>
High Performance Wheel<br />
Hammered<br>
Engine Enamel<br></div><br>

<div class="ex2">
<a href="photos/image2.jpg" title="Stone, Multi Color, Chalk Board"><img src="photos/thumb_image2.jpg" width="72" height="72" alt="" align="left" style="padding:5px;"/></a>
Stone<br>
Multi Color<br>
Chalk Board<br></div><br>

<div class="ex3">
<a href="photos/image3.jpg" title="Hard Hat, Glow Max, Inverted Striping, Inverted Marking Paint"><img src="photos/thumb_image3.jpg" width="72" height="72" alt="" align="left" style="padding:5px;"/></a>
Hard Hat<br>
Glow Max<br>
Inverted Striping<br>
Inverted Marking Paint<br>
</div><br>

<div class="ex4">
<a href="photos/image4.jpg" title="Metallic, Frosted Glass, Gloss Protective Enamel, Touch in Tone, Polyurethane"><img src="photos/thumb_image4.jpg" width="72" height="72" alt="" align="left" style="padding:5px;"/></a>
Metallic<br>
Frosted Glass<br>
Gloss Protective Enamel<br>
Touch in Tone<br>
Polyurethane<br>
</div><br>

<div class="ex5">
<a href="photos/image5.jpg" title="American Accents, Wood Stain, American Accents, Danish Oil"><img src="photos/thumb_image5.jpg" width="72" height="72" alt="" align="left" style="padding:5px;" /></a>
American Accents<br>
Wood Stain<br>
American Accents<br>
Danish Oil<br>
</div><br>

<center>
<hr width=950px;>
<div id="logo2"><img src="images/logo.gif"></div>

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

</html>
  • 2 Contributors
  • 1 Reply
  • 70 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Just a few comments with regard to the code you posted...

1) "align" is not a known CSS property
2) The HTML <center> element is deprecated. You should use CSS instead.
3) The <br> tags should be implemented as <br /> to comply with XHTML standards.
4) #64 and #111, you should not assign the same ID to two different elements. Use class instead.
5) You cannot have HTML elements between the closing </body> and </html> tags
6) #110 - width attributes need to be enclosed within quotation marks. I suggest you apply CSS instead.

With regard to lining up the boxes, I would suggest that you apply a float:left to the top left div, then a float:right to the top right div. Then appply a clear:both (for example <div style="clear:both">, then on the next line apply a float:left to the bottom left and a float:right to the bottom right, continue the cycle. The code would look something like this...

<div style="float:left">
  <!-- HTML Content -->
</div>

<div style="float:right">
  <!-- HTML Content -->
</div>

<div style="clear:both"></div>

<div style="float:left">
  <!-- HTML Content -->
</div>

<div style="float:right">
  <!-- HTML Content -->
</div>

<div style="clear:both"></div>

Of course rather than styling the divs, you use CSS.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.