Print Page - Coding Issue

Title: Coding Issue
Post by: Tsuchino on June 14, 2015, 02:22:25 PM

Hello guys,

I would appreciate some help regarding a problem I encountered in CSS.

I can't get the Logo image to be displayed in front of all the other elements on the website.

This is how the logo should look:
(http://i280.photobucket.com/albums/kk163/ClaireG90/final%204_zps6kdecukk.jpg)

And this is how it looks right now:
(http://i280.photobucket.com/albums/kk163/ClaireG90/Capture_zpsvmsxr8va.png)

After some research I understood it's a z-index issue, so I changed the z-index of the big picture to 10px and the logo z-index to 15. It still didn't work.

Attaching my CSS and HTML.

HTML

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Interview Test

+356 1234 5678

info@demsey.com.mt

Demsey
Aluminium

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.

Our
Services

What
We Believe

CSS

div{
display: block;
}

body{
margin: 0;
padding: 0;
background-image: url("images/background.jpg");
background-size: cover;
}

.wrapper{
position: relative;
}
.header{
width: 960px;
margin: 0 auto;
position: relative;
z-index: 10;
}

.headerImage{
width: 20px;
height: 20px;
padding-top:15px;
padding-left:10px;
padding-right:2px;
}

.contactInformation{
float:right;
height:50px;
}

.telephone{
float:left;
}

.telephonePicture{
background-repeat: no-repeat;
float: left;
}

.telephoneText{
font-family: Calibri, Times New Roman;
font-style: italic;
color: white;
float: left;
}

.email{
float:left;
}

.emailPicture{
background-repeat:no-repeat;
float: left;
}

.emailText{
font-family: Calibri, Times New Roman;
font-style: italic;
color: white;
float: left;
}

.twitter{
float:left;
}

.facebook{
float:left;
}

.vimeo{
float:left;
}

.headerBottom{
width: 100%;
height: 70px;
color: #939393;
font-family: Calibri, Times New Roman;
font-size: 15px;
text-align: center;
margin: 0 auto;
background-color: White;
float: right;
}

.menu{
width: 55%;
float: right;
}

.menu ul{
width: 100%;
margin: 0 auto;
list-style-type: none;
float: left;
padding-left: 15px;
}

.menu ul li{
float: left;
text-align: center;
height: 75px;
line-height: 75px;
padding-left: 15px;
}

.logo{
width:45%;
float:left;
margin-top:-10px;
z-index:15px;
position:relative;
overflow:hidden;
}

.slideshow{
position: relative;
clear: left;
float: left;
z-index: 10px;
}

.allBoxes{
border: 3px solid red;
position:relative;
padding:50px 0px 30px 0px;
}

.box{
width:305px;
height:300px;
float:left;
margin-left:10px;
}

.box-title{
font-family: Calibri, Times New Roman;
color: White;
font-size: 20px;
}

p{
font-family: Calibri, Times New Roman;
color: White;
}

.footerBottom{
width: 100%;
height: 5px;
background-color: #ff8000;
float: right;
margin-bottom:50px;
}

Many thanks :)

Claire

Title: Coding Issue
Post by: Liberator on June 15, 2015, 10:14:59 AM

No idea on building web pages at all.....

But from looking into z-index layering it would appear that the expected value is an integer only, so maybe it's ignoring your logos z-index of 15px as an unset variable and converting it to 0, just "z-index: 15;".

Title: Coding Issue
Post by: Jamoe on June 15, 2015, 10:34:49 AM

Is there an accessible version of the page?

I could spend 10 minutes messing with it using the developer tool bar.

Title: Coding Issue
Post by: DrunkenZombiee on June 15, 2015, 03:58:22 PM

As Jamoe says would be useful to access the page and much about with the code on there to see if we can get it on top.

Cheers,

DZ

Title: Coding Issue
Post by: Tsuchino on June 15, 2015, 06:29:04 PM

Here's a link to the file including all the assets. (Hope it works.) http://www.filedropper.com/testproject_1 (http://www.filedropper.com/testproject_1)
Liberator, I tried that and it didn't work either.

Thanks alot.

Title: Coding Issue
Post by: Jamoe on June 15, 2015, 08:58:02 PM

I forgot to ask, which browser is that happening in?

Title: Coding Issue
Post by: Tsuchino on June 15, 2015, 09:11:14 PM

I'm using Chrome, but I tried it out with FF as well, the same thing happened.

Title: Coding Issue
Post by: Jamoe on June 15, 2015, 09:45:28 PM

Quote from: Liberator;400212No idea on building web pages at all.....

But from looking into z-index layering it would appear that the expected value is an integer only, so maybe it's ignoring your logos z-index of 15px as an unset variable and converting it to 0, just "z-index: 15;".

I did what Lib suggested and it worked in Chrome on Ubuntu. I suggest you try again and force the browser to refresh the cache (ctrl + f5).

Code Select

.logo{
    width:45%;
    float:left;
    margin-top:-10px;
    z-index: 15;
    position:relative;
    overflow:hidden;
}

.slideshow{
    position: relative; 
    clear: left; 
    float: left; 
    z-index: 10;
}

Title: Coding Issue
Post by: Tsuchino on June 15, 2015, 10:01:36 PM

Wow, all I needed was the refresh. Thank you so much guys, and sorry Lib, it actually worked!

Title: Coding Issue
Post by: Jamoe on June 15, 2015, 10:04:24 PM

Glad we could help. In Chrome/firefox if you hit f12 you get some nice little dev tools. You can edit the all the things in the page, really helps when debugging.

Have a play and google around to see what else you can do with it.

Title: Coding Issue
Post by: Tsuchino on June 15, 2015, 10:42:37 PM

Will do Jamoe, thanks again.

Title: Coding Issue
Post by: Liberator on June 16, 2015, 10:06:59 AM

Quote from: Tsuchino;400241Wow, all I needed was the refresh. Thank you so much guys, and sorry Lib, it actually worked!

Hey, I'm as surprised as everyone else that I was right.

The dreaded web caching strikes again.

Dead Men Walking

dMw Chit Chat => The Beer Bar => Seriously though ... => Topic started by: Tsuchino on June 14, 2015, 02:22:25 PM