New Layout

objecterror · 05-04-2008, 10:49 PM

Untitled Document

Alright, it's been awhile, but the div container is going a little to farther then i'd like it to, what am i doing wrong here?

peterhuang913 · 05-04-2008, 11:04 PM

did you hand-code that? I love hand-code basic sites.

/EDIT:

Change:

Code:

.twoColLiqLtHdr #container { 
	width: 60%;
	background: #333333;
	margin: 20px auto;
	border: 1px solid #000000;
	text-align: left;
}

and

Code:

twoColLiqLtHdr #sidebar1 {
	float: left; 
	width: 15%;
	padding: 0 0 10px;
	background: #000000; 
}

End results:

objecterror · 05-04-2008, 11:12 PM

Thank you for the speedy reply, I didn't hand code this layout, just adjusted some of the codes from an existing template

peterhuang913 · 05-04-2008, 11:15 PM

Did you update it yet? Where did you get the original template?

/EDIT: Also,

Erase any name=""s you have two in there

Can't have empty tags

objecterror · 05-04-2008, 11:22 PM

updated, I want to turn the main container into an iframe, i will do that in a minute, also, edited the code and updated again.

peterhuang913 · 05-04-2008, 11:23 PM

You didn't add the suggested padding to #sidebar1

objecterror · 05-04-2008, 11:28 PM

Ah, I see, updating give me a few seconds

peterhuang913 · 05-04-2008, 11:33 PM

lol, the gray box now goes all the way left...

objecterror · 05-04-2008, 11:34 PM

I think I messed up or it's my resolution, the sidenav bar is meshed ; ;

peterhuang913 · 05-04-2008, 11:35 PM

replace the whole page with:

Code:

<!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>Untitled Document</title>

<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #000000;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #FFFFFF;
}
.twoColLiqLtHdr #container { 
	width: 60%;
	background: #333333;
	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: 15%;
	padding: 0 0 10px;
	background: #000000; 
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
	margin-left: 10px; 
	margin-right: 10px;
}

.twoColLiqLtHdr #mainContent { 
	margin: 0 20px 0 13em; 
} 
.twoColLiqLtHdr #footer { 
	padding: 0 10px; 
	background:#000000;
} 
.twoColLiqLtHdr #footer p {
	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="Untitled%20Document_files/Main.jpg" alt="" height="108" width="780"></h1>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3><img name="" src="Untitled%20Document_files/Artwork_Tab.jpg" alt="" height="32" width="103"></h3>
    <h3><img src="Untitled%20Document_files/Writing_tab.jpg" alt="" height="32" width="103"></h3>
    <h3><img src="Untitled%20Document_files/About_Tab.jpg" alt="" height="32" width="103"></h3>
    <h3><img src="Untitled%20Document_files/Linkshell.jpg" alt="" height="32" width="103"></h3>
    <p><img src="Untitled%20Document_files/Links_tab.jpg" alt="" height="32" width="103"></p>
    <p><img src="Untitled%20Document_files/Contact_Tab.jpg" alt="" height="32" width="103"></p>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <p>anything</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
	<br class="clearfloat">
  <div id="footer">
    <p>Footer</p>
<!-- end #container --></div>
  <!-- end #footer --></div>
</body></html>

05-04-2008, 10:49 PM	#1 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 354	New Layout Untitled Document Alright, it's been awhile, but the div container is going a little to farther then i'd like it to, what am i doing wrong here?

05-04-2008, 11:12 PM	#3 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 354	Re: New Layout Thank you for the speedy reply, I didn't hand code this layout, just adjusted some of the codes from an existing template

05-04-2008, 11:22 PM	#5 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 354	Re: New Layout updated, I want to turn the main container into an iframe, i will do that in a minute, also, edited the code and updated again.

05-04-2008, 11:28 PM	#7 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 354	Re: New Layout Ah, I see, updating give me a few seconds

05-04-2008, 11:34 PM	#9 (permalink)
objecterror Super Techie Join Date: Jan 2006 Location: Las Vegas, Nevada Posts: 354	Re: New Layout I think I messed up or it's my resolution, the sidenav bar is meshed ; ;

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