Menu
Whenever I create a P tag and fill it with code it overflows instead of creating new lines. CSS:
#main {
width: 700px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
}
#main #top h1 {
text-align: center;
font-size: 48px;
margin: 0;
}
#main #menucontainer {
width: 700px;
border: 1px solid black;
}
#main #menucontainer ul {
list-style-type: none;
margin: 0 auto;
padding: 0px;
width: 255px;
}
#main #menucontainer ul li a {
font-size: 18px;
text-decoration: none;
color: #000;
display: block;
padding: 5px 10px;
text-align: center;
float: left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
}
#main #menucontainer ul li a:hover {
background-color: black;
color: white;
}
#main #menucontainer ul li a.current {
background-color:#CCC;
color: black;
}
#main #footer {
margin-top: 10px;
text-align: center;
font-style:italic;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="top">
<h1>Home</h1>
</div>
<div id="menucontainer">
<ul>
<li><a href="index.php" class="current">Home</a></li>
<li><a href="submit.php">Submit</a></li>
<li><a href="contactus.php" style="border-right:solid 1px black;">Contact Us</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<p>asdfhsadfkjasdjkcnakdsjnfkjdsanckjdsanfjkhaskjcnjksdankjfhasdknjcnadsjkfhkjsdhfkjncjsdnfjaksdhfkjadshfjkcndasjknf</p>
<div id="footer">2011</div>
</div>
</body>
</html>
722
The p tag will only make a new line on line-breaking characters like spaces, hyphens, and other punctuation. (Try inserting a space in the middle of your long asdf line.)
You might try the options suggested at http://gojomo.blogspot.com/2005/03/cross-browser-invisible-word-break-in.html if you want to create invisible word breaks.
109
Add word-wrap:break-word to your paragraph style
25
Your text is a single word so there is no where for the <p> tag to break the text into a new line.
If you want to force the line to wrap without regard to the text it self try setting a specific width for your <p> tags ( by either using width:inherit or using an actual size ) and then setting the white-space attribute to pre-wrap.
p {
width:inherit; /* width: 100px; */
white-space: pre-wrap;
}
More information on the white-space attribute.
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
