Jump to content

Css Page Format And Styles


big-dog1965
 Share

Recommended Posts

Can some real patient person take the time to write me a CSS file to format a page and style stuff?I’ve used example and tried it from tutorials, but just can’t get it to do what I want.If some one will take the time to write me this can you make comments at each place that is doing or formatting something where I can try to understand what is going on.This is what I would like to do.Have 3 columns and 5 rowsTop row would be fixed and full width meaning it doesn’t ever scroll and is always in view. (This would have a logo image)Second row would be fixed and full width meaning it doesn’t ever scroll and is always in view. (This would have the site links)Column on left under top 2 rows would be fixed meaning doesn’t scroll with page unless it has more information than can be seen on screen. (This would have a .php page displayed from database results)Column on right under top 2 rows would be fixed meaning doesn’t scroll with page unless it has more information than can be seen on screen. (This would have a .php page displayed from database results)Center column under top 2 rows would work like an IFrame scrolls if content is larger than page. (This would be where all links for site appear. Meaning if you click a link from row 2 it is displayed in the center area. Also when the site is first opened this area would have a splash type page.)I hope all this makes since.

Link to comment
Share on other sites

Someone could, and someone desperate for attention actually might, but it's not really what we do. We're more about teaching skills than doing the whole thing. Why don't you try it yourself and come back with questions. :)

Link to comment
Share on other sites

I dont really know where to start for questions. Nothing seems to work so I wanted to start over, but here is some stuff that Ive got and main thing is everything scrolls and nothing looks right. Ive used tuts from this site and others to get this far. some stuff I sort of understand and some not so much.Mostly guessing at it. Thats where I go wrong I supose.

/***************STRUCTURE***************************//*Reset*/* {margin:0;padding:0;}body {	min-width:800px; }/* Absolute positioned logo for all browsers*/#logo-wrapper {	position:absolute;	top:0;	left:10px;	width:150px;	height:6em;}/* Reset logo position to fixed for real browsers such as Firefox*/body>#logo-wrapper {	position:fixed;}#header {	height:6em;	width:150px;	margin:0 auto;}/* Absolute positioned header for all browsers*/#header-wrapper {	position:absolute;	top:0;	left:150px;	width:auto;	height:6em;}/* Reset header position to fixed for real browsers such as Firefox*/body>#header-wrapper {	position:fixed;}#header {	height:6em;	width:auto;	margin:0 auto;}#leftside-wrapper {	width:150px;	position:absolute;	top:8em;	left:10;	padding-bottom:0px;/* 	height:60px; */}body>#leftside-wrapper {	position:absolute;/*	position:fixed; */}#leftside {	width:150px;	height:60px;	margin:0 auto;}#content {	height:6em;	width:auto;	margin:0 auto;}/* Absolute positioned content for all browsers*/#content-wrapper {	position:absolute;	top:8em;	left:150px;	width:auto;	height:auto;}/* Reset content position to fixed for real browsers such as Firefox*/body>#content-wrapper {	position:fixed;}#footer-wrapper {	width:auto;	position:absolute;	bottom:0;	left:0;	height:30px;}body>#footer-wrapper {	position:fixed;}#footer {	width:auto;	height:30px;	margin:0 auto;}/*Global navigation*/#nav {	position:absolute;	top:6em;	left:150;	width:100%;	padding:0 0 0px;	height:1em;	}	#nav ul {	left:0px;	width:100%;	list-style-type:none;	}	#nav li {	display:inline;	left:0px;	width:auto;	}	#nav a {	padding:3px 3px 3px 3px;	margin-left:4px;	margin-right:4px;	color:#fff;	text-decoration:none;	display:block;	left:12px;	width:auto;	font:bolder 1.2em/100% Helvetica, sans-serif;	letter-spacing:2px;	}	#nav a:hover {	border-bottom:1px solid #fff;	}#nav a:active {	background:#660033;	color:#fff;	}#logo-text {	font-family:Zapf Chancery, cursive;	font-size:25px;	margin-left:5px;	padding-top:5px;	line-height:25px;}

Link to comment
Share on other sites

There are a number of problems here, which of course you know. The main one is the continual use of absolute and fixed positions. Minor ones include using a font that most people won't have. If you want to stray from the main font families, you should create an image or adopt image replacement techniques.Using position absolute and fixed is a bad idea for a host of reasons, but mostly it is inflexible and means that your page won't render well for everybody. There is point at which you have to release your design knowing it will look a tad skeewiff in certain circumstances and in certain browser versions. But as a rule, using position:relative will give you the most reliable designs. Also, as a matter of interest, are you using a strict doctype? Again, this will give you a high level of confidence that your site will look pretty similar in the top modern browsers. Not necessarily older versions of IE, but everyone struggles with those.Globally resetting margins and padding isn't necessarily a bad idea, but you have to be meticulous in explicitly setting them later. It's not something I do, but I'm not a leading expert, so maybe it just comes down to preference.The rule of thumb is to create your content first, in the order it should appear and using semantically correct markup. The way I do it is a mix of that and incremental design development. Make the logo look good, add any toolbars up there and position them, then whatever comes next on the page, so that you can see each element sitting as it should before you confuse matters. Perhaps take the layout you have and try to recreate it using relative positioning and so on. You are kind of there with measuring heights in em, but it might be simpler to pad and margin with flexible measures like em and let your content define the size of an element. It won't be precise, but it will be flexible and extensible. At the end, you might need to include different rules for IE7 and older, but that can be achieved easily either by hiding the code in comment tags or by actually including it with PHP if you detect IE7 and older. If you design in FF or another browser with the same level of live editing, periodically check in a few other modern browsers, and validate your code, you will get it right eventually.

Link to comment
Share on other sites

All that I guess is well and good, but like I mentioned I don't really understand most of what is there. It’s a hit and miss deal. I’ve spent hours trying to do this with little success. This is why I created the post. General thought was for someone all this is second nature and could write with comment the basic code then by the comments I could fill in the blanks from tutorials and such.I wish there was some software that could make a CSS according to questions you answered or from a table you imported.

Link to comment
Share on other sites

had a chance to play, but before I get confusedHow do I get the top 2 rows not to scroll with page.Here is the .CSS and the HTML Page

/*Delete these lines to remove the background colours*/#layout-head {	background-color:white;	background-image:url('../images/All_Stats_RC.gif');	background-repeat:no-repeat;	background-attachment:fixed;	height:115px;	}#layout-menu {	background-color:white;	background-image:url('../images/blk_pipe.gif');	background-repeat:repeat-x;	background-attachment:fixed;	height:30px;	}#layout-left {	background-color:lightGreen;	}#layout-center {	background-color:lightGrey;	overflow: auto	}#layout-right {	background-color:lightGreen;	}#layout-foot {	background-color:skyBlue;	}/*End of background lines*/#layout-page {	background-color:white;	margin-top:0px;	margin-left:0px; 	}#layout-head {	}#layout-head2 {	}#layout-left {	float:left;	width:17%;	}#layout-right {	float:right;	width:17%;	}#layout-center {	z-index: 0;	top: 1px;	left: 17%;	width:100%;	}#layout-foot {	clear:both;	}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>New Page 2</title>	<link rel="stylesheet" type="text/css" href="css_js/CSS_Layout.css" /></head><body><div id="layout-page">	<div id="layout-head">Head</div>	<div id="layout-menu">menu</div>	<div id="layout-left">Left</div>	<div id="layout-right">Right</div>	<div  id="layout-center">Center</div><!--<div id="layout-center"><iframe name="Mainframe" marginwidth="1" marginheight="1" width="100%"></iframe></div>-->	<div id="layout-foot">Foot</div></div></body></html>

If you see something so far that isnt right please make comment on that section before I get to far along

Link to comment
Share on other sites

use a position fixed outer container, for all elements you require to be fixed, and position relative for other elements, for all browsers but IE6.For IE6... bit more difficult, ie6 does not support position: fixed; you have to use position: absolute, with a fix/hack involving html, body set to 100% height, and combination of overflow: hidden, visible and scroll, which I've used before, but can't find at moment.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...