Using css to position an element

Using css to position an element (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

jcraig713 -> Using css to position an element (4/14/2009 11:21:03)
A little background on my project: Picture an etch-a-sketch. The content is to display in the center screen and as the navigational buttons are clicked (home, email, staff...) the content display changes in the etch-a-sketch screen to the link selected in the nav bar. Question: I have the etch-a-sketch itself loaded as a background image. I need to create an element to position it so the text displays only within the screen of the etch a sketch. For all I have been reading, I need to create something like: <div id="content"> <h1>Welcome</h1> <p>to my site...</p> </div> Then in my external css file: #content { position: absolute; top: 65px; left: 0px; width: 100%; background-color: #FFFFFF; color: #000000"} My image is loaded, the "screen" area I need to display my content in is in the center of the screen. I cannot seem to get the padding on the top, bottom, left and right set properly to limit the element to the screen area I want. Can someone direct me how to set these paramenters. I am very new to the whole css thing and am learning so much. Thanks.

Tailslide -> RE: Using css to position an element (4/14/2009 11:52:40)
Hi Probably the issue is the various default padding and margins for different element across different browsers. To get around this you can add a global reset in your CSS which basically removes all padding and margins from all elements: * {margin:0; padding:0; } html, body {padding: 0; margin: 0; } Then add back in padding or margins on individual items as you need. Using this method at least you're starting from a "level playingfield"! I tend to use a slightly more complex version of the above (which is a bit like a hammer/nut thing). I use this: *{font-size:100.01%; margin:0; padding:0; } html{height:100%;font-size:100.01%;padding: 0; margin: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {margin:1em 0;} li, dd, blockquote {margin-left:1em;} html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;} input, select, textarea {font-size:100.1%;} h1, h2, h3, h4, h5, h6 {font-size:100%;} form label{cursor:pointer;} fieldset, img{border:none;} table{border-collapse:collapse; border-spacing:0;} ul li {list-style-type:square;} hr {height: 1px; background-color: #E5E5E5; color: #E5E5E5; border: none; padding: 0; margin: 1em 1em;} The above snippet just adds a few basic formatting options in - which I use on every site. But the first snippet would do the job!

TexasWebDevelopers -> RE: Using css to position an element (4/14/2009 12:52:52)

Tailslide,
I aggregated a bunch of CSS resets into this one that has never fialed me yet:
(For those who are curious, a CSS reset starts the external CSS stylesheet off and tries to create a neutral, cross-browser, display upon which one can build a stylesheet with custom definitions.)

@charset "utf-8";
/* CSS Document */

/* Begin  RESETS css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background: none;
}
/* define focus style */
:focus {
	outline: 0;
}
body {
    line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
textarea { 
margin: 0; padding: 0; 
}
/* End  RESETS css */

jcraig713 -> RE: Using css to position an element (4/14/2009 13:04:29)
so in my css sheet, I would just paste this code to the top of the sheet followed then by the rest of my style sheet code? Using the last few blocks of the code you provided with my other code following, my css file would look like??? } blockquote:before, blockquote:after, q:before, q:after { } blockquote, q { } textarea { margin: 0; padding: 0; } /* End RESETS css */ body{ background-image: url('images/website_body.png'); background-repeat: no-repeat; background-position: center; } #content{ position: absolute; top: 25px; left: 90px; width: 50%; height: 50%; background-color: #FFFFFF; color: #000000" }

TexasWebDevelopers -> RE: Using css to position an element (4/14/2009 14:01:31)
You could--but you would need to flesh out your CSS styles for body, fonts, etc. Think of the reset as setting everything to "zero" and now you have to define all of the styles.

jcraig713 -> RE: Using css to position an element (4/14/2009 14:46:33)
quote: but you would need to flesh out your CSS styles for body, fonts, etc. I apologize for not gettng it... I am still learning css. so can you explain what you mean by "fleshing out" my styles? Will the code I have after the code you provided going to work?

TexasWebDevelopers -> RE: Using css to position an element (4/14/2009 17:46:21)
Your page is a blank canvas waiting for paint. All you have the body doing is display a background image. So you have to also give it a background color in case images are not rendered; and declare a font face, size, and color. maybe like this: body { font-family: Verdana, Geneva, sans-serif; font-size: 100%; color: #000; background-color: #FFF; background-image: url('images/website_body.png'); background-repeat: no-repeat; background-position: center; margin: 20px 20px 20px 20px; /* in clockwise order: top, right, bottom, left */ } Then you need to see the CSS for paragraphs <p>, and headers <h1>, <h2>, etc. If you use a DIV then do the same for the DIV and the elements in the DIV: #Content p { background-color: #FFF; font-family: Verdana, Geneva, sans-serif; color:#000; font-size: 90%; } and so on....

Page: [1]

0.0625