J.Gold J.Gold - 9 days ago 7
HTML Question

Moving image and text - Javascript + html

I have a HTML page with some images and text, I have been asked to re develop it with only javascript. So far I have managed to flip the image and text from either side, put in new text and headings.

The problem I am having it that the images are skewed out of position and it looks wrong. How do I push the image in so that both the text and itself are in line.

HTML

<div class="article">
<div id="myTills">
<h3 id="headingTwo">About the Product</h3>
<p id="paragraphTwo">
TigerTurf artificial chipping lawns and Golf Greens provide superior quality and ball roll. You can choose which type of synthetic grass you require for areas such as rough and tee boxes. Installing your practice green in your home Garden or business, will allow you to improve your game in your spare time. Your Golf Green will be smooth, durable and realistic to play on. If you have any more questions about design and installation, contact us anytime.
</p>
</div>
<img id="pic4" src="images/nature-place-photo.png" alt="">
</div>


Javascript

var x = document.getElementById("pic4");
x.setAttribute("src", "../images/water_image2.png");
x.style.cssFloat = 'left';
x.style.width = "356px";
x.style.height = "250px";

var y = document.getElementById("headingTwo");
y.innerText = "Tills"
y.style.textAlign = "left";

var x = document.getElementById("paragraphTwo");
x.innerText = "Contains new text"
x.style.textAlign = "left";

var y = document.getElementById("myTills");
y.style.cssFloat = "right";

Answer

I have made some modifications on your code. In your HTML, I switched the position img and #myTills because the display of parent element is table. Since the display of parent element is table, you may want the display of #myTills to be table-cell so you can use vertical-align: middle to vertically center the alignment of the text.

HTML

<div class="article">
    <img id="pic4" src="images/nature-place-photo.png" alt="">
    <div id="myTills">
        <h3 id="headingTwo">About the Product</h3>
        <p id="paragraphTwo">
            TigerTurf artificial chipping lawns and Golf Greens provide superior quality and ball roll. You can choose which type of synthetic grass you require for areas such as rough and tee boxes. Installing your practice green in your home Garden or business, will allow you to improve your game in your spare time. Your Golf Green will be smooth, durable and realistic to play on. If you have any more questions about design and installation, contact us anytime.
        </p>
    </div>
</div>

Javascript

var article = document.querySelector('.article');
article.style.display = 'table';

var x = document.getElementById("pic4");
x.style.width = "356px";
x.style.height = "250px";
x.style.display = "table-cell";

var y = document.getElementById("headingTwo");
y.innerText = "Tills"
y.style.textAlign = "left";

var x = document.getElementById("paragraphTwo");
x.innerText = "Contains new text"
x.style.textAlign = "left";

var y = document.getElementById("myTills");
y.style.display = "table-cell";
y.style.height = "250px";
y.style.width = "100%";
y.style.verticalAlign = "middle";

Is this what you exactly want to achieve?

Comments