Pure Css Design (in Progress) suggestions/comments

[Saint_Michael 3]

Well I Thought I kill more time and junk and so I thought Why not try a pure css website I have the bare bones of the basic design 3 column with a header and footer. To make my life easier I used afew online tools to set most of it. The rest was just editing it to line up. The few problems that I have run through so far is that my horizontal nav menu is verticle, havn't found why it is like that. Try changing numbers here and there nd nothing yet. Next is my right column for some reason the div tag I am using for regular text is under the nav menu and I am using the same set up for left one and it doing what I want it to. Although I maybe correct about this but want to double check. Do I need to put in a float for my banner to be center? Then of course my worse problem or it's the fact I havn't slept yet (second one) drop menu's are kicking my butt. I copy and paste what I need but when it comes down to it I think I am missing something. Although it is not in the coding right now (future update) what do I need to add to the current code for the drop down to be successful once I had the javascript to it? Of course My favorite Problem making sure it is fluid for IE, I know it's the positioning that getting me, but I figure that out once the FF version is done.

Edited December 17, 2016 by OpaQue (see edit history)

[rvalkass 5]

You have made the menus using lists and list items. These naturally display as block elements (they have a line break between each element). This makes the list appear vertical. If you set the CSS to display: inline; for the list items then you should get your menu going horizontally across the page. The problem here is that if the browser window is too narrow then your menu goes on to two lines, and wrecks the layout.

 

I can only guess that the reason the text is under the menu on the right is becuase you have removed the menu from the normal folw of the document and applied some odd absolute positioning to it. I tried looking through the code but I couldn't see where it was.

 

If you want to center the banner then you don't need to make it float, there are various ways to center a banner. The best (in my opinion) is to create a DIV the width of the banner, and put the banner in it. Then set the left and right margins of the DIV to auto, and it will center itself no matter what the width of the browser.

 

Copy and paste code is a bad way to build any website. Yes, use it to look at for ideas, snippets and little bits, but never copy the whole lot and bung it in a website. You are guaranteed that it will not work very well, as every website is set up differently. The most likely reason that it wont work with the menu is becuase the CSS for the menus is ridiculous. Find a tutorial for a drop down menu and follow that. Learn the code for it rather than copy and paste, then when something does go wrong you have a chance of fixing it, or at least guessing where the problem is.

 

Your CSS was, by the looks of it, generated by a website. This has made it nigh on impossible to actually read it and make sense of it. It is also not standards compliant and creates wildly different effects between standards browsers and IE. This is what I see:

Opera: IE:

Even the colours are wrong, which signifies there is something fundamentally wrong with the code, and certain bits are being understood by only select browsers. Perfect in some situations, but for colours?

[Saint_Michael 3]

Thanks for the help rval. This time i drop the junk nav and went with a more clean online tool. So here is the current updates to the code as you can see it is a bit cleaner this time YEAH for me

 

CURRENT HTML ERRORS

 

1. Error Line 26 column 37: required attribute "alt" not specified.

 

<div id="logo"><img src="logo.jpg" /> </div>

 

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

 

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

 

✉

2. Error Line 47 column 12: ID "rightcol" already defined.

 

<div id="rightcol" >

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

 

✉

3. Info Line 37 column 12: ID "rightcol" first defined here.

 

<div id="rightcol" >

 

4. Error Line 61 column 12: ID "leftcol" already defined.

 

<div id="leftcol" >

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

 

✉

5. Info Line 51 column 12: ID "leftcol" first defined here.

 

<div id="leftcol" >

 

6. Error Line 70 column 6: end tag for "div" omitted, but OMITTAG NO was specified.

 

</body>

 

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

 

✉

7. Info Line 9 column 0: start tag was here.

 

<div id="pagewidth" >

 

CURRENT CSS ERRORS

* Line: 46 Context : Top Nav

 

Parse Error - --> #miniflex { width: 100%; float: left; font-size: small; margin: 0; padding: 0 1px 0 1px; border-bottom: 1px solid #333; }

* Line: 81 Context : Left Nav

 

Parse Error - --> .left {width: 130px;}

* Line: 113 Context : Right Nav Menu

 

Parse Error - --> .right {width: 130px;}

* Line: 168 Context : .clearfix

 

Invalid number : display inline-block is not a display value : inline-block

 

Warnings

URI : file://localhost/webdeveloper__1163360705796.css

 

* Line : 19 (Level : 1) You have no color with your background-color : .container

* Line : 25 (Level : 1) You have no color with your background-color : #header

* Line : 63 (Level : 1) You have no background-color with your color : #miniflex a:visited

* Line : 63 (Level : 1) You have no background-color with your color : #miniflex a:visited

* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover

* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover

* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover

* Line : 76 (Level : 1) You have no color with your background-color : #leftcol

* Line : 84 (Level : 1) Same colors for background-color and border-left-color : .buttons a

* Line : 86 (Level : 2) Redefinition of padding-left : .buttons a

* Line : 97 (Level : 1) You have no background-color with your color : .buttons a:hover

* Line : 109 (Level : 1) You have no color with your background-color : #rightcol

* Line : 116 (Level : 1) Same colors for background-color and border-right-color : .buttonsa a

* Line : 118 (Level : 2) Redefinition of padding-left : .buttonsa a

* Line : 129 (Level : 1) You have no background-color with your color : .buttonsa a:hover

* Line : 131 (Level : 1) You have no color with your background-color : #maincol

 

HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://www.w3.org/1999/xhtml/; xml:lang="en" lang="en"><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /><script src="hover.js" type="text/javascript"></script> </head><body><div id="pagewidth" ><div class="rbroundbox">	<div class="rbtop"></div>	<div id="header" ><div class="container"><ul id="miniflex">	<li><a href="#" class="active">Welcome</a></li>	<li><a href="#" >Home</a></li>	<li><a href="#">About</a></li>	<li><a href="#">forum</a></li>	<li><a href="#">contact</a></li>	<li><a href="#">sitemap</a></li></ul></div>	<div id="logo"><img src="logo.jpg" />	  </div>	</div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>			<div id="rightcol" > <div class="right"><div class="buttonsa"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="rightcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>			</div>		</div> 			<div id="leftcol" ><div class="left"><div class="buttons"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="leftcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div></div><div id="footer_wrapper">	<div id="footer" > Saint-Michael	</div>	</div>	</div>	<!-- /rbcontent -->	<div class="rbbot"></div></div><!-- /rbroundbox --></body></html>

 

css

 

 

html, body{  margin:0;  padding:0;  text-align:center;}  #pagewidth{  width:1000px;  text-align:left;  margin-left:auto;  margin-right:auto; } .container {	padding: 1px;	margin: 1px 0 20px 0;	background: #E0E9E9;	} #header{ position:relative;  height:170px;  background-color:#E0E9E9;  width:100%; border-bottom:solid 1px; } #logo{position:relative;margin-left:auto; margin-right:auto;width:620px;height:120px;}<!-- Top Nav -->#miniflex {	width: 100%;	float: left;	font-size: small; /* could be specified at a higher level */	margin: 0;	padding: 0 1px 0 1px;	border-bottom: 1px solid #333;	}#miniflex li {	float: left;	margin: 0; 	padding: 0;	display: inline;	list-style: none;	}	#miniflex a:link, #miniflex a:visited {	float: left;	font-size: 85%;	line-height: 10px;	font-weight: bold;	margin: 0 10px 0 10px;	text-decoration: none;	color: #999;	}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {	border-bottom: 4px solid #333;	padding-bottom: 2px;	color: #333;	}#leftcol{ width:170px;  float:left;  position:relative;  background-color:#E0E9E9;;  } <!-- Left Nav -->.left {width: 130px;}.buttons a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-left: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: left;margin-top: 1px;}.buttons a:hover {border-left: 10px solid #E0E9E9;text-decoration: none;color: #FFFFFF;}#twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:175px;  float:right;  position:relative;  background-color:#E0E9E9; } <!-- Right Nav Menu -->.right {width: 130px;}.buttonsa a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-right: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: right;margin-top: 1px;}.buttonsa a:hover {border-right: 10px solid #E0E9E9;text-decoration: none;color: #FFFFFF;}#maincol{background-color: #E0E9E9;   float: left;  display:inline;  position: relative;  width:77%;  } /* footer */#footer_wrapper {	margin:0 auto;	padding:0;	width:765px;	border-top:3px double rgb(138, 184, 193);	font-size:80%;	text-align:center;	clear:both;}#footer {	padding-right:5px;	margin:0;	line-height:190%;	text-align:right;	clear:both;	vertical-align:middle;}  /* *** Float containers fix: [url="http://forums.xisto.com/no_longer_exists/; *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 7px; }.rbroundbox { width: 100%; margin: 2em auto; }

I know by the time I finish it my header logo will be a background due to the fact the background will cover most of it up. Also the fact any code I put in the header will push the image down as well.

Edited January 20, 2009 by Saint_Michael (see edit history)

[Dooga 0]

Well I didn't check your code, but I highly recommend a web 2.0 design. This means simplicity, and reflections and beta tags (lol I'm kidding). But about the web 2.0 design... you should try to make one, since they turn out to be very beautiful!

check http://www.oswd.org/ to find some excellent examples.

[Saint_Michael 3]

Oh I know about them dooga knew about them for a good 2 years . I am taking very small snippets of code from templates and using specific online tools that don't produce any junk code.btw a live version of what it looks likeNO LONGER VALID LINKFunny Though IE version seems to look better go figure.

Edited January 20, 2009 by Saint_Michael (see edit history)

[electriic ink 1]

Let's see

 

1. Error Line 26 column 37: required attribute "alt" not specified.

 

<div id="logo"><img src="logo.jpg" /> </div>

 

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

For every image you put on a webpage, you must provide an alternative piece of text for the browser to display if the image becomes inaccessible for any reason. For instance for your logo you might have "Logo for my site..." as alternative text. This makes your new code:

 

<div id="logo"><img src="logo.jpg" alt="Logo for my site..." /> </div>

2. Error Line 47 column 12: ID "rightcol" already defined.

 

<div id="rightcol" >

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

 

✉

3. Info Line 37 column 12: ID "rightcol" first defined here.

 

<div id="rightcol" >

You can't give more than one tag the same ID. IDs are unique wherever you are. You need to change one to "rightcol2" or something else. It looks are though you are using them for css which is fine, although I am sure it's preferable to use the class attribute instead. Anyway, once you've changed one of the attributes' values, you need to change your css too:

 

FIND:

 

#rightcol{display:none;}

REPLACE:

 

#rightcol,		 #rightcol2 {display:none;}

4. Error Line 61 column 12: ID "leftcol" already defined.

 

<div id="leftcol" >

 

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

 

✉

5. Info Line 51 column 12: ID "leftcol" first defined here.

 

<div id="leftcol" >

Same applies as before.

 

6. Error Line 70 column 6: end tag for "div" omitted, but OMITTAG NO was specified.

 

</body>

 

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

 

7. Info Line 9 column 0: start tag was here.

 

<div id="pagewidth" >

Somewhere in your code you opened a <div> tag but didn't close it (ie </div>). I counted one too many open <div> tags by the end of the page. I can't say what closes where, it's up to you. However, the validator suggests it was ID="pagewidth". Close that wherever necessary or remove it altogether.

 

[hr=shade]Screenshots for Fx2.0[/hr]

 

[Saint_Michael 3]

All right it's update time, although it is small changes in my header it's still a in improvement. Although I come across couple of problems 1 of them is not visible. That problem is that when I try to put a drop down menu in for some reason my main column cuts it off any idea's without the need of me showing the coding? 

Edited December 17, 2016 by OpaQue (see edit history)

[Saint_Michael 3]

Well it is update time I started to put images in just to see what it would look like and it's not bad looking. Two problems i would like to work on next is fix the overlapping in IE7. Basically the content is above the header. Next is my left/right column nav menus for some reason they are going behind the divs below. Although I haven't tried it yet but I would think setting up a container element would fix this would I be correct on this assumption? lates code

 

Small Update I fixed the menus after putting in the z-index in the right spot YEAH!! Also to fix my header nav problems I went with a tab set up which isn't to bad either. Of course IE loves to destroy good work. most likely I javscript something instead of trying to fluid it.

Edited December 17, 2016 by OpaQue (see edit history)

[Saint_Michael 3]

// snipped 

Edited December 17, 2016 by OpaQue (see edit history)

[hts 0]

as a first suggestion: move the left column a bit to the right, and the right column a bit to the left (use margin-left/margin-right for those div`s )..also, at 800x600, the design is totally messed up ...besides, I think it would look better if the layout would fill the entire viewport (so no margins)maybe I`ll come up with more comments some other time..good luck anyway..

[matak 2]

maybe by using tables in html you could make things a bit easier for yourself..but anyway thanks for this CSS thingy i just started building a new template in joomla (v1.5. beta) and i need to start from scratch, so this could help a lot.i'll post a tut later when i'm finished.. (but i don't think it's going to be quite soon anyway )

Edited December 12, 2006 by matak (see edit history)

[hts 0]

tables are deprecated...read more about why you should avoid using tables when creating the layout of a site here (from this site, especially this page) and here

but that`s already a bit offtopic

[Saint_Michael 3]

With CSS you can create tables, they take a bit longer to design because of accuracy, but hopefully when I redesign my core then I can start adding in stuff like CSS frames, tables and other stuff that I find.

[garbage 0]

Wow the thumbnails looks really good, Any possible way to teach us how to develope a css skin, or is it really difficult. Do we need to have some type coding scripting knowledge.