New Layout - Page 4

objecterror · 05-05-2008, 05:17 AM

I see what you did there, lol, very clean.

peterhuang913 · 05-05-2008, 05:34 AM

I just checked on another computer and the sidebar and content area overlaps if displayed 1024 x 768. But I don't think people use those resolutions anymore.

/EDIT: New code to fix above issue, man i work fast. also no thank yous?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/
 
<!-- 
body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #000000;
        margin: 0;
        padding: 0;
        text-align: center; 
        color: #FFFFFF;
}
.twoColLiqLtHdr #container { 
        width: 60%;
        margin: 20px auto;
        border: 1px solid #000000;
        text-align: left;
} 
.twoColLiqLtHdr #header { 
        background: #000000; 
        padding: 0 10px;
} 
.twoColLiqLtHdr #header h1 {
        margin: 0; 
        padding: 10px 0; 
}
.twoColLiqLtHdr #sidebar1 {
        float: left; 
        width: 125px;
        background: #000000; 
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
        margin-left: 10px; 
        margin-right: 10px;
}

.twoColLiqLtHdr #mainContent { 
        margin: 0 0 0 125px; 
        padding: 1px 0 5% 10px;
        background: #333333;
} 
.twoColLiqLtHdr #footer { 
        padding: 0 10px; 
        background:#000000;
} 
.twoColLiqLtHdr #footer p {
        text-align: center;
        margin: 0; 
        padding: 10px 0;
}
.fltrt { 
        float: right;
        margin-left: 8px;
}
.fltlft { 
        float: left;
        margin-right: 8px;
}
.clearfloat { 
        clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
/*]]>*/
</style>
<!--[if IE]>
<style type="text/css"> 

.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }

</style>
<![endif]-->
</head>
<body class="twoColLiqLtHdr">
<div id="container">
<div id="header">
<h1><img src="Main.jpg" alt="" height="108" width="780" /></h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3><img src="Artwork_Tab.jpg" alt="" height="32" width="103" /></h3>
<h3><img src="Writing_tab.jpg" alt="" height="32" width="103" /></h3>
<h3><img src="About_Tab.jpg" alt="" height="32" width="103" /></h3>
<h3><img src="Linkshell.jpg" alt="" height="32" width="103" /></h3>
<h3><img src="Links_tab.jpg" alt="" height="32" width="103" /></h3>
<h3><img src="Contact_Tab.jpg" alt="" height="32" width="103" /></h3>
<!-- end #sidebar1 --></div>
<div id="mainContent">

<p>anything this is a test Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>anything this is a test Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>anything this is a test Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

<!-- end #mainContent --></div>
<div id="footer">
<p>All contents copyright &copy; 2008, [Aaron Bailey]. All rights reserved</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

objecterror · 05-05-2008, 05:41 AM

Im waiting for you to slow down ; ; come to vegas, i'll buy you a lapdance..

Edit.
I had a friend of mine look at both monitors on different resolutions, 1024 x 968 and another which i don't recall

Trotter · 05-05-2008, 06:59 PM

Nice coding there, Peter. I plan on getting more in-depth with HTML in the future as I am a novice with it right now. I've only had one class that touched on it, and it was just enough to make a text-based web page (required two dividers and one image).

It will be a spare time project... it will get whatever time I can spare (which ain't much here lately).

peterhuang913 · 05-05-2008, 10:19 PM

I see you've changed somethings.

I changed border-style. Changed links to white so its easier to see.

One thing you probably haven't noticed is that when you change your website, it becomes invalid due to old HTML things you use. Whenever I post my new codes to you, it is validated. To check for validation, go to: The W3C Markup Validation Service. Type in your address there and it shows you have errors. Some things to look out for is not to use but instead use . Also, you don't need to use as it does so when you use followed by on the next line.

New code, same look as current website but passes validation:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/*<![CDATA[*/
 
<!-- 
body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #000000;
        margin: 0;
        padding: 0;
        text-align: center; 
        color: #FFFFFF;
}
.twoColLiqLtHdr #container { 
        width: 60%;
        margin: 20px auto;
        border: 1px solid #000000;
        text-align: left;
} 
.twoColLiqLtHdr #header { 
        background: #000000; 
        padding: 0 10px;
} 
.twoColLiqLtHdr #header h1 {
        margin: 0; 
        padding: 10px 0; 
}
.twoColLiqLtHdr #sidebar1 {
        float: left; 
        width: 125PX;
        background: #000000; 
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
        margin-left: 10px; 
        margin-right: 10px;
}
.twoColLiqLtHdr #mainContent { 
        margin: 0 0 0 125PX; 
        padding: 1px 0 5% 10px;
        background: #333333;
}
.twoColLiqLtHdr #footer { 
        padding: 0 10px; 
        background:#000000;
}
.twoColLiqLtHdr #footer p {
        text-align: center;
        margin: 0; 
        padding: 10px 0;
}
.fltrt { 
        float: right;
        margin-left: 8px;
}
.fltlft { 
        float: left;
        margin-right: 8px;
}
.clearfloat { 
        clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
a:link {
        color: #000000;
        text-decoration: none;
}
a:visited {
        text-decoration: none;
        color: #000000;
}
a:hover {
        text-decoration: underline;
        color: #FF0000;
}
a:active {
        text-decoration: none;
        color: #000000;
}
--> 
/*]]>*/
</style>
<!--[if IE]>
<style type="text/css"> 

.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }

</style>
<![endif]-->
</head>

<body class="twoColLiqLtHdr">

<div id="container">

<div id="header">
<h1><img src="Main.jpg" alt="" height="108" width="780" /></h1>
<!-- end #header --></div>

<div id="sidebar1">
<h3><a href="Artwork.html"><img src="Artwork_Tab.jpg" alt="Artwork" height="32" width="103" style="border-style: none"/></a></h3>
<h3><a href="Writing.html"><img src="Writing_tab.jpg" alt="Writing" height="32" width="103" style="border-style: none"/></a></h3>
<h3><a href="About.html"><img src="About_Tab.jpg" alt="Profile" height="32" width="103" style="border-style: none"/></a></h3>
<h3><a href="Linkshell.html"><img src="Linkshell.jpg" alt="Diecast Messiah" height="32" width="103" style="border-style: none"/></a></h3>
<h3><a href="Links.html"><img src="Links_tab.jpg" alt="Links" height="32" width="103" style="border-style: none"/></a></h3>
<h3><a href="mailto:objecterror@mischiev0us.net"><img src="Contact_Tab.jpg" alt="Email" height="32" width="103" style="border-style: none"/></a></h3>
<!-- end #sidebar1 --></div>

<div id="mainContent">

<p><strong>Monday,May 5th, 2008</strong></p>

<p>After alot of work and time spent in front of the pc, not to mention a lot of help from some web guru's over at the <a href="http://www.tech-forums.net/pc">tech-forums</a>, I was able to put together a new layout. Complete redux of the old layout, this one will take actual div's and put them to good use! So, I hope to get back on track, the DiecastMessiah webpage under <b>Linkshell</b> will be up in a few more days. Enjoy my website once it's got more content!</p>

<!-- end #mainContent --></div>

<div id="footer">
<p>All contents copyright &copy; 2008, [Aaron Bailey]. All rights reserved</p>
<!-- end #footer --></div>

<!-- end #container --></div>
</body>
</html>

objecterror · 05-05-2008, 10:34 PM

Thanks Peter, so my methods are old ? I see, these are some of the ways i was taught back in 95 or 96, i guess it's time to change my methods. I was also trying to figure out a way to decorate the text etc etc.

05-05-2008, 05:17 AM	#31 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 349	Re: New Layout I see what you did there, lol, very clean.

05-05-2008, 05:41 AM	#33 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 349	Re: New Layout Im waiting for you to slow down ; ; come to vegas, i'll buy you a lapdance.. Edit. I had a friend of mine look at both monitors on different resolutions, 1024 x 968 and another which i don't recall Last edited by objecterror; 05-05-2008 at 05:46 AM.

05-05-2008, 06:59 PM	#34 (permalink)
Trotter Tech-Forums Management Das BanHammer Join Date: Jan 2005 Location: The South Posts: 13,308	Re: New Layout Nice coding there, Peter. I plan on getting more in-depth with HTML in the future as I am a novice with it right now. I've only had one class that touched on it, and it was just enough to make a text-based web page (required two dividers and one image). It will be a spare time project... it will get whatever time I can spare (which ain't much here lately). __________________ Avatar created by pokernod Tech-Forums Management ~Das Banhammer~ CoolerMaster WaveMaster (black) - Vantec Stealth 520W DFI LanParty UT nF4 SLI-D - AMD Athlon X2 4200+ - Zalman CNPS9500 2GB (2x1 GB) G.SKILL ZS - Seagate 80GB, 250GB SATA - Razer Lachesis Sapphire X1950XT - NEC 19" MultiSync 1970GX RegistryBooster, SpeedUpMyPC, SpyEraser, WinTasks - Uniblue Free Software Trials

05-05-2008, 10:34 PM	#36 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 349	Re: New Layout Thanks Peter, so my methods are old ? I see, these are some of the ways i was taught back in 95 or 96, i guess it's time to change my methods. I was also trying to figure out a way to decorate the text etc etc.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Case layout	Apokalipse	Overclocking, Case Mod, Tweaking PC Performance	151	12-16-2007 10:23 PM
New Layout	GuitarFreak1857	Overclocking, Case Mod, Tweaking PC Performance	15	11-07-2007 07:29 AM
Myspace Tags/Class IDs	Death Row	Web Graphics, design, digital images	6	08-24-2007 03:52 AM