Associate
I'm creating a website for my final module at college and I'm having great difficulty in understanding the way in which divs work and how to position them and such.
I've got a design idea for my website, and I'm now trying to code it to replicate said design.
I'm having two issues, how do I create those divs in the design and ensure that they are all aligned properly?
Second, when I resize the browser window, the navigation goes onto two lines. Is there a way of making it stay as it is no matter the window size?
Cheers!
P.S I know how awful the code looks, sorry in advance!
Design: http://localhostr.com/files/zApJHTV/design.png
Current Code:
I've got a design idea for my website, and I'm now trying to code it to replicate said design.
I'm having two issues, how do I create those divs in the design and ensure that they are all aligned properly?
Second, when I resize the browser window, the navigation goes onto two lines. Is there a way of making it stay as it is no matter the window size?
Cheers!
P.S I know how awful the code looks, sorry in advance!
Design: http://localhostr.com/files/zApJHTV/design.png
Current Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html><head>
<title>Fancy That</title>
<style type="text/css">
body {
margin:10px 10px 0px 10px;
padding:0px;
background-color:#eeeee9;
font-family:"Calibri", Arial, Georgia;
}
#centercontent {
background:#fff;
margin:auto;
margin-top:20px;
border:1px solid #000;
text-align:justify;
}
html>body #centercontent {
margin-left:201px;
margin-right:201px;
}
#search {
background:#fff;
height:20px;
margin:auto;
margin-left:201px;
margin-right:201px;
margin-top:20px;
background-color:#eeeee9;
}
#search a {
display:inline block;
padding:3px;
font-weight:none;
color:#000;
font-size:16px;
text-decoration:none;
font-family:Calibri;
}
#basket {
background:#fff;
height:20px;
background-color:#eeeee9;
float:right;
font-size:16px;
}
#login {
background:#fff;
height:20px;
background-color:#eeeee9;
float:left;
font-size:16px;
}
#search a:hover {
color:#818d91;
text-decoration:underline;
}
#banner {
height:300px;
margin:auto;
margin-left:201px;
margin-right:201px;
margin-top:10px;
margin-bottom:20px;
border:1px solid #000;
}
#nav {
padding:5px;
list-style:none;
margin:0;
margin-top:3px;
text-align:center;
font-family:"Georgia";
position:relative;
letter-spacing:2px;
word-spacing:75px;
}
#nav li {
display:inline;
}
#nav li a {
display:inline block;
padding:3px;
text-decoration:none;
font-weight:none;
color:#000;
font-size:25px;
}
#nav li a:hover {
color:#818d91;
text-decoration:underline;
}
html>body #banner {
height:90px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
#banner p {
padding:30px 5px 5px 50px;
text-align:center;
font-weight:bold;
font-family: "Georgia";
}
h1 {
font-size:14px;
padding-top:10px;
}
#banner h1 {
font-size:30px;
padding:10px 10px 0px 10px;
margin:0px;
text-align:center;
}
#rightcontent p {
font-size:10px
}
</style>
</head>
<body>
<div id="search">
<div id="basket">
<a href="#">Checkout! £10.99</a>
</div>
<div id="login">
Hello! /<a href="#">Sign In</a>/<a href="#">Register</a>
</div>
</div>
<div id="banner">
<p>Fancy That!</p>
</div>
<ul id="nav">
<li><a href="#">MENS</a></li>
<li><a href="#">WOMENS</a></li>
<li><a href="#">CHILDREN</a></li>
<li><a href="#">SALE</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div id="centercontent">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<br />
</div>
</font>
</body>
</html>
I'll work around it though.
