Assessment wanted for Fundamental Layout Comprehension

MDN Learn
#1

I tried to do the task given in Fundamental Layout Comprehension section using float and display property. I tried to evenly space the list of links located inside the tag using the following css rule:

nav {
background-color: #000;
padding: 0.71163825%;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav {
box-sizing: border-box;
}

nav a {
color: #fff;
text-decoration: none;
padding: .5em 1.44381528%;
}

nav ul li {
display: inline-block;
width: 20%;
}

In my system, 1329.81px is the width of nav container, each li element will have width of 265.962px (which is 20% of nav container), but my browser approximately allocates 265.953px for every li element, that’s not the problem here.

The problem is that between every li element a .(dot)character is automatically added, which takes 5.3333px(4 times) space, because of this, the last li element cannot be able to fit into the nav container on the same row, so it went down to the next line.

I can’t understand, why the .(dot) character added between every li element. Kindly, help me to solve this issue. Thanks in advance.

Picture is added for your reference:
IMG_20200621_112847

I tried to attach the source code along with this post, the website doesn’t allow me to upload the documents, because I am new user. I have modified only the css file, the whole css rules is pasted below for your reference.

body {
background-color: #fff;
color: #333;
margin: 0;
font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

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

.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}

.grid {
margin: 0 auto;
padding: 0 20px;
max-width: 980px;
}

nav {
background-color: #000;
padding: 0.71163825%;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav {
box-sizing: border-box;
}

nav a {
color: #fff;
text-decoration: none;
padding: .5em 1.44381528%;
}

nav ul li {
display: inline-block;
width: 20%;
}

.photos {
margin: 0;
padding: 0;
list-style: none;
}

.feature {
width: 200px;
}

article {
width: 70%;
float: left;
}

article img {
float: left;
padding-right: 10px;
}

aside {
width: 30%;
float: left;
}

aside img {
width: 50%;
float: left;
}

#2

Hi there @Mahalingam_Sundararaj, and thank you for sharing your code.

I am not 100% sure, but it looks to me like this is your list item default bullets list default padding. You can get get rid of these using something like:

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

One more thing — I’d really recommend that you do this using a modern layout technology like flexbox instead. Flexbox is automatically responsive, and gets rid of spacing problems like this.

Have a look at https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

and in particular https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Horizontal_and_vertical_alignment

1 Like
#3

Thanks for your help Mr.David. I really liked all of your posts, you’re an awesome teacher.

I tried the solution, but it’s not working.

I analyzed the problem, there are five list items inside the nav tag (Home, Blog, About us, Our history, Contact), only three dots(.) are automatically added at the end of home, blog, and about us list, our history and contact list didn’t have dots(.) at the end.
Why only three dots are being added to the list of five items?

I think, it is possible to remove the dots using javascript.

And I tried flexbox, also wanted to implement the float method. If you have time, have a look at the problem sir. I spend lots of time, still not able to figure out the solution.

Thank you Mr.David

#4

@Mahalingam_Sundararaj Can you put your code onto an online code editor like codepen, or glitch, and share the URL with me? It will be much easier for me to debug this if I can play with your code.

Thanks!

Chris

#5

Sure. Here’s the glitch link - https://glitch.com/~css-layout-task. Let me know, if there is any problem with the link Mr.David.

Thank you

#6

@Mahalingam_Sundararaj everything else here looks like it is working OK, just the navigation menu is not quite right.

I see that you are still using an old-fashioned layout method here (the inline-block method). I’d strongly advise that you use flexbox instead. If you set something like this on the <ul> element to turn it into a flex container and center the items vertically:

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

And then set flex: 1 on the list items so they are given equal spacing along the flex container, and the text is centered inside each one:

nav ul li {
    flex: 1;
    text-align: center;
}

The nav will now be responsive, and it will still work even if you add or subtract nav items.