Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Html Kicks My A**


  • Please log in to reply
18 replies to this topic

#1 mistaWAC

mistaWAC

  • Members
  • 8 posts
  • OFFLINE
  •  
  • Location:USA
  • Local time:09:56 AM

Posted 24 January 2007 - 10:33 PM

You know, it's really sad when the language that's supposed to be the easiest and most basic can really bring you down hard. I've worked with PHP-Nuke websites, MySQL databases, Mango, and a few other complicated forms of websites, but HTML is really hard for me. I don't know if it's because I like a good challenge and HTML is too "easy" to use, but right now I can't get anything to work for bleep.

What I want is to have a traditional website look: header up top, nav bar on the left, main section to the right a little. I cannot get this bleep to work to save my life!

Here is an image for ya to check out: http://img.photobucket.com/albums/v355/mis...atIwantcopy.jpg
if you can't understand my rambling.

I had one going, but I'm running 1280x1024 resolution and had each box pixel-sized instead of having things default per computer. Once that website popped on anything lower than my computer's res a little side scroll bar popped up and I don't want that to show.

Can someone PLEASE help me figure this out? Thanks!

Moderator edited topic title. ~acklan~

Edited by acklan, 25 January 2007 - 02:29 AM.


BC AdBot (Login to Remove)

 


#2 acklan

acklan

    Bleepin' cat's meow


  • Members
  • 8,529 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Baton Rouge, La.
  • Local time:07:56 AM

Posted 25 January 2007 - 03:00 AM

Here is a sample code of how to set the width and height of you page. With the value of 730 it should fit most web browsers without a scroll bar. You can adjust it to your needs.

<table border="0" width="730" cellpadding="0" cellspacing="0">
   <tr><td>
	 The actual page text and graphics are found inside here.
   </td></tr>
   </table>
</html>


Reference

Edited by acklan, 25 January 2007 - 03:01 AM.

"2007 & 2008 Windows Shell/User Award"

#3 mistaWAC

mistaWAC
  • Topic Starter

  • Members
  • 8 posts
  • OFFLINE
  •  
  • Location:USA
  • Local time:09:56 AM

Posted 25 January 2007 - 07:39 PM

Thanks for the help...what's weird is that I asked a few friends and they kept telling me to use percentages. I was so confused because how am I supposed to know the percentages of screen sizes?!

Also, sorry about the title....didn't know swearing isn't allowed.

#4 acklan

acklan

    Bleepin' cat's meow


  • Members
  • 8,529 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Baton Rouge, La.
  • Local time:07:56 AM

Posted 25 January 2007 - 08:05 PM

There are codes to allow % instead of pixels. Did it work for you?

Do not worry about the title. It is against the rules, but I have edited much worst.


Glad to help.
"2007 & 2008 Windows Shell/User Award"

#5 Walkman

Walkman

  • Banned
  • 1,327 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:08:56 AM

Posted 25 January 2007 - 08:53 PM

To have your web page compatible with different screen resolutions, you should set your outer table to 100%, and not a pixel amount. Actually, all tables should be set at the percentage, to make it even with mostly all resolutions of each browser.

The pixel amount is best for if you want a fixed size, (a proportion) of the area or such. But if you want your web page looking uniform on any browser, then the percentage (100%) is best to do it.

It's also easy to tell the resolution of web pages on 1st glance, just by seeing if there is a gap on either, or both sides of the web page. That is probably (most likely a pixel setting).

But pages that are flush, throughout the left and right sides, without any left-right scroll bars on the bottom of the browser can also be an indication of a web page set at 100%. The best way to really tell that is if you have two monitors of different resolution sizes........ but there is a program (I forget the name) that will allow you to change the resolution of any web page so you can check out the differences of each resolution.

But, all in all, if you're going to be using tables to set up your web page, I would highly suggest you do it at 100%, and not pixels.

#6 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,260 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:05:56 AM

Posted 26 January 2007 - 07:27 PM

I agree, percentages are the way to go.

When I do a webpage, I tend to enclose everything in a one-celled, borderless table with the width of 100%. This stretches or compresses to match the full width of the browser:

<html>
<head>
<title>Wickets R Us!</title>
</head>
<body>
<table border="0"><tr><td>

<!--Everything in here-->

</td></tr>/table>
</body>
</html>

You can create a tablethat looks like the layout you want like this:
<table width="100%" border="0">
<tr><td colspan="2">Header</td></tr>
<tr><td width="20%">Navigation</td><td width="80%" rowspan="2">News/Main Section</td></tr>
<tr><td>Random Small Images</td></tr></table>


Of course you may want to add borders, colors, and other nice stuff. :thumbsup:

Edited by Amazing Andrew, 26 January 2007 - 07:29 PM.


#7 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:56 AM

Posted 12 February 2007 - 08:37 AM

I agree, percentages are the way to go.


I disagree. Percentages are not necessarily the best way to go. Browser compatibility is only one facet. What about scalability? A web form that looks good on a 19" monitor at 1024 * 760 resolution is not necessarily going to work on a 14" laptop screen set at 600*400.

There are way to many potential design considerations to ever really say that one idea is better than another. It always depends...

#8 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,260 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:05:56 AM

Posted 12 February 2007 - 01:53 PM

Well, I suppose you could create multiple versions, one for each general size, and use javascript to redirect people to the appropriate one. But that seems kinda tacky to me...

#9 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:56 AM

Posted 12 February 2007 - 02:43 PM

I wouldn't do that either. A better option perhaps would be to code for the lowest common denominator, ie a 14" monitor running 600*800 (in my world, this is very prevalent). If I code the forms to scale to the resolution, and my text fields are of fixed size, things get all out of shape. I do have a separate set of code for things like web-ready cell phones, etc. Anyway, I get awful tired of seeing pages that say "Optimized to run on 1024*768", and crap like that. That used to be more common quite a few years ago, but not so much now.

My point was more that there are almost never absolutes when it comes to design. There are always exceptions to the rule, so claiming that one should always follow certain guidelines without at least discussing those exceptions can cause misconceptions. On the other hand, if none of the elements on a page need to have a fixed width, and there is never any intention to include objects of fixed width, then using percentages is a solid option.

#10 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,260 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:05:56 AM

Posted 12 February 2007 - 03:05 PM

a 14" monitor running 600*800 (in my world, this is very prevalent).



:flowers: Say it ain't so! I can't imagine going under 1024x768! What are these people thinking!? :thumbsup:

#11 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:07:56 AM

Posted 12 February 2007 - 03:26 PM

These people are in a corporate environment with very tight budgets... believe me, if they had a choice, they would have all of the latest and greatest. And there are a great many other corporations that face the same issues, maybe not as extreme, but severely limited.

Of course, the flip side to that is that my web applications work just fine on their computers, preventing them from having to continually make expensive upgrades just to run the latest software. :thumbsup:

#12 Guest_WelshSteve_*

Guest_WelshSteve_*

  • Guests
  • OFFLINE
  •  

Posted 13 February 2007 - 04:19 AM

Why is everyone using tables for a layout? Why not use CSS? This isn't perfect, and needs a little tweaking, but here's a simple two column with header layout in CSS. I've put borders in to distinguish the sections. Very clean and easy to edit.

<!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" xml:lang="en" >
<head>

	<title>Header with left column and main text area</title>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
	<style type="text/css">
	*
	{
		margin:0;
		padding:0;
		font: 10pt tahoma;
		color: #000;
	}
	
	body
	{
		width: 778px;
		border: 1px solid #000;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}
	
	#wrapper
	{
		width: 778px;
	}
	
	#header
	{
		width: 758px;
		background: #FEFF84;
		height: 100px;
		padding: 10px;
		border-bottom: 1px solid #000;
	}
	
	#left
	{
		float: left;
		width: 178px;
		background: #C2D5F8;
		height: 400px;
		padding: 10px;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
	}
	
	#main
	{
		float: right;
		width: 557px;
		background: #99E699;
		height: 400px;
		padding: 10px;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		overflow: auto;
	}
	
	ul
	{
		list-style-type: none;
	}
	
	h1
	{
		font: bold 14pt arial;
	}
	
	h2
	{
		font: bold 12pt arial;
	}
	
	</style>
</head>
<body>

<div id="wrapper">
	<div id="header"><h1>Header</h1></div>
	<div id="left">
		<ul>
			<li>Nav 1</li>
			<li>Nav 2</li>
			<li>Nav 3</li>
			<li>Nav 4</li>
			<li>Nav 5</li>
			<li>Nav 6</li>
		</ul>
	</div>
	<div id="main">
		<h2>Main text area</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
		<h3>Consectetuer adipiscing elit</h3>
		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
	</div>
</div>

</body>
</html>

Edited by WelshSteve, 13 February 2007 - 04:24 AM.


#13 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD

Posted 13 February 2007 - 08:24 AM

It's sort of amusing. The original OP never even mentioned tables. Tables are mentioned in twp posts, which again, the original poster did not ask about. And now everybody in the thread is criticized for using tables?

Sometimes I wonder if people even read what they are responding to.

#14 Guest_WelshSteve_*

Guest_WelshSteve_*

  • Guests
  • OFFLINE
  •  

Posted 13 February 2007 - 08:31 AM

:thumbsup: I was merely pointing out that using tables for a simple layout is unecessary :flowers:

#15 RADIUM-V Interactive

RADIUM-V Interactive

  • Members
  • 159 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Somewhere East of Where You Are (think about it)
  • Local time:07:56 AM

Posted 11 March 2007 - 04:41 PM

Tables are unneccesary and bulky. DIV tags are the way to go. We were taught at school that Tables are good, but code like this:

<html>
	<head>
		<title>yeah</title>
	</head>
	<body>
		<table height="600" width="800" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td align="left" valign="top" colspan="2" height="87">
					<h1>Header</h1>
				</td>
			</tr>
			<tr>
				<td align="left" valign="top" width="20%" height="100%">
					<table border="0" cellspacing="0" cellpadding="0"> <!-- Yes, we were taught that link lists go in their own tables -->
						<tr><td>Link Item</td></tr>
						<tr><td>Link Item</td></tr>
						<tr><td>Link Item</td></tr>
						<tr><td>Link Item</td></tr>
						<tr><td>Link Item</td></tr>
					</table>
				</td>
				<td align="left" valign="top" width="100%" height="100%">
					<h1>Content</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				</td>
			</tr>
		</table>
	</body>
</html>

But, this way is faster and allows easier control:
<html>
	<head>
		<title>yeah</title>
		<style type="text/css">
			div#container { height: 600px; width: 800px; }
			div#header { height: 87px; }
			div#navbar { float: left; width: 20%; }
			div#mainbody { width: 100%; }
			ul { margin: 0px; }
			li { list-style-type: none; }
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header"><h1>Header</h1></div>
			<div id="navbar">
					<ul>
						<li>Link Item</li>
						<li>Link Item</li>
						<li>Link Item</li>
						<li>Link Item</li>
						<li>Link Item</li>
					</ul>
			</div>
			<div id="mainbody">
				<h1>Content</h1>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
			</div>
		</div>
	</body>
</html>

Now you don't have all those TD tags that have to be controlled one at a time. With this method, you could move the entire mainbody div anywhere you want it - you have full control. And, as the pages expand, the file size won't get ridiculously big like with the tables.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users