The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Two CSS in one file conflict, Menu stopped working with Gallery script
RobertP
post Mar 3 2016, 04:44 PM
Post #1





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



Hi there, I have used this menu on other pages and it works great but when I combined the CSS with the gallery script the menu stopped working.

I know that two CSS scripts can be combined in one file but one will cancel out the commands of the other.

On another site someone said to "use parent class." I am not at all that familiar with CSS to follow that brief bit of help.
Your help is much appreciated. Thanks

http://lilrooster.ca/Slicebox/index2.html

http://lilrooster.ca/Slicebox/css/slicebox.css

#roundbar-blue {
clear:left;
float:left;
width:100%;
background:#80C8FF url(images/roundbar-blue.gif) 0 25% repeat;
font-family:Trebuchet MS, Helvetica, sans-serif;
border-bottom:0px solid #49A9FF;
overflow:hidden;
}
#roundbar-blue ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#roundbar-blue ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#roundbar-blue ul li.first {
border-left:0px solid #49A9FF;
}
#roundbar-blue ul li.last {
border-right:0px solid #99D8FF;
}
#roundbar-blue ul li a {
display:block;
margin:0;
padding:.4em 3em;
color:#ccccff;
text-decoration:none;
border-left:0px solid #99D8FF;
border-right:0px solid #49A9FF;
line-height:1.3em;
}
#roundbar-blue ul li.active a {
background:url(images/roundbar-blue.gif) 0 75% repeat;
color:#ffff00;
font-weight:bold;
}
#roundbar-blue ul li a:hover {
background:url(images/roundbar-blue.gif) 0 75% repeat;
}
#roundbar-blue ul li a span {
display:block;
}


/* Slicebox Style */
.sb-slider {
margin: 10px auto;
position: relative;
overflow: hidden;
width: 100%;
list-style-type: none;
padding: 0;
}

.sb-slider li {
margin: 0;
padding: 0;
display: none;
}

.sb-slider li > a {
outline: none;
}

.sb-slider li > a img {
border: none;
}

.sb-slider img {
max-width: 100%;
display: block;
}

.sb-description {
padding: 20px;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 1000;
position: absolute;
background: #CBBFAE;
background: rgba(190,176,155, 0.4);
border-left: 4px solid rgba(255,255,255,0.7);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #fff;

-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
-ms-transition: all 200ms;
transition: all 200ms;
}

.sb-slider li.sb-current .sb-description {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 1;
}

.sb-slider li.sb-current .sb-description:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
background: rgba(190,176,155, 0.7);
}

.sb-perspective {
position: relative;
}

.sb-perspective > div {
position: absolute;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-backface-visibility : hidden;
-moz-backface-visibility : hidden;
-o-backface-visibility : hidden;
-ms-backface-visibility : hidden;
backface-visibility : hidden;
}

.sb-side {
margin: 0;
display: block;
position: absolute;

-moz-backface-visibility : hidden;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2016, 05:46 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
Joined: 9-August 06
Member No.: 6



What isn't working with the menu? I don't notice anything amiss.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 3 2016, 06:35 PM
Post #3





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



Thanks Pandy,
QUOTE(pandy @ Mar 3 2016, 05:46 PM) *

What isn't working with the menu? I don't notice anything amiss.


On this page the menu works (Mac/Firefox)
http://lilrooster.ca/


On this page the menu is smaller, both text and bar, and is non-responsive.
http://lilrooster.ca/Slicebox/index2.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2016, 08:53 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
Joined: 9-August 06
Member No.: 6



Oh sorry! I somehow ended up on your index page. I'll see if I can find what's wrong.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2016, 09:03 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
Joined: 9-August 06
Member No.: 6



#wrapper that you use for the slide show is overlapping the menu so the links can't be clicked. I put a red border on it.

Attached Image

I'm trying to find out how that happens. You don't use any absolute positioning that I can see, do you?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 3 2016, 09:08 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,179
Joined: 9-August 06
Member No.: 6



Ah, it's the floated menu. Use clear: both or clear: left for #wrapper and it should be fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 3 2016, 11:06 PM
Post #7





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



QUOTE(pandy @ Mar 3 2016, 09:08 PM) *

Ah, it's the floated menu. Use clear: both or clear: left for #wrapper and it should be fine.


Thanks Pandy. Being a complete NOOB here I have to ask more questions.
Could you help me a little farther?

I used a wysiwyg editor to remove the overlap but the menu bar is still smaller than the other pages.

Menu works & Image gallery works!! Thanks.

I take it that it's in the HTML and not the CSS.
It must be in here:

<div style="text-align: center;"> <span><img
style="width: 982px; height: 180px;" alt=""
src="../images/topbanner.png"></span><br>
<span></span></div>
<div id="roundbar-blue">
<ul>
<li><a href="../home.html">Home Page</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../music.html">Music</a></li>
<li class="active"><a href="photogallery.html">Photos</a></li>
<li class="last"><a href="../contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="wrapper">

<ul id="sb-slider" class="sb-slider">
<li> <img src="images/1.jpg" alt="image1">
<div class="sb-description"> </div>
<br>

This post has been edited by RobertP: Mar 3 2016, 11:23 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 4 2016, 04:53 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



It does have to do with the CSS.
Just add clear: both; to .wrapper, starting at line 56 of the file demo.css.

This post has been edited by Frederiek: Mar 4 2016, 04:54 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 4 2016, 09:50 AM
Post #9





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



Thank you Frederick for the precise reply. I did not suspect that the demo.css was involved with the page!

I think that the menu is inheriting something from the gallery script as the menu bar is still smaller than the other pages.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 4 2016, 10:54 AM
Post #10





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



All is working....thank you Pandy & FRederick...issue resolved!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 4 2016, 12:39 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You're welcome.

I do see that the menu's on both pages are different in font-size. That's because the body has a font-size of 13px assigned to it on the gallery page, but no font-size is set on the homepage.

Also, validate your HTML at https://validator.w3.org/nu/ and fix the errors.

And there are CSS errors. Validate the CSS at http://jigsaw.w3.org/css-validator/ .

On both validators, all you have to do is enter the url of the page you want to validate.

If there are errors you don't understand, just ask here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 5 2016, 02:18 PM
Post #12





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



QUOTE(Frederiek @ Mar 4 2016, 12:39 PM) *

You're welcome.

I do see that the menu's on both pages are different in font-size. That's because the body has a font-size of 13px assigned to it on the gallery page, but no font-size is set on the homepage.

Also, validate your HTML at https://validator.w3.org/nu/ and fix the errors.

And there are CSS errors. Validate the CSS at http://jigsaw.w3.org/css-validator/ .

On both validators, all you have to do is enter the url of the page you want to validate.

If there are errors you don't understand, just ask here.



Thanks, Great advice. I will do that. I did try that earlier and fixed a few things.

One more thing has stood out related to this page. Things look great on my Mac/Firefox machine. However, on my Android, Samsung phone the Image gallery and menu align to the left. The logo remains centred.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 5 2016, 05:16 PM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



I only checked by resizing my browser window. There is not enough place for the menu in smaller screens and the last links even disappear entirely.

The logo is maybe centred, but half out of sight, as he image is 962px wide. There is quite some space on the left and right of that image, that could be avoided, as you use a PNG format with a transparent background.

I suggest you go read articles on media queries and responsive design, Elastic Design and Liquid Layouts.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RobertP
post Mar 6 2016, 11:15 AM
Post #14





Group: Members
Posts: 7
Joined: 3-March 16
Member No.: 24,039



QUOTE(Frederiek @ Mar 5 2016, 05:16 PM) *

I only checked by resizing my browser window. There is not enough place for the menu in smaller screens and the last links even disappear entirely.

The logo is maybe centred, but half out of sight, as he image is 962px wide. There is quite some space on the left and right of that image, that could be avoided, as you use a PNG format with a transparent background.

I suggest you go read articles on media queries and responsive design, Elastic Design and Liquid Layouts.


sad.gif

OK, Thank you Frederiek for your time and expert opinion.
I had worked with another menu that contained a "small screen" portion but I could not centre that script.
I will check those resources and try to be smarter in this new world of small screens, wide screens and TVs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 6 2016, 12:00 PM
Post #15


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



BTW, also have a look at responsive images at http://www.d.umn.edu/itss/training/online/...css.html#images .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th March 2019 - 08:18 PM