I'm new to coding, making my first ever website for a college assignment and it appears that when i zoom in on my website everything kind of clashes together any help would be really appreciated!
The image at 67% zoom.
The image at 100% zoom
Code i am using:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="w3.css">
<style>
div.relative {
position: relative;
left: 5px;
top: 115px;
border: 0px solid #73AD21;
}
</style>
<style>
a {
color: Black;
}
</style>
<title>The Steakhouse</title>
<style>
body {
background-image: url("Backgroundlol.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
<div>
h1 {
position: center;
left: 640px;
top: 15px;
}
</div>
</style>
<div>
<center>
<DIV style="position: absolute; top:100px; left:800px; width:500px; height:25px"> <center> <font size="7" face="Agency FB"> <b> The Steakhouse! </b> </font> <br> <b> Why don't you up the steaks a little?! </b> </center></DIV>
<IMG STYLE="position:absolute; TOP:5px; LEFT:2px; WIDTH:280px; HEIGHT:290px" SRC="steakhouse logo.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:400px; WIDTH:250px; HEIGHT:240px" SRC="a_burned.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:1450px; WIDTH:250px; HEIGHT:250px" SRC="NRA1.png">
<IMG STYLE="position:absolute; TOP:675px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="facebook.png">
<a href="http://www.instagram.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:775px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="instagram.png">
<a href="http://www.twitter.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:875px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="twitter.png">
<ul>
</div>
<DIV style="position: absolute; top:300px; left:-380px; width:1000px; height:25px"> <center> <ul>
<font face="Agency FB" size="25" <li>LINKS:</li> </font> <br>
<font face="Agency FB" size="25" <li>About Us</li> </font> <br>
<font face="Agency FB" size="25" <li>Contact</li> </font> <br>
<font face="Agency FB" size="25" <li>Reservation</li> </font> <br>
<font face="Agency FB" size="25" <li>Awards</li> </font> <br>
</ul> </center> </DIV>
<DIV style="position: absolute; top:765px; left:1000px; width:500px; height:25px"><h1> Recent News:</h1></DIV>
<DIV style="position: absolute; top:825px; left:890px; width:500px; height:25px"><H3>WEBSITE NOW OFFICIALLY LAUNCHED!</H3></DIV>
</head>
<body>
</body>
</html>
The answer is simple, elements used in creating the website believe in being there pixel fixed weather situation changes or not.
If you want to make a more dynamic website that works on various resolutions(assuming all are in the range of computer standard i.e. not small like mobile)
Break down the page into its core elements, for example Header, Body, Footer
create elements inside this based on percentages of the screen available
for ex, if sidebar occupies 20% of the body then no matter what the situation in behaves relative.
tips: create a main element and fix its height(lets say 300px header)
then you can define percentages in both height and width to various header elements.
Hope I could help, good luck.
Related
I've have the horizontal line start a third way through the webpage, but getting the line to move down a bit (maybe 200-400px?) is giving me a real pain. And whenever i try to use "top:-200px;" within the style element (midline) it just makes half of the line disappear
<html>
<header>
<style>
.divider{
position:absolute;
left:33.3%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
.divider2{
position:absolute;
left:66.6%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
#left {
width:380px;
float:left;
margin-left: 100px
}
#middle {
width:380px;
float:right;
text-align:center;
margin-right: 300px
}
#right {
width:380px;
float:right;
margin-left: 40px
}
#midline{
position:relative;
left:530px;
width:1265px;
height:5px;
background: black;
}
</style>
</header>
<body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" >
<div id="left">
<font color="white">
<p>
<h1> Greetings!</h1>
</p>
<font size="6", color="white">
<h3>Welcome to my world ;D </h3>
<p>
Heres a little information about me
</p>
<p>
A photo of me VV
</p>
<div id="midline"></div>
<p>
<a href="https://www.facebook.com/shan.kulkarni.9">
<img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" />
</a>
<p>
Click on it and you'll go to my Facebook
</p>
<p>
Follow me on instagram while you're at it ;o
</p>
</div>
<div class="divider2"></div>
<div id="right">
<h2> My Hobbies </h2>
</div>
<div class="divider"></div>
<div id="middle">
<h2> Favorite Quotes</h2>
</div>
</font>
</body>
</html>
Here is the code:
https://jsfiddle.net/fjzcwfyx/
Leave out the bottom setting and set top: 200px; (not minus, but plus - that's the distance to the top). BTW: top AND bottom in one rule is too much, one of them is sufficient.
I have some html here which works fine on Firefox, but when I tested them on Chrome, those which don't include the div work fine, but the other pages are totally disassembled! For example, here is the login code:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<meta name="author" content="lenovo" />
<style>
.div {
position:absolute;
top:"30px";
border:1px solid #a1a1a1;
padding:10px 40px;
background:white;
width:300px;
height:350px;
border-radius:2px;
}
</style>
</head>
<body>
<div style="left: 890px">
<p style="font-size: 27px; position: relative; left: -10px"> <font face="century gothic"> <b>Sign In</b> </font></p>
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Email</b></font> </p>
<form>
<input type="text"; name="email"; style="width: 300px; background-color: white" class="left"/>
</form>
<br />
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Password</b></font> </p>
<form>
<input type="text"; name="Password"; style="width: 300px; background-color: white" class="left"/>
<br />
<br />
<br />
<input type="checkbox"; class="" /> Remember me <br />
</form>
<br />
<button class="left" style="color: white; background-color: blue; width: 100px; height: 40px" type="button" ><b>Sign In</b></button>
<br />
</div>
</body>
Chrome:
Firefox:
Okay, so based on your screenshots, this is what I think is happening. You are attempting to style the div on your form. There must be other elements on the page that must be affected by your styling, causing the strange behavior.
Try this - hopefully this will resolve your issue.
Update your HTML like so:
<div class="myForm" style="left: 890px">
And then update your CSS to:
.myForm
{
position:absolute;
top:"30px";
border:1px solid #a1a1a1;
padding:10px 40px;
background:white;
width:300px;
height:350px;
border-radius:2px;
}
Basically, all I've done is assigned a specific class name to your form, and then changed the CSS to that class name as well. This way, you can be sure what is being targeted by your code.
You are targeting a class called div instead of the tag. Remove the leading dot and you should be fine.
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!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" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!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" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.
So I am creating my own website for the first time and after a bunch of problems, I've ran into one I am unsure of how to fix.
ngkevin-art.com/about.html
This is how it looks like in Dreamweaver and how I want it to look:
http://i.imgur.com/wlOIR.jpg
But when I go into Live View, or see it online, it falls apart. Any help would be appreciated.
CSS:
#charset "utf-8";
/* CSS Document */
/* General HTML Tag Rules */
body {
width:auto;
height:auto;
background-image:url(images/bg_demo2.png);
background-color:#2d2d2d;
background-repeat:no-repeat;
background-position:center;
margin-top:30px;
}
#font-face {
font-family: Harabara;
src: url(Harabara.ttf);
font-weight:200;
}
h1 {
font-family: Harabara, Helvetica, Arial, sans-serif;
font-size:150%;
color:#CECEBC;
}
h2 {
font-family: Harabara, Helvetica, Arial, sans-serif;
font-size:100%;
color:#CECEBC;
}
.text {
margin-left:75px;
width:auto;
float:left;
}
#text2 {
width:408px;
text-align:center;
}
.text3 {
margin-left:25px;
width:auto;
float:left;
}
#container {
width:1280px;
height:960px;
margin-left:auto;
margin-right:auto;
}
#wrapContact {
width: 520px;
height: 100px;
margin-left:735px;
margin-top: 10px;
clear: both;
}
#linked {
float:left;
margin-top:35px;
width: 175px;
}
#facebook {
float:left;
width: 200px;
margin-left:32px;
margin-top:25px;
}
#email {
float:left;
width:75px;
margin-left:35px;
margin-top:20px;
}
#wrapNav {
width: 475px;
margin-left:750px;
margin-top:60px;
}
#demo {
width: 500px;
text-align:center;
margin-top: 70px;
margin-left:auto;
margin-right:auto;
}
#flatbook {
width:250px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#wrapAbout {
margin-left:auto;
margin-right:auto;
margin-top:75px;
width: 1100px;
height:auto;
}
#picture {
width:408px;
margin-top:100px;
float:left;
}
HTML:
<body>
<div id="container">
<div id="wrapContact">
<div id="linked">
<a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b">
<img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
</div>
<div id="facebook">
<a href="http://www.facebook.com/profile.php?id=1309131548">
<img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
</div>
<div id="email">
<a href="mailto: ngkevin.3dartist#gmail.com">
<img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
</div>
</div> <!-- End "wrapContact"> -->
<div id="wrapNav">
<a href="index.html">
<img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>
<a href="demo.html">
<img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>
<a href="about.html">
<img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>
</div>
<!-- End "wrapNav"> -->
<div id="wrapAbout">
<div id="picture">
<img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
<div id="text2">
<h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
</div>
</div>
<div class="text">
<h1> Resume: <br/>
<br/> Email: <br/> <br/>
<br/> About Me:</h1>
</div>
<div class="text3">
<h1> Click Here
<br/> <br/> ngkevin.3dartist#gmail.com <br/>
<br/> <br/> <font size="4">
My desire to be in the game development industry is to work with other individuals that take pride in creating a game,
something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and
artistic skills for that purpose. <br/> <br/>
I believe the key to creating memorable game art, whether it be characters or environments, is the story.
Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result,
I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda
showed me a world of endless imagination. <br/> <br/>
The characters which are the focal point of the story, their goals and motivations, their trials and tribulations,
their victories and defeats... These are the things I think about constantly when I look at them.
A character without depth doesn't exist, but if they do, I can only imagine how boring that would be. </font></h1>
</div>
</div>
</div><!-- End "container" -->
</body>
Try giving your .text3 class a fixed width. 450px looks about right.
Ok so I'm nearly done creating my first website. However it doesn't seem to run well in IE. It runs fine in Firefox and Chrome. The background loads but the main problem is that the picture links seem broken? Any help would be greatly appreciated.
My site: ngkevin-art.com
CSS:
body {
width:auto;
height:auto;
background-image:url(images/bg_main2.png);
background-color:#2d2d2d;
background-repeat:no-repeat;
background-position:center;
margin-top:30px;
}
#container {
width:1280px;
height:960px;
margin-left:auto;
margin-right:auto;
}
#wrapContact {
width: 520px;
height: 100px;
margin-left:735px;
margin-top: 10px;
clear: both;
}
#linked {
float:left;
margin-top:35px;
width: 175px;
}
#facebook {
float:left;
width: 200px;
margin-left:32px;
margin-top:25px;
}
#email {
float:left;
width:75px;
margin-left:35px;
margin-top:20px;
}
#wrapNav {
width: 475px;
margin-left:750px;
margin-top:60px;
}
#wrapCharacters {
width: 960px;
z-index: 3;
margin: 130px auto auto 75px;
float:left;
}
.turntable {
margin: .5% auto auto auto;
}
#zanza {
float:left;
}
#titan {
float:left;
margin-left: 10px;
}
#rockBeast {
float:left;
margin-left: 10px;
}
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" />
<title>Kevin Ng Art Portfolio</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="default3.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="wrapContact">
<div id="linked">
<a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b">
<img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
</div>
<div id="facebook">
<a href="http://www.facebook.com/profile.php?id=1309131548">
<img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
</div>
<div id="email">
<a href="mailto: ngkevin.3dartist#gmail.com">
<img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
</div>
</div> <!-- End "wrapContact"> -->
<div id="wrapNav">
<a href="index.html">
<img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>
<a href="demo.html">
<img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>
<a href="about.html">
<img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>
</div>
<!-- End "wrapNav"> -->
<div id="wrapAbout">
<div id="picture">
<img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
<div id="text2">
<h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
</div>
</div>
<div class="text">
<h1> Resume: <br/>
<br/> Email: <br/> <br/>
<br/> About Me:</h1>
</div>
<div class="text3">
<h1> Click Here
<br/> <br/> ngkevin.3dartist#gmail.com <br/>
<br/> <br/> <font size="4">
My desire to be in the game development industry is to work with other individuals that take pride in creating a game,
something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and
artistic skills for that purpose. <br/> <br/>
I believe the key to creating memorable game art, whether it be characters or environments, is the story.
Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result,
I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda
showed me a world of endless imagination. <br/> <br/>
The characters which are the focal point of the story, their goals and motivations, their trials and tribulations,
their victories and defeats... These are the things I think about constantly when I look at them.
A character without depth doesn't exist, but if they do, I can only imagine how boring that would be.
</font></h1>
</div>
</div>
</div><!-- End "container" -->
</body>
</html>
It's the width/height attributes on your images that are causing the problem. You have the width and height set to "auto". Either set an explicit width/height:
<img src="zanza/zanza_portrait_top.png" width="179" height="198" border="0" alt="zanza">
or remove the width and height attributes:
<img src="zanza/zanza_portrait_top.png" border="0" alt="zanza">
IE is messing up the image width and height. I'm sorry that I can't help more, but removing the height and width elements of each image makes the images show up for me.
Refer to this link about the auto property in CSS3. Basically, it is not supported in that version so it's better if you explicitly set it or do without the property.
Link