Confused with basic website design

Status
Not open for further replies.
Well you can set a static size using a defined value like <table width="300">. The full table size will be 300 pixels wide then on.

Don't really understand what you're saying CrazeD. Probably just an error on my part.
 
When you set a size for the table, it doesn't set a maximum size...just a minimum size. Because you can't set a maximum size, tables are free to expand when the content does. For example, you can set a table to be 300px wide but if the content inside it is, say, 400px wide, the table will expand to 400px. It's okay if you keep your content static, but I wasn't sure by his post if that's what he wanted or if he wanted it fluid.

See with div's, when you set the size it is that size, period. If you set the width to 200px, it is always 200px and will never change unless you tell it to. If the content is bigger than the div, it just goes passed the div but the div doesn't change.
 
Alright yeah I just misunderstood you. I know all that. I didn't get that you meant only when defining an exact static size and not just a minimum static value.
 
If you use CSS (instead of tables) and align your elements with that it should work at all resolutions, and if you use standard code (validate your code here: The W3C CSS Validation Service , The W3C Markup Validation Service) then it should also work in all browsers. Tables are considered sloppy practice now days. CSS can do everything tables did and better because it makes the code render more efficiently.

I'm not really sure what validation means. Do know of any tutorials for this? Maybe even video tutorials?
 
Validated means that it follows the rules and standards of the language. Making it validated means that it will work as intended in more places. Some browsers, like Firefox, is less picky about errors and broken code. However other browsers, like IE, are very picky and hate broken code.

XHTML Tutorial
404 - Not Found

Hope that helps.
 
I'm not really sure what validation means. Do know of any tutorials for this? Maybe even video tutorials?
yea, basically W3C (World Wide Web Consortium) is an organization that has come up with some standards that if followed should help code be more compatible across browsers. It's more of a "best practice" thing and there are plenty of designer/developers that could care less about valid code. It's really just up to you.
 
You can use CSS to create a webpage that has a specified width and will not resize regardless of the user's screen resolution.

The trick is to assign a center alignment attribute to the <body> tag. Create a background <div> with a width to your specifications and set both left and right margins to auto. This will force the margins to both be equal. You can set your width to anything you want. I used 728px, which is the width of a Leader board ad

To create a simple two column web page with a header and footer use the following CSS and HTML code:
<html>
<head>
<title> Static Width Web Page </title>
<style type="text/css">
body {
margin: 0;
background-color: tan;
text-align: center;
}

#background {
width: 728px;
margin-left: auto;
margin-right: auto;
}

#container {
background-color: white;
}

#header {
text-align: left;
position: relative;
height: 90px;
background-color: #ffebcd;
}

#content {
position: relative;
margin-left: 160px;
text-align: left;
height: 1000px;
background-color: white;
}

#leftnav {
position: relative;
float: left;
width: 160px;
height: 1000px;
background-color: #ffebcd;
}

#footer {
height: 90px;
background-color: #ffebcd;
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="background">
<div id="container">
<div id="header">

<p> put your LOGO here </p>


</div>
<div id="leftnav">


<p> Left Nav Link </p>


</div>
<div id="content">

<p> Your content will go here. </p>


</div>
<div id="footer">

<hr />
<p> Bottom navigation, disclaimer and copyright information can go down here. </p>

</div>
</div>
</div>
</body>
</html>

Feel free to add whatever additional CSS coding you want and fill in content as needed.
 
a dynamic layout that looks good and works well is WAYYYY harder than just making a solid, proper css-based layout. if your code is solid, you won't have any problems with other resolutions
 
Status
Not open for further replies.
Back
Top Bottom