Jump to content
UncleStef Mentoring Update: New SEO course!

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.

Link to comment
Share on other sites
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)

Link to comment
Share on other sites
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.

Link to comment
Share on other sites
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.

Link to comment
Share on other sites
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 ?

Link to comment
Share on other sites
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...