CODEWITHSUNDEEP
cssfooter
ChiroX
ChiroX

Reputation: 7

CSS | Footer with Logo

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&eacute; Villa Bernstein
      <p class="copyright">
        &copy; Caf&eacute; 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

Here you can see my Problem

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

Answers (2)

George Vasilopoulos
George Vasilopoulos

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

Roman
Roman

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

Related Questions