Website help - When/where to use div tags

Discussion in 'HTML & Website Design' started by Daguineapig, Jun 14, 2008.

0
  1. #1
    Hey, so I recently started a website:
    http://gillett.nfshost.com

    I have most of the css down, but when I resize the page, the lorem ipsum dolor text and and GILLETT graphic kind of go off the page instead of stopping on the left side. I tried correcting the problem with div tags, but I couldn't fix the problem for the life of me, I just made everything worse. I want the website to look exactly the same, just not go off the left page.

    The HTML and CSS are relatively easy, if someone could maybe point out where I need div tags in the code and how I should restructure this, that would be awesome.

    HTML: 
    <html>
<head>
<title>Max Gillett - A Pro Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu_title">
<img class="Title" src="Title.png" height="83" width="305">
<h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nunc lobortis, dolor ut rhoncus ultricies, ante enim consequat pede, nec suscipit </h4>
</div>
<ul id="menu">
     <li><a href="http://www.youtube.com" class="portfolio">Portfolio <span></span></a></li>
     <li><a href="http://www.digg.com" class="home">Home <span></span></a></li>

     <li><a href="http://www.gmail.com" class="about">About <span></span></a></li>
     <li><a href="http://www.worldofwarcraft.com" class="RSS">RSS <span></span></a></li>
     <li><a href="http://www.worldofwarcraft.com" class="RSS_hidden">RSS <span></span></a></li>
</ul>
</div>
</body>
</html>
    Code (markup):
    CSS:

    body {
	background-image: url('');
	background-repeat: no-repeat;
	background-attachment: fixed;
}


h4 {
	display: block;
	margin-left: auto;
	margin-right: auto;
	top: -94px;
	right: 135px;
	width: 20em;
	position: relative;

}
img.Title {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 180px;
	position: relative;

}
#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 702px;
	height: 200px;
	top: -105px;
	margin-left: auto;
	margin-right: auto;
	background: url(images/Background_torn_green_clear.png) no-repeat;
	z-indez: 0;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}
#menu .home {
	width: 113px;
	height: 85.5px;
	background: url(images/Home-mouseover.png) no-repeat;
	left: 372px;
	top: 50px;
}
#menu .home span {
	width: 29px;
	height: 53px;
	background: url(images/Home-go.png) no-repeat;
	left: 64px;
	top: -20px;
}
#menu .portfolio {
	width: 158px;
	height: 51.5px;
	background: url(images/Portfolio_mouseover.png) no-repeat;
	left: 85px;
	top: 73px;
}
#menu .portfolio span {
	width: 155px;
	height: 42px;
	background: url(images/Portfolio_viewworks.png) no-repeat;
	left: 62px;
	top: -36px;
}
#menu .about {
	width: 112px;
	height: 48px;
	background: url(images/About_mouseover.png) no-repeat;
	left: 580px;
	top: 146px;
}
#menu .about span {
	width: 29px;
	height: 62px;
	background: url(images/About_arrow.png) no-repeat;
	left: 70px;
	top: -52px;
}
#menu .RSS {
	width: 68px;
	height: 68px;
	background: url(images/RSS.png) no-repeat;
	left: 655px;
	top: 16px;
	z-index: -50
}
#menu .RSS_hidden {
	width: 68px;
	height: 68px;
	background: url(images/RSS_hidden.png) no-repeat;
	left: 655px;
	top: 16px;
	z-index: 50
}
#menu .RSS_hidden span {
	width: 149px;
	height: 83px;
	background: url(images/subscribe.png) no-repeat;
	left: 29px;
	top: -82px;
}
    Code (markup):
     
    Daguineapig, Jun 14, 2008 IP