Hi. I'm just learning the very basic basics of HTML coding, and would liket to know if there is a way of creating other layouts (multiple columns, in particular) with HTML.<!--content-->yes<!--content-->Try css: <!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m --><!--content-->Originally posted by trinity5_14 <br />
Hi. I'm just learning the very basic basics of HTML coding, and would liket to know if there is a way of creating other layouts (multiple columns, in particular) with HTML. like dave said, use css. Html cannot do it per se (tables with the width height etc attributes are not valid html, though tables that are styled with css can be, but still it uses css for those attributes, not html), but html with css is a winning combination that can do it. If you want to go all css I would reccomend for additional material <!-- m --><a class="postlink" href="http://www.bluerobot.com">http://www.bluerobot.com</a><!-- m --> for some layouts and <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> for syntax learning. <!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/hybrid2.html">http://knights.europe.webmatrixhosting.net/hybrid2.html</a><!-- m --> is a css table hybrid layout that is valid xhtml and css.<!--content-->K, some of that makes sense, but you've lost me with css. What does that mean?<!--content-->css = cascading style sheets. Here is how it works, you give an element a id or class, and then in the head you have this<br />
<br />
<style type="text/css"><br />
.myclass{<br />
/*this will style a class*/<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
#myid {<br />
/* this will style the element with the id */<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
</style><br />
<br />
The difference between a class and an id is that a class can be used on multiple elements, so you can give all of your menus the same styles. You can also use css to style an element by putting the style tag right in the elements tag<br />
<br />
<div style="width:100px; height:100px; border:1px solid #000000;"> Div now is styled </div><br />
<br />
Up there I said that style tag would be in your head, but you can also import a style sheet. So in your directory you might have layout.css or something, and you would put this in<br />
<br />
<style type="text/css" media="screen">@import "layout.css";</style><br />
<br />
And inside of the css file you would have<br />
<br />
.myclass{<br />
/*this will style a class*/<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
#myid {<br />
/* this will style the element with the id */<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
<br />
exactly the same code as I said you would put in the head before. So doing it this way will work the same and save you bandwidth because if you style each page with that same external style sheet then the user only had to Download <!--more--> that style sheet 1 time. That is how to use css in a nut shell.<br />
<br />
<!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/hybrid2.html">http://knights.europe.webmatrixhosting.net/hybrid2.html</a><!-- m --><br />
to see it in action defining table attributes view my source here.<br />
To see it in action with a <div> structured layout I said earlier <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w --><br />
If you want to see some of the best css around look at the layouts at <!-- w --><a class="postlink" href="http://www.csszengarden.com">www.csszengarden.com</a><!-- w --><!--content-->OK, thanx. I'll play with it and see what happens.<!--content-->Ok, here's what I've got: <br />
<br />
<head><br />
<style type="text/css"><br />
<br />
p.left <br />
{width: 350px;<br />
alignment: justified;<br />
border-right-style: solid}<br />
<br />
p.right<br />
{margin-left: 350px;<br />
width: 350px;<br />
alignment: justified;<br />
border-left-style: solid}<br />
<br />
</style><br />
</head><br />
<br />
The thing is, now I've got two paragraphs, one in far enough to be beside the other, but it's still positioned below where the first ends. How do I get them to sit beside each other?<!--content-->
Hi. I'm just learning the very basic basics of HTML coding, and would liket to know if there is a way of creating other layouts (multiple columns, in particular) with HTML. like dave said, use css. Html cannot do it per se (tables with the width height etc attributes are not valid html, though tables that are styled with css can be, but still it uses css for those attributes, not html), but html with css is a winning combination that can do it. If you want to go all css I would reccomend for additional material <!-- m --><a class="postlink" href="http://www.bluerobot.com">http://www.bluerobot.com</a><!-- m --> for some layouts and <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> for syntax learning. <!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/hybrid2.html">http://knights.europe.webmatrixhosting.net/hybrid2.html</a><!-- m --> is a css table hybrid layout that is valid xhtml and css.<!--content-->K, some of that makes sense, but you've lost me with css. What does that mean?<!--content-->css = cascading style sheets. Here is how it works, you give an element a id or class, and then in the head you have this<br />
<br />
<style type="text/css"><br />
.myclass{<br />
/*this will style a class*/<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
#myid {<br />
/* this will style the element with the id */<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
</style><br />
<br />
The difference between a class and an id is that a class can be used on multiple elements, so you can give all of your menus the same styles. You can also use css to style an element by putting the style tag right in the elements tag<br />
<br />
<div style="width:100px; height:100px; border:1px solid #000000;"> Div now is styled </div><br />
<br />
Up there I said that style tag would be in your head, but you can also import a style sheet. So in your directory you might have layout.css or something, and you would put this in<br />
<br />
<style type="text/css" media="screen">@import "layout.css";</style><br />
<br />
And inside of the css file you would have<br />
<br />
.myclass{<br />
/*this will style a class*/<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
#myid {<br />
/* this will style the element with the id */<br />
width:100px;<br />
height:100px;<br />
border:1px solid #000000;<br />
}<br />
<br />
exactly the same code as I said you would put in the head before. So doing it this way will work the same and save you bandwidth because if you style each page with that same external style sheet then the user only had to Download <!--more--> that style sheet 1 time. That is how to use css in a nut shell.<br />
<br />
<!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/hybrid2.html">http://knights.europe.webmatrixhosting.net/hybrid2.html</a><!-- m --><br />
to see it in action defining table attributes view my source here.<br />
To see it in action with a <div> structured layout I said earlier <!-- w --><a class="postlink" href="http://www.bluerobot.com">www.bluerobot.com</a><!-- w --><br />
If you want to see some of the best css around look at the layouts at <!-- w --><a class="postlink" href="http://www.csszengarden.com">www.csszengarden.com</a><!-- w --><!--content-->OK, thanx. I'll play with it and see what happens.<!--content-->Ok, here's what I've got: <br />
<br />
<head><br />
<style type="text/css"><br />
<br />
p.left <br />
{width: 350px;<br />
alignment: justified;<br />
border-right-style: solid}<br />
<br />
p.right<br />
{margin-left: 350px;<br />
width: 350px;<br />
alignment: justified;<br />
border-left-style: solid}<br />
<br />
</style><br />
</head><br />
<br />
The thing is, now I've got two paragraphs, one in far enough to be beside the other, but it's still positioned below where the first ends. How do I get them to sit beside each other?<!--content-->