CODEWITHSUNDEEP
htmlcsstextparagraph
Benjamin Sunderland
Benjamin Sunderland

Reputation: 63

text "wrapping itself" and not displaying in line

The text is "wrapping itself" and not displaying in line. I have tried to use p { display:in-line;} but that doesn't do anything. Almost one word after another appears below the word before. I wonder why? Please help and thank you! (I am using a font off google, but I wouldn't expect that to change the situation)

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<header>
<div class="grow">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="aboutme.html">About me</a></li>
  <li><a href="like.html">What I love</a></li>
</ul>
</div>
</header>
<h1>About Me<h1>
<p>Hi, welcome to my website. I am not sure why this is not working at the moment.</p>
</body>
</html>

------------------------------------CSS in another file------------------------------

body {
    background-image: url(magical.jpg);
}
h1 { font-family: 'Lobster', cursive;

    color: white;
    position: absolute;
    top: 200px;
    left: 630px;
    text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
    font-size: 20px;
    color: white;
    position: absolute;
    top: 60px;
    right:350px;
    display: inline;

}
.grow {
    position: absolute;
    left: 550px;
    top: 700px;
}


a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
ul {
    padding: 10px;
    background: #dcf3ff;
    border-width: 6px;
    border-style: solid;
    border-color: white;

}

li {
    display: inline;
    padding: 0px 15px 0px 15px;
    border-right: 2px solid black;
    border-left: 2px solid black;

}

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

Upvotes: 2

Views: 1037

Answers (2)

Brett Holmes
Brett Holmes

Reputation: 387

Change your P element in the css to this.

p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 60px;
right:350px;
display: inline;
white-space: nowrap;
}

Upvotes: 0

Sean Henderson
Sean Henderson

Reputation: 596

Your h1 tag is not closed properly. Change: 

<h1>About Me<h1>

to 

<h1>About Me</h1>

jsfiddle

Upvotes: 1

Related Questions