<!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>Hello!</title>
<style type="text/css">
.class1{
border:10px solid #000000;
padding:5px;
border-radius:12px;
opacity: 0.1;
}
.class2{
border:10px solid #000000;
padding:5px;
border-radius:12px;
opacity: 100px !important;
}
</style>
</head>
<body>
<div class="class1">
nghi
<div class="class2">
nghi2
</div>
</body>
</html>
In html file. I have 2 div. I want only opacity class1 not opacity div 2. I has use important property for div2 but it not effect. please help me take it thanks
opacity: 100px !important;
Should be:
opacity: 100%;
or:
opacity: 1;
Also, you're missing a closing div tag. Did you mean for the divs to be separate, or one inside the other?
as far as i know, you can't set opacity on a parent div and then set a different opacity (making it more opaque) on the child div
Beside the syntactical error with the px and the fact that opacity goes from 0 to 1 (and not 100), If the .div2 element is contained inside .div1 then you cannot do it..
The way your code is right now, where you only close one of the two divs it gets interpreted as the second div being inside the first one.
You might want to clarify/corerct this (to make it valid as well)
You are missing the closing Tag in the first DIV. When you fix it, should it for sure work.
Related
Consider this simple example.
HTML
<div>
Some link here
<div>a div here</div>
Another link
<br/>
And one more!
</div>
CSS
div > a, div > div {
color: white;
line-height: 1.6;
height: 30px;
text-align: center;
width: 150px;
}
div > a {
border: 1px solid black;
display: inline-block;
text-decoration: none;
}
div > a:first-child {
background-color: red;
margin-bottom: -8px;
}
div > div + a {
background-color: green;
margin-bottom: -8px;
}
div > br + a {
background-color: blue;
}
div > div {
background-color:black;
border: 1px solid gray:
margin-bottom:-8px;
}
Fiddle here http://jsfiddle.net/rHupy/2/
This issue relates to latest Chrome and Firefox.
I've lost my whole afternoon yesterday fiddling with this. Basically, in this example the negative bottom margin acts very strangely. If you use the negative margin on the red A tag, it will draw in the DIV tag, but up to 8px. If you go below -8px (a more negative value, that is) the DIV tag stays put, it's not drawn more into the red A tag.
Applying the margin to the DIV tag works as expected, that is you can make the green A tag completely cover the DIV tag with -25px.
I'm quite certain this is related to the inline-block display style, because if I apply the block display style to all tags and omit the BR tags this problem is circumvented, but more arise. Example here http://jsfiddle.net/rHupy/3/
I have also tried combining the block display style with float left style, but that gave me more problems; some elements would just collapse, instead of aligning one to another.
My question is: why is the negative margin applied on A tag with inline-block display style set "limited" to some value?
OK, I played some more with it and here are the results.
The initial doctype produced this.
HTML
<!DOCTYPE html>
Changing the doctype gives entirely different results, with exactly the same CSS and HTML.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Here's the final HTML
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
div > a {
background-color:green;
border:1px solid red;
display:inline-block;
height:20px;
margin-bottom:-15px;
margin-right:11px;
width:23px;
}
div > a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + br + a {
margin-left:17px;
}
</style>
</head>
<body>
<div>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Lets say that this solves my problem, even though I don't understand all the consequences of making this change.
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I'm not so good at CSS design, but I'm just working on a content display layout for a website.
I basically wanna make a thin line by putting an image inside a container div. and set all dimension properties as below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
#thinLineWrap{
width: 510px;
height: 3px;
background-color: #000000;
}
#thinLineWrap img{
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
</style>
</head>
<body>
<div id="thinLineWrap">
<img src="images/thin_line.gif" border="0">
</div>
</body>
</html>
But when viewing the output in Chrome inspect, the output result couldn't seem to have the specified sizes as expected, as illustrated in the snapshot below.
You might also notice that my image width and height became 171px and 4px respectively, unlike what it was set in the stylesheet section.
Any possible mistake I might have done? Why did the image element become 1 pixel bigger than it should be?
any advice would be very appreciated.
EDIT:
A copy of the original problematic thin line image is here. Not sure if there could be anything wrong with the image itself.
https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif
You defined an Img within the #thinlinewrap to have the properties.
div#thinLineWrap{
border:0px;
}
#thinlineWrap img{
height:3px;
}
Might be the code you are looking for.
i found it out.you'r img inherited it's border from another style ,try overriding it like this :
#thinLineWrap img{
border:none;
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
I'm having an issue with IE9(and 8) with positioning empty(kinda) anchor elements over an image. The anchors contains text, but it's kicked off the page using CSS's text-indent property.
I'm working on a site that has a series of promo panels, they're all contained in an UL. Inside each LI there's a promo image, and 1 or more anchor elements positioned over different areas of it. The IMG and the A elements are absolutely positioned in the LI element. So, the basic structure looks like UL > LI > IMG A A A.
This setup works fine in Firefox and Chrome, but IE doesn't like it. I've tried using z-index on this setup with no luck.
Can anyone explain the issue that IE is having, and give a better solution for my CSS? I've made a quick/simplified example of my problem using a div, img, and a single anchor. This can be copy/pasted onto your machine to see it in action.
<!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></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
</body>
</html>
I don't have much control over the UL > LI > IMG A layout. This is setup that as we get new promos we can easily update the image, and just add or remove anchors easily depending on how many 'calls to action' the image has. The positioning of the A elements are injected inline.
Thanks!
I had the same issue. Using your example, here's my solution:
<style type="text/css">
#div {
position:relative;
}
#anchor {
display:block;
width:640px;
height:480px;
overflow:hidden;
text-indent:-9999px;
position:absolute;
top:0;
left:0;
background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
}
</style>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
Since the anchor tag has a set width and height with overflow hidden, set the anchor tag's background image to the image that it's absolutely positioned over (or any image you've already included), BUT set the background-position to positive pixel values larger than the anchor's width and height and background-repeat to no-repeat. By doing this, the anchor tags work in IE, AND the browser doesn't download extra resources so you save bandwidth. Note: the img tag doesn't need any special styling, and the containing div only needs position relative.
If you don't want to worry about setting the background-position, don't have control over the size of any dynamically generated images, and/or aren't concerned about saving bandwidth, you could also create and use a small (1x1) clear/transparent image (set background-repeat if necessary).
Alternately, augmenting Billy Moat's fiddle example: http://jsfiddle.net/7NpLq/29/
I think you could use a plain old HTML image map to achieve what you're wanting here:
http://www.w3schools.com/tags/tag_map.asp
Otherwise here's a fiddle doing what I think you were trying to do originally:
http://fiddle.jshell.net/7NpLq/
This issue affects IE10 as well, but not IE11. An alternative to the background image approach is to apply background-color: rgba(0, 0, 0, 0); to the anchor. Note that this won't work in IE8, which doesn't support rgba colors.
I am trying to make a SIMPLE Css percent bar.
OK go to http://htmledit.squarefree.com/
and copy/paste this in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#perc {
width:667px;
border:4px solid blue;
}
#perc_in {
width:100%;
padding:3px;
font-size:17pt;
background:red;
margin:3px;
}
</style>
</head>
<body>
<div id="perc"><div id="perc_in">100%</div></div>
</body>
</html>
As you can see the red inside bar is overlapping the blue border... why? :\
By the W3C box model, margins and padding add to the width of a <div>. So instead of 100%, the width becomes more than that, and causes the progress bar to overflow the blue border.
You'll have to change the 3px margin of #perc_in to a 3px padding on #perc, and remove the padding on #perc_in.
Here is the updated code (added by Blaenk):
#perc {
width:667px;
border:4px solid blue;
padding:3px;
}
#perc_in {
width:100%;
font-size:17pt;
background:red;
}
The reason is: W3C box model. It says that final width of an element is a sum of width and padding properties. So if you declare that element suppose to have width: 100% (to be exact: 667 pixels in this case) and also declare that element should have 3-pixel padding from left and right (total: 6 px) the final width of the element is: 667 + 3 + 3 = 673 pixels.