Jump to content

How to make a web site the lazya** way(cheat sheet)


mzsade

Recommended Posts

Hi, Sorry to have misled you with the title, this is more a desperate cry for help than a “Cheat Sheet”(pun fully intended). Downloaded a css block layout with a header, one main column, one secondary right column and a footer..your practice css had too much going on that I couldn't follow so I made my own skeletal practice css..chopped the original down so as to have only 4 main divs, disfigured the elegance of the code, removed the Copyrights and totally intend to claim the final result as my own..managed after a lot of trial and error to arrange the blocks so as to abut each other as in the arrangement in the attachment (promise i will remove the clutter after a while), without the blocks over lapping each other, or jumping out of the screen, or below one another (it was a nightmare!).

 

 

This is the castrated css:

 

#header{

height:150px;

background-color:#F3F2ED;

margin:0;

padding:0;

       width:100%;

       text-align:center;



}







#maincolumn{

height:300px;

       width:72%;

background:#CCC8B3;

border-top:#FFFFFF 2px solid;

margin-top:2px;



padding:10px;

       position:absolute;



}



#secondarycolumn{

height:300px;

       width:22.25%;

background:#CCC8B3;

border-top:#FFFFFF 2px solid;

       margin-top:2px;

       float:right;

       border-left:#FFFFFF 2px solid;

       padding:10px;

       text-align:justify;



}







#footer{

height:50px;

background:#BFBD93;

border-top:#FFFFFF 2px solid;

margin-top:327px;

padding:10px;

}

 

and the corresponding html:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>240 Pixel Right Column, Single Main Column.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>



   <div id="header"><h1><a href="http://www.free-css.com/free-css-layouts.php">Free CSS Layouts</a></h1></div>



       <div id="maincolumn">Content Here</div>



     <div id="secondarycolumn">Secondary Column</div>





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



</body>

</html>

 

How can I position the blocks optimally without having to go through this trial and error exercise so as to be able to retain their positions relative to each other, (when nesting new blocks in each container individually, resizing them, whatever, on the fly); what can I do with this code that I have, to make it flexible, I would rather have my css nested in the same order as my html and would prefer to use classes or internal or inline styling where required. I intend to then put in a sub div in the header for a navigation bar, maybe a photo gallery in the main column or embed video or media player, the works..i don't think I am going to move on to forms, actions, php and javascript till I get a grip on this.

Link to comment
Share on other sites

Do you mean so that you can add anything and it wont change around the order too much?

 

 

 

I actually really like this template...

 

This is what i could do with it in a quick rush using a video on my homepage, and randomly typing things into it :P

 

Template test

 

 

Don't worry, i wont use this template for myself, thats all yours - but i may have to steal some ideas :)

Edited by danhodge
Link to comment
Share on other sites

Trust me, the others in here could do much better, im just a user of this site...

 

(when i say the others, i mean people like Andrea for posts like that)

 

 

 

And this framework can just be edited by changing the color scheme to what you would like it to be, it doesn't look to bad as it is, its only a bit weird looking because its just got no content...

 

 

So a darker color scheme could look like this: http://templatetest.vacau.com/

Edited by danhodge
Link to comment
Share on other sites

@Mzsade:

 

Here is a revised version of your code that fixes a couple issues:

 

-- With your template, you will be forced to update the height of your main content column/the upper margin on the footer every time content is added/removed. Otherwise, your main column doesn't enclose the content correctly, and it extends down the page and over your footer. Try adding several "<p>content</p>" tags to your main content column.

-- You are using white borders on some of your elements (and the background of the page is white), rather than using margins or adjusting the width. Not necessarily wrong, just strange and a bit unnecessary.

 

Two points to keep in mind:

 

-- You are using percentages for your columns. That means that those columns grow/shrink depending on your browser resolution. Try changing the width of your browser window to see what I mean.

-- Because you are using a percentage width (measured in percent) plus padding (non-percentage based pixels), and the full width of the column is determined by width+margins+padding+borders, when the browser is any less than 940ish pixels, the two columns start behaving strangely. In your code, the secondary content column starts hiding behind the main content column, and the main column content starts overflowing outside the container. In my example, the secondary column drops below the main column, though nothing is hidden. Is this a big issue? Depends. 99% of people should be using 1024x768 resolution or higher, so they won't see this. The solution, however, would be not to mix percentage based width and left or right padding/margin on the same element. Instead, you might have an div inside those columns which had the padding applied to it instead.

 

Also, keep in mind that instead of using the * html hack for IE, like I have below, you could use a conditional comment to add an IE6 specific stylesheet. Just another option (Google "conditional comment IE" if you want to learn more about that.)

 

#header {
height:150px;
background-color:#F3F2ED;
margin:0;
padding:0;
text-align:center;
}

#maincolumn {
/* removed:
position:absolute;
border-top:#FFFFFF 2px solid; - no need for this, since the background is white? Use margins instead
*/

/* added */
float:left;
clear:both;
margin-bottom: 4px;

/* changed */
margin-top:4px;
min-height:300px; /* changed height to min-height */	

width:72%;
background:#CCC8B3;
padding:10px;
}
* html #maincolumn { height:300px; } /* start HTML hack for IE6. Only IE6 will see this line. Fixes the height issue, since IE6 doesn't understand min-height */

#secondarycolumn {
/* removed:
postion:absolute; 
border-top:#FFFFFF 2px solid; - no need for this, since he background is white? Use margins instead
border-left:#FFFFFF 2px solid;  - no need for this? Determine positioning by using margins or adjusting your width
*/

/* added */
margin-bottom: 4px;

/* changed */
margin-top:4px;
min-height:300px; /* changed height to min-height */

width:22.25%;
background:#CCC8B3;
float:right;
padding:10px;
text-align:justify;
}
* html #maincolumn { height:300px; } /* start HTML hack for IE6. Only IE6 will see this line. Fixes the height issue, since IE6 doesn't understand min-height */

#footer {
/* removed:
margin-top:327px; 
border-top:#FFFFFF 2px solid; - no need for this, since the background is white? Use margins instead
*/

/* added */
clear:both; /* forces #footer below other floated elements */

height:50px;
background:#BFBD93;
padding:10px;

}

Link to comment
Share on other sites

Thank you Ben for taking the time, greatly appreciate the detailed corrections, that wrapper was a life saver, managed to add a horizontal menu with styled links since then, have substituted the original attachment with the new image, already the code has begun to look ugly.. :)

#nav li, a{
 display:inline;
 margin:0;
 padding:0;

}

a.one:link, a.one:visited
{

font-weight:bold;
color:#FFFFFF;
background-color:#CCC8B3;
width:100px;
text-align:center;
padding:4px;
text-decoration:none;
list-style-type:none;

}
a.one:hover, a.one:active
{
background-color:#BFBD93;

}

 

and this in the html:

<div id="header"><h1>The Lazybones WebPage</h1><br />





                 <div id="nav">
                     <div id="ul">
                         <div id="li">



	  <!-- start of navigation -->

	    <ul>

		  <li><a class="one" href="http://www.webaddresshere.com">Home</a></li>

		  <li><a class="one" href="http://www.webaddresshere.com">Products</a></li>

		  <li><a class="one" href="http://www.webaddresshere.com">Services</a></li>

		  <li><a class="one" href="http://www.webaddresshere.com">Terms</a></li>

		  <li><a class="one" href="http://www.webaddresshere.com">FAQ</a></li>

                         <li><a class="one" href="#link">forum</a></li>

		  <li><a class="one" href="http://www.webaddresshere.com" style="no background">Contact Us</a></li>

		</ul>

		<!-- end navigation -->

                  </div>
                </div>
              </div>








  </div>

Link to comment
Share on other sites

I'm not seeing any reason/need for divs with IDs of #ul or #li? Unless you have a reason for those unnecessary divs, I'd suggest taking them out. No need to add clutter.

 

Also, there's no need to add the "one" class to all of your nav items (unless you plan to have different styles for each of the nav items?.) You could do this instead: "#nav a {}", so for example:

 

#nav a:link, #nav a:visited { ... }

Link to comment
Share on other sites

Finally found something that even i could build on, http: //www.alistapart.com/d/css-positioning-101/example_g. html, using this building block method i have managed to make what i intended to in the first place, but i hope in a more logical way. (BTW, you guys are the kindest and most generous people i have ever met on the Internet, instead of dismissing and trashing the undisguised c%%% that i put up here as my first effort, you actually spent time on it to make it workable! Even years on from now, i will cringe with embarrassment when i read this thread and at the same time remember your kind act. with fondness.)

I still don't have the control over the footer that i would like, i had to make it a child of the "maincolumn", because otherwise it would either stay in a fixed place and allow the main content to flow all over it, or get attached to the top. so there's still something wishy-washy about the code. Would you please have a look at the code and make it respectable? I don't want it fixed, i want it to scroll. After this i think i am ready to move onto javascript.

 

</style>
#container {
margin: 0 auto;
width: 100%;
background: #44accf; }
	#header { position: absolute; top: 4%; right: 2%; bottom: 80%; left: 2%; background: #ff9c34; }
               #navbar { position: absolute; top: 22%; right: 2%; bottom: 72%; left: 2%; background: #000; }
#navbar
{
float: left;
width: 60%;
background: #ccc;
       padding-left: 20%;
}

#navbar ul
{
margin: 0;
padding: 0;
}

#navbar ul li
{
list-style-type: none;
display: inline;
}

#navbar li a
{
display: block;
float: left;
padding: 6px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
       border-left: 1px solid #fff;
}

#navbar li a:hover { background: #383; }


#maincolumn { position: absolute; top: 30%; right: 25%; bottom: 0; left: 2%; background: #fff; float: left; clear:right; }

#sidebar { position: absolute; top: 30%; right: 2%; bottom: 0; left: 80%; background: #ccc; float: right;}

#footer { position: relative; top: 2%; right: 2%; bottom: 0; left: 2%; background: #000; width: 100%; height: 12%; color: #fff}

The Html
</head>
<body>
<div id="container">
<div id="header"><h1>The GettingWiserGuy's Webpage</h1></div>
       <div id="navbar">
               <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</div>

       <div id="maincolumn"><p>Enough loren ipsum to overflow over anything fixed..</p>
       <div id="footer">There's still something shady about this</div>
       </div>
<div id="sidebar">The sidebar</div>

</div>

</body>
</html>

[b]The edited code:[/b]

<style>
#container {
margin: 0 auto;
width: 950px;
background: #fff 

       border: 2px solid #fff;}
	#header { /*position: absolute; top: 1px; right: 2px; bottom: auto; left: 2px;*/ width: 950px; height:104px; background: #ff9c34;border: 1px solid #fff; }
               #navbar { /*position: absolute; top: 110px; right: 2px; bottom: auto; left: 2px;*/ background: #000; min-width: 948px; height: 30px; border: 1px solid #fff; }
#navbar
{
float: left;
width: auto;
background: #ccc;

}

#navbar ul
{
margin: 0;
padding: 0;
}

#navbar ul li
{
list-style-type: none;
display: inline;
}

#navbar li a
{
display: block;
float: left;
padding: 6px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
       border-left: 1px solid #fff;
}

#navbar li a:hover { background: #383; }


#maincolumn { /*position: absolute; top: 155px; right: 300px; bottom: 0; left: 2px;*/ width: 600px; padding: 10px 50px 10px 10px;  background: #fff; float: left; border: 1px solid #fff; }

#sidebar { /*position: absolute; top: 155px; right: 2px; bottom: 0; left: 700px;*/ width: 200px; padding: 20px; background: #ccc; border: 1px solid #fff; float: right; }

#footer { /*position: relative; top: 2px; right: 0; bottom: 0; left: 0;*/ background: #000; width: 948px; height: 60px; color: #fff; clear: both; }

</style>
</head>
<body>
<div id="container">
<div id="header"><h1>The GettingWiserGuy's Webpage</h1></div>
       <div id="navbar">
<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</div>

       <div id="maincolumn">
<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
		</p>

<p>
			Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</p>





</div>

       <div id="sidebar">Sidebar</div>
<div id="footer"><p>There's still something shady about this, not anymore, this is a proper footer now</p></div>

</div>

</body>
</html>

 

PS: i have not bothered with the appearance of the page this time, and not bothered with finishing touches to fonts, paddings, margins, colors, etc., it's the appearance of the code that concerns me.

Also, @Danhodge, i tried inserting a lot of text in the main column of your test template and it caused your scheme to collapse.

Edit: Drat, forgot your warning about percentages, ok, i will rectify that, but i hope that's not the main flaw in the approach.

Edit: I changed all units to "px" and the thing still collapses when i "Ctrl+scroll" the browser window. :sigh: and i thought i was finally coming to grips with css.

Edit: Resolved: let all positions default to static, took the footer out of it's nest and stacked it at the bottom as is normal, used "clear: both", Yay!

post-30899-022638300 1295959055_thumb.jpeg

Edited by mzsade
Link to comment
Share on other sites

Would you please have a look at the code and make it respectable? I don't want it fixed, i want it to scroll. After this i think i am ready to move onto javascript.

If you want us to look at this, you'll need to post the code. Based on your edits, it looks like you have made significant changes to the CSS since you posted the code.

Link to comment
Share on other sites

Did it already..so..oo..? Is it fundamentally systematic enough to be considered proper designing? I mean, i do think that i have a lot more control on all the elements here, but a correction or two from you would be greatly treasured as a valuable addition to my knowledge base.

Link to comment
Share on other sites

@mzsade if you want exercises in css mastery and graphics then you should try csszengarden.com They give everyone the same html file and your imagination, graphics and css does the rest. It's quite amazing and their are some fabulous designs there.

Link to comment
Share on other sites

Thanks a lot virtual, that's a whole ocean there, i could spend a lifetime learning, if i were to allow myself to lured by it. Now that i have a bit of an idea of basic positioning and assembling boxes with CSS (i think..), it's time for me to move onto Javascript. Have bookmarked the page for later and reluctantly tear myself away from it.

Link to comment
Share on other sites

Added a background banner slide show in the header using www.willmaster.com/library/features/background-image-slide-show.php,

a clock and a time dependent greeting in the main column.

 

This is too much fun to stop and get back to my struggle with JS.

 

With sophisticated and complex scripts freely available for, as far as i can tell, every imaginable purpose..to be able write something even a fraction as complex, if ever, would clearly take me years of diligent study and practice..i am this close to abandoning my efforts to study Javascript from scratch. Earnestly request a little logical push from the more experienced here, that will motivate me not to do so.

 

Edit: You have to realize that i have just learned of the existence of such resources and of their relevance to web designing; you will understand my acting like a kid in a candy store then.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...