真正挣扎着这段代码，这是我事先挣扎的CSS我左右浮动div，但是一位网页设计师告诉我使用内联块而不是％＆＃39;我使用像素之前的高度和宽度...我的＆＃34;主要＆＃34; div当我在chrome中使用inspect元素函数时它不会水平对齐它说它是一个块元素而不是内联块元素我似乎没有改变它！
<!DOCTYPE html>
<html>
<head>
<title> Chillblast </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<!-- <img src="img.jpg" width="800" height="200" alt="logo" /> setting
image as header -->
<h1> <u>Lorem Ipsum</u></h1>
<script type="text/javascript">
var myvar = "Welcome";
alert(myvar);
</script>
</div>
<div id="content">
<div id="navi">
<h3> <u>Navigation</u></h3>
<ul>
<li><a class="selected" href="index.html">Home</a></li> <!-- creating a css class
called selected as this is
the page we are on -->
<li><a href="form.html"> Quote me</a></li>
<li><a href="index.html"> Gallery</a></li>
<li><a href="index.html">Contact us</a></li>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum urna nec nibh varius aliquam.<br>
Pellentesque sit amet justo lectus. Sed vehicula purus in porta fermentum. Integer malesuada non augue id sollicitudin.<br>
Curabitur non purus elementum, porttitor nisl nec, vestibulum mauris. Ut euismod urna tortor.<br>
Curabitur consequat mi eu sapien laoreet, vitae pharetra magna porttitor. Cum sociis natoque penatibus et<br>
magnis dis parturient montes, nascetur ridiculus mus. Aliquam et placerat massa. Fusce felis tellus, <br>
gravida at convallis vitae, vestibulum eu sapien. Suspendisse sed sapien egestas, scelerisque risus ut,<br>
molestie dui. Etiam lacinia tellus a aliquet faucibus. </p>
</div>
</div>
<div id="footer">
Footer Copyright © Andrew doyle
</div>
</div>
</body>
</html>
My CSS is as follows:
body{
/* dont need to call id*/
background-color:black;
background-repeat: no-repeat;
font-family: lobster, baskerville, sans-serif, arial; /* set the font for the whole body,
use back up fonts too*/
}
a{ /*In the same way we targeted the body tag we can target the a tag*/
text-decoration: none; /* links not underlined*/
color: white; /* links are coloured red*/
}
p{
color:#FFFFFF;
}
#container{
height: 100%;
width: 100%;
margin: 0 auto;
background-image:url("spc.png");
}
h1{ /* using commas i could set it for h1,h2,h3*/
margin:0; /* gets rid of margin*/
}
#header {
width:100%;
height:10%;
background:transparent; /* background of div id set to blue */ /* text set to red*/
text-align: center; /* aligns text in the header to middle of page*/
padding: 20px;
color: white;
}
/* #content{ padding-left:10px and all seperate directions or can use
padding: 10px 10px 10px 10px
1st is top 2nd is right 3rd is bottom and 4th is the left and since want
all the same we can shorten even more and just put 10px*/
#content {
width: 100%;
height: 90%;
margin: 0 auto;
}
#navi{
display: inline-block;
width:20%;
height:70%;
text-align: center; /*as divs always start a new line to stop this we use float*/
background: transparent;
color: white;
margin: 0 auto;
}
#navi ul{
list-style-type: none; /* gets rid of the bullet points after targeting ul*/
/*gets rid of padding */
}
}
#main{
display: inline-block;
width: 80%;
height:70%;
background:transparent;
margin: 0 auto;
}
#main p{
color: white;
}
#footer{
display: block;
height: 20%;
width: 100%; /* this is to clear of all floating elements or will not appear
below, clearing both lets the div element get past all
the floating div elements*/
padding: 0px;
background: transparent;
color: white;
text-align: right;
}