Slider Problem
I’m having problem with my slider it is not showing up from the center.
Im using this Jquery Slider
It is supposed to look like this though
Here is my website: Ner Bakeshop
Hi,
The main problem is that you have targeted elements in your header using rules like #header div div div div etc. and that is cascading into the styles needed for the slideshow and breaking it.
Not to mention that you are linking to the same css file twice (before and after the slick code) so you have no chance of getting it right.
Your approach is completely misguided and you want to keep your specificity low and use more classes to identify your elements instead of descendant selectors because not only are classes much quicker for the browsers to calculate it also means that they don’t explicitly rely on x number of nested divs being present. It must have taken you ages to count all those divs and decide if you were hitting the right one and of course when you say something like #header div div then you hit all other divs at that level also.
You need to class up that header logically and more clearly.
Something like this:
<div class="header">
<div class="inner-head">
<div class="head-top">
<h1 class="logo"> <a href="#">Ner Bakeshop</a> </h1>
<div class="account"> <a href="#">My Account</a> <a href="#">Help</a> <a href="#">Sign In</a> </div>
<form class="formtop">
<input type="text" id="search" />
<input type="submit" value="" id="searchbtn" />
</form>
</div>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Franchising</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="single-item">
<div><img src="http://raineerdelarita.comuv.com/nerbake/images/slide-3.jpg"></div>
<div><img src="http://raineerdelarita.comuv.com/nerbake/images/slide-1.jpg"></div>
<div><img src="http://raineerdelarita.comuv.com/nerbake/images/slide-2.jpg"></div>
</div>
</div>
</div>
<!-- end header -->
Now instead of saying #header div div div ul you can just say ‘.nav’ and know 100% that you have hit the right element and nothing else on the way. You can of course then style the list element inside the nav with ,nav li or the anchor with .nav a but you never need to say #header div div div div ul li a etc…
Use ids for structure (and for identifying unique elements) but use classes most of the time for styling to avoid specificity issues.
Re-code that header using the approach mentioned above and then we can see about fixing the slider (which I suspect will probably start working once the code is cleaned up).
I also note that you have set the header to 350px height but it seems that your slider is much taller than that so check your dimensions and also clear/contain your floats as you have some issues there also.
You even have this rule:
#header div div div form input#searchbtn {etc..
ids are unique so there was no need to qualify #searchbtn with anything else anyway.
step 1: The browser works from right to left and sees #searchbtn and says “I found it - Yipee”.
step 2: You then tell the browser to find the parent form element of the already found item and the browser says " I told you I already found it - I don’t need to look any further"
step 3: You then tell the browser to find the parent div of the form and the browser says " I told you I already found it - what don’t you understand about finding it"
step 4: You then tell the browser to find the parent div of the parent div of the form and the browser says " I told you I already found it at step1 - I didn’t need to go any further".
step 5:You then tell the browser to find the parent div of the parent div of the parent div of the form and the browser just sobs gently and says "Hello, hello … is anybody listening? I found it years ago "
step 6: You then tell the browser to find the parent div of the parent div of the parent div of the form parent and then find a parent with an id of #header and the browser says “I give up - I’m really tired now so I’m going to slow this page down”. 
2 Likes
Thank you so much for the much detailed answer!
Can I just follow the code that you have given?
You can use the html and classes that I have given above but you will have to go through the css and change your selectors to match the new names.
e.g.
.nav instead of #header div ul
Once you’ve done that we can look at how the slider is behaving now that we know there are no odd rules messing up the slider specific code.
I need to redo my html codes, then to know it well.
Are the links okay now from my stylesheet?
Yes the link elements are correct now as you only have the 2 files with the slick code being last in sequence.
Let me know if you are having trouble applying the revised selector styles to the new html but it would be good if you could take a shot at it yourself so I can gauge how well you are doing
1 Like
Yeah ill give a bump on my post when I’m done maybe tomorrow.
Thanks!
What’s stopping you? You almost have the same code in that same spot.
They use two divs, one nested under the first, and then add the links. You only have one div.
No the way I would do it. I normally do navigation as a UL. I think it is more semantic but… if that’s what you want to do… As a martter of fact, it is cool if you simply leave your code as it is with only one div for the navigation. You do need to give those A elements some margin so they’re not stuck together.
Maybe something like
a{margin-right: 1em;} (or whatever unit you use
Since your div account is floated, do float the form to the right and do clear: left
I mean I want the .account and the .fromtop group together because from the previous site they are grouped from one div.
I’m having more time to fix it because it’s a new code setting though. I was just following the code from the cake website template
I’m not quite sure what you are asking but you could wrap a div around both of them and then they would be grouped.
You do need to keep structure otherwise you won’t be able to style it properly. Those anchors need to be in a single container so that you can position them as a group and the same for the form elements. Otherwise you will end up having to position every single element rather than just as a group by positioning the parent.
You can of course change the classnames if you want the parent of both those blocks be called .account (or whatever you needed).
Why from this cake website template they are using IDs not classes?
This is the code structure that I’m following recently though.
I already fixed it, but the slider arrows are covered down.
It’s not against the law to use ids and indeed for structural elements I would use ids, but as a general rule for ease of maintainability, speed and efficiency you should avoid ids concatenated with a long chain of descendant selectors and use classes instead. It is very inefficient and prone to errors should the html change when you use long descendant selectors.
Imagine if you removed an unneeded div from the header than a rules such as #header div div div div would then target the wrong element (as you have already found out). If a simple class was used on the relevant div this would not have occurred. Over time all things change so you need to build in some maintainability and consistency.
IDS also carry more weight than classes so where you have id rules mixed in with class rules you have also to take care of specificity more tightly.
The arrows are there but they are white on a white background. Change theme to black.
.slick-prev:before, .slick-next:before { color:#000}
Im almost done with the home page. Does my slider loads fast and is my coding structure good enough now?
It won’t work on mobile though, safari?
That’s probably your free host script causing problems. I copied your page locally and it works on mobile without the script present.
You can never rely on free hosting and you should get a proper paid host for your site.
I have not fixed yet my layout from my footer. I started from my icons and its not showing up.
I used your method by using class to call the elements right away. And it seems I didn’t get it well for now.
Inline elements can’t have dimensions applied so you need to set them to display:block.
.icons li a.facebook { display: block;}
1 Like
If you are talking about the facebok in the footer, there is no parent called “icons”
However that facebook in the footer is floated which allows block-like capabilities (like width/height)