Post by Digital Sushi » Sun Aug 05, 2012 5:19 pm

I've just re-done a website, but am having trouble with one of the divs. The tag "livehelp" seems to go across the entire header, making a lot of stuff unclickable.

How can I edit it so that the logo, social media buttons, and live help can be clicked?

Site: http://digitalsushi.co.za/

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

Post by MarketInSG » Sun Aug 05, 2012 6:58 pm

change the z-index of the live help to be smaller than the z-index of the buttons


User avatar
Guru Member

Posts

Joined
Wed Nov 16, 2011 11:53 am
Location - Singapore

Post by Digital Sushi » Mon Aug 06, 2012 3:04 am

Thanks. It worked for the logo image, but not the social media buttons.

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

User avatar
Guru Member

Posts

Joined
Wed Nov 16, 2011 11:53 am
Location - Singapore

Post by Digital Sushi » Mon Aug 06, 2012 3:41 pm

Still nothing I'm afraid. I had to remove the changes to the images as they caused problems.

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

Post by pprmkr » Mon Aug 06, 2012 3:53 pm

First of all correct the error

Code: Select all

title"Chat with us"
into

Code: Select all

title="Chat with us"

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by Digital Sushi » Mon Aug 06, 2012 3:57 pm

Thanks, fixed! I didn't even see that.

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

Post by pprmkr » Mon Aug 06, 2012 4:15 pm

Ok, now move the cart 180px to the left, because it overlaps livehelp.
At line 143 change

Code: Select all

	right: 160px;
into

Code: Select all

	right: 340px;

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by pprmkr » Mon Aug 06, 2012 4:21 pm

Another option is to set the width and z-index for livehelp
Line 268

Code: Select all

#header #livehelp {
	text-align: right;
	vertical-align:middle;
	position: relative;
	padding-top: 7px;
	padding-right: 7px;
	z-index: -1;
}
Change into

Code: Select all

#header #livehelp {
	text-align: right;
	vertical-align:middle;
	position: relative;
	padding-top: 7px;
	padding-right: 7px;
	z-index: 2;
	width: 300px;
}

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by Digital Sushi » Mon Aug 06, 2012 4:42 pm

I tried both, but they shifted the items over the logo.

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

Post by pprmkr » Mon Aug 06, 2012 5:27 pm

Then we can try to put the cart and the content to the left.

Starting at line 140

Code: Select all

#header #cart {
	position: absolute;
	top: 0px;
	right: 160px;
	z-index: 9;
	min-width: 300px;
}
#header #cart .heading {
	float: right;
	margin-right: 172px;
	margin-top: 12px;
	padding-left: 14px;
	padding-right: 14px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #EEEEEE;
	background: #FFF;
	position: relative;
	z-index: 1;
}
Change into

Code: Select all

#header #cart {
	position: absolute;
	top: 0px;
	right: 300px;
	z-index: 9;
	min-width: 300px;
}
#header #cart .heading {
	float: right;
	margin-right: 5px;
	margin-top: 12px;
	padding-left: 14px;
	padding-right: 14px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #EEEEEE;
	background: #FFF;
	position: relative;
	z-index: 1;
}
And at line 175

Code: Select all

#header #cart .content {
	clear: both;
	display: none;
	position: relative;
	top: -1px;
	padding: 8px;
	min-height: 150px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	-webkit-border-radius: 0px 7px 7px 7px;
	-moz-border-radius: 0px 7px 7px 7px;
	-khtml-border-radius: 0px 7px 7px 7px;
	border-radius: 0px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
	background: #FFF;
}
Into

Code: Select all

#header #cart .content {
	clear: both;
	display: none;
	position: relative;
	top: -1px;
	padding: 8px;
	min-height: 150px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	-webkit-border-radius: 7px 0px 7px 7px;
	-moz-border-radius: 7px 0px 7px 7px;
	-khtml-border-radius: 7px 0px 7px 7px;
	border-radius: 7px 0px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
	background: #FFF;
}

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by Digital Sushi » Tue Aug 07, 2012 3:36 pm

I'm not sure that will solve the problem. From that I can see the social media buttons are in the same DIV as the livehelp, but when I remove them from that div everything goes crazy.

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa

Post by Digital Sushi » Wed Aug 08, 2012 1:28 am

Sorry, I was being very stupid. Your modifications worked perfectly. Thank you very much!

Active Member

Posts

Joined
Mon Oct 18, 2010 10:23 pm
Location - South Africa
Who is online

Users browsing this forum: No registered users and 18 guests