Slider problem

ul.class=icons is not working to float it from left. Should I remove it?

but this one is working

.footer ul li ul li {
float: left;
width: auto;
margin: 0 5px;
}
not working:

.icons li {
float: left;
width: auto;
margin: 0 5px;
}

Your last post gave us this link.

http://www.freewebsitetemplates.com/preview/retrodiner/index.html

Open up the source code and search for “icons”

There are no results found. You have no icons class in your code.

I have ul class=“icons”"

Why did you give us a link to a diffferent page then? You gave us this link in your above post.

http://www.freewebsitetemplates.com/preview/retrodiner/index.html

That does not have icons. If you are not referencing the above page, then why did you link to it??

Please try to not confuse us… I have no idea why you posted a link to that page in your previous post since you aren’t referencing it.

Now I do not understand what you mean by “not working to float it from left”. They are floated left. They are side-by-side. What is your issue with this? It also has display:block (which you are asking why it doesn’t.)

I’m sorry I can’t explain it better.

What I mean was why I can’t code it right away like

.icons li {
float: left;
width: auto;
margin: 0 5px;
}

And it doesn’t work, but It will work if I coded like this

.footer ul li ul li {
float: left;
width: auto;
margin: 0 5px;
}

Please put the icons li{} back in your CSS. I’ll tell you why when it gets put in.

It’s probable that .icons li{} doesn’t have enough specificity.
http://www.codefundamentals.com/blog/css-specificity.php

1 Like

Please kindly check it out.

I already did.


Thanks for the link, Need to study more.

It’s working. However, you need to study on specificity. Look at these rules

.footer ul li {
float: left;
width: 300px;
text-align: center;
}

Studying my article, you will note that it as a 0012 value for specificity. Which means anything under that will be used AFTER the above code. Right now, 0012 is highest.

Now lets look at your icons li{} code.

.icons li {
float: left;
width: auto;
margin: 0 5px;
}

Again, you should come to the conclusion that this is 0011 weight. Which is less than 0012. So that means that anything on this block of code will be overridden if 0012 or above says so. So if we look at your .footer ul li{} code, we will see it has a 300px width set. That means there is literally no room in the footer for multiple icons to be there (you’d need 900px worth of room!) In your .icons li{} you give it width:auto; which resets the width and makes it shrink-to-fit (as with all floats) which means that 300px is no longer there. BUT AS I SAID, there is not enough specificity which means that this won’t be used. Now. that WOULD allow all the icons on the same line… Note that they are all still floated but they are on separate lines due to not being enough width.

THAT is why .icons li{} is not being used. You have found workarounds already so I won’t give you advise on that.

How can I center align my footer area ? I did put margin-left, but It won’t work though.

Ner Bakeshop

And did I code this area in a correct structure?

Thank you

There are multiple issues going on here.

For big screens, you may not see it centered because the image is only 1400px wide so bigger screens have that background image flushed to the left. Not what you are talking about I presume.

The actual elements aren’t centered due to a couple reasons. You make them 230px wide and float them. You’re just hoping htat they center.

I’d remove the padding/widths on the .footer ul li{} elements (including li.first!) and just set width:33%.

Also, on .inner-head{} and .innerhead ul{} you need to contain your floated children. Add overflow:hidden; to those elements.

I already removed the width:230px; and what do you mean by overflow:hidden?

on .inner-head{} and .innerhead ul{} you need to contain your floated children. Add overflow:hidden; to those elements.

Pretty straight forward. What’s confusing about that?

1 Like

It’s a handy method of containing floats. This article (by @ralphm) might help:

1 Like

I don’t understand why should I code overflow:hidden?
It’s working fine?

And
How can I move my delivery hotline area move to the right and got lots of spaces though and my nerbakeshop overlaps.

I’m still not good using percentage on widths.

Do you mean to the left as there is no space to the right?

I would use display:table-cell instead of floats and go for a more automatic approach.

These rules are extra to the ones you have and not replacements exactly.

.footer ul{
display:table;
width:100%;
}

.footer ul > li{
float:none;
display:table-cell;
vertical-align:top;
width:auto;
text-align:center;
}
.footer ul > li.first{width:27%}

.footer .logo{float:none;display:inline-block}
.footer ul li .logo a{margin:0}
.footer ul li ul li {float:none;display:inline-block}

The above allows the browser some leeway in where it puts stuff without having to measure it all precisely.

You are starting to use long descendant selectors again (remember what I said in my first post).

e.g.

.footer ul li .logo a

instead of

a.class-name

or

.logo2 a

1 Like

What’s the difference between:

.footer ul > li { }

and

.footer ul li { }

The first one is a child selector - it will only target a li which is a direct descendant of .footer ul.

The second one will target any li that is inside .footer ul.

For a better explanation, try this article :

1 Like

You’ve been faster than me :stuck_out_tongue:

1 Like

Why my clearfix:after isn’t working?

About Page

And I just added clear: both from my class .home and it works.

They are two separate things. The clearfix is for containing IT’S OWN CHILDREN. However, that doesn’t solve your issue since your element needs to be cleared from OTHER ELEMENT(S) (the nav). Clearfix basically inserts a clearing element RIGHT BEFORE the closing </div> (or whatever element it’s used on.) That doesn’t get your .home element cleared from the navigation.