# [SOLVED] Play Icon



## Acer2000 (Sep 17, 2006)

Hi there,

I would like to be able to add a Play button over a picture. The play button (see attached image) needs to be placed about the "images/author-picture.png", giving the impression that this is a video that can be played. 

Here is the CSS that I have put together:


```
}
.playicon {
  position: absolute;
  width: 32px;
  height: 32px;
  display: block;
  background: url(images/play-icon.png) no-repeat;
  text-indent: -99999px;
  top:50%;
  left:50%;
  margin:-16px 0 0 -16px;
  opacity:0.6;
  -webkit-transition:0.5s all ease
}
a:hover .playicon { opacity:1 }
/* Dynamic Home Page */
.no-padding-left {
  padding-left:0;
  border-left:0
}
```

And here is the HTML part of my website:


```
Videos
</div>
<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" height="80"style="padding-

top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" 

height="80" style="padding-top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" height="80" 

style="padding-top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>
</div>
<div class="cleaner_with_height"style="width: 629px; height: 30px"></div>

<div id="container-2">
<div id="line-features-3">
```

I think I need to put something like this to make it work. I just don't know where to place and if it is good code. Here it is: <span class="playicon">Play</span>

Thank you so much :smile:


----------



## TeenScripts (Oct 27, 2012)

You might want to play around with CSS's "z-index" property for this one. Basically you have the video set at Layer 0 ( z-index: 0; ) and your image set at Layer 1 ( z-index: 1; ). The image is then placed over your video .


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Can you explain a little more please? I don't think I understand :sad:


----------



## Fjandr (Sep 26, 2012)

*Re: Play Icon*

You've got the image and overlay in reverse order. You need to put the background image into the .css file, and the overlay goes into the html.

As should be obvious, the below will not look right unless you actually have the background and overlay images available. Otherwise, nothing will show up.

You may have to tweak the padding values in .overlay depending on the image size. I'd suggest using the developer tools in Chrome or Firefox in order to highlight exactly what is going on with each element, and how much room they take up. It'll save you a lot of grief when testing.


```
HTML
----------
<div>Videos</div>
<div class="img">
   <div class="author">
      <div class="overlay">
         <a target="_blank" href="Interview.html"><span class="play"><img src="play.png"></span></a>
      </div>
   </div>
   <div class="desc-title">Authors's Name</div>
   <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   <p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
   <div class="author">
      <div class="overlay">
         <a target="_blank" href="Interview.html"><span class="play"><img src="play.png"></span></a>
      </div>
   </div>
   <div class="desc-title">Authors's Name</div>
   <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</div>
   <p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
   <div class="author">
      <div class="overlay">
         <a target="_blank" href="Interview.html"><span class="play"><img src="play.png"></span></a>
      </div>
   </div>
   <div class="desc-title">Authors's Name</div>
   <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   <p><span class="author-boxes">By Name of the Video</span></p>
</div>

CSS
----------
.author {
   width:107px;
   height:80px;
   border-bottom:2px solid #fff;
   border-right:2px solid #fff;
   margin:5% 0 0 0;
   background:url(images/author-picture.png);
   background-size:cover;
   overflow:hidden;
}

.overlay {
   background:rgba(0,0,0,.5);
   text-align:center;
   padding: 30px 0 30px 0;
   opacity:0;
   -webkit-transition: opacity 0.5s ease;
}

.author:hover .overlay {
   opacity:1;
}
```


----------



## TeenScripts (Oct 27, 2012)

All you have to do is add "z-index: 0;" to your Video's CSS (or the div that holds your video) and "z-index: 1;" to your Image's CSS and the Image will be placed over the video. Overlay should work too, as specified above. Give them both a test!


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I don't know where the "Image's CSS" is ?? :sad:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Here is how I did it: 

}
.playicon {
position: absolute;
z-index: 0;
width: 32px;
height: 32px;
display: block;
background: url(images/play-icon.png) no-repeat;
text-indent: -99999px;
top:50%;
left:50%;
margin:-16px 0 0 -16px;
opacity:0.6;
-webkit-transition:0.5s all ease
}
a:hover .playicon { opacity:1 }

/* Dynamic Home Page */
.no-padding-left {
padding-left:0;
border-left:0
}


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I have tried it and it did not work. The original images that I have no longer show up. The reason for this is clear: You gave me an a different HTML. 

I did however add the necessary things to the CSS. 

This was the HTML I had:


```
Videos
</div>
<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" height="80"style="padding-

top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" 

height="80" style="padding-top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>

<div class="img">
<a target="_blank" href="Interview.html"><img src="images/author-picture.png" width="107" height="80" 

style="padding-top:8px;"></a>
<div class="desc-title">Authors's Name</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<p><span class="author-boxes">By Name of the Video</span></p>
</div>
</div>
<div class="cleaner_with_height"style="width: 629px; height: 30px"></div>

<div id="container-2">
<div id="line-features-3">
```
All I wanted was to place a player icon! I think I will do it with Photoshop and leave this altogether! :rofl:


----------



## TeenScripts (Oct 27, 2012)

You have to add z-index 1; to your play icon and not 0. You also have to add z-index 0; or z-index -1; to your img's CSS OR the div that holds your img. Have a look here if you still don't understand: http://www.w3schools.com/cssref/pr_pos_z-index.asp 

If you want, create a JSFiddle (www.jsfiddle.net) with your code, post a link here and I'll fix it for you and repost the link. 

Edit:I'll make one for you actually, give me a minute.


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*

I assume that this is what you want to do:


> I would like to be able to add a Play button over a picture.


Edit fiddle - JSFiddle

Pretty Easy  
You don't even need z-index, you can just mess with the margin tags. 

And if you'd like to add a play button for each image:

```
// CSS
.playicon1 {
    margin-left: -75px;
    margin-bottom: 23px;
}
.playicon2 {
    margin-left: -325px;
    margin-bottom: 70px;
}
// HTML
<div class="playicon1"></div>
<div class="playicon2"></div>
```
Hope that helps!


----------



## Fjandr (Sep 26, 2012)

*Re: Play Icon*

All you had to do was place the HTML I posted over the section of code you posted (though you may need to add a closing </div> after "Videos" since there's an orphaned one there in your code with no matched opening <div>). Yes, it's different. That's because it needs to be different for what you want done to work*. Then copy the CSS I posted into your CSS file. All the work is done, and I tested it for functionality. It works perfectly.

*(unless you want the play icon always visible over the author picture, and then you may as well just use Photoshop.)


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I have tried it and it did not work. 

Can you in one post, paste the HTML code and the CSS code that worked for you? I'll really appreciate it. :thumb:


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*



Acer2000 said:


> I have tried it and it did not work.
> 
> Can you in one post, paste the HTML code and the CSS code that worked for you? I'll really appreciate it. :thumb:


Did you see the fiddle I posted above? (all code is included)
TeenScript's Fiddle 

:thumb:


----------



## Fjandr (Sep 26, 2012)

*Re: Play Icon*

What I had working can be found here: Daily Newspaper

It's near the bottom.


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Hi Fjander,

I am trying to create a header similar to the attached header (please see attached picture), to fit the following page: 
Daily Newspaper

It will substitute the yellow header. 

I have created the following to see if it will work but it did not:

css:


```
#menu {
float: left;
width:100%;
height:25px;
border-top: 3px solid #181B1C;
background:#F7F5F5;
position:relative;
}

.navigation {
margin: 0;
padding: 0;
list-style: none;
}

.navigation li {
float: left;
padding:0;
line-height:25px;
}
   
.navigation li a {
display: block;
text-decoration: none;
text-transform: uppercase;
color:#292525;
padding: 0 18px;
border-right:1px dotted #6D7989;
text-shadow:1px 1px 0 #FFF;
font-weight:bold;
font-family: Times New Roman, Serif;
}

/* commented backslash mac hiding hack \*/ 
* html .navigation li a {height:1%;   position:relative;}
/* end hack */ 

.navigation li:hover a, .navigation  li.over a {
color: #FFF;/* hover color */
background:#CA0002;/* hover background color */
text-shadow:1px 1px 0 #7D2727;/* hover text-shadow color */
}

/* set current page link color, background and text-shadow */
#home .navigation .home a, #link1 .navigation .link1 a,
#link2 .navigation .link2 a, #link3 .navigation .link3 a,
#link4 .navigation .link4 a, #link5 .navigation .link5 a,
#link6 .navigation .link6 a, #link7 .navigation .link7 a {
color:#fff;
background:#CA0002;
text-shadow:1px 1px 0 #7D2727;
}

/*-------- Navigation --------*/

#head-bar #date {
float: left;
line-height: 6px;
width: 308px;
text-align: right;
}

#head #inner {
float: left;
width: 100%;
}

#head #inner #logo {
float: left;
height: 122px;
}

#head #inner #logo a {
position: relative;
top:-22px;
}

#head #inner #head_banner {
float: left;
position: relative;
padding: 9px 0;
font-size: 15px;
line-height: 1.4;
width: 468px;
color: #222;
font-family: Georgia, Times New Roman;
}

.blue {
color: #CD0021;
font-weight: bold;
}

#header #inner #head_banner  a:hover {
color:#CD0021;
text-decoration:underline;
}

#header #inner #head_banner img {
padding: 10px 0 0 5px;
}

#head #inner #head_banner .text img {
position : absolute;
left: 20px;
top: -18px;
padding: 0;
}

#head #inner #head_banner .text {
padding-left : 180px;
}

#head #inner #right {
float: right;
}

#head #social {
margin-top: 16px;
text-align: right;
float: right;
clear: both;
}

#head #social li {
margin-left: 12px;
display: inline;
float: left;
}

#NewsFlash {
line-height: 40px;
height: 40px;
float: left;
width: 100%;
color: #222;
font-size: 14px;
border-top: 1px solid #333;
border-bottom: 2px solid #333;
font-family: Times New Roman;
}

#NewsFlash span {
color: #CD0021;
font-weight: bold;
margin-right: 15px;
font-size: 13px;
text-transform: uppercase;
font-family: Times New Roman;
}
/*-------- News Flash --------*/
```
HTML:


```
<div id="menu">
    <ul class="navigation">
        <li class="home"><a href="">HOME</a></li>
        <li class="link1"><a href="">LINK</a></li>
        <li class="link2"><a href="">LINK</a></li>
        <li class="link3"><a href="">LINK</a></li>
        <li class="link4"><a href="">LINK</a></li>
        <li class="link5"><a href="">LINK</a></li>
        <li class="link6"><a href="">LINK</a>
       
    </ul>
</div> <!-- End of Navigation-->
</body>

		
		
		 		<div id="NewsFlash">
			<span>NEWS:</span>News Updates go here. News Updates go here. News Updates go here. </div>
```
Will appreciate your help.


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I am attaching the yellow header which is a snapshot of the website


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

And yes, thank you very much the player code did finally work. It looks very good. :thumb:


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*

My pleasure. 
Let's see if I fixed that header of yours: 
TeenScripts Fiddle

Is this what you wanted?


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

TeenScripts you're the real McCoy! Thanks a bunch man! Is there a way to make the "Home" red at all times?


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I am attaching a snapshot of the part. So Home will remain red along with the horizontal line underneath it.


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*

Er' ya go: 
TeenScripts Fiddle-2

Here's what I added:

```
.navigation .home a { 
 background:#CA0002;  
 color: white;
 text-shadow:1px 1px 0 #7D2727;
}
```
*Edit:* I didn't see your 2nd post with the horizontal red line. 
I'll cook it up in a sec.


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

A big thank you my friend :thumb: This is beautiful. :smile:


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*



Acer2000 said:


> A big thank you my friend :thumb: This is beautiful. :smile:


Np haha, I'm enjoying this. 
Tell me if you need anything else. 

TeenScripts Fiddle

I added: 

```
border-bottom: 2px solid #CA0002;
```
To the _#menu_


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Thank you so much. :thumb: I sure will. :wink:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Hi TeenScripts,

I am trying hard to place a text and a picture next to the picture on the page that you and I worked on. 

Here is what I came up with so far. The problem is positioning them. I am attaching a picture to demonstrate how they need to look like. 

Here is the HTML:


```
<div id="head_banner">
									 <div class='text'>  
										<img border="0" src="images/ipad.png" width="133" height="123" style="position:absolute; top: 8px; left: 5px; z-index: 3;">Some Latin filler text to fill the empty space. So this is some Latin text that will fill the empty space. To learn more, click here 
										<a href="http://">
										<span class="blue">More</span></a></a></div>

  
								 
			</div>
			
			<div id="right">
				<div id="social" style="width: 153px; height: 35px">
					<ul>
						<li class="button">
						<img border="0" src="images/picture.jpg" width="76" height="100" style="position:absolute; top: 30px; z-index: 50;"></li></li>
						</li>						
  					</ul>
				</div>
				
			</div>
```
Here is the CSS (please remove any part from the below code if unnecessary. I have copied it from my page)


```
#head-bar #date {
float: left;
line-height: 6px;
width: 308px;
text-align: right;
}

#head #inner {
float: left;
width: 100%;
}

#head #inner #logo {
float: left;
height: 122px;
}

#head #inner #logo a {
position: relative;
top:-22px;
}

#head #inner #head_banner {
float: left;
position: relative;
padding: 9px 0;
font-size: 15px;
line-height: 1.4;
width: 468px;
color: #222;
font-family: Georgia, Times New Roman;
}

.blue {
color: #CD0021;
font-weight: bold;
}

#header #inner #head_banner  a:hover {
color:#CD0021;
text-decoration:underline;
}

#header #inner #head_banner img {
padding: 10px 0 0 5px;
}

#head #inner #head_banner .text img {
position : absolute;
left: 20px;
top: -18px;
padding: 0;
}

#head #inner #head_banner .text {
padding-left : 180px;
}

#head #inner #right {
float: right;
}

#head #social {
margin-top: 16px;
text-align: right;
float: right;
clear: both;
}

#head #social li {
margin-left: 12px;
display: inline;
float: left;
}
```
Thank you so much!


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I have tried this one too:

<div>Some Latin filler text to fill the empty space. So this is some Latin text that will fill the empty space. To learn more, click here <span class="blue">More</span> </div>
<img src="images/Picture.jpg" alt= width="91" height="124" />

The problem however is that it placed the text above the picture.


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*

Hey! 
Sorry I couldn't get to it sooner. I'm coming down with a cold. 
I had to reduce the image's size to get it to fit nicely. Tell me if that's what you wanted:

*EDIT* (fixed the logo's position, it was up too high): 
TeenScripts Fiddle


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Oh! Thank you so much! I wish you a speed recovery and I hope you will start feeling better soon. :flowers:

This is excellent. I was just wondering how I can move the text more to the left. I tried with padding but did not work.

Before you posted, I came up with the following code:


```
<div style="padding-top: 8px; padding-bottom: 5px; ">Some Latin filler text to fill the empty space. </br> 
So this is some Latin text that will fill the empty space. </br>To learn more, click here More
<a href="http:///"> <span class="blue">More</span></a></a></div><img border="0" src="images/Pic-1.png" width="54" height="70" style="position:absolute; top: 29px; z-index: 5; padding-left: 850px;"> </div>
```
It did bring the desired result but I am still unable to move the text to the left. I am sure yours is better :grin:


----------



## TeenScripts (Oct 27, 2012)

*Re: Play Icon*



Acer2000 said:


> This is excellent. I was just wondering how I can move the text more to the left. I tried with padding but did not work.


Thanks!
Here's what I got: 
TeenScripts Fiddle-2

It wasn't evident, but I took a guess and added _float: right_ to the text's css, and it worked!

*EDIT:* I noticed that you had lot's of selectors referencing _#head_ in your CSS.
Is that something that you're planning on adding later? If not, it'd be good practice too remove them and reduce the code's size. :smile:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Thank you so much. Beautiful! :thumb: :smile:

Yes, I plan to remove a few of the selectors. Several of these are no longer needed :wink:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

Hi TeenScripts,

I hope you're feel good today. 

I have created a horizontal bar for the page. The problem is that I am having some difficulty integrating a search form inside the horizontal bar. 

I am including the HTML for the horizontal bar, the HTML for the search form, and the CSS for the search form. Will appreciate your help.

Here we go:


```
<div class="left" style="width: 100%; height: 25px; background-color: #000;"><div style="color: #B3D7FC; font-family: Georgia; font-size: 12px; padding: 3px;"> <span class="steel-blue">Friday, March 28, 2014 | </span>My Blog <a href="https://"> <img src="images/facebook.png" style="float:right; padding-right:10px;"/></a> <a href="https://twitter.com/"><img src="images/twitter-icon.png" style="float:right; padding-right:5px;"/></a> </div> </span> </div>
```


```
<form id="searchbox_ 001749465988171631582:99_cjzn4ukw" action="http://www.my blog.com/search.html">
<input value="001049460402171621522:4l_cnsa4uku" name="cx" type="hidden">
<input value="FORID:11" name="cof" type="hidden">
<input id="q" style="width:120px;" name="q" size="70" ;="" input="" placeholder="Search..." type="text">
<input class="button" name="Search" value="GO" type="submit">
</form>
```
CSS for the search form:


```
#page_menu form {
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;   
}

#page_menu form input {
width: 120px;
color: #FFF;
background: #000;
height: 20px;
border: 1px solid #666;
}

#page_menu form .button {
border: none;
background: none;
color: #FFD800;
font-weight: bold;
cursor: pointer;
width: 40px;
}
```


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

TeenScripts,

What I just wanted to mention is that please feel free to change the design of the search form so that it would fit inside the black horizontal bar. Just any design you think would look good and fit well. I like the horizontal bar to maintain its height. I personally thing that the Go button would be too large to fit in :grin:

I have included a search icon in this post. Perhaps it can used.


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

TeenScripts;

I am trying to add a jpg logo with a 377x78 in size instead of the text and it is not working properly. The jpg image will land in the upper right hand size of the website. How can I make it work? 

We are talkin about this part: <div class="topl"><h1>Daily Newspaper</h1></div>

:thumb:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

TeenScripts,

Please disregard my last post. 

Is there a way I can add text above it?

I created the following:

.text-1 {
font-family: Georgia;
font-size: 30px;
font-weight: bold;
float: right;
}

<span class="text-1">My Blog</span>

Didn't work well :angel:


----------



## Acer2000 (Sep 17, 2006)

*Re: Play Icon*

I was able to figure it out. Thank you so much for all the support my friends. :thumb:


----------



## Fjandr (Sep 26, 2012)

Once you have your base code hosted, and are trying to wrangle it into doing exactly what you want, you really should check out the developer tools in Opera, Chrome, and/or Firefox.

While I'm not intimately familiar with any but Opera, I believe they all have roughly the same level of functionality. You can make dynamic changes to the HTML & CSS (among other things) and have the changes happen instantly. At least with Opera, it shows you every single CSS inheritance, what takes precedence at the end, and what overrides what else & exactly where and when it does so. To access them, open your browser to the page, right-click, and select "Inspect Element" to get started. Once you start using it, you'll never know how you did without it.


----------



## Acer2000 (Sep 17, 2006)

Hi Fjander,

Thank you very much for your good advice. I always test my page in various browsers. Yesterday, I tested it on my 3.4 inch Nokia Lumia 610 smartphone and the ipad.png picture will not work very well-it will show to the right and will be above the author.jpg picture. :blush:

Will appreciate your help on how to fix this problem. 

Here is the HTML code:


```
<div class="topl"><h1>News Blog</h1></div> 
<img border="0" src="images/ipad.png" width="133" height="123" style="position:absolute; top: 2px; left: 860px; z-index: 3;">
<div id="text"><span class="firstletter">E</span>ach week, we publish an article by author, </br> Author Name. The work focuses on the engineering </br>, projects, for next year. <a href="http://weblink.html"><span class="blue"> Read the article</span> </a>
</div></span></a></a> <img src="images/author.jpg" id="picture" width="70" height="90" />
```
Here is the relevant CSS:


```
.blue {
color: #CD0021;
font-weight: bold;
font-size: 11px;
}

#picture {
margin-left: 890px;
margin-top: -75px;
margin-bottom: 1px;
}
#text {
float: right;
padding-top: 10px;
padding-right: 70px;
}

.firstletter
{
font-size:140%;
color:#333;
}
```


----------



## Fjandr (Sep 26, 2012)

I don't have a means of testing for that screen size, so I can't help there. What I can say is that it's relatively easy to create CSS layouts optimized for multiple screen sizes.

Using the "media=handheld" attribute in an additional <link> tag applies the linked stylesheet to any mobile device accessing the page. Instead of trying to get a single stylesheet to cover all devices, you can target by type.


----------



## Acer2000 (Sep 17, 2006)

Fjandr,

Many thanks for your reply. I think the problem can be solved if one solves the main problem. Here we go:

The below works fine in Google Chrome but looks messed up in IE. (I am a windows 8 user)

I am attaching a snapshot of the way the header should look like as far as the positioning of the pictures (iPad and owl) go. 

Will greatly appreciate your help. 

HTML of the header:


```
<div class="container">
<body><div class="container">
<img border="0" src="images/logo.jpg" width="377" height="70">
<img src="images/ipad.png" width="133" height="123" style="position:absolute; top: 3px;  z-index: 3;">
<div id="text"><span class="firstletter">E</span>ach week, we publish an article by author, </br> Author Name. Lorem ipsum dolor sit amet, consectetuer </br>ipsum dolor sit amet, consectetuer <a href="http://link.com/"><span class="blue"> Visit today!</span> </a>
</div></span></a></a> <img src="images/reading.gif" id="picture" width="70" height="90" /> <!-- end of head -->

<div id="menu">
    <ul class="navigation">
        <li class="home" id="active"><a href="http://website.com">HOME</a></li>
        <li class="link1"><a href="http://list-1.html">Link</a></li>
        <li class="link2"><a href="http://list-1">Link</a></li>
        <li class="link3"><a href="http://list-1">Link</a></li>
        <li class="link4"><a href="http://list-1">Link</a></li>
		</ul> 
</div>  <!-- End of Navigation-->
```
Here is the CSS


```
body,td,th {
font-family:Georgia, serif;
font-size:14px;
line-height:20px;
color:#333;
}

body {
background-color:#FFF;
margin:0;
}

img {
border:none;
}

a {
text-decoration: none;
font-family:Georgia;
font-size: 13px;
color:#CD0021;
}

a:hover {
color:#003872;
}

/*a:visited {color:#0099FF; text-decoration:none;}*/

.container {
margin-left:auto;
margin-right:auto;
width:960px;
}

.header {
min-height:78px;
width:100%;
margin:0;
}

h1 {
font-family:Georgia, serif;
font-size:52px;
color:#CD0021;
line-height:100px;
margin:0;
}

h2 {
font-family:Georgia, serif;
font-size:13px;
color: #333;
line-height:30px;
margin:0;
}

h3 {
font-family:Georgia, serif;
font-size:16px;
line-height:24px;
color:#3E7F41;
padding-bottom: 1px;
margin:0;
}

.steel-blue {
color: #fff;
font-weight: normal;
}

.topl {
width:49%;
float:left;
height: 75px;
}

.row2r {
width:470px;
float:right;
border-top:5px #333 solid;
}

.row3l {
width:470px;
float:left;
}

.footer {
width:100%;
float:left;
border-top:1px #333 solid;
text-align:center;
margin-top:20px;
font-weight:700;
}

.row1l h2,.row2 h2 {
font-family:Georgia, serif;
font-size:30px;
line-height:34px; /* Changed from 36 */
margin:0;
}

.row1,.row2,.row3 {
width:100%;
margin-top:15px; /* Changed from 20 */
}

.row1l,.row2l {
width:470px;
float:left;
border-top:5px #FFF solid;
}

.row50 {
width:470px;
float:left;
border-top:5px #333 solid;
}

.row1r,.row3r {
width:470px;
float:right;
}

.row1rl,.row3rl,.row3ll {
width:225px;
float:left;
border-top:2px solid #333;
font-family: Georgia;
font-size: 11px;
color: #333;
}

.row1rr,.row3rr,.row3lr {
width:225px;
float:right;
border-top:2px solid #333;
font-family: Georgia;
font-size: 11px;
color: #333;
}



.row1t,.row3t {
width:470px;
float:right;
}

.row1rt,.row3rt,.row3llt {
width:225px;
float:left;
border-top:2px solid #FFF;
font-family: Georgia;
font-size: 12px;
}

.more {
text-decoration: none;
font-family:Georgia;
font-size: 10px;
color:#CD0021;
}
 
a:hover .more {color:#003872;}  


.row1rv,.row3rv,.row3lv {
width:225px;
float:right;
border-top:2px solid #FFF;
font-family: Georgia;
font-size: 12px;
color: #333;
}


/* foot */
#foot { clear: both; font-size: .9em; color:#2D648A; padding: 5px 0 10px; }
#foot a { margin: 0 15px 0 0; color:#555; font-size: .8em; }
#links { float: right; color:#2D648a; }

#foot a {
font-size:font-size: .9em;
font-weight:normal;
color:#555;
text-decoration:none;
}

#foot a:hover {
color:#333;
text-decoration:underline;
}


/* footer */

#footer {
padding-bottom: 30px;
}
#footer-bar {
display: block;
background: #000;
width: 940px;
height: 30px;
margin: 0 auto;
}
#footer-categories {
padding-top: 30px;
}

.footer-category-list {
padding: 0;
margin: 0;
list-style: none;
}

.footer-category-list li {
font-family: Georgia, Times, serif;
font-size: 12px;
line-height: 1.6;
}

.footer-category-list li a.main-category {
text-transform: uppercase;
font-weight: bold;
color: #e65a1e;
}

.footer-category-list li a {
color: #000;
}

#footer-copyright {
padding-top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer-copyright a {
color: #e65a1e;
}

#footer-search-container {
float: right;
width: 200px;
height: 24px;
border-top: 1px solid #b4b4b4;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #b4b4b4;
}

#footer-search {
display: inline-block;
width: 200px;
height: 24px;
padding: 0;
margin: 0;
border: 0;
clear: left;
}

#footer-search input.search {
width: 162px;
height: 24px;
margin: 0;
padding: 0 7px;
border: 0;
color: #646464;
float: left;
}

#footer-search input.submit {
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 0;
background: url(images/search-black.png) no-repeat 0px 0px;
float: left;
}

/* Beginning of categories */

#categories {
position: fixed;
width: 120px;
top: 190px;
right: -120px;
z-index: 120;
background-color: #222;
padding-bottom: 16px;
}

#categories h4 {
background-color: #CD0021;
padding: 10px;
color: #FFF;
font-variant: small-caps;
text-align: center;
font-family: Georgia;
font-size: 10px;
position: absolute;
left: -30px;
width: 10px;
}

#categories h5 {
font-variant: small-caps;
color: #FFF;
margin: 16px 16px 0px 16px;
}

#categories ul, #categories h5 {
margin: 0px 16px;
}

/* End of Categories */


#menu {
float: left;
width:100%;
height:22px;
border-top: 2px solid #222;
border-bottom: 1px solid #222;
background:#F7F5F5;
position:relative;
margin-bottom: 3px;
}

.navigation {
margin: 0;
padding: 0;
list-style: none;
}

.navigation li {
float: left;
padding:0;
line-height:25px;
}
   
.navigation li a {
display: block;
text-decoration: none;
color:#292525;
padding: 0 18px;
height:22px;
border-right:1px dotted #6D7989;
text-shadow:1px 1px 0 #FFF;
font-weight: bold;
font-family: Georgia, Serif;
font-size: 11px;
}

/* commented backslash mac hiding hack \*/ 
* html .navigation li a {height:1%;   position:relative;}
/* end hack */ 

.navigation li:hover a, .navigation  li.over a {
color: #FFF;/* hover color */
background:#CD0021;/* hover background color */
text-shadow:1px 1px 0 #7D2727;/* hover text-shadow color */
}

/* set current page link color, background and text-shadow */
#link2 .navigation .link2 a, #link3 .navigation .link3 a,
#link4 .navigation .link4 a, #link5 .navigation .link5 a,
#link6 .navigation .link6 a, #link7 .navigation .link7 a {
color:#fff;
background:#CA0002;
text-shadow:1px 1px 0 #7D2727;
}
/* Link Stay Red */
.navigation .home a {
background:#CD0021;  
color: white;
height:22px;
text-shadow:1px 1px 0 #7D2727;
font-weight: bold;
}

/*-------- Navigation --------*/

.blue {
color: #CD0021;
font-weight: bold;
font-size: 11px;
}

#picture {
margin-left: 890px;
margin-top: -75px;
margin-bottom: 1px;
}
#text {
float: right;
padding-top: 10px;
padding-right: 70px;
}

.firstletter
{
font-size:140%;
color:#333;
}
```
TeenScripts, where are you dude? :grin:


----------



## Fjandr (Sep 26, 2012)

I don't have a means of testing for the latest version of IE either, unfortunately. I don't have a Win8 machine available.

It's entirely possible that workarounds for IE are necessary. That's been a common theme throughout the entirety of IE's history.

It's late, and I've got chemo tomorrow, so I probably won't have a chance to test this out where I can until tomorrow evening (or possibly sometime Tuesday). I'll see what I can make of it if TS doesn't jump in somewhere in the meantime.


----------



## Acer2000 (Sep 17, 2006)

All the very best Fjandr :flowers:


----------



## TeenScripts (Oct 27, 2012)

Oh damn. I've been studying this week and haven't had time to check. I'll get right to it tomorrow (it's getting late here) If you can, make a fiddle and tell me what needs to be done (I see a lot of requests previously but don't know where to start or what I'm suppose to be fixing). Again, sorry I haven't been active!

EDIT: I haven't tested this out, but I'm sure that it'll work.

What I understood was that you have you're logo image and you're owl image and the logo is placed on top of the owl image, right?
If so,
In the CSS of you're logo, add 'z-index: 1;' and 'position: absolute'. In the CSS of you're owl add the same two things but change 'z-index:1' to 'z-index:2'. It's a nifty little trick and has never failed me. It's also cross-browser compatible to my knowledge. 

Good luck!


----------



## TeenScripts (Oct 27, 2012)

Ignore the edit above. 

If you're looking to get the iPad's image to display over the logo, Add "z-index: 2;" to the CSS of you're iPad. And "z-index: 1;" to the CSS of you're Logo. If you don't know what z-index does, I like to think of the numbers as floors. (Like at a hotel lol). Thus z-index:1 would be the first floor which is placed under the 2nd floor, z-index: 2. and so on...(logic!)


----------



## Acer2000 (Sep 17, 2006)

Hi TeenScripts,

Great to hear from you. No, it shouldn't display over the logo. In fact this is what I am trying to correct. I am attaching a picture which would give you and idea as to what I am trying to achieve. 

So we have three images:

1. The Logo itself which is (the "Logo Here" )
2. The Ipad
3. The owl


----------



## Acer2000 (Sep 17, 2006)

TeenScripts,

We're still talking about the webpage that you uploaded into fiddle :smile:

Here is the HTML of the header:


```
<div class="container">
<body><div class="container">
<img border="0" src="images/logo.jpg" width="377" height="70">
<img src="images/ipad.png" width="133" height="123" style="position:absolute; top: 3px;  z-index: 3;">
<div id="text"><span class="firstletter">E</span>ach week, we publish an article by author, </br> Author Name. Lorem ipsum dolor sit amet, consectetuer </br>ipsum dolor sit amet, consectetuer <a href="http://link.com/"><span class="blue"> Visit today!</span> </a>
</div></span></a></a> <img src="images/reading.gif" id="picture" width="70" height="90" /> <!-- end of head -->

<div id="menu">
    <ul class="navigation">
        <li class="home" id="active"><a href="http://website.com">HOME</a></li>
        <li class="link1"><a href="http://list-1.html">Link</a></li>
        <li class="link2"><a href="http://list-1">Link</a></li>
        <li class="link3"><a href="http://list-1">Link</a></li>
        <li class="link4"><a href="http://list-1">Link</a></li>
		</ul> 
</div>  <!-- End of Navigation-->
```
Here the CSS for the entire page (please see your fiddle upload) 


```
body,td,th {
font-family:Georgia, serif;
font-size:14px;
line-height:20px;
color:#333;
}

body {
background-color:#FFF;
margin:0;
}

img {
border:none;
}

a {
text-decoration: none;
font-family:Georgia;
font-size: 13px;
color:#CD0021;
}

a:hover {
color:#003872;
}

/*a:visited {color:#0099FF; text-decoration:none;}*/

.container {
margin-left:auto;
margin-right:auto;
width:960px;
}

.header {
min-height:78px;
width:100%;
margin:0;
}

h1 {
font-family:Georgia, serif;
font-size:52px;
color:#CD0021;
line-height:100px;
margin:0;
}

h2 {
font-family:Georgia, serif;
font-size:13px;
color: #333;
line-height:30px;
margin:0;
}

h3 {
font-family:Georgia, serif;
font-size:16px;
line-height:24px;
color:#3E7F41;
padding-bottom: 1px;
margin:0;
}

.steel-blue {
color: #fff;
font-weight: normal;
}

.topl {
width:49%;
float:left;
height: 75px;
}

.row2r {
width:470px;
float:right;
border-top:5px #333 solid;
}

.row3l {
width:470px;
float:left;
}

.footer {
width:100%;
float:left;
border-top:1px #333 solid;
text-align:center;
margin-top:20px;
font-weight:700;
}

.row1l h2,.row2 h2 {
font-family:Georgia, serif;
font-size:30px;
line-height:34px; /* Changed from 36 */
margin:0;
}

.row1,.row2,.row3 {
width:100%;
margin-top:15px; /* Changed from 20 */
}

.row1l,.row2l {
width:470px;
float:left;
border-top:5px #FFF solid;
}

.row50 {
width:470px;
float:left;
border-top:5px #333 solid;
}

.row1r,.row3r {
width:470px;
float:right;
}

.row1rl,.row3rl,.row3ll {
width:225px;
float:left;
border-top:2px solid #333;
font-family: Georgia;
font-size: 11px;
color: #333;
}

.row1rr,.row3rr,.row3lr {
width:225px;
float:right;
border-top:2px solid #333;
font-family: Georgia;
font-size: 11px;
color: #333;
}



.row1t,.row3t {
width:470px;
float:right;
}

.row1rt,.row3rt,.row3llt {
width:225px;
float:left;
border-top:2px solid #FFF;
font-family: Georgia;
font-size: 12px;
}

.more {
text-decoration: none;
font-family:Georgia;
font-size: 10px;
color:#CD0021;
}
 
a:hover .more {color:#003872;}  


.row1rv,.row3rv,.row3lv {
width:225px;
float:right;
border-top:2px solid #FFF;
font-family: Georgia;
font-size: 12px;
color: #333;
}


/* foot */
#foot { clear: both; font-size: .9em; color:#2D648A; padding: 5px 0 10px; }
#foot a { margin: 0 15px 0 0; color:#555; font-size: .8em; }
#links { float: right; color:#2D648a; }

#foot a {
font-size:font-size: .9em;
font-weight:normal;
color:#555;
text-decoration:none;
}

#foot a:hover {
color:#333;
text-decoration:underline;
}


/* footer */

#footer {
padding-bottom: 30px;
}
#footer-bar {
display: block;
background: #000;
width: 940px;
height: 30px;
margin: 0 auto;
}
#footer-categories {
padding-top: 30px;
}

.footer-category-list {
padding: 0;
margin: 0;
list-style: none;
}

.footer-category-list li {
font-family: Georgia, Times, serif;
font-size: 12px;
line-height: 1.6;
}

.footer-category-list li a.main-category {
text-transform: uppercase;
font-weight: bold;
color: #e65a1e;
}

.footer-category-list li a {
color: #000;
}

#footer-copyright {
padding-top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#footer-copyright a {
color: #e65a1e;
}

#footer-search-container {
float: right;
width: 200px;
height: 24px;
border-top: 1px solid #b4b4b4;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-left: 1px solid #b4b4b4;
}

#footer-search {
display: inline-block;
width: 200px;
height: 24px;
padding: 0;
margin: 0;
border: 0;
clear: left;
}

#footer-search input.search {
width: 162px;
height: 24px;
margin: 0;
padding: 0 7px;
border: 0;
color: #646464;
float: left;
}

#footer-search input.submit {
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 0;
background: url(images/search-black.png) no-repeat 0px 0px;
float: left;
}

/* Beginning of categories */

#categories {
position: fixed;
width: 120px;
top: 190px;
right: -120px;
z-index: 120;
background-color: #222;
padding-bottom: 16px;
}

#categories h4 {
background-color: #CD0021;
padding: 10px;
color: #FFF;
font-variant: small-caps;
text-align: center;
font-family: Georgia;
font-size: 10px;
position: absolute;
left: -30px;
width: 10px;
}

#categories h5 {
font-variant: small-caps;
color: #FFF;
margin: 16px 16px 0px 16px;
}

#categories ul, #categories h5 {
margin: 0px 16px;
}

/* End of Categories */


#menu {
float: left;
width:100%;
height:22px;
border-top: 2px solid #222;
border-bottom: 1px solid #222;
background:#F7F5F5;
position:relative;
margin-bottom: 3px;
}

.navigation {
margin: 0;
padding: 0;
list-style: none;
}

.navigation li {
float: left;
padding:0;
line-height:25px;
}
   
.navigation li a {
display: block;
text-decoration: none;
color:#292525;
padding: 0 18px;
height:22px;
border-right:1px dotted #6D7989;
text-shadow:1px 1px 0 #FFF;
font-weight: bold;
font-family: Georgia, Serif;
font-size: 11px;
}

/* commented backslash mac hiding hack \*/ 
* html .navigation li a {height:1%;   position:relative;}
/* end hack */ 

.navigation li:hover a, .navigation  li.over a {
color: #FFF;/* hover color */
background:#CD0021;/* hover background color */
text-shadow:1px 1px 0 #7D2727;/* hover text-shadow color */
}

/* set current page link color, background and text-shadow */
#link2 .navigation .link2 a, #link3 .navigation .link3 a,
#link4 .navigation .link4 a, #link5 .navigation .link5 a,
#link6 .navigation .link6 a, #link7 .navigation .link7 a {
color:#fff;
background:#CA0002;
text-shadow:1px 1px 0 #7D2727;
}
/* Link Stay Red */
.navigation .home a {
background:#CD0021;  
color: white;
height:22px;
text-shadow:1px 1px 0 #7D2727;
font-weight: bold;
}

/*-------- Navigation --------*/

.blue {
color: #CD0021;
font-weight: bold;
font-size: 11px;
}

#picture {
margin-left: 890px;
margin-top: -75px;
margin-bottom: 1px;
}
#text {
float: right;
padding-top: 10px;
padding-right: 70px;
}

.firstletter
{
font-size:140%;
color:#333;
}
```
Thank you my dear friend!


----------



## Acer2000 (Sep 17, 2006)

TeenScripts? :smile:


----------



## Acer2000 (Sep 17, 2006)

I was able to figure it out. Issue has been resolved.


----------

