Menu
Hi. I made this art website for myself a while ago using a tutorial from this link [URL=”http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/comment-page-5/#comments”]http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/comment-page-5/#comments
Here’s a link to my site to let you see what I mean [URL=”http://akairyuu.zxq.net”]http://akairyuu.zxq.net
Here’s the html and css code for you to take a look at
[code=html]
<!DOCTYPE html>
<html>
<head>
<title>Akai’s Art</title>
<link href=”Style.css” rel=”stylesheet” type=”text/css” media=”screen”/>
</head>
<body>
<div id=”main”>
<div class=”container”>
<div id=”header”>
<div id=”logo”>
<h1>Logo</h1>
</div>
<ul id=”menu”>
<li><a href=”index.htm”>Home</a></li>
<li><a href=”original art.htm”>Original <br>Art</a></li>
<li><a href=”Fan art.htm”>Fan <br>Art</a></li>
<li><a href=”3D Renders.htm”>3D <br>Art</a></li>
<li><a href=”3D Animations.htm”>3D <br>Animations</a></li>
<li><a href=”art videos.htm”>Art <br>Videos</a></li>
</ul>
<div style=”clear:both”></div>
</div>
<div id=”content”>
<h2>Welcome to Akai’s Art</h2>
<h3>About this site</h3>
<p>Hello, I’m Akairyuu and welcome to my art website, Akai’s Art. In this website I will be showing most of my art pieces that I made which will be shown in the allocated galleries. This includes my original art which aren’t based on other works, Fan Art, 3D art and animation and also videos to do with art made by me.</p>
<p>To the right of this page you’ll see various links which include links to my art profiles, programs which I use and useful tutorial sites based on the said programs.</p>
<p>Also Note that this website was made entirely on GIMP 2.6, just to point that out :)</p>
<div id=”updates”>
<h3>Latest Updates</h3>
<p>Well, I’ve been working flatout on this site this week and I finally managed to get the design done on GIMP and got the HTML and CSS written up. I’ve still to do the actual art pages, which still have the original CSS but I’ll get ’round to that soon.</p>
</div>
</div>
<div id=”sidebar”>
<h3>Links</h3>
<ul id=”menu”>
<li><a href=”http://pyrodragoness.deviantart.com”>Me on DeviantArt</a></li>
<li><a href=”http://www.elfwood.com/~akairyuu”>Me on Elfwood</a></li>
<li><a href=”http://www.youtube.com/pyrogirl64″>Me on YouTube</a></li>
<li><a href=”http://www.blender.org”>Blender main site</a></li>
<li><a href=”http://www.gimp.org/”>GIMP main site</a></li>
<li><a href=”http://blenderartists.org/forum”>Blender Artists</a></li>
<li><a href=”http://www.tutorialized.com/”>Tutorialized</a></li>
<li><a href=”http://matrep.parastudios.de/”>Blender Materials Repository</a></li>
<li><a href=”http://gimp-tutorials.net/”>GIMP-Tutorials</a></li>
<li><a href=”http://mygimptutorial.com/round-web-20-button-with-a-metal-ring”>Great tut on making buttons in GIMP</a></li>
<li><a href=”http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/”>Awesome web making tutorial</a></li>
</ul>
</div>
<div style=”clear:both”></div>
</div>
</div>
<div id=”footer”>
<div class=”container”>
<p>Copyright © Akai’s Art 2010-2012<br/>
All Rights Reserved</p>
</div>
</div>
[CODE]
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin: 0px; padding: 0px;}
body {
font-family: Arial, Helvetica, sans-serif;
background: #ebe8e8;
}
.container {
width: 800px;
margin: 0 auto;
}
#main {
background: url(“header slice.jpg”) repeat-x;
}
#logo {
background: url(“Akais art logo 2.png”) no-repeat;
height: 159px;
width: 663px;
}
#logo h1{
text-indent: -9999px;
}
ul#menu {
list-style: none;
}
ul#menu li a {
font-size: 30px;
color: #ffffff;
text-decoration:none;
}
ul#menu li {
float: left;
}
ul#menu li {
list-style: none;
padding-top: 8px;
}
ul#menu li {
float: left;
padding-left: 20px;
padding-right: 20px;
}
#content h2 {
font-size: 36px;
color: #015878;
padding-top: 25px;
}
#content h3 {
font-size: 24px;
color: #444444;
padding-top: 20px;
padding-bottom: 20px;
}
#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}
#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}
#content small {
font-size: 12px;
color: #373737;
}
#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}
#updates {
padding-top: 10px;
}
#updates h3 {
padding-bottom: 10px;
}
#updates p {
padding-top: 10px;
padding-bottom: 14px;
}
#content {
width: 510px;
float: left;
}
#sidebar {
float: left;
}
#sidebar h3 {
font-size: 24px;
color: #ffffff;
font-weight: normal;
}
#sidebar ul li a {
font-size: 18px;
color: #000000;
}
#sidebar ul {
list-style: none;
}
#sidebar {
float: left;
margin-left: 55px;
margin-top:35px;
background: #6f6fff;
border: 4px solid #000000;
padding: 20px;
}
#footer {
background: url(“footer slice.jpg”) repeat-x;
padding-top: 20px;
padding-bottom: 60px;
margin-top: 40px;
colour: #fff;
}
Thanks in advance ?