I'm trying to center a text div in a custom slider.
For some reason the CSS won't work. The website is on my test server at http://bit.ly/ZgawU6
I want to center the group of text 'Environmental Concern' in the top slider. Similar to this website www.sevenly.org
It works when I change the div to position:relative, instead of position:absolute; however I can only change it with Chrome inspector. When I add it to the CSS file it doesn't work.
Can anyone point me in the right direction as to why this code isn't working?
.custom-slider-caption, .custom-slider-title {
line-height: 1.3;
text-align: center;
position: relative;
}
The div in question:
<div class="custom-slider-title" style="top: 0px; opacity: 1;"><div style="position: absolute; left:”0″px; top:140px; right:”0″px; bottom:px; font-size: 43px; color:#fff; text-shadow: 4px 4px 1px #497ca0; ">Environmental Concern</div></div>
It doesn't works on an absolute position because absolute positioned elements aren't 100% width. You can set the witdh to 100%, or, a bit cleaner solution would be to set the right value to zero. So you will have left and right positions to zero and width will be automatically be 100%.
div {
positon: absolute;
top: 140px;
left: 0;
right: 0;
}
You even don't need to specify px if value is qual to zero, because any dimension set to zero in %, em, px or whatever will all have the same size. Zero is zero.
.custom-slider-caption, .custom-slider-title {
width: 100%;
line-height: 1.3;
text-align: center;
}
Your code should look something like this if you want the div to be centred
#div
{
width:600px;
margin-left:auto;
margin-right:auto;
}
// NOTE: THE WIDTH CAN BE CHANGED //
#div p
{
width:300px;
margin-left:auto;
margin-right:auto;
}
The answer of pzin is correct. Use this selector:
.custom-slider-title > div {
...
left: 0;
right: 0;
}
Related
I want to display my div tag in center of the screen.I draw my screen as black color ,current display position of div tag in red color(which I unexpected) and my preferd location of div tag in green color.
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
}
<div class="welcome">
</div>
I want to display in middle.
Use transform:translateX
With the use of absolute positioning, the most flexible approach would be to offset the right hand edge of the div by 50% of the parent width, then by 50% of its own width using the transform property, translateX
The advantage is you dont need to rely on specifying absolute width/offset values in, e.g. px, so the div will remain centered if its dimensions change.
Additionally- for positioning; top/right/bottom/left should be used where possible in place of any margin or padding values, this approach also follows this.
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left: 50%; /* <--- move div right by 50% of parent width */
transform: translateX(-50%); /* <--- move div left by 50% of its own width */
}
<div class="welcome">
</div>
translateX is well supported, see here for a full rundown, the main point to note is that transforms require the -ms- prefix in IE9.and you will need -webkit- for iOS/Safari.
NOTICE
After going over your code again, it's become apparent that you are missing the ; after your margin left, and so the browser is ignoring it (hence why your code isn't working). However, you might find it a better alternative to use the left, right, top and bottom properties instead:
My Approach
since you are using position: absolute;, and you've given your div a width of 60%, you can use:
left:20%;
Since your width is 60%; leaving 40% of screen available.
40/2 (left and right gap) = 20% either side
Leaving:
.welcome {
font-size: 10px;
border: 1px solid #6AA121;
width: 60%;
height: 100px;
background-color: #C3FDB8;
position: absolute;
left:20%;
}
<div class="welcome">
</div>
.welcome{
margin-left:20%
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative; /* change absolute to relative */
margin : auto; /* & set margin to auto*/
}
<div class="welcome">
</div>
Try like this : DEMO
If absolute position is not needed, then use like this:
CSS:
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: relative;
margin:0 auto;
}
If you need Position:absolute, then use like this: DEMO
.welcome {
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
position: absolute;
left:20%;
}
You need to specify a width and then set the margins to auto. E.g.:
.welcome {width:60%; margin: 0 auto;}
Setting both the left and right margin to auto (as the above does) will center your div. If you do this without setting a width, the div will still be centered, but will fill the screen (or the previous div, at least) so you won't be able to tell.
Using position:absolute isn't a great idea here unless you need it for something else which isn't apparent in the question.
margin-left doesn't work properly with position: absolute (at least not in the way you are using it).
What you should write is this:
width: 60%;
left: 20%; // notice how this isn't margin-left
position: absolute;
This will centre the div.
If your div has a fixed width (e.g. 500px), try this:
width: 500px;
left: 50%;
margin-left: -250px;
position: absolute;
This works, and is the "correct" way of using margin-left with position: absolute.
I think that you can try an easier way. Try to remove absolute positioning and set margin left and margin right on auto. Like in the example below.
.welcome {
margin-left: auto;
margin-right: auto;
font-size: 10px;
border:1px solid #6AA121;
width :60%;
height:100px;
background-color:#C3FDB8;
}
After my website was completed, everyday I am trying to modify things that would make it more responsive. It's made in Muse so don't expect much of "responsiveness".
I have an element with this class:
#labelstrong
{
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: fixed;
top: 1542px;
left: 164px;
}
Normally, the element is in the middle of the screen. But when I zoom out, the element maintains the same distance to the top of the screen (because of the top attribute of course). How can I define its position in a way that even if I zoom in or out it will still be in the middle of the screen.
UPDATE:
The problem is (and I forgot to mention it) that the position must be fixed as there is an horizontal scrolling feature for all elements ( they come from the right of the screen) and so they have to be on a fixed position.
UPDATE 2: Here is a live example. Imagine that the class is applied on each TAG (not the menu of course).
http://2323029s8s8s8.businesscatalyst.com/index.html
You can add for those big tags the following css:
.fixed-big-tag{
top: 50%;
transform: translateY(-50%);
}
Also as a counter measure, make sure the <body> and the <html> have 100% heights
Another idea would be to use the !important rule for the top property to overwrite what Muse outputs.(or any rule that needs to be overwritten)
If it works, you could probably add a new class on all these tags that need to be centered and overwrite it via css
Check it out, and let me know how it goes.
See this resource for techniques to centering elements using CSS: Centering in CSS: A Complete Guide
If you create a relatively-positioned parent container element, you can center your child element easily:
.parent {
position: relative;
}
#labelstrong {
z-index: 17;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: absolute;
width: 634px;
height: 40px;
top: 50%;
left: 50%;
margin: -20px 0 0 -317px;
}
Note that the margin offsets are half of the width and height.
Try using percentages instead of pixels, like:
top: 10%;
If you want to horizontally center, try setting the margin to auto:
margin: 0 auto;
Your code would look like this:
#labelstrong {
z-index: 17;
width: 633px;
background-color: transparent;
color: #FFFFFF;
text-align: justify;
position: relative;
top: 10%;
margin: 0 auto;
}
Take a look at this example: http://jsfiddle.net/5a6fyb21/
jQuery would be your best bet.
I would just set your class to a fixed position then try using the following.
$(window).resize(function() {
var middle = $(window).height();
$('.middle').css('top', hello / 2);
});
The resize function is used so that it will remain in position if the window is resized.
Centered label over horisontally scrollable content:
http://jsfiddle.net/cqztf9kc/
.fixed {
margin: 50%;
position: fixed;
z-index: 1;
}
.content {
x-overflow: scroll;
height: 100%;
}
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
I try to center a div element ( the footer div in this case ) in my webpage but it insists on staying on the left side.
I am not quite sure what is wrong... Any ideas?
Thank you in advance.
HTML :
<div id='main'>
</div>
<div id='footer'>Centered Text</div>
CSS :
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
font-family: helvetica, serif;
font-size: 12px;
overflow-y:scroll;
}
#main {
border: 1px solid #bbbbbb;
margin: 3% 5%;
padding: 10px 10px;
}
#footer {
font-size: 75%;
margin: 0px auto;
position: absolute;
bottom: 0px;
}
http://jsfiddle.net/DjPjj/2/
http://jsfiddle.net/DjPjj/13/
Try this:
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
Because your footer is absolutely positioned, you must tell it what width to take relative to its parent container. You can then use text-align to center the text within it.
Here is another example: http://jsfiddle.net/DjPjj/17/
This one centers a box within the absolutely positioned element. The inner box can be centered using margin: 0 auto because it is not absolutely positioned.
#footer {
font-size: 75%;
width: 100%;
position: absolute;
bottom: 0px;
}
#footerInner {
margin: 0 auto;
width: 300px;
background-color: #ddd;
text-align: center;
}
This is more flexible because the inner element gives you a new container to work with that is centered relative to the parent.
The reason it won't center is because of the positon: absolute;.
Keep in mind this means that the footer will always be at the bottom of the page, even if the content overflows past it. It will overlap. If you want to have it be attached to the bottom of the page, you must set the min-height of a container above it to 100% and then deal with a negative margin-top and remove the position: abosolute;
http://jsfiddle.net/4fuk7/1/
Notice how the centered text is overwritten.
If you are looking for something to always be at the bottom, this would work
http://jsfiddle.net/4fuk7/3/
Sorry, the last one would scroll to the top. This one doesn't, but you'd need to fiddle with it a bit to get it to properly align around the margin's you've set. http://jsfiddle.net/4fuk7/9/
http://www.tlunter.com/Layout 2/ is where I did something similar. You can reference that if you want.
not sure what i'm missing, but here ti go's:
i have a floating left div with a child div that is positioned absolutely to the bottom, but the text in the child div breaks twice:
<div class="imgDes"><p class="toBot">this is a test</p></div>
css
.imgDes {
float:left;
position:relative;
height: 100px;
}
.toBot {
position: absolute;
bottom: 0px;
}
here it is in action: http://jsfiddle.net/rz5Q8/
how can i keep the text inside from breaking to the next line?
Floating elements need a specified width. Curently "imgDes" has a width of zero. Give it a width and all will be well.
Putting borders on your elements is a good way to see what's going on:
.imgDes {
float:left;
position:relative;
height: 100px;
width:300px;
border:1px solid #000000
}
.toBot {
position: absolute;
bottom: 0px;
border:1px solid #ff0000
}
if you give the .imgDes a width it will work: width: 100%;
One way to debug this type issue is to give the container and the element inside borders of differing color (lime and red for example) - as you see in this instance the length of the text "this" gave it the appearence of a width of that text by default (really a width of 0 of the parent container).
You need to specify a width on the parent element:
.imgDes {
float: left;
position: relative;
height: 100px;
width: 200px;
}
.toBot {
position: absolute;
bottom: 0;
}