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.
Related
Aim: to have a centred div with fluid width that has a semi translucent background with solid text and remains centred on smaller screens after text wrapping.
Issue: When the screen becomes small enough for the text to wrap the solid text shifts right instead of remaining centred.
Info: I have managed to combine two answers to try and get the desired outcome (took half a day to find two compatible answers and merge them, the woes of being a beginner):
opacity of background only not text
responsive div centred with fluid width
<div id="divboxtable">
<div id="divboxcell">
<div id="divbox">
<div class="divtxtbck">
<h1>WHAT AM I DOING WITH MY LIFE!</h1>
</div>
<div class="divtxtfor">
<h1>WHAT AM I DOING WITH MY LIFE!</h1>
</div>
</div>
</div>
</div>
#divboxtable {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#divboxcell {
display: table-cell;
}
#divbox {
display: inline-block;
zoom: 1;
position: relative;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
}
.divtxtbck {
background-color: #fffffa;
padding: 0 10px 0 10px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
filter: alpha(opacity=50);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.5;
}
.divtxtbck h1 {
// visibility: hidden;
color: red;
}
.divtxtfor {
position: absolute;
top: 0;
left: 10px;
}
I have commented out the hidden nature of the background text so you can see how the alignment differs. The issue seems to be because of the absolute positioning - but how do you overcome this left align issue when the text wraps?
Fiddle You MUST make the output window narrow until the text wraps - then you will see the solid text is not centred the same as the transparent text.
try to use media queries for responsive behaviour expected, and Also take a look on that position:absolute; Also display:block; for The id= divboxtable. Also why are you id instead classes?. Hope that helps you.
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); }
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/
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 have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?
CSS:
.floating-window {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
cursor: default;
-moz-box-shadow: 1px 1px 1px #888;
-webkit-box-shadow: 1px 1px 1px #888;
box-shadow: 1px 1px 1px #888;
}
HTML:
<div class='floating-window box'></div>
With percentages, you can set your box such that half of it is on the left side. So
width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */
You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.
Sure, it's possible, but how are you going to make it go away?
That's going to need JavaScript...