absolute VS relative for multiple images

+1 wiliam pierce · February 17, 2015
thanks again for all the help I've gotten here.
I inserted my image after some frustration in the header and used absoluter position
in css. the issue is this. I don't see how to put more than one image on my page within the 
header because they seem interfere with each other. would relative be better in that situation
and where is the best place to learn about relative stying for multiple images within a html5 doc?

Post a Reply

Replies

Oldest  Newest  Rating
+1 Abdullah Nauman · February 19, 2015
ok. You can just you the css align attribute, to set the image left and right. Then put text between the two images.
 
+1 Abdullah Nauman · February 17, 2015
I don't completely understand what your trying to do. Are you trying to put images next to each other inside a header?
0 wiliam pierce · February 20, 2015
thanks Abdullah..i'll post my results .thanks again
0 wiliam pierce · February 18, 2015
sorry I didn't explain as well as I should have.
I want to put one image on the left side of the text
and one on the right.
0 Ray LeDuc · February 18, 2015
William can you please add you code so we can try and help you.
0 Ray LeDuc · February 18, 2015
William can you please add you code so we can try and help you.
0 wiliam pierce · February 22, 2015
this is the css for the img but can you give me an example of what you mean
about "text between the two images" im not sure understand

img{
border:1 px solid blue;
position:absolute;
top:  0px;
left: 0px;
}
0 wiliam pierce · February 19, 2015
heres the code including css

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>im so tired</title>
<link rel="stylesheet" href="main.css"/>
</head>

<body>
   <div id="big_wrapper">
  
 <header id="top_header">
 <img src="mathy.jpg" alt="here tis" style="width:250px;height:93px">
 <h1>Nerdy Poker=Money and Girls</h1> 
 <h3>A Complete guide to crushing the 1-2 game</h3>
 </header>
  
  
 <div id="top_menu">
 <ul>
 <li><a href="#"> Home</a></li>
 <li><a href="#"> Tells</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#"> Tools</a></li>
 <li><a href="#"> Videos</a></li>
 <li><a href="#"> Blog</a></li>
 </ul>
 </div>
 
 
 <div id="left">
 <nav id="left"> 
    <ul>
      <li> <a href="#">Mathematics</a> </li>
      <li><a href="#">Semi-Bluffing</a></li>
      <li><a href="#">Bluffing</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
      <li><a href="#">SEARCH</a></LI>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
     <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
   <li><a href="#">About</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
     <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
    <li><a href="#">Live Play Tips</a></li>
    </ul>
 </nav>
  </div>
 
 
 
 
  <section id="middle">
 
  <div id="middle_header">
 
 
     <article> <a href="#"> 
      <header>
        <hgroup>
          <h1>starting hand charts</h1>
          <h2>what to play and when to play it</h2>
        </hgroup>
      </header>
      <footer>
        <p>your starting place of how to play poker</P>
      </footer>  </a>
     </article>
  </div>
  
  
  
  
        <article> 
  <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
   
     </article>
 
         <article>
    
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
  
      <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
  
       <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
       <article> 
   <a href="#"> 
      <header>
        <hgroup>
          <h1>top 10 all time tips</h1>
          <h2>remember these tips to keep you in the game</h2>
        </hgroup>
      </header>
      <footer>
        <p>this will help you avoid stepping into traps</P>
      </footer>  </a>
     </article>
  
     </article>
  
     </div>
  
   <div id="right">
  
  <object width="200" height="230"
data="http://www.youtube.com/v/1hFvxzTMw6k">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/biMS5tWUmrc">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/5oibCeJhXNc">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/5woPCbobdb0">
</object>
</div>

 <div id="the_footer">
 <ul>
 <li><a href="#"> Tells</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#"> Tools</a></li>
 <li><a href="#"> Videos</a></li>
 <li><a href="#"> Blog</a></li>
 </ul>
</div>

</body>   
</html> 

         AND THE CSS


*{
margin:0px;
padding:0px;
}

#big_wrapper{
margin:0px;
}

#top_header{
padding: 5px top;
border:1px solid black;
text-align:center;
float:right;
color:  #4169E1 ;
background: #D3D3D3;
margin: 1px   0px  1px  1px;
width:100%;
height:90px;
}

img{
border:1 px solid blue;
position:absolute;
top:    0px;
left:   0px;
}


 #top_menu{
background:  #4682B4;
color: #280000;
border:1px solid black;
}
#top_menu li {
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px tahoma;
}
#top_menu ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;
}



#left{
float:left;
color: #FFD700 ;
background:#4682B4;
margin:0px  0px 0px 0px;      
border:1px solid blue;
width:150px;
height:100%;
}
#left ul{
height:100%;
width:90px;
color: #FFD700 ;
margin:1px;
list-style-type:none;
}
#left ul li{
background-color: 0000FF ;
color: #4169E1;
margin:5px;
padding:15px;
height:1px;
width:104px;
border: 1px outset #E80000 ;
}
#left ul li a{
background-color: #4682B4 ;
display:block;
width:95px;
height:100%;
text-align:center;
text-decoration:none;
line-height:5px;
}
a{
color:  #ffffff ;
}

#middle{
background: #280000;
float:left;
margin:0px 0px 0px 0px;
width:650px;
height:100%;
}
#middle_header{
width:  658px;
text-align:center;
background:  #C0C0C0   ;
border-bottom:20px  solid gray;
padding: 5px;
margin: 1 px ;
margin-bottom:1px;
}
article {
display:inline-block;
width:45%;
text-align:center;
background:  #708090   ; 
border:1px solid red;
padding:14px;
margin: 0 auto;
margin-bottom:1px;
height:100px;
}
article footer {
text-align:center;
}
#right{
float:right;
background: #A0A0A0 ;
margin:1px 15px 10px 0;
width:170px;
height:100%;
}



#the_footer{  
position:bottom;
 background:  #A8A8A8;
color: #280000;
border:1px solid black;
}
#the_footer li {
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px tahoma;
}
#the_footer ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;
}
  • 1

HTML / CSS / Web Design

107,214 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators