HTML not displaying properly

  • Resolved hourna

    (@hourna)


    9 years, 1 month ago

    Hi!

    I am trying to add some links and images to my page using div. However, it is not properly.

    This is what i have:

    https://52.36.1.150/index.php/none/

    HTML and CSS are as follows:

    <style type="text/css">
.wrapper-main {
  display: table;
  width:100%;
  max-width:980px;

}
.wrapper-main a {
  display: table-cell;
  width: 50%;
  text-align: center;
  vertical-align: middle;
}
.wrapper-main a:hover {
  background-color: #e0e0eb;
}
</style> 

<div align="center" class="wrapper-main">
  <a href="https://www.google.com/">ROW 1</a>
<img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="https://www.google.com/">ROW 2</a>
</div>

<div class="wrapper-main">
  <a href="https://www.google.com/">ROW 3</a>
<img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="https://www.google.com/">ROW 4</a>
</div>

<div class="wrapper-main">
  <a href="https://www.google.com/">ROW 5</a>
<img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
</div>

<div class="wrapper-main">
  <img src="https://52.36.1.150/wp-content/uploads/2016/02/blog.jpg"/>
  <a href="https://www.google.com/">ROW 6</a>
</div>

    As you can see, there are gaps and odd blue lines between every two row.

    What I want to achive is like this:

    https://www.dropbox.com/s/4k14mdgllxn4v9t/none.html

    Why there is such difference between just plain html page and wordpress page?

    How can I solve this?

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter hourna

    (@hourna)

    I have figured it out. It is because when I press enter, wordpress editor is adding <br> . I have removed them and it is good now.

    Hi hourna,

    I not sure about the blue lines, because I just can′t see them!
    About the gap between rows, you will find a <br> tag after each image.

    Let me know if that helps!

    Thread Starter hourna

    (@hourna)

    Thank you!

    Happy to help ??

    how can i create 3 section after slider as a dynamic from admin panel…plz suggest me its urgent

    Hi deorahul3,

    I suggest you to open a new topic so you can find people who can help you.
    This is a different topic and is marked as resolved ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘HTML not displaying properly’ is closed to new replies.