/    Sign up×
Community /Pin to ProfileBookmark

whole site shifts to right

Copy linkTweet thisAlerts:
Jul 29.2010

Hi,

From my home page to the product page, everything shifts slightly to the right. Why is that and how do i amend it? What do i have to do to ensure that it does not shift anymore in future?

For the homepage,

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Merlin International</title>

<style type=”text/css”>
.style1 {
width: 1000px;
margin: 0px auto;
}

.style2 {
font-family:Berlin Sans FB
}

.style3 {
width: 1000px;
margin 0px auto
}

.style4 {
Width:336px;
height: 298px
}

.style5 {
font-size: 100px;
}

.style6 {
background-color: #CCFFFF
}

.style7 {
font-size: 22px;
text-align: left;
}

.style8 {
width:397px;
height:397px;
align:centre;
border-style: solid;
border-width: 3px;
}

.style9 {
text-align: center;
}

.style10 {
font-size: 20px;
color:#333333;
text-decoration:none;
}

.style11 {
font-size: 20px;
}

</style>
</head>

<body class=”style6″>

<div class=”style1 style2″>

<div>
<table class=”style3″>
<tr>
<td class=”style4″ style=”width: 336px”>
<img src=”images/logo.jpg” width=”336″ height=”298″></td>

<td><span class=”style5″>Merlin International</span>
</td>

</tr>
</table>
<div>
<table>
<tr>
<td class=”style7″ style=”width: 131px;” valign=”top”>
<a href=”index.htm” style=”color:#333333; text-decoration:none”>Home</a>
<br>
<a href=”products.htm” style=”color:#333333; text-decoration:none”>Products</a>
<br>
<a href=”contact.htm” style=”color:#333333; text-decoration:none”>Contact Us</a>
<br>
<a href=”events.htm” style=”color:#333333; text-decoration:none”>Recent Events</a>
</td>

<td style=”width: 858px” class=”style9″>
<object class=”style8″ type=”application/x-shockwave-flash” data=”images/movie_9april2010.swf”
name=”movie” value=”images/movie_9april2010.swf” >
</object>

</td>
</tr>
</table>
</div>
</div>
</div>

</body>

</html>
[/CODE]

For the product page,

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>.:Merlin International:. Products</title>

<style type=”text/css”>
.style1 {
width: 1000px;
margin: 0px auto;
}

.style2 {
font-family:Berlin Sans FB
}

.style3 {
width: 1000px;
margin 0px auto
}

.style4 {
Width:336px;
height: 298px
}

.style5 {
font-size: 100px;
}

.style6 {
background-color: #CCFFFF
}

.style7 {
font-size: 22px;
text-align: left;
}

.style8 {
width:397px;
height:397px;
align:centre;
border-style: solid;
border-width: 3px;
}

.style9 {
text-align: center;
}

.style10 {
font-size: 20px;
color:#333333;
text-decoration:none;
}

.style11 {
font-size: 20px;
}

</style>
</head>

<body class=”style6″>

<div class=”style1 style2″>

<div>
<table class=”style3″>
<tr>
<td class=”style4″ style=”width: 336px”>
<img src=”images/logo.jpg” width=”336″ height=”298″></td>

<td><span class=”style5″>Merlin International</span>
</td>

</tr>
</table>
<div>
<table>
<tr>
<td class=”style7″ style=”width: 131px;” valign=”top”>
<a href=”index.htm” style=”color:#333333; text-decoration:none”>Home</a>
<br>
<a href=”products.htm” style=”color:#333333; text-decoration:none”>Products</a>
<br>
<a href=”contact.htm” style=”color:#333333; text-decoration:none”>Contact Us</a>
<br>
<a href=”events.htm” style=”color:#333333; text-decoration:none”>Recent Events</a>
</td>

<td style=”width: 859px”>
<table style=”width: 100&#37;”>
<tr>
<td width=”286″ class=”style9″ valign=”bottom”>
<img alt=”” src=”images/dnp_logo.jpg”></td>

<td width=”286″ class=”style9″ valign=”bottom”>
<img alt=”” src=”images/magicard_logo.jpg” width=”182″ height=”43″></td>

<td width=”286″ class=”style9″ >
<img alt=”” src=”images/one_logo.jpg” width=”148″ height=”76″></td>
</tr>
</table>

<table style=”width: 100%”>
<tr>
<td width=”286″>
<ul>
<li>
<a href=”dnp/centuria_paper.htm” class=”style10″>
<span class=”style10″>Centuria Paper</span></a></li>
<li>
<a href=”dnp/ds.htm” class=”style10″>
<span class=”style10″>DS Products</span></a> </li>
<li>
<a href=”dnp/cx_120.htm” class=”style10″>
<span class=”style10″>ID Card Printer</span></a></li>
</ul>
</td>

<td width=”286″>
<ul>
<li>
<a href=”magi/avalon.htm” class=”style10″>
<span class=”style10″>Avalon</span></a></li>
<li>
<a href=”magi/enduro.htm” class=”style10″>
<span class=”style10″>Enduro</span></a></li>
<li>
<a href=”magi/rio2e_tango2e.htm” class=”style10″>
<span class=”style10″>Rio2e/ Tango2e</span></a></li>
<li>
<a href=”magi/tempo.htm” class=”style10″>
<span class=”style10″>Tempo</span></a></li>
</ul>
</td>

<td width=”286″>
<ul>
<li>
<a href=”one/cordless_phone.htm” class=”style10″>
<span class=”style10″>Digital Cordless Phones</span></a></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>

</body>

</html>
[/CODE]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@kiwibritJul 29.2010 — I haven't waded through the detail, but that coding smacks of each page being set up in Dreamweaver or the like, with ad hoc styling of table layout.

Personally, I would set up a layout with the navigation menu and basic layout in server-side or php includes - or a Master Page if using asp.net. Then all I would have to worry about would be the content section of each page - laid out using CSS.

Oh - and all the CSS would be in maybe just one linked style sheet, and so not listed each time in the <head> of each page. Also, to make things easier to troubleshoot, I would give each styling ID and class a meaningful name.

HTH
Copy linkTweet thisAlerts:
@FangJul 29.2010 — Does the scrollbar appear in only one of the pages?
Copy linkTweet thisAlerts:
@lizzardauthorJul 29.2010 — Does the scrollbar appear in only one of the pages?[/QUOTE]

Yeah, thanks. ?
Copy linkTweet thisAlerts:
@FangJul 29.2010 — Adding this will force a scrollbar in all documents:html {
overflow-y:scroll;
}
Copy linkTweet thisAlerts:
@lizzardauthorAug 04.2010 — is there any other way to add in the scroll?

As in the scroll appears on the right and at the bottom, any way to make it appear only on the right?
Copy linkTweet thisAlerts:
@lizzardauthorAug 04.2010 — IOh - and all the CSS would be in maybe just one linked style sheet, and so not listed each time in the <head> of each page. Also, to make things easier to troubleshoot, I would give each styling ID and class a meaningful name.
[/QUOTE]

Hi, how do i put all the styles into just one linked style sheet?
Copy linkTweet thisAlerts:
@FangAug 04.2010 — &lt;link rel="StyleSheet" href="styles.css" type="text/css"&gt;
http://www.w3.org/TR/html401/struct/links.html#edef-LINK
×

Success!

Help @lizzard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...