Jump to content
Uncle Stef's Forums are now in the Clubs - July 2025.

Website line breaks?

chickin

By chickin
in Dreamweaver

 Share

Recommended Posts

chickin Newbie

chickin

Posted
Posted

Hi, I seem to be having trouble with my newly made website. I have lay'd it out so everything is aligned to the left of the page and fits perfectly together.. But when i zoom out in my web browser, lines between the images emerge and it makes it look bad.. For example shouldc.png

shouldnt.png

Here is my CSS source code + HTMl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>College Site</title>
<style type="text/css">
body {
background-image: url(images/Background.png);
background-repeat: -xy;
}
</style>
</head>

<body topmargin="0">

</div>
<div class="Wrapper">
 <div id="TopSpace1"></div>
 <div id="Logo"></div>
 <div id="TopSpace2"></div>
 <div id="Login">

   <div align="left">  Username:<br />
       Password:</div>
 </div>
 <div id="TopSpace3"></div>
 <div id="TopSpace4"></div>
 <div id="LeftGlow"></div>
 <div id="MenuBar"></div>
 <div id="MenuBarSpace"></div>
 <div id="AdSpace"></div>
 <div id="RightGlow"></div>
 <div id="TextBox"></div>
 <div id="RightGlow2"></div>
 <div id="Footer"></div>
 <div id="RightGlow3"></div>
 <div id="End"></div>
</div>

</body>
</html>


.Wrapper {
height: 879px;
width: 848px;
margin: auto;
position: relative;
}
#LeftGlow {
background-image: url(images/7_LeftGlow.png);
background-repeat: no-repeat;
float: left;
height: 810px;
width: 41px;
}
#MenuBar {
background-image: url(images/8_MenuBar.png);
background-repeat: no-repeat;
float: left;
height: 60px;
width: 757px;
}
#MenuBarSpace {
background-image: url(images/9_MenuBarSpace.png);
background-repeat: no-repeat;
float: left;
height: 60px;
width: 50px;
}
#AdSpace {
background-image: url(images/10_AdSpace.png);
background-repeat: no-repeat;
float: left;
height: 236px;
width: 757px;
}
#RightGlow {
background-image: url(images/11_RightGlow.png);
background-repeat: no-repeat;
float: left;
height: 236px;
width: 50px;
}
#TextBox {
background-image: url(images/12_TextBox.png);
background-repeat: no-repeat;
float: left;
height: 444px;
width: 757px;
}
#RightGlow2 {
background-image: url(images/13_RightGlow2.png);
background-repeat: no-repeat;
float: left;
height: 444px;
width: 50px;
}
#Footer {
background-image: url(images/14_Footer.png);
background-repeat: no-repeat;
float: left;
height: 43px;
width: 757px;
}
#RightGlow3 {
background-image: url(images/15_RightGlow3.png);
background-repeat: no-repeat;
float: left;
height: 43px;
width: 50px;
}
#End {
background-image: url(images/16_End.png);
background-repeat: no-repeat;
float: left;
height: 27px;
width: 807px;
}

#TopSpace3 {
background-image: url(images/5_TopSpace3.png);
background-repeat: no-repeat;
float: left;
height: 38px;
width: 50px;
}
#TopSpace4 {
background-image: url(images/6_TopSpace4.png);
background-repeat: no-repeat;
float: left;
height: 31px;
width: 230px;
}

#TopSpace1 {
background-image: url(images/01_TopSpace1.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 41px;
}
#Logo {
background-image: url(images/2_Logo.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 284px;
}
#TopSpace2 {
background-image: url(images/3_TopSpace2.png);
background-repeat: no-repeat;
float: left;
height: 69px;
width: 293px;
}
#Login {
background-image: url(images/4_Login.png);
background-repeat: no-repeat;
float: left;
height: 38px;
width: 180px;
font-size: 13px;
font-family: Verdana, Geneva, sans-serif;
color: #CCC;
}

I've tried setting all the positioning of the divs but that just scrambled the images around.. Can anyone help me out? Thank you.

Andrea Newbie

Andrea

Posted
Posted

I'd forget about that for the moment and focus on the html first. Since I cannot actually see the individual components, I may be misjudging, but usually, with HTML/CSS, there is no need for all those divisions. What you have there looks more like an old-fashioned table design that's been 'modernized' - spacer gifs and all.

 

Instead, you could add your glow images to the right and left border of your main division. I'd also bet that something called 'topspacep can easily be done by CSS alone without the need of its own division.

 

Can you upload the site somewhere so we can see the whole thing live? (Right now, the individual images are missing, which I'd need to get a better idea of what you're working with)

chickin Newbie

chickin

Posted
  • Author
Posted

I'd forget about that for the moment and focus on the html first. Since I cannot actually see the individual components, I may be misjudging, but usually, with HTML/CSS, there is no need for all those divisions. What you have there looks more like an old-fashioned table design that's been 'modernized' - spacer gifs and all.

 

Instead, you could add your glow images to the right and left border of your main division. I'd also bet that something called 'topspacep can easily be done by CSS alone without the need of its own division.

 

Can you upload the site somewhere so we can see the whole thing live? (Right now, the individual images are missing, which I'd need to get a better idea of what you're working with)

 

http://hj4j35b324kjb.site50.net/ Here ya go, Ill have a look into the Ddvs and see what i can do.

falkencreative Newbie

falkencreative

Posted
Posted

I'd forget about that for the moment and focus on the html first. Since I cannot actually see the individual components, I may be misjudging, but usually, with HTML/CSS, there is no need for all those divisions. What you have there looks more like an old-fashioned table design that's been 'modernized' - spacer gifs and all.

I think that's the result of using Photoshop's Save to Web feature to do the coding -- the most recent versions tend to use a huge number of positioned divs, rather than tables. A little better, but still a huge mess to edit and it doesn't really result in clean, organized code.

chickin Newbie

chickin

Posted
  • Author
Posted

I think that's the result of using Photoshop's Save to Web feature to do the coding -- the most recent versions tend to use a huge number of positioned divs, rather than tables. A little better, but still a huge mess to edit and it doesn't really result in clean, organized code.

 

So what should i do? Any suggestions ?

falkencreative Newbie

falkencreative

Posted
Posted

So what should i do? Any suggestions ?

Ideally, you should know (or learn over time) how to hand-write the HTML rather than having Photoshop do it for you. As I said, Photoshop's Save for Web feature just isn't very good. It results in code that's hard to modify and tends to be very inefficient -- the sort of errors you are running into when you testing.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...