I have this webpage, which I'm using to practice some html and css without using any wysiwyg editor. But there'are things that I don't find how to implement.
HTML
<div id="container">
<div id="header">
<h1>My Resume</h1>
</div>
<div id="sidebar">
<ul>
<li><a href="localhost">Java</a></li>
<li><a href="localhost">Bash</a></li>
<li><a href="localhost">PHP</a></li>
<li><a href="localhost">MySQL</a></li>
</ul>
</div>
<div id="mainContent">
<p>akdjfaskdfjasdkfjaskdfjaskdfjaskdfjaskdjfskdfjassdkjfadfkjasdkfjaadfkakdfjadkfjdskfa</p>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ol>
<a href="localhost"><img src="localhost"></a>
</div>
<div id="footer">
</div>
</div>
CSS
h1 {
text-align:center;
}
#container {
width:800px;
height:500px;
background-color:#ffffff;
margin:auto;
border:1px solid #000000;
/*text-align:left;*/
}
#header {
text-align:center;
height:200px;
background-color:brown;
margin:0 auto;
}
#sidebar {
margin:0 auto;
float:left;
width:200px;
height:200px;
background:red;
}
#mainContent {
margin:0 auto;
background-color:white;
width:600px;
height:200px;
float:left;
}
#footer {
height:50px;
margin:0 auto;
background-color:orange;
}
Try Putting this at the top of your CSS for starters
*
{
padding:0;
margin:0;
}
this will default all your elements, and take away extra padding and margins browsers add.
then give each element its own margin or padding or none.
I added these to your css:
/* added to remove whitespace */
*
{
margin: 0;
}
/* added to #mainContent to wrap text */
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
/* added to #footer to make it appear */
width: 100%;
overflow: hidden;
Demo here
your 3 problem solved see this FIDDLE DEMO
* {
padding:0;
margin:0;
}
#mainContent p{
word-wrap:break-word;
}
#footer {
clear:both;
height:50px;
margin:0 auto;
background-color:orange;
}
add clear:both;
into your footer .more detail about : clear
Guess you should take care of the height of the footer which is defined as 50px; Because your footer style got merged with your container and hence you were not able to see your footer.
Your css should be some what like this:
h1 {
text-align:center;
}
#container {
width:800px;
height:800px;
background-color:#ffffff;
margin:auto;
border:1px solid #000000;
/*text-align:left;*/
}
#header {
text-align:center;
height:200px;
background-color:brown;
margin:0 auto;
}
#sidebar {
margin:0 auto;
float:left;
width:200px;
height:200px;
background-color:red;
}
#mainContent {
margin:0 auto;
background-color:Cyan;
width:600px;
height:200px;
float:left;
}
#footer {
height:200px;
width:800px;
margin:0 auto;
background:Green;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.