Hi I've been trying to improve my site after posting it on the critique forum and getting some very helpful feedback.
But now I have a problem.
When I view the page on my laptop which has a wide screen it looks exactly how I want it, But, when I view it on my dads non-widescreen desktop monitor the page is showing up with a different layout not by much but the text is mis-aligned I've added some screen shots to show you what I mean.
the attached images are what is showing on dads
the thumbnails are whats showing on mine and how I want it
Can anybody help?
This is my code:
- Code: Select all
*{
padding:0; margin:0;
}
body {
background : url(images/transbrick.jpg);
background-attachment: fixed;
font : 14px verdana, arial, sans-serif;
color : #036;
}
a, a:visited {
color : #f93;
text-decoration:none;
}
a:hover {
color : #036;
text-decoration:none;
}
#page {
width : 780px;
margin : auto;
background : #ffffff;
font : 14px verdana, arial, sans-serif;
text-align : left;
}
#page p{
font : 14px verdana, arial, san-serif;
Color: #036;
margin: 0 10px 15px 20px;
padding:0px 10px 15px 20px;
}
#page h2 {
text-align: center;
padding-bottom: 40px;
}
#page h4 {
padding-top: 25px;
}
#pageHead {
height : 123px;
width : 760px;
position : relative;
padding-top : 10px;
margin: 0px 0px 5px 10px;
background : #ffffff url(theme_images/auckland2.jpg) no-
repeat;
}
#pageHead cite {
position : absolute;
width : 465px;
text-align : right;
right : 20px;
top : 20px;
color : #ffc;
text-transform : uppercase;
font-style : normal;
padding : 5px 20px 0px 0px;
font-weight : bold;
}
#pageSidebar {
float : left;
margin: 0px 20px 20px 10px;
width : 180px;
background : #ece1be url(theme_images/pagesidebar-bg.gif)
repeat-y top left;
}
#pageNav {
margin-left: 0px;
background : #f93 url(theme_images/pageNav-bg.gif) repeat-y
top left;
}
#pageNav h2.title {
background : url(theme_images/pageNav-heading.gif) no-
repeat top left;
color: #036;
padding : 0;
margin : 0px;
font-size : 150%;
text-align : center;
height : 34px;
padding : 15px 20px 0 0;
}
#pageNav ul, #pageNav li {
padding : 0;
margin-left : 8px;
list-style-type : none;
margin : auto;
}
#pageNav ul {
width : 148px;
padding-bottom : 5px;
}
#pageNav li {
height : auto !important;
padding-top : 5px;
padding-left : 10px;
height : 23px;
min-height : 23px;
background : url(theme_images/pageNav-button.gif) no-repeat
top left;
margin-bottom : 2px;
}
#pageNav li a, #pageNav li a:visited {
color : #339;
text-decoration : none;
font-size : 12px;
}
#pageNav li a:hover {
color : #c30;
}
#blockD {
background : url(theme_images/pagesidebar-end.gif) no-repeat
bottom left;
padding-bottom: 5px;
}
#blockD h2.title {
padding : 0;
margin : 0;
background : url(theme_images/pagesidebar-heading2.gif) no-
repeat top left;
height : 30px;
text-align : center;
font-size : 16px;
padding-top : 8px;
}
#blockD p {
text-align: center;
margin:2.5em 0 2.5em 0;
}
#blockD a {
text-decoration: none;
}
#frontsplash {
margin-bottom: 40px;
margin-left: 332px;
width : 300px;
height : 164px;
background : url(theme_images/logo2.png) no-repeat top;
}
#pageFooter2 {
position : relative;
color : #ffffff;
margin-top : 8px;
margin-left : 10px;
width : 757px;
height : 41px;
background : url(theme_images/footer.gif) repeat-x top left;
}
#pageFooter2 #footNav {
position : absolute;
top : 10px;
right : 15px;
}
#pageFooter2 p {
position : absolute;
top : 10px;
margin : 0;
padding : 0;
left : 15px;
color : #f93;
}
#pageFooter2 #footLeft2 {
float : left;
background : url(theme_images/footer-left2.gif) no-repeat top
left;
width : 9px;
height : 41px;
}
#pageFooter2 #footRight2 {
float : right;
background : url(theme_images/footer-right2.gif) no-repeat top
left;
width : 9px;
height : 41px;
}
#navlist {
padding: 10px;
margin-top: 40px;
text-align:center;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-align: center;
color: #f93;
}
#navlist li a, #navlist li a:visited {
color : #036;
text-decoration : none;
font-size : 12px;
}
#navlist li a:hover {
color : #f93;
}
#photo {
padding : 5px;
text-align : center;
}
.photo2 {
float: right;
margin: 0px 20px 20px 40px;
}
.photo3 {
float: left;
margin: 0px 20px 10px 50px;
}
.photo4 {
text-align:center;
margin: 0px 20px 10px 20px;
}
ul.none {
list-style-type: none;
list-style-position: inside;
}
li.marg {
margin-bottom: 10px;
margin-left: 50px;
}