5 Replies - 607 Views - Last Post: 07 April 2014 - 03:41 AM

#1 nolanconcepts  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 06-April 14

Help Please First time coding a site

Posted 06 April 2014 - 04:44 PM

Hello, This is my first time coding a site to be put on the web and I have some issues with what i have coded so far.
Its supposed to look like this http://gyazo.com/c89...0d2ed634333ad62
but it turns out to this http://gyazo.com/5f6...b1bc507edbdef2d

My code is here
<!DOCTYPE html>
<html>
<head>
<title>Qehzy</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body max-width:1200px;>
<body max-width:1200px;>
<dic id="small_logo">
<img src="qehzylogo50x50.png" alt="Qehzy_logo" height="50" width="50">
</div>
<div id="navbar">
<ul>
<li><a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Contact</a></li>
<li><a href="http://qehzy.carbonmade.com/">Carbonmade</a></li>
<li><a href="https://www.youtube.com/user/ThatsQehzy">Youtube</a></li>
<li><a href="https://www.behance.net/Qehzy/">Behance</a></li>
</ul>
</div>
<div id="logo2">
  <div align="center"><img src="NewLogo.png" alt="Qehzy_logo" height="175" width="485"></div>
</div>
<div id="info">
  <h2>Home of Qehzy</h2>
<h3>Graphic Designer</h3>
</div>
<div id="icons">
<ul>
<li><a href="https://plus.google.com/+ThatsQehzy"> <img src="google_qehzy.png" alt="Google+" height="25" width="25"></a></li>
<li><a href="http://qehzy.carbonmade.com/"><img src="carbonmade_qehzy.png" alt="Carbonmade" height="25" width="25"></a></li>
<li><a href="https://www.youtube.com/user/ThatsQehzy"><img src="youtube_qehzy.png" alt="YouTube" height="25" width="25"></a></li>
<li><a href="https://www.behance.net/Qehzy/"><img src="behance_qehzy.png" alt="Behance" height="25" width="25"></a></li>
<li><a href="https://twitter.com/Qehzy"><img src="twitter_qehzy.png" alt="Qehzy_logo" height="25" width="25"></a></li>
<li><a href="http://goo.gl/tvmF4"><img src="store_qehzy.png" alt="Store" height="25" width="25"></a></li>
<li><a href="http://qehzy.spreadshirt.com/"><img src="shirt_qehzy.png" alt="Spreadshirt" height="25" width="25"></a></li>
</ul>
</div>
<div id="port">
<table   border-collapse: collapse; border-spacing: 0px;>
	<tr>
		<td><a href="https://www.youtube.com/watch?v=C2EmtvQ8rvE" ><img src=" optic_port.jpg " alt="Optic" height="200" width="200" onmouseover="this.src=' optic_port_rollover.jpg '" onmouseout="this.src=' optic_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=FyIoY67yd_k" ><img src=" clutch_port.jpg " alt="clutch" height="200" width="200" onmouseover="this.src=' clutch_port_rollover.jpg '" onmouseout="this.src=' clutch_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=yQ7CPCYkRYU" ><img src=" football_port.jpg " alt="football" height="200" width="200" onmouseover="this.src=' football_port_rollover.jpg '" onmouseout="this.src=' football_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=UdnQKwbukJY" ><img src=" dog_port.jpg " alt="dog" height="200" width="200" onmouseover="this.src=' dog_port_rollover.jpg '" onmouseout="this.src=' dog_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=grAEuamHtQk" ><img src=" yeoey_port.jpg " alt="yeoey" height="200" width="200" onmouseover="this.src=' yeoey_port_rollover.jpg '" onmouseout="this.src=' yeoey_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=grAEuamHtQk" ><img src=" robbie_port.jpg " alt="robbie" height="200" width="200" onmouseover="this.src=' robbie_port_rollover.jpg '" onmouseout="this.src=' robbie_port.jpg '"  /></a></td>
	</tr>
	<tr>
		<td><a href="https://www.youtube.com/watch?v=C2EmtvQ8rvE" ><img src=" hateful_port.jpg " alt="hateful" height="200" width="200" onmouseover="this.src=' hateful_port_rollover.jpg '" onmouseout="this.src=' hateful_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=h6HlTRAW0YI" ><img src=" composited_port.jpg " alt="composited" height="200" width="200" onmouseover="this.src=' composited_port_rollover.jpg '" onmouseout="this.src=' composited_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=qrPpNXvnz9Q" ><img src=" boba_port.jpg " alt="boba" height="200" width="200" onmouseover="this.src=' boba_port_rollover.jpg '" onmouseout="this.src=' boba_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=rqcP6t4p_EQ" ><img src=" space_port.jpg " alt="space" height="200" width="200" onmouseover="this.src=' space_port_rollover.jpg '" onmouseout="this.src=' space_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=C2EmtvQ8rvE" ><img src=" compositedbanner_port.jpg " alt="composited" height="200" width="200" onmouseover="this.src=' compositedbanner_port_rollover.jpg '" onmouseout="this.src=' compositedbanner_port.jpg '"  /></a></td>
		<td><a href="https://www.youtube.com/watch?v=C2EmtvQ8rvE" ><img src=" qehzy_port.jpg " alt="qehzy" height="200" width="200" onmouseover="this.src=' qehzy_port_rollover.jpg '" onmouseout="this.src=' qehzy_port.jpg '"  /></a></td>
	</tr>
</table>
</div>
<div id="footer">
<p>Copyright 2014 Qehzy</p>
</div>
</body>
</html>


and

*	{margin: 0;
	 padding: 0;
	 font-family: Open Sans, Signika, Arial;
	 }

body
{
background-color:#f52604;
font-family: open sans, Arial;
width: 1200px;
}

h2
{
color:white;
text-align:center;
font-size: 38pt;
padding-top: 20px;
padding-bottom: 0px;
}

h3
{
color:white;
text-align:center;
font-size: 22pt;
padding-top: 0px;
}

#logo2 {padding-top: 25px;}

p
{
font-size: 14pt;
}

li
{
display:inline;

}

body
{
background:url(main.jpg);
background-size:1200px 685px;
background-repeat:no-repeat;
}

#navbar {float: right;
padding-top: 0px;
padding-right: 30px;}

#icons {
	margin-left: 41%;
	}

table 
{
width:1200px;
margin:0px;
padding:0px;
        border-collapse: collapse;
        border-spacing: 0px;
}
th
{
height:400px;
        border-spacing: 0px;
}


#footer {
	background-color: #ffffff;
	background-size:100% 45px;
	}

#small_logo {padding-left: 15px;}	
	
a:link {color:#ffffff;
text-decoration:none;}      
a:visited {color:#ffffff;
text-decoration:none;} 
a:hover {color:#ffffff;
text-decoration:none;} 
a:active {color:#ffffff;
text-decoration:none;}  


Thank you to whoever helps me. I really want to learn how to code and my high school teachers barely teach.

This post has been edited by macosxnerd101: 06 April 2014 - 04:51 PM
Reason for edit:: Please use code tags


Is This A Good Question/Topic? 0
  • +

Replies To: Help Please First time coding a site

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3456
  • View blog
  • Posts: 11,707
  • Joined: 12-December 12

Re: Help Please First time coding a site

Posted 06 April 2014 - 05:28 PM

I've only had a brief look but
<table   border-collapse: collapse; border-spacing: 0px;>

should be
<table  style="border-collapse: collapse; border-spacing: 0px;">

but you already have an external stylesheet so you should put these rules in there and avoid inline styles.

You should also quote fonts with spaces:
font-family: 'Open Sans', Signika, Arial;

Note that the align attribute is obsolete in HTML5. If you want to centre something then use css in the stylesheet.

<body max-width:1200px;>

This is wrong as well and you have two body-tags, and dic rather than div.
Was This Post Helpful? 1
  • +
  • -

#3 nolanconcepts  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 06-April 14

Re: Help Please First time coding a site

Posted 06 April 2014 - 05:44 PM

Thanks for helping
Was This Post Helpful? 0
  • +
  • -

#4 sam_writes_code  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 59
  • Joined: 05-November 12

Re: Help Please First time coding a site

Posted 07 April 2014 - 03:12 AM

Also, you have not closed your image tags either, like

<img src="qehzylogo50x50.png" alt="Qehzy_logo" height="50" width="50">

Should have a / at the end.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3456
  • View blog
  • Posts: 11,707
  • Joined: 12-December 12

Re: Help Please First time coding a site

Posted 07 April 2014 - 03:28 AM

In HTML5 which the OP is using the img tag does not require the slash. It can be inserted optionally but is ignored.
Was This Post Helpful? 0
  • +
  • -

#6 sam_writes_code  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 59
  • Joined: 05-November 12

Re: Help Please First time coding a site

Posted 07 April 2014 - 03:41 AM

View Postandrewsw, on 07 April 2014 - 10:28 AM, said:

In HTML5 which the OP is using the img tag does not require the slash. It can be inserted optionally but is ignored.

Ok, learned something new today. The OP can ignore my post. :oops:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1