Reputation: 7
Hey I just started to learn HTML at the Work. So, I started to make a Website for a Fake Company.I made a Navigation with Logo and a Side navigation. But only with the Footer I got a Problem, cause its not in a row.
HTML Code:
<div id="footer">
<ul class="footer">
<li class="fuss"><a href="#">AGB</a></li>
<li class="fuss"><a href="#">Impressum</a></li>
<div class="wortmarke">
Café Villa Bernstein
<p class="copyright">
© Café Villa Bernstein. All rights reserved.
</p>
</div>
<li class="fuss"><a href="#">Datenschutz</a></li>
<li class="fuss"><a href="#">Pressenews</a></li>
</ul>
</div>
CSS:
/* Footer */
ul.footer {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
li.fuss {
float: left;
width: 10%
}
li.fuss a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.wortmarke {
color: #ffc995;
font-size: 150%;
text-align: center;
width: 40%;
}
p.copyright {
font-size: 40%;
margin: -4%;
color: white;
}
As you can See i have 4 Links (AGB, Impressum, Datenschutz and Pressenews), between Impressum and Datenschutz i want to add the Logo Text "Café Villa Bernstein" and below " © Café Villa Bernstein. All rights reserved.". The Problem is when i remove the "Logo Text" its all in a row. When i add the "Logo Text" - the 2 Links "Datenschutz" and "Pressenews" jumps to the next row
Now there is only one little thing i forgot to ask. I want a white border between the 2 Links ( AGB & Impressum and Datenschutz & Pressenews). When i add border-right: 1px solid white
on the left side of Datenschutz there is missing a white border. So, i add border left: 1px solid white
. But then the border between AGB & Impressum and Datenschutz & Pressenews is getting fat. My Question now is: How do i get between all elements the same border
Fat Border between 2 Navigation
Upvotes: 0
Views: 1560
Reputation: 83
What I did is:
li.fuss {
float: left;
width: 15%
}
Now the all the li and the middle div can 'cover' the whole footer (4*15% + 40% = 100% width).
I also added float:left in .wortmarke :
.wortmarke {
color: #ffc995;
font-size: 150%;
text-align: center;
width: 40%;
display:inline-block;
float:left;
}
so that it will be floating with the rest of the li.
Finally, remove this block completely:
ul li:nth-child(4), ul li:nth-child(5) {
float:right;
margin-right: 20px;
}
as it is unnecessary, not-responsive and does not support cross-browser compatibility
Upvotes: 1
Reputation: 3941
first of all to use DIV inside a list is not a good Idea. But I just corrected your code a little bit and will explain why it behaved like it did.
Your problem is that the div tag is display: block;
by default and list is display:inline;
which means that the div wants the whole line, thats why "Datenschutz and Pressenews" are moved away.
You need to change the display style to inline-block;
and add a float:right
to
"Datenschutz and Pressenews".
See working Fiddle
Upvotes: 0