|
CSS - Body Surgery - Centering?
how can i center my whole body. text-align:center and margin: 0 auto don't work.
i want my site to stay the same, but i am currently using <center>, which is bad. how can i set the body to center everything? Similar TutorialsHi all, I would like to be able to have the body background change when moving from page to page. Is it possible, without javascript. Code: body {
margin: 0px;
padding: 5px 0px 5px 0px;
background: url(blue2.jpg) fixed;
} {
Specifically the surrounding blue2.jpg that frames the page. page link css link Thanks. I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil I am currently setting the body id of my pages to highlight what item I am on... Such as: body#news #news_tab a, { border-bottom: 1px solid #fff; background: #fff; color: #000; } But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work. I tried: Adding this div: <div id="news" style="display:none">Testing Me</div> Adding this body tag: <body id="news"> And then adding this style definition: body#news #news { display: block; } but it still doesn't display. Is this just not possible? Is there anyway around it? Thanks! I am trying to center the whole page. the body contains all divs, contained in one main div. I tried I trick I have been using for a while but it messed with one the other divs. I was using Margin-Left:-375px; Position:Absolute; Left:50%; any ideas for another way to center my page? Please look at http://www.mts-diesel.com / index.php I have a 25px div (#topmargin) that I want flush against top of screen. I assigned padding & margin to both div & body elements but for some reason the I can see about 3px of the body bg above the div #topmargin. Any help would be appreciated. Thanks. Tom Hi, Does anyone knows how i can have css style in the body. The whole coding part should be in the body. I need show link which have the same propertise in a PHP code and I am just editing it. I am trying to work it around this way. I juts want to have link to another page with different font and font folor change when hover. Can someone show me how i can do this. I am new to css. Please help me. At the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. 'Ello, I have a slight problem with some CSS I am using, it works perfectly fine in other browsers but in IE 6 it doesn't. What I basically want is the body of the page to have a 10pixel margin on the left and right of the page and 0 at the top and bottom, this bit I can do. I also want everything on the page to stretch from the end of each margin (so they basically start 10 pixels in from the left and 10 pixels in from the right), which I have got working fine. Now what I am trying to do is have one div layer stretching from the very left to the very right of the page and I am getting a bit stuck on it. What I have managed to do is set that div layer to be absolute positioning so I can use "left: 0px;" to get it all the way up against the left hand edge, but how can I get it right up against the left hand edge? I am sure if I set it to be the width of the page so for example if the page is 500 pixels wide and I use "width: 500px;" it would go from end to end, but what I want is it to go from end to end no matter what the width of the window is. For the rest of the layers that are not going from end to end but are staying within the body margins I used "width: 100%;" which works fine, but when I try it with the one that I want to go from end to end it only goes up to the body margin, but right to the end, well in IE it does anyway other browsers are fine with it. Does anyone know how to get around this? I have tried looking on the net but I can't find anything on it. All help will be greatly welcome. Thank you in advance, El Barto. hello friends, please tell me how can i specify a hyperlink, active, hover and visited attribute in body { } for example i have the following css BODY { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #F2F2F2; font-family: Arial; font-size: 11px; color: #000000; text-align: left; } now i want to specify the default hyperlink with active, hover and visited attribute within body. Thx. Hi guys I've seen a few websites that use a fixed width column in the middle of the screen that appear to cast a shadow over the background. I want to achieve that but I can't figure out how. The central div is 800px wide so I tried creating a very wide but short background image with this image on but I can't position it bang in the middle where I need it (the image is 2400x8px and 1.46KB) Can anyone help? Either with the positioning of this image or with a better solution? Cheers guys Hi there, I am trying to define the body text for all my pages using this, but it is not recognising it: Code:
body{
font-family: verdana;
font-size: 11px;
color: #000000;
line-height: 150%;
}
Have I got something wrong here?! Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. The code below is taken from "HTML Utopia: Designing Without Tables". My confusion arises over the use of a margin on the body tag. Since a box's background color only extends to its inside border, then how come the body tags background color extends all the way to the browser window edge?? This leads me to also ask..What encloses the body tag?, and what is the color of this mystical container?? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #808080;
color: black;
margin-left: 5cm;
}
h1 {
background-color: #c0c0c0;
color: black;
margin-left: -3cm;
}
h2 {
background-color: #c0c0c0;
color: black;
}
</style>
</head>
<body>
<h1>The body's margin-left is 5cm, but mine is -3cm. </h1>
<h2>I have no margin-left setting, so I use the body's 5cm setting.</h2>
</body>
</html>
i have a problem dynamically setting the html background color when i initially set it with css. if i have a javascript function: function changeColor() { document.bgColor = '#FFFF00'; } and call it when i click a button the background color changes like you'd expect. but if i initialize the background color like this: body{background-color: #FF0000;} and then later call my javascript function to change the background color like before, it doesn't do anything. what's going on here? and how can i initialize the background color and still be able to dynamically change it? thanks My problem is that I need to get the Body Background color that is in a css file using php to then introduce this color to an applet. My CSS file has: BODY { FONT-SIZE: 12px; COLOR: #6699ff; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #CC6699; SCROLLBAR-SHADOW-COLOR: #CC6699; SCROLLBAR-3DLIGHT-COLOR: #CC6699; SCROLLBAR-ARROW-COLOR: #CC6699; SCROLLBAR-TRACK-COLOR: #FFFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #CC6699; FONT-FAMILY: "Times", serif; } But I use different CSS so very time I change the file I need to know in the php page what BACKGROUND-COLOR it has. Hello to all those reading A really simple question for the knowledgeable, I suppose, however a question nevertheless. I've attached and image to try and save us all time and be as straightforward as I can. How would I accomplish the following with CSS? Problem: if I use absolute positioning on header and footer, I have difficulties centering them. Problem #2: how can I assign fixed values to header and footer and allow the body to stretch dynamically to accomodate different resolutions and\or content. In other words make the middle piece of the design mobile\fluid. Here is a small snippet of my CSS: Code:
body {
font-family: verdana, arial, sans-serif;
color: #0A142B;
background-color: #006699;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
#main {
background-color:#FFFFFF;
height: inherit;
padding: 5px;
}
My question is that in the <div id="main"> how can I get that to set the height to 100% from the body, I have tried both setting it to 100% and inherit and it just stays the same height. I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> |
|||||||