I want to make circles using divisions and each circle has different margin. The problem is that the div with small margin-top affects with the largest margin top for another div.
here's the HTML:
<div class="circle size2 marginTop2"></div>
<div class="circle size1 marginTop1" ></div>
and here's the CSS:
div.circle{
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
background: pink;
opacity: 0.3;
margin-top: 0px;
}
div.size1{
width:120px;
height:120px;
}
div.size2{
width:130px;
height:130px;
}
div.marginTop1{
margin-top: 20px;
margin-right:-10px;
}
div.marginTop2{
margin-top: 140px
}
Here's the code:
http://jsfiddle.net/L6gPd/
The div with small margin-top affects with large margin top.
Any explanation please?
If you want to place them side by side then add float:left; to div.circle.
If you inspect the element using Firebug or Chrome Developer Tools, you will see that the 2nd circle is having margin-top of just 20px but it is relative to the position of the 1st circle and not from the top of the page.
It's not entirely clear from your question, but are you trying to get them to be different heights vertically? If so, would try adding
vertical-align:top; to the marginTop1 and marginTop2 classes so the margin-top values will take visible effect.
Related
Im trying to make a 960px, float left website and using black transperent divs with text in them. The problem is that the text has the same color as the div, but I want it to be white or at least not the same as the div. How can i do this?
This is my CSS for the moment, the problem is that position is set to relative, but I just want to use diferent divs and use "float: left". If I remove "position: relative" the transparent color of the div disappears.
.content {
position:relative;
color:White;
z-index:10;
float: left;
text-align: center;
left: 365px;
font-family: Arial;
margin: 10px;
top: 15px;
}
.background {
position:absolute;
border-radius: 10px;
width:960px;
height: 70px;
background-color:Black;
z-index:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:.5;
top: 80px;
}
Use transparent background instead with:
background:rgba(0,0,0,0.5);
The content inherits the opacity of your container. Explicitly set the opacity of the content to not be .5 but 1.
This seems to be working fine, see the fiddle and tell me if it's working for you. I've changed the width to % but it works just as well on px, ijust wanted to remove the scrolling in the fiddle, and changed the Color:White; to color:#fff;
Fiddle
I have this css :
#content_search
{
position:relative;
top:50px;
width:650px;
border:5px solid #111;
-moz-border-radius: 5px 5px;
border-radius: 5px 5px / 5px 5px;
}
In all navigators as firefox , chrome , etc see fine , perfect ! but in explorer 9 see bad and in all versions of explorer , no can put center in the screen always go to the left or in other cases if i change something to the right
It´s possible center the div and no use div align=center
By other side it´s possible works in explorer this :
-moz-border-radius: 5px 5px;
border-radius: 5px 5px / 5px 5px;
For round corners into explorer
Thank´s regards
If you're looking to set border-radius for all corners to be the same unit, you don't need to specify positions. Just border-radius: 5px; works fine.
If you want to center a container element within it's parent div, use margin: 0 auto;. In theory, you can also set the parent div to text-align: center; and the child div to display: inline-block;, but I've found the margin method to be less buggy across browsers.
CSS
#content_search
{
position:relative;
top:50px;
width:650px;
border:5px solid #111;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
}
HTML
<div id="container">
<div id="content_search">
<span>My Content</span>
</div>
</div>
Use margin: 50px auto; to center your div (the 50px in the shorthand margin would replace the top:50px;). Remember that when using the both left and right margin's to auto, you must set a width on your div
http://jsfiddle.net/galenw/LWQfA/
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
I'm looking for a way to use three images as background urls in css to create links/buttons with rounded corners. There is an image on the left that has rounded corners for the top left and bottom left, an image in the middle that is repeatable, and an image on the right that has rounded corners for the top right and bottom right.
Ideally, the code can work for both links and buttons, and ideally I don't need to specify the width for each link or button. If possible, the width would be the width of the text and some margin or the width of the button.
Is this possible for Internet Explorer 7-9, and the latest versions of Firefox, Chrome, and Safari?
Hi you can define three div and define the properties as like this
You can define images in background replace to color .
CSS
a{
display:inline-block;
}
.left, .middle, .right{
float:left;
height:100px;
width:100px;
}
.left{
background:yellow url(../..) no-repeat ;
}
.middle{
background:red url(../..) repeat-x;
width:auto;
line-height:100px;
}
.right{
background:green url(../..) no-repeat;
}
HTML
<a href="">
<span class="left"></span>
<span class="middle">Heere you text </span>
<span class="right"></span>
</a>
Live demo http://jsfiddle.net/rohitazad/HAjLZ/
You don't need to pre-split the background image. Have a look at the button on this page: http://easyhanzi.com/
This is done using only one image that is split using CSS. Then there are three DIVs - one left, one center and one right. The content can have any width.
Here is the HTML:
<div id="download-button">
<div id="download-button-left"></div>
<div id="download-button-middle">
<center><div id="download-button-main-text">Download free trial</div><div id="download-button-subtext">Version 3.1 for Windows</div></center>
</div> <!-- download-button-middle -->
<div id="download-button-right"></div>
</div>
and CSS:
#download-button-left {
float: left;
background: url(img/download-button.png) 0 0;
width: 12px;
height: 85px;
}
#download-button-middle {
color: #ffffff;
padding-right: 20px;
padding-left: 20px;
padding-top: 15px;
float: left;
background: url(img/download-button.png) -12px 0;
width: auto;
padding-left: 20px;
height: 70px;
}
#download-button-right {
float: left;
background: url(img/download-button.png) -399px 0;
width: 12px;
height: 85px;
}
You can use jquery mobile for this horizontal grouped buttons shown in this link----> Grouped Buttons
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.