cleaner way to code with div tags? [closed]

StackOverflow https://stackoverflow.com/questions/23549361

  •  18-07-2023
  •  | 
  •  

Question

I'm trying to use div tags instead of tables so that my content is more mobile-friendly. However, I'm pretty sure there's a cleaner way to code what I have (which does work). Is there a better way to do what I'm doing?

<div style="text-align: center;">
  <span style="font-size:22px;"><strong>Lehigh Athletics Awards and Achievements</strong></span>
</div>
<hr />
<div style="text-align: center;">
  <span style="font-size:18px;">2014 Convocation Highlights</span>
  <br /> 
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <img style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/6/ProgramIcon.png" />
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="float: left; width: auto; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="clear:both;height:1em;"></div>
<hr />
<div style="text-align: center;">
  <font size="4">2014 Covocation Department Awards</font>
  <br /><font size="2"><i>Lehigh Athletics values achievements in the following areas:</i></font>
</div>
<div style="clear:both;height:1em;">
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 50px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 10px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="clear:both;height:1em;">
    <div style="float: left; width: 18%; margin-right: 50px;">
      <img mediaid="9484" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Taryn_Carroll_0082.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
  </div>
</div>
Was it helpful?

Solution

As Albert mentioned in the comments, you can use Cascading Style Sheets instead of inline-styles in your HTML document. With CSS, you can add styles like:

div {
    text-align: center;
}

Written in a CSS file once, this style will be applied to all div elements. You can additionally add classes and/or IDs to your div (or other) elements:

<div class="cool"></div>
<div class="cool"></div>
<footer class="cool"></footer>

And use CSS to apply a style to all elements with that class:

.cool {
    text-align: center;
}

OTHER TIPS

First, you don't need to use div on every element. div is for a whole group of elements.

Second, you might wanna use a style sheet which is the easiest way to learn. You would add an id attribute to the element, and then you can edit your style such as 

style="float: left; width: 18%; margin-right: 10px;"

or 

mediaid="9485" style="" 
  src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg"

on the style sheet (and it will cascade; hence CSS) instead of repeating it over and over again on the HTML code.

Best wishes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top