|
| |
|
|
jcraig713
Posts: 10
Joined: 4/7/2009
Status: offline
 |
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
Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!
_____________________________
Little Blue Plane Web Design | Land Rover project
| |
|
|
|
TexasWebDevelopers
Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline
|
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 */
_____________________________
Follow us on TWITTER
| |
|
|
|
jcraig713
Posts: 10
Joined: 4/7/2009
Status: offline
|
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"
}
| |
|
|
|
jcraig713
Posts: 10
Joined: 4/7/2009
Status: offline
|
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
Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline
|
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....
_____________________________
Follow us on TWITTER
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 