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/
Related
for the life of me cant figure out why this div wont centre in its container.
I have a fixed top bar which has a width of 100%, and then a inner div which has a width of 750px and a margin of auto. This div however will not sit centre, but instead sit about 200px right of centre.
I already have another div centered in another 100% width container and that works fine, but this wont.
I have gone through firebug inspector and played with everything i can, and i cant seem to find why it wont sit right.
Easiest way of showing you is...
The url is:
The div i am trying to centre is the yellow one in the very top bar. It holds the page navigation (next, prev etc).
The BETA code is simply: test
Any ideas would be appreciated :) Thanks, Craig.
The HTML
<div id="sidebar">
<!-- Content Here -->
</div>
<div id="topbar">
<div class="pagecontrol1">
<!-- Content Here -->
</div>
</div>
The CSS
#sidebar {
width:250px;
background-color:#fff;
height: 100%;
float:left;
position:fixed;
border-right: 0px solid #333;
z-index: 996;
-webkit-box-shadow: 2px 0px 5px -2px #888;
-moz-box-shadow: 2px 0px 5px -2px #888;
box-shadow: 2px 0px 5px -2px #888;
}
#topbar {
height: 35px;
width: 100%;
background-color:#444;
position:fixed;
z-index: 950;
border-bottom: 1px solid #222;
border-top: 1px solid #222;
}
.pagecontrol1 {
width: 750px;
height: 100%;
margin: auto;
background-color: #ff0;
}
The 100% width is grabbing 100% of the page, so when it is shifted left by the sidebar you're seeing it pushed right by 250px. Your pagecontrol1 class should look like this:
.pagecontrol1 {
position:fixed;
left:250px;
right:0px;
height:35px; /* Instead of 100% */
margin:auto;
background: #ff0;
}
I added position:fixed, left:250px;, right:0px; and changed height:100% to height:35px. I edited in the browser, and it looks fine with those changes to the pagecontrol1 class.
I have a static image as background splash (800x600px), which consists of a blank space at a particular location which needs to be filled with a text box, this splash page is centered for all resolutions (CSS code below)
I am able to align it properly on a particular screen resolution, however when I see it in a different resolution the box moves out of position.
CSS / HTML :
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner{
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 350px;
v-align:top;
/*bottom:34%;*/
bottom : 420px;
right:50%;
margin-right: -190px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
float:left;
}
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:269px;margin-right: 10px" id="email"/>
</div>
</div>
This works fine in certain resoltuions but for higher resolutions the "roundcorner" keeps floating to awkward locations, how can I lock the position for any resolution, i.e. relative to the splash page image which will always be centered according to the resolution?
It is difficult to center an element with position: absolute specified. By some hacks, we can achieve the result but that solution would be more of a patchy work.
In this setup, .roundcorner will take its left and right from its parent which is centeredSplash containing your background image.
You can try the following:
.centeredSplash
{
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner
{
background-color: #eae53f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 400px; /*important*/
margin:0 auto; /*This will keep your box center in all screen resolutions*/
}
input
{
-webkit-border-radius: 5px; / * For Safari, Chrome */
-moz-border-radius: 5px; /* For Mozilla */
border-radius: 5px;
width:100px;
height:20px;
}
Working Demo
Note: For a block element to remain horizontally centered in all screen resolutions, it must have some width specified explicitly otherwise margin:0 auto will not work. For aligning vertically centered, we have to do something extra which is a different story. Here is a complete guide on centering in CSS.
I was just wondering if there's a way to create a div with the "border" inside the div. What I mean is: I have a div of 200px for example and I want the border to be inside that 200 pixels, without exceeding.
I need to achieve the effect of a div with a border not on the edge of the shape, but 5px more inside. An image can talk more than hundreds words
I want this:
Here is my code:
http://jsfiddle.net/hpLYD/1/
The CSS:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid blue;
}
Padding property is expanding the whole div including the border.
How can I achieve that effect using only css? is it possible?
You can do this using the CSS3 property box-shadow. Add the following to your CSS:
box-shadow: 0px 0px 0px 5px #f00;
jsFiddle example
While box-shadow is most likely the best way to go, people seem to forget that the question required that the border didn't exceed 200px. In order to actually achieve this you can use the inset parameter on the box-shadow attribute (which will make an inner shadow).
You will also need to change the box-sizing to border-boxsuch that the size is proportional to the border and not the content.
Here's an JSFiddle with the result
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
border: 3px solid red;
box-shadow: 0px 0px 0px 5px blue inset;
box-sizing: border-box;
}
<div class="mydiv"></div>
.mydiv{
position:relative;
height:150px;
width:200px;
background:#f00;
}
.mydiv:before{
position:absolute;
content:'';
position: absolute;
top: 10px;
bottom: 10px;
left:10px;
right: 10px;
border:1px solid #daa521;
}
Here's an JSFiddle with the result
You can't place a border within an element, however you can use box-shadow to give that effect:
.circle {
border-radius: 50%;
width: 190px;
height: 190px;
background: red;
border: 3px solid blue;
box-shadow: 0px 0px 0px 10px red; /* 10px box-shadow */
}
JSFiddle example.
Do note though that this is a CSS3 style property and isn't supported on all browsers. You may also need to use vendor-prefixes on some browsers (-webkit, -moz, etc). Check http://caniuse.com/#search=box-shadow for support.
I suppose you could add another class to the circle.
I have done this for you.
I dont think you can add a padding to a rounded border (dont quote me on that), but I did the fiddle in about 30 seconds.
.scirle {see fiddle}
http://jsfiddle.net/hpLYD/7/embedded/result/
The problem is a border takes up screen real estate whether we like it or not.
If a 1px border is on 100px element, even if we could get it to appear inside, that element would now only be 98px inside. But what we are stuck with in reality is a 100px element that's actually 102px caused by the borders on the outside. Border-box doesn't seem to do anything to borders in latest Chrome - they always appear on the outside.
An easy way to solve this is using an absolutely positioned CSS :after or :before element, this basically means no screen space is lost by the border. See example:
.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }
my page has one big div with fixed width, like this:
#index_body{
width: 1010px;
background-image: url('images/main_bg_dark.png');
margin: auto;
overflow: hidden;
min-height: 50px;
padding-bottom: 10px;
border-radius: 7px;
-moz-box-shadow: 0 5px 15px #000000;
-webkit-box-shadow: 0 5px 15px #000000;
box-shadow: 0 5px 15px #000000;
}
I want to add button (20x20px) on the right side of page (vertically in the middle) - still next to index_body.
So the button has code, like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
left:WHAT SHOULD BE HERE??
}
Because it depends on actual resolution. My index_body is always centered. if I change resolution my button is moved to the left-right...
Instead of setting the left or right position, make sure the button element is inside the index element and then use a margin.
margin: 0px 0px 0px 1010px;
Here is a tested and working version with your code - http://lukewakeford.co.uk/testsite/blackbutton/
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
right: 10%;
}
The 10% is an example, change to a percentage that looks good, and it should be responsive to screen resolution.
On the other hand, why would you want a fixed element INSIDE a fixed container? just make it absolute and float it to the right with a margin.
ok, it should be just like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
margin-left: 1010px;
}
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.