Hello -
Ive recently completed a website, however I have some white space I'd like to get rid of. I still cant get my mind wrapped around containers, would anyone mind helping me?
Most of my website is built using images, how do I tell the browser/dreamweaver to hug the images so there are no white edges? I used live view, and browsers to view my website and both have the same amount of white space.
(I also built the navigation bar/background color,footer etc in Photoshop. I made sure the width is 1900px, but who knows!)
Here is one of my more basic pages:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link rel="stylesheet" href="contact_style.css">
<script src="../jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="../jQueryAssets/jquery-ui-effects.custom.min.js"></script>
<script type="text/javascript">
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args+".location='"+args[i+1]+"'");
}
function MM_DW_effectShake(obj,method,effect,direction,distance,times,speed)
{
obj[method](effect, {direction:direction,distance:distance,times:times}, speed);
}
</script>
</head>
<h1>
<div id="home"> <a href="../index.html"> </a>
<img src="../Index/images/index_01.png" alt="home" width="211" height="240" onClick="MM_goToURL('parent','../index.html');return document.MM_returnValue">
</div>
<div id="portfolio"><a href="../Portfolio/portfolio.html"><img src="../Index/images/index_02.png" alt="portfolio" width="370" height="240"></a>
</div>
<div id="kz">
<img src="../Index/images/index_03.png" alt="kate_zimmerman" width="726" height="240">
</div>
<div id="about">
<img src="../Index/images/index_04.png" alt="about" width="275" height="240" onClick="MM_goToURL('parent','../About/about.html');return document.MM_returnValue">
</div>
<div id="contact">
<img src="../Index/images/index_05.png" alt="contact" width="318" height="2358" onClick="MM_goToURL('parent','contact.html');return document.MM_returnValue">
</div>
<div id="black">
<img src="../Marketing/black_bg.png" alt="body" height="1200" width="1900px" >
</div>
</h1>
<body>
<div id="text">
<img src="contact.jpg" alt="text" width="592">
</div>
<div id="email_icon">
<img src="email.png" alt="email_icon" width="80">
</div>
<div id="email_address">
<img src="address.jpg" alt="email_address" width="400">
</div>
<div id="phone_icon">
<img src="phone.png" alt="phone_icon" width="80">
</div>
<div id="phone_number">
<img src="number.jpg" alt="phone_number" width="250">
</div>
<div id="facebook_icon">
<img src="facebook.png" alt="facebook_icon" width="80" onClick="MM_goToURL('parent','https://www.facebook.com/KateZimmermanDesigns');return document.MM_returnValue" onMouseOver="MM_DW_effectShake($(this),'effect','shake','left',20,1,1000)">
</div>
<div id="facebook_text">
<img src="facebook_text.jpg" alt="facebook_text" width="350" onClick="MM_goToURL('parent','https://www.facebook.com/KateZimmermanDesigns');return document.MM_returnValue">
</div>
</body>
<h3>
<div id="facebook"> <a href="https://www.facebook.com/KateZimmermanDesigns/" target="new"> </a>
<a href="https://www.facebook.com/KateZimmermanDesigns/" target="new"><img src="../Index/images/index_07.png" alt="facebook" width="635" height="167"></a>
</div>
<div id="contact_info">
<img src="../Index/images/index_08.png" alt="contact_info" width="708" height="167">
</div>
<div id="design">
<img src="../Index/images/index_09.png" alt="designed_by_KZ_Graphics" width="557" height="167">
</div>
</h3>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#home {
position: absolute;
top: 0px;
left: 0px;
}
#portfolio {
position: absolute;
top: 0px;
left: 211px; }
#kz
{position: absolute;
top: 0px;
left: 581px; }
#about {
position: absolute;
top: 0px;
left: 1307px;
}
#contact {
position: absolute;
top: 0px;
left: 1582px;
height: 2525;
width: 1900px;
}
#text {
position: absolute;
top: 340px;
left: 660px;
}
#email_icon {
position: absolute;
top: 500px;
left: 720px;
}
#email_address {
position: absolute;
top: 500px;
left: 815px;
}
#phone_icon {
position: absolute;
top: 610px;
left: 725px;
}
#phone_number {
position: absolute;
top: 635px;
left: 795px;
}
#facebook_icon {
position: absolute;
top: 745px;
left: 720px;
}
#facebook_text {
position: absolute;
top: 760px;
left: 820px;
}
#black {
position: absolute;
top: 240px;
left: 0px;
}
#facebook {
position: absolute;
top: 1300px;
left: 0px;
}
#contact_info {
position: absolute;
top: 1300px;
left: 635px;
}
#design {
position: absolute;
top: 1300px;
left: 1343px;
}
#triangles {
position: absolute;
top: 240px;
left: 876px;
}
1 Correct answer
5
Replies
AdChoices