Inline Issues

HTML & CSS
1

Hi, I need help if it’s okay. I’ve been trying to fix one of my projects for our defense this february and I can’t seem to figure out how am I suppose to inline the footer. I also tried adding display:inline but it still wouldn’t align with the copyright part.

Here’s the code

<!DOCTYPE html>

<html>
<head>
</head>

<style>
.site3{
  background-color: black;
  font-family: century gothic;
  font-size: 12px;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
}

.site3 p{
  color: white;
  padding-left: 2in;
  text-transform: uppercase;
  line-height: 2;
}

.site3 ul li a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  display: inline;
}

footer .site3 ul li{
  display: inline;

}

footer .site3 ul{
  float: right;
  margin: 0;
  padding: 0;
  padding-right: 2in;
}

</style>

<body>

<footer>
        <div class="site3">
            <p>Copyright &copy; Site Title 2017-2018. All Rights Reserved</p>
            <div class="s3_link">
		<ul>
                    <li><a href="">Sitemap</a> | </li>
		    <li><a href="">disclaimer</a> | </li>
		    <li><a href="">privacy policy</a> | </li>
		    <li><a href="">terms of use</a> | </li>
		</ul>
	  </div>
        </div>
	</div>
</footer>

</body>
</html>

Thank you in advance!

2

Hi there @patriciamaeebora11

Welcome to the forums. I have moved your post to the HTML/CSS forum where it seems best suited.

3

Your copyright is in a <p> which is a block level element and as such, will take up the entire width of its container. That is why the list items are pushed down.

Right click on the copyright in your browser and choose Inspect Element to see what is happening.

4

Hi there thenocturnalpig,

and a warm welcome to these forums. :sunglasses:

Always try to keep your coding simple as possible. :winky:

Here is one possible solution…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100% / 160% verdana, arial, helvetica, sans-serif;
 }
.footer {
    padding: 1em 0;
    background-color: #000;
    font-family: 'century gothic';
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
  }
 
.footer ul, 
.footer li, 
.footer a {
    display: inline-block;
    margin: 0;
    list-style: none;
    color: #fff;
    text-decoration: none;
 }

</style>

</head>
<body> 

<div class="footer">
 Copyright &copy; Site Title 2017-2018. All Rights Reserved
 <ul>
  <li><a href="#">Sitemap</a> | </li>
  <li><a href="#">disclaimer</a> | </li>
  <li><a href="#">privacy policy</a> | </li>
  <li><a href="#">terms of use</a></li>
 </ul>
</div>

</body>
</html>

Also note that you should use either Copyright or ©.
There is definitely no need for both. :wonky:

coothead

2 Likes
5

The same solution as clothed… but justified alignment:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

 
<style media="screen">
body {
    font: 100% / 160% verdana, arial, helvetica, sans-serif;
 }
.footer {     
	
	
	background-color: #f0f0f0;

    padding:1em 2em 0 2em ;
    background-color: #000;
    font-family: 'century gothic';
    font-size: 0.8em;
    color: #fff;
    text-align: justify;
    text-transform: uppercase;
  }
 
.footer ul, .cop, .footer:after,
.footer li, 
.footer a {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    text-decoration: none;
  }
  .footer:after{
 	 content: "";
	 width: 90%;
 	 line-height: 0;
	 background: red; padding: 0; margin: 0;
	 vertical-align: top;
 }
 
</style>

</head>
<body> 

<div class="footer">
 <div class="cop">Copyright &copy; Site Title 2017-2018. All Rights Reserved</div>
 <ul>
  <li><a href="#">Sitemap</a> | </li>
  <li><a href="#">disclaimer</a> | </li>
  <li><a href="#">privacy policy</a> | </li>
  <li><a href="#">terms of use</a></li>
 </ul>
</div>

</body>
</html>
1 Like
6

noted! Thank you so much :smiley:

7

Not at the expense of structured html though (and this is a pet-hate of mine).

<div class="footer">
 Copyright &copy; Site Title 2017-2018. All Rights Reserved
 <ul>

Although the above is valid html it is not semantically correct as you have an inline fragment running into a block element. The first thing the browser has to do is construct an anonymous block box around the text so that it can begin to parse the html correctly. It would be much better to put the text in a paragraph where it belongs.

<div class="footer">
 <p>Copyright &copy; Site Title 2017-2018. All Rights Reserved</p>
 <ul>

Of course as with everything in html the semantics are debatable and either way is valid so you could argue why bother? I just hate to see text in divs when they should be paragraphs or just hanging in no-mans-land. :slight_smile:

Also without the paragraph around the text it would be hard to target that snippet of text specifically should the need arise at a later date.

Maybe I’m being too picky?

6 Likes
8

I guess the answer is the all familiar “it depends”.

As contrived examples, markup like this is common

<p>Some text, <span class="foo">a span</span>, and more text</p>

while this looks “more correct” but unnecessarily bloated

<p><span>Some text, </span><span class="foo">a span</span><span>, and more text</span></p>

True, the more verbose markup could make it easier for CSS, JavaScript, and perhaps even the browser. to work with the DOM. But I have difficulty imagining it will become the norm anytime soon.

1 Like
9

No that’s fine :slight_smile:
You have inline fragments running into inline fragments which is as it should be.

It would be wrong to add the extra spans unless each phrase was to be differently styled.

It’s a different concept to the one I mentioned as there is no run-in to a block level tag half way through.

As I said all are valid so it’s just a personal matter of interpretation :slight_smile:

5 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.