...

View Full Version : layout not looking right on other computers?



chess
08-22-2010, 11:31 PM
i'm almost going insane here aha, my website looks perfect whenever i view it on my computer, but as soon as i take a look at it on different computer it looks all out of line.
it's frustrating me so much and i don't really know what to do.
my website is
http://kaitlinkuhn.co/

and it's supposed to look like this
http://i36.tinypic.com/n5rk8g.jpg

bazz
08-22-2010, 11:42 PM
run your code through the validator at validator.w3.org

chess
08-23-2010, 12:30 AM
i validated my coding to the best that i can, but it still looks off....
my slideshow and content just seem to shift to the side :\

here's my coding if this helps at all....


body, html {
padding : 0;
margin : 0;
}
body {
background : #f9eaa3 url(http://i33.tinypic.com/2enc7ih.jpg) repeat-y center;
text-align : center;
font : 85%/170% "Arial", sans-serif;
color : #202020;
}
#container {
text-align : left;
margin-top : 0;
width : 840px;
background : transparent;
margin-left : auto;
margin-right : auto;
}
#header {
height : 264px;
background : url(http://i38.tinypic.com/33l03fb.jpg) repeat;
text-align : center;
margin-left : auto;
margin-right : auto;
margin-top : 0;
}
#sidebar {
width : 200px;
float : right;
margin-bottom : 20px;
margin-right : 70px;
}
#content {
width : 540px;
padding : 10px;
margin-bottom : 20px;
float : left;
}
#slidesho {
margin-right : auto;
margin-left : auto;
left : 234px;
margin-top : -256px;
}
#footer {
clear : both;
text-align : left;
background : transparent;
padding : 10px;
height : 40px;
}
a:link, a:visited {
text-decoration : none;
color : #595959;
font-weight : 400;
text-align : justify;
padding : 0;
text-decoration : none;
}
a:hover {
color : #595959;
text-decoration : underline;
}
.date {
background : #fff url("http://i35.tinypic.com/zjdwnc.jpg") repeat-x scroll left top;
width : 60px;
height : 60px;
text-align : center;
color : #fff;
font-family : Arial, Helvetica, sans-serif;
text-transform : uppercase;
float : left;
margin : 5px 5px 0 5px;
display : inline;
overflow : hidden;
}
.date .date-day {
color : #333;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 35px;
}
.date .date-month {
font-size : 11px;
font-weight : bold;
}


and



<!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" xml:lang="en" lang="en">
<head>
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<div id='header'>
<img src="http://i38.tinypic.com/4re15h.jpg" border="0" usemap="#headerr" alt="" />

<map name="headerr">
<area shape="rect" coords="287,183,341,235" href="http://playingdead.tumblr.com" alt="" />
<area shape="rect" coords="345,182,400,237" href="kaitlinkuhn@live.ca" alt="" />
<area shape="rect" coords="405,183,457,237" href="http://flickr.com/cavein" alt="" />
<area shape="rect" coords="463,185,524,238" href="http://facebook.com/kaitlink" alt="" />
<area shape="rect" coords="531,182,582,237" href="http://twitter.com/demonfestival" alt="" />
</map>


</div>



<div id="slidesho">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="/wp-content/themes/tem/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "slidesho", //ID of blank DIV on page to house Slideshow
dimensions: [346, 243], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i37.tinypic.com/v66ecg.jpg", "", "", " kaitlin kuhn."],
["http://i37.tinypic.com/2m665qa.jpg", "", "", " kaitlin kuhn."],
["http://i34.tinypic.com/2yx3zub.jpg", "", "", " kaitlin kuhn."],
["http://i36.tinypic.com/10ge61y.jpg", "", "", " kaitlin kuhn."] // no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
</div>

<div id="container">
<div id="sidebar">

<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.<br />
<br />
<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.<br />
<br />
<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.
</div> <!-- closes sidebar div -->

<div id="content" />

dpDesignz
08-23-2010, 01:11 AM
Your site looks perfectly fine to me on google chrome. Picture perfect you might say

MJo
08-23-2010, 01:52 AM
Not to discourage you... but this could be important ...

http://browsershots.org/

Perhaps you should decide what the majority of your audience will use and focus on making it work in those browsers.

cyberdesignz
08-23-2010, 05:55 AM
Buddy your website is looking perfect in all of my browsers.

bazz
08-23-2010, 11:42 AM
It looks wrong to me in FF3.6.8 and IE6.

I would recommend you change your source code slightly. Dump the image map and use semantic code (a list) for the nav menu.

Remove the slideshow until after you have got the page structure worked out. That means you know the page is right and any wronglnees that comes later is caused by the css relative to the slideshow. slidshow seems wrong too where the sliding image is not directly on top of the base.

bazz

coothead
08-23-2010, 04:10 PM
Hi there chess,

as our friend bazz has suggested...

I would recommend you change your source code slightly.
Dump the image map and use semantic code (a list) for the nav menu.
With that in mind check out this link...
http://www.megaupload.com/?d=BL9LSRFP
...which contains a reworking of the top of your document. ;)

coothead

bazz
08-23-2010, 04:51 PM
yeh coothead, that should give the idea but, there are a few things to consider.

1. position:absolute isn't needed and can cause unseen/hard to find difficulties with layout.
2. the menu on that site is in tables and not in a list, which it ought to be for proper semantics


bazz

coothead
08-23-2010, 05:07 PM
Hi there bazz,


1. position:absolute isn't needed and can cause unseen/hard to find difficulties with layout.
2. the menu on that site is in tables and not in a list, which it ought to be for proper semantics

I have used neither position:absolute nor tables in my code. :rolleyes:
This is the HTML file used...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>kaitlin kuhn - blog and portfolio</title>

<link rel="stylesheet" type="text/css" href="css/test.css">

<!--[if IE 6 ]>
<link rel="stylesheet" type="text/css" href="css/ie6-test.css">
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kaitlinkuhn.co/wp-content/themes/tem/fadeslideshow.js"></script>
<script type="text/javascript" src="scripts/gallery.js"></script>

</head>
<body>

<div id="wrapper">

<div id="header">

<ul>
<li><a id="tumblr" href="http://playingdead.tumblr.com">playingdead.tumblr.com</a></li>
<li><a id="mailto" href="mailto:kaitlinkuhn@live.ca">kaitlinkuhn@live.ca</a></li>
<li><a id="flickr" href="http://flickr.com/cavein">flickr.com/cavein</a></li>
<li><a id="facebook" href="http://facebook.com/kaitlink">facebook.com/kaitlink</a></li>
<li><a id="twitter" href="http://twitter.com/demonfestival">twitter.com/demonfestival</a></li>
</ul>

<div id="slidesho"></div>

</div><!-- end #header -->

<div id="container">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div><!-- end #content -->

<div id="sidebar">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!-- end #sidebar -->

</div><!-- end #container -->

</div><!-- end #wrapper -->

</body>
</html>

...and this is the CSS file used...



body {
margin:0;
padding:0;
background-color:#f9eaa3;
background-image:url(../images/body-bg.png);
background-repeat:repeat-x;
background-position:center 0;
font-family:arial,sans-serif;
font-size:100%;
}
#wrapper {
width:932px;
margin:auto;
}
#header {
height:256px;
padding-top:8px;
background-image:url(../images/header-bg.png);
background-position:-24px top;
background-repeat:no-repeat;
}
#header ul {
float:left;
display:inline;
padding:0;
margin:176px 0 0 264px;
list-style-type:none;
}
#header li {
float:left;
}
#header a {
display:block;
text-indent:-9999px;
outline:none;
}
#tumblr {
width:50px;
height:50px;
}
#mailto {
width:46px;
height:50px;
margin-left:10px;
}
#flickr {
width:46px;
height:50px;
margin-left:12px;
}
#facebook {
width:46px;
height:50px;
margin-left:20px;
}
#twitter {
width:46px;
height:50px;
margin-left:18px;
}
#slidesho {
float:left;
margin-left:14px;
}
#container {
padding-bottom:20px;
background-image:url(../images/content-bg.png);
background-repeat:repeat-y;
background-position:-24px top;
overflow:hidden;
font-size:80%;
}
#content {
float:left;
width:540px;
padding:10px;
margin-left:86px;
}
#sidebar {
float:left;
width:224px;
padding:10px;
}

The reason for using Megaupload.com was for the modified images. ;)

coothead

bazz
08-23-2010, 05:12 PM
The code you have just posted looks fine to me but here is part of the code I got from the link you posted.




<div id="main">




<div style="position:relative; width:980px; height:85px;">


<div style="position:absolute; left:5px; top:6px;"><a href="?"><IMG SRC="http://wwwstatic.megaupload.com/gui2/logo.gif" WIDTH="338" HEIGHT="38" BORDER="0" ALT=""></a></div>






<div style="position:absolute; width:250px; height:18px; top:17px; left:570px; text-align:right; font-family:arial; font-size:12px;">
<a href="?c=login&next=d%3DBL9LSRFP" style="color:#000000;">Login</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="?c=signup" style="color:#000000;">Register</a>
</div>





<script language="JavaScript" type="text/javascript">

var MenuImgs = new Array(7);
var MImgs = new Array(7);

MImgs[0] = new Image(184, 32);
MenuImgs[0] = new Image(184, 32);
MenuImgs[0].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_01.gif";
MImgs[1] = new Image(130, 32);
MenuImgs[1] = new Image(130, 32);
MenuImgs[1].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_02.gif";
MImgs[2] = new Image(126, 32);
MenuImgs[2] = new Image(126, 32);
MenuImgs[2].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_03.gif";
MImgs[3] = new Image(122, 32);
MenuImgs[3] = new Image(122, 32);
MenuImgs[3].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_04.gif";
MImgs[4] = new Image(149, 32);
MenuImgs[4] = new Image(149, 32);
MenuImgs[4].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_05.gif";
MImgs[5] = new Image(146, 32);
MenuImgs[5] = new Image(146, 32);
MenuImgs[5].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_06.gif";
MImgs[6] = new Image(133, 32);
MenuImgs[6] = new Image(133, 32);
MenuImgs[6].src = "http://wwwstatic.megaupload.com/gui2/menu/en/menuo_07.gif";
</script>

<div style="position:absolute; left:0px; top:49px;">
<TABLE cellpadding="0" cellspacing="0">
<TR>
<TD><a href="?c=signup"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_01.gif" WIDTH="184" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[0].src=this.src; this.src=MenuImgs[0].src;" onmouseout="this.src=MImgs[0].src;"></a></TD>
<TD><a href="?c=premium"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_02.gif" WIDTH="130" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[1].src=this.src; this.src=MenuImgs[1].src;" onmouseout="this.src=MImgs[1].src;"></a></TD>
<TD><a href="?c=rewards"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_03.gif" WIDTH="126" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[2].src=this.src; this.src=MenuImgs[2].src;" onmouseout="this.src=MImgs[2].src;"></a></TD>
<TD><a href="?c=top100"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_04.gif" WIDTH="122" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[3].src=this.src; this.src=MenuImgs[3].src;" onmouseout="this.src=MImgs[3].src;"></a></TD>
<TD><a href="?c=tools"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_05.gif" WIDTH="149" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[4].src=this.src; this.src=MenuImgs[4].src;" onmouseout="this.src=MImgs[4].src;"></a></TD>
<TD><a href="?c=support"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_06.gif" WIDTH="146" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[5].src=this.src; this.src=MenuImgs[5].src;" onmouseout="this.src=MImgs[5].src;"></a></TD>
<TD><a href="?c=faq"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/en/menu_07.gif" WIDTH="133" HEIGHT="32" BORDER="0" ALT="" onmouseover="MImgs[6].src=this.src; this.src=MenuImgs[6].src;" onmouseout="this.src=MImgs[6].src;"></a></TD>

</TR>
<TR>
<TD colspan="7"><IMG SRC="http://wwwstatic.megaupload.com/gui2/menu/shadow.gif" WIDTH="990" HEIGHT="4" BORDER="0" ALT=""></TD>
</TR>
</TABLE>
</div>

coothead
08-23-2010, 05:23 PM
Hi there bazz,

you are either pulling my leg or you've just taken an extra large toke on your spliff. :D

Why on earth would you want to view the the source code of megaupload.com? :rolleyes:

If you really wish top see the fruits of my labours, then you must download the zip file that I have placed there. ;)

coothead

bazz
08-23-2010, 06:19 PM
Why on earth would you want to view the the source code of megaupload.com? :rolleyes:


I didn't ;) I was merely using the link you posted to see the source code that you were referring to (unintentionally, I now understand). had your link been to a zip file, it would have ben clearer that you weren't linking to megaupload.

I need a spliff now :D

bazz

coothead
08-23-2010, 06:38 PM
Hi there bazz,

this is the information to be found on the megaupload.com page...


Filename: chess.zip
File description: reworking of the top of the document
File size: 513.14 KB

I reckon that you must be going for your second or third spliff not your first. :lD

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum