|
CSS - Css In The Html Body
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. Similar TutorialsHello, I am still gettin to grips with CSS, and came across a CSS defenition which looked like this... Code:
html>body #content {
...
...
...
}
I wondered what the html>body defines? I know the # defines an ID label. thanks, JT Right, so I'm very new at this CSS positioning business. All I'm trying to do is have a centered 100% tall div with some content inside it. The 100% tall div is working. Now, inside, I'm going to eventually have 3 different divs containing information. All will be centered in the large container, , be about as wide as the centered container, and they will appear one on top of the other. Right now, all I have is my title image, which is basically just a placeholder until I make the title image I want. I have it centered just fine, and its at the top obviously. The problem is, I don't want it jammed up against the top of the browser window. So, margin-top, right? When I do that, It pushed the entire page down however many pixels I make the margin. HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>How To Read Basic Sheet Music ◊ Week 1: Welcome ◊ Cory Mensch</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="whiteFrame"> <div id="topTitle"></div> </div> </body> </html> CSS: html { margin: 0px; padding: 0px; height: 100%; } body { margin:0px; padding:0px; height:100%; background-image:url(Images/bg.jpg); background-repeat:repeat-x; } #whiteFrame{ background-color:#FFFFFF; margin:auto; width: 652px; min-height: 100%; } #topTitle{ width:611px; height:48px; background-image:url(Images/title.gif); background-repeat:no-repeat; margin-top: 50px; margin-left:auto; margin-right:auto; margin-bottom:auto; } Any help is greatly appreciated. Hey All, It's been a while, and my CSS knowledge is a bit rusty (not that it was ever all that;-). Anyway... Working on a custom wordpress admin write panel, I have a table with dynamic classes in a helper.css for indicating row status(includes .myclass tr:hover), which works great everywhere EXCEPT in our old friend IE6. Turns out that the wordpress "global.css" for admin panels defines the following: Code:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi g,
cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,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;background:transparent;}
where, though I can't remember how I stumbled onto it, upon removing "background:transparent;" in wp admins global.css everything is hunky dory in IE6 too -- ok, not the tr :hover{ because IE6 only supports :hover on <a>s. but at least the row classes are displayed with no other discernible impact on this or any other admin pages in IE6 or any other browser. Of course, I don't want to go changing wordpress core code just to scratch my little itch, but I was hoping someone might suggest a means of overriding the background:transparent in wp admins global.css either in my own helper.css or in the on the page itself? I've been using the html>body cheat to fix IE issues for over a year now, to fix issues with margins mostly. Lately for some reason, it doesn't seem to work anymore. For the life of me I can't figure out if I'm doing something wrong or not. Here's a sample of what I'm working on right now: Code: .image a {
display: block;
width: 154px;
height: 84px;
border: 1px solid black;
overflow: hidden;
float: left;
background-image: url(_images/loading.gif);
margin: 5px;
}
.image img {
border: 0;
}
.image a:hover {
border: 5px solid #FC0;
margin: 1px;
}
.image a:focus {
width: 170px;
height: 96px;
border: 10px solid red;
margin: -12px;
}
What's going on is I created a 4 x 4 grid of images, when you mouse over them a 5px orange stroke surrounds the image, and when you click the image, the image "enlarges" and gets a 10px red stroke. It's working great in Firefox, but then in IE, because of the margins, images shift when you mouseover, and the red stroke doesn't appear when you click. Any ideas? Thanks. My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } 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! 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 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. 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?! 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. '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. 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? 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 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 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. 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. 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. 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? |
|||||||