Tweet
On my laptop with mozilla my website looks fine:
On my friend's laptop it looked silly and I think it's that his browser is set to be zoomed out further or something. Is there a way to lock somebody into a certain zoom level, or is that not the issue with my code/page?
Here's the HTML, extremely simple:
And here's the CSS, some of it may be leftover from something else I was trying out, sorry if so:
On my friend's laptop it looked silly and I think it's that his browser is set to be zoomed out further or something. Is there a way to lock somebody into a certain zoom level, or is that not the issue with my code/page?
Here's the HTML, extremely simple:
Code:
<!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"> <link href="css/newdefault.css" rel="stylesheet" type="text/css" /> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>welcome to professor cuddlecore's labyrinth of web designs</title> </head> <img id="scroll_right" src="/jpgs/SCROLL_RIGHT2.jpg" /> <p id="welcome">Welcome to Professor Cuddlecore's ingeniously unconventional website, which he designed by himself (high five!). If you want to see what else He can do, scroll down and click on something.</p> <div id="m_w_p_a"> <a class="music" href="/music/default.php"><img src="/jpgs/music_link.jpg" /></a> <a class="writing" href="/writing/default.php"><img src="/jpgs/writing_link.jpg" /></a> <a class="paintings" href=""><img src="/jpgs/paintings_link.jpg" /></a> <a class="about" href=""><img src="/jpgs/about_link.jpg" /></a> </div> </body> </html>
Code:
@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
background: white;
width: 3500px;
height: 2000px;
border: 6px dashed black;
}
img {
margin: 0 auto;
padding: 0;
border:none;
}
p {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
}
#scroll_right {
margin: 0 auto;
padding: 0;
position: absolute;
top: 55px;
left: 350px;
}
#welcome {
position: absolute;
left: 2700px;
top: 200px;
font-size: 18px;
height: 500px;
width: 300px;
}
#m_w_p_a {
background: #fff url(/jpgs/MUSIC_WRITING_PAINTINGS_ABOUT.jpg) no-repeat center;
width: 600px;
height: 400px;
position: absolute;
top: 1500px;
left:2500px;
}
a, a:focus {
border: none;
outline: none;
}
a.music {
position: absolute;
top: 0px;
left: 0px;
}
a.music:hover {
margin: 5px;
}
a.writing {
position: absolute;
top: 91px;
left: 0px;
}
a.writing:hover {
margin: 5px;
}
a.paintings {
position: absolute;
top: 192px;
left: 0px;
}
a.paintings:hover {
margin: 5px;
}
a.about {
position: absolute;
top: 285px;
left: 0px;
}
a.about:hover {
margin: 5px;
}
Comment