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.
Related
I'm just a complete beginner so most of what I have are combinations from tutorial sites but I'm really stuck on this that it keeps jumping to the top of the page when I try to cycle through next image etc.
Being a totally newby any detailed help is really appreciated?
I don't know where I'm going wrong and have no clue where to even start to fix it?
#gallerywrapper {
width:640px;
height:450px;
margin:0 auto;
position:relative;
font-family:verdana, arial, sans-serif;
}
#gallerywrapper #gallery {
position:absolute;
left:0;
top:0;
height:450px;
width:640px;
overflow:hidden;
text-align:center;
}
#gallerywrapper #gallery div {
width:640px; height:900px;
padding-top:10px;
position:relative;
}
#gallerywrapper #gallery div img {
clear:both;
display:block;
margin:0 auto;
border:0;
}
#gallerywrapper #gallery div h3 {
padding:10px 0 0 0;
margin:0;
font-size:18px;
}
#gallerywrapper #gallery div p {
padding:5px 0;
margin:0;
font-size:12px;
line-height:18px;
}
#gallery .previous{
display:inline;
float:left;
margin-left:80px;
text-decoration:none;
background-color: #ddd;
color: black;
border-radius: 50%;
padding: 8px 16px;
}
#gallery .next{
display:inline;
float:right;
margin-right:80px;
text-decoration:none;
background-color: #FA4B2A;
color: white;
border-radius: 50%;
padding: 8px 16px;
}
<div id="gallerywrapper">
<div id="gallery">
<div id="pic1">
<img src="images/b1.jpg" height="350" width="500" alt="Image 1">
<a class="previous round" href="#pic5" >‹</a>
<a class="next round" href="#pic2" >›</a>
<h3>Botanical Gardens</h3>
</div>
<div id="pic2">
<img src="images/b2.jpg" height="350" width="500" alt="Image 2">
<a class="previous round" href="#pic1">‹</a>
<a class="next round" href="#pic3">›</a>
<h3>Botanical Gardens</h3>
</div>
<div id="pic3">
<img src="images/b3.jpg" height="350" width="500" alt="Image 3">
<a class="previous round" href="#pic2">‹</a>
<a class="next round" href="#pic4">›</a>
<h3>Botanical Gardens</h3>
</div>
<div id="pic4">
<img src="images/b4.jpg" height="350" width="500" alt="Image 4">
<a class="previous round" href="#pic3">‹</a>
<a class="next round" href="#pic5">›</a>
<h3>Botanical Gardens</h3>
</div>
<div id="pic5">
<img src="images/b5.jpg" height="350" width="500" alt="Image 5">
<a class="previous round" href="#pic4">‹</a>
<a class="next round" href="#pic1">›</a>
<h3>Botanical Gardens</h3>
</div>
</div>
</div>
This is due to use of link tag a, as you can see you are specifying ID of element in the href and by default your are scrolling to this element which is in the top of the page.
To avoid this you may use some javascript to prevent the default behavior of these link tags.
You may check these links :
preventDefault() on an <a> tag
How to stop default link click behavior with jQuery
https://css-tricks.com/return-false-and-prevent-default/
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'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.
Thanks for all of your help on my previous question! However, I noticed a small issue- It's not too important, I just wanted to know if there's a way to fix it. As the browser window gets smaller, the images start to overlap. I'd like the images to stop when they're 5px away from each other.
Could someone look over my code and make sure I'm not doing anything wrong with my HTML/CSS?
The HTML is this:
<div class="content">
<div class="listingThumbLine">
<div class="modelListing left">
<a href="modelOne.html">
<img src="modelOne.jpg" alt="Model One" class="modelThumb" id="modelOneThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing right">
<a href="modelTwo.html">
<img src="modelTwo.jpg" alt="Model Two" class="modelThumb" id="modelTwoThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
<div class="modelListing center">
<a href="modelThree.html">
<img src="modelThree.jpg" alt="Model Three" class="modelThumb" id="modelThreeThumb">
</a>
<br />
<span class="productThumbName">Model Name</span>
</div>
</div>
</div>
The CSS is this:
body{
background-image:url('bg.jpg');
background-repeat:repeat-x;
font-family: Arial;
color:#B5B5B5;
text-align:center;
}
.content{
font-size:1.25em;
margin:10px 100px;
}
img.modelThumb{
width:225px;
height:225px;
}
.left{
float:left;
position:relative;
}
.right{
float:left;
position:relative;
}
.center{
float:left;
margin: 0 auto;
}
.modelListing{
width: 33%;
text-align: center;
}
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