Reputation: 3

Error with DIV Classes

So, I'm trying to make a faq page for my tumblr and I want the same size box, font, and icon for each question/answer so I am using classes and I was having a hard time with the text but I finally managed to get it! The problem is, the icon. I've been trying forever to get it to repeat and position evenly? (like down a bit as it's too high compared to the text) but I just can't figure it out. I've tried margin positioning, position:absolute; and floating but nothing seems to workout.

body{
    background-color: #fff;
    margin: auto;
    }
    
    #container{
        background-color: #000;
        width: 700px;
        height: 900px;
        padding: 20px;
        margin-top: 20px;
        margin-left: 480px;
        }
    
    
    
  #mainbox1{
      width: 675px;
      height: 100px;
      background-color: #ffffff;
      padding: 20px;
      margin-top: -8px;
      margin-left: -8px;
      
  }  
  
  
  #iconone{
      width: 130px;
      height: 130px;
      background-color: #D4A190;
      margin-top: -15px;
      margin-left: -15px;
     
  }
    
    #minidescription{
        width: 450px;
        height: 120px;
        background-color: #D4A190;
        margin-top: -130px;
      margin-left: 120px;
      padding: 5px;
      text-align: center;
      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
     line-height: 20px;
     word-spacing: 2px;
      
    }
    
    
    #linkguide{
        width: 105px;
        height: 130px;
        background-color: #C390D4;
    margin-top: -130px;
      margin-left: 585px;
        
    }
    
    #navigation {
  width: 105px;  
  line-height: 14px;
}


#navigation a:link, #navigation a:visited, #navigation a:active {
  display: block;
  font: 7px  "small fonts", "century gothic";
  text-transform: uppercase; 
  text-decoration: none; 
  letter-spacing: 2px; 
  background-color: #111;
  color: #fff; 
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}
    
.question{
     width: 705px;
      height: 50px;
      background-color: #A1D490;
          margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
}

.questionicon{
     background-image: url("http://i66.tinypic.com/2u5qhe8.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 200px;
     left: 510px;
    }
    
    
    
    .answer{
        background-color: #90C3D4;
         width: 705px;
      height: 50px;
      margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
    }
    
    
    .answericon{
     background-image: url("http://i65.tinypic.com/qod4kx.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 260px;
     left: 510px;
    }
    
    p.center {
  text-align: center;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     word-spacing: 2px;
   
}

<head>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
    
  <div id="container">
      
      <div id="mainbox1">
          
          <div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>
          
          <div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>
          
          
          <div id="linkguide">
    <div id="navigation">
    <a href="http://google.com">Link 1</a><br>
    <a href="http://yahoo.com">Link 2</a><br>
    <a href="http://bing.com">Link 3</a><br>
    <a href="http://bing.com">Link 4</a><br>
      
</div>


          </div>
      </div>
      
      <!-- Question One -->
      
      <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>
      
      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>
       
<!-- Question two -->

       <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>
      
      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>
      
  </div>  
    
    
    
</body>

You can find the full/original view here

Upvotes: 0

Answers (4)

Aᴄʜᴇʀᴏɴғᴀɪʟ

Reputation: 3057

I just made this fiddle with your code. Take a look.
This is what I changed:

.question {
  width: 705px;
  height: 50px;
  background-color: #A1D490;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: center; 
}
.questionicon {
   background-image: url("http://i66.tinypic.com/2u5qhe8.png");
   width: 16px;
   height: 16px;
   position: absolute;
   left: 32px;
   top: 16px;
}
.answer {
  background-color: #90C3D4;
  width: 705px;
  height: 50px;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: center;
}
.answericon {
   background-image: url("http://i65.tinypic.com/qod4kx.png");
   width: 16px;
   height: 16px;
   position: absolute;
   left: 32px;
   top: 16px;
}

I fixed the layout by using position: relative and display: flex.

When you set position: relative on an element, any of its children with position: absolute will be positioned relative to it.

For a great guide and example for how display: flex works, check out css-tricks: guide to flex box. It's really useful for centering elements vertically and/or horizontally.

Upvotes: 1

UserSN

Reputation: 1013

@Serenity

I noticed you were probably trying to use the FontAwesome icon library but didn't setup the path for the files. I requested a CDN and included that script into the code here so you can use all font-awesome icons. Also your last Q&A divs were outside of your main container and appear out of frame I moved them back in.

body{
    background-color: #fff;
    margin: auto;
    }
#container{
        background-color: #000;
        width: 700px;
        height: 900px;
        padding: 20px;
        margin-top: 20px;
        margin-left: 480px;
        }
#mainbox1{
      width: 675px;
      height: 100px;
      background-color: #ffffff;
      padding: 20px;
      margin-top: -8px;
      margin-left: -8px;
}  
#iconone{
      width: 130px;
      height: 130px;
      background-color: #D4A190;
      margin-top: -15px;
      margin-left: -15px;
}
#minidescription{
        width: 450px;
        height: 120px;
        background-color: #D4A190;
        margin-top: -130px;
      margin-left: 120px;
      padding: 5px;
      text-align: center;
      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
     line-height: 20px;
     word-spacing: 2px;
}
#linkguide{
        width: 105px;
        height: 130px;
        background-color: #C390D4;
    margin-top: -130px;
      margin-left: 585px;
}
#navigation {
  width: 105px;  
  line-height: 14px;
}
#navigation a:link, #navigation a:visited, #navigation a:active {
  display: block;
  font: 7px  "small fonts", "century gothic";
  text-transform: uppercase; 
  text-decoration: none; 
  letter-spacing: 2px; 
  background-color: #111;
  color: #fff; 
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}
#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}
.question{
     width: 705px;
      height: 50px;
      background-color: #A1D490;
          margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
}
.questionicon{
     background-image: url("http://i66.tinypic.com/2u5qhe8.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 200px;
     left: 510px;
    }
.answer{
        background-color: #90C3D4;
         width: 705px;
      height: 50px;
      margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
    }
.answericon{
     background-image: url("http://i65.tinypic.com/qod4kx.png");
     width: 16px;
     height: 16px;
     position: relative;
     top: 260px;
     left: 510px;
	}
    
    p.center {
  text-align: center;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     word-spacing: 2px;
   
}

<head>
<script src="https://use.fontawesome.com/4eb62e4ca1.js"></script>
</head>
<body>
<div id="container">
<div id="mainbox1">
<div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>
<div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>
<div id="linkguide">
<div id="navigation">
<a href="http://google.com">Link 1</a><br>
<a href="http://yahoo.com">Link 2</a><br>
<a href="http://bing.com">Link 3</a><br>
<a href="http://bing.com">Link 4</a><br>
</div>
</div>
</div>
      
<!-- Question One -->
<div class="question">
	<i class="fa fa-question-circle-o"></i>
	<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer">
	<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>
<!-- Question Two -->
<div class="question">
	<i class="fa fa-question-circle-o"></i>
	<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer">
	<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>

<!--Add More Questions Above this comment-->
</div> 
</body>

Upvotes: 0

NSTuttle

Reputation: 3345

Take a look at my snippet, I re-organized your HTML in a more manageable way, as well as adjusted your CSS for a more broad .icon class, this will allow for easier adjustment of all of those icons.

body {
  background-color: #fff;
  margin: auto;
}

#container {
  background-color: #000;
  width: 700px;
  height: 900px;
  padding: 20px;
  margin-top: 20px;
  margin-left: 480px;
}

#mainbox1 {
  width: 675px;
  height: 100px;
  background-color: #ffffff;
  padding: 20px;
  margin-top: -8px;
  margin-left: -8px;
}

#iconone {
  width: 130px;
  height: 130px;
  background-color: #D4A190;
  margin-top: -15px;
  margin-left: -15px;
}

#minidescription {
  width: 450px;
  height: 120px;
  background-color: #D4A190;
  margin-top: -130px;
  margin-left: 120px;
  padding: 5px;
  text-align: center;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  line-height: 20px;
  word-spacing: 2px;
}

#linkguide {
  width: 105px;
  height: 130px;
  background-color: #C390D4;
  margin-top: -130px;
  margin-left: 585px;
}

#navigation {
  width: 105px;
  line-height: 14px;
}

#navigation a:link,
#navigation a:visited,
#navigation a:active {
  display: block;
  font: 7px "small fonts", "century gothic";
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  background-color: #111;
  color: #fff;
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}

.question {
  width: 705px;
  height: 50px;
  background-color: #A1D490;
  margin-left: -8px;
  margin-top: 10px;
  padding: 5px;
}

.icon {
  margin: 16px 0 0 16px;
  float:left;
}

.answer {
  background-color: #90C3D4;
  width: 705px;
  height: 50px;
  margin-left: -8px;
  margin-top: 10px;
  padding: 5px;
}

.answericon {

  width: 16px;
  height: 16px;
  position: absolute;
  top: 260px;
  left: 510px;
}

p.center {
  text-align: center;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  word-spacing: 2px;
}

<body>

  <div id="container">

    <div id="mainbox1">

      <div id="iconone">
        <IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon">
      </div>

      <div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus.
        Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>


      <div id="linkguide">
        <div id="navigation">
          <a href="http://google.com">Link 1</a><br>
          <a href="http://yahoo.com">Link 2</a><br>
          <a href="http://bing.com">Link 3</a><br>
          <a href="http://bing.com">Link 4</a><br>
        </div>
      </div>
    </div>
    <!-- Question One -->
    <div class="question">
      <div class="icon">
       <img src="http://i66.tinypic.com/2u5qhe8.png">
      </div>
      <div class="">
       <p class="center">This paragraph will be red and center-aligned.</p>
      </div>
        
    </div>

    <div class="answer">
      <div class="icon">
        <img src="http://i65.tinypic.com/qod4kx.png">
      </div>
      <div class=""> 
          <p class="center">This paragraph will be red and center-aligned.</p>
      </div>
    </div>

    <!-- Question two -->

     <div class="question">
      <div class="icon">
       <img src="http://i66.tinypic.com/2u5qhe8.png">
      </div>
      <div class="">
       <p class="center">This paragraph will be red and center-aligned.</p>
      </div>  
    </div>
    <div class="answer">
      <div class="icon">
        <img src="http://i65.tinypic.com/qod4kx.png">
      </div>
      <div class=""> 
          <p class="center">This paragraph will be red and center-aligned.</p>
      </div>
    </div>

</body>

Upvotes: 0

Krunkmaster

Reputation: 335

First of all..

absolute position takes your icons out of the flow of the parent div's completely.. not what you want at all. With all the top / left that you have its not wonder your icons disappeared.

Try relative positioning. I've included a css sample for you to work with. I hope this helps

.questionicon {
 background-image: url(http://i66.tinypic.com/2u5qhe8.png);
 width: 16px;
 height: 16px;
 position: relative;
 top: 11px;
 left: 210px;
 float: left;
    }

Upvotes: 0

Error with DIV Classes

Answers (4)

Related Questions