TomJeffries TomJeffries - 4 months ago 16
HTML Question

HTML Line Breaks

I'm having trouble putting line breaks in HTML. Also, in Chrome and Opera the first bullet point is reversed. Firefox and Internet Explorer do it correctly.

Here's the code:

<div class="line"></div>
<div id="product_details" class="block_center">
<img src="http://blazeaudio.com/images/RecordCleanerPop.png" class="left" alt="Power Record" title="Power Record" style="width:50%" />
<img src="http://blazeaudio.com/images/RecordCleanerHum.png" class="right" alt="Power Record" title="Power Record" style="width:50%"/>
<img src="http://blazeaudio.com/images/RecordCleanerHiss.png" class="left" alt="Power Record" title="Power Record" style="width:50%"/>
<img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" class="right" alt="Power Record" title="Power Record" style="width:50%"/>
</div>
<br>
<br>
<ul class="productsBullets">
<li>Removes Pops and Clicks</li>
<li>Eliminates Hum</li>
</ul>


Here's the site:

enter link description here

Answer

as mentioned your four images an the ul are just displaying along each other, so surround the images in their own div then add a few line breaks after that then the ul or us css on the image div to give it some spacing EG:

   <div id="product_details" class="block_center">
       <!-- image wrapper -->
       <div class="image-wrapper" style="margin: 15px 0;">
        <img src="http://blazeaudio.com/images/RecordCleanerPop.png" class="left" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerHum.png" class="right" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerHiss.png" class="left" alt="Power Record" title="Power Record" style="width:50%">
        <img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" class="right" alt="Power Record" title="Power Record" style="width:50%">
       </div>
       <!-- end of image wrapper -->

        <ul class="productsBullets">
            <li>Removes Pops and Clicks</li>
            <li>Eliminates Hum</li>
            <li>Reduces Hiss</li>
            <li>Noise Gate Removal</li>
            <li>You must have <strong>RipEditBurn Plus</strong>, <strong>RipEditBurn</strong>, or <strong>Wave Creator</strong> installed on your computer</li>
        </ul>
    </div>

I have added the inline style="margin: 15px 0;" for eg but you can add that to a class.

Also lose the extra spacing within your <li></li> tags at the end of the content etc, view source to see what i mean.

hope this helps a little

here is a working example might help:

.block_center {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  max-width: 770px;
  height: auto;
  box-sizing: border-box;
}

.image-wrapper {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.image-wrapper img {
  margin: 0;
  padding: 5px;
  width: 49%;
  box-sizing: border-box;
}
<div id="product_details" class="block_center">
       <!-- image wrapper -->
       <div class="image-wrapper" >
        <img src="http://blazeaudio.com/images/RecordCleanerPop.png" alt="Power Record" title="Power Record">
        <img src="http://blazeaudio.com/images/RecordCleanerHum.png"  alt="Power Record" title="Power Record" >
        <img src="http://blazeaudio.com/images/RecordCleanerHiss.png" alt="Power Record" title="Power Record">
        <img src="http://blazeaudio.com/images/RecordCleanerNoiseGate.png" alt="Power Record" title="Power Record">
       </div>
       <!-- end of image wrapper -->

        <ul class="productsBullets">
            <li>Removes Pops and Clicks</li>
            <li>Eliminates Hum</li>
            <li>Reduces Hiss</li>
            <li>Noise Gate Removal</li>
            <li>You must have <strong>RipEditBurn Plus</strong>, <strong>RipEditBurn</strong>, or <strong>Wave Creator</strong> installed on your computer</li>
        </ul>
    </div>

Comments