I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.
http://lowhop.net/
See here the main blue header is out of line (not centered). I tried
#slider{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).
Thanks
You need to explicitly define a width on the element when using margin: 0 auto to center.
Block elements take up the full available viewport width unless you explicitly give them a width.
Since you explicitly set the width of the slider DIV, you can use another trick to center it:
#slider
{
z-index: 2;
background-image: url(../img/sliderbg_09_09.png);
position: absolute;
display: block;
width: 982px;
height: 251px;
left: 50%;
margin-left: -491px; /** half DIV width */
}
I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)
Hope that helps
If you must use absolute positioning, you can use something like my answer here.
Basically, you declare an explicit width for your element, then give it
left: 50%;
margin-left: -[your width/2];
like user showdev mentioned :
Does it need to be positioned absolutely? Does it even need to be centered? It looks like you've positioned div#navBar simply by adding margin-left: 85px. It seems that you could use that same method for div#slider.
you have
#navBar {
background-image: url("../img/navbg_07.png");
display: block;
height: 38px;
margin-left: 85px; /* attention on this */
margin-top: 31px;
position: relative;
width: 879px;
z-index: 1;
}
and this
#slider {
background-image: url("../img/sliderbg_09_09.png");
display: block;
height: 251px;
position: absolute;
width: 982px;
z-index: 2;
}
so, try 'margin-left: 85px;' your #slider.
Related
I have this example for the very known fill-parent height problem: http://fiddle.jshell.net/y9bM4/379/ I've really tried to find a solution by googling but I cannot find anything for these requirements:
The height of the element is not known, neither by percentage nor by absolute size. So position: absolute; top: ?px; bottom: 0px would not work
The upper box should only take up the space it needs for its content, so with my little knowledge about flexbox, it seems that I cannot use it either (just used it in the example because this is kind of as closest as I got)
The outer container has a fixed height (90% of the body in this example)
It would be nice if flex: 1 in each container, is kind of the maximum growth of the upper container. Is this even possible with css yet?
I'm not exactly sure what you're trying to do, but I'm assmuning you would like the second container to use whatever space is left over after the first container is sized to its content.
If so, set the .content class with height:0 and flex-grow:1
UPDATED EXAMPLE:
http://fiddle.jshell.net/y9bM4/385/
I think problem was that you gave the container id height:90%; so it will have to forcefully cover inside it, which is not posibble, So change it with height:auto;.
This will solve your problem
JSFiddle : Updated
CSS : Code to change (Edited)
#container
{
display: block;
position: fixed;
height: 90%;
width:100%;
overflow: hidden;
background: #fff;
border:2px solid green;
}
.content:nth-child(2)
{
position: relative;
display: block;
overflow: auto;
height: 100%;
}
.content{
border:1px solid red
};
.text
{
height: 100%;
display: block;
}
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?
Slider uses Cycle2.
Some HTML code
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
And some CSS that I think is important:
#homeslider {
height: auto;
}
#homeslider, #slider img {
width: 100%;
height: auto;
}
#homeslider {
width: 1090px;
margin: 0px auto;
max-height: 590px;
}
For reference, this slideshow is the expected behavior.
ETA: Added some of the code that I think is important?
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.
So to fix that, remove top: -200px and replace with margin-top: -200px instead.
From this:
.slidercaption {
position: relative;
top: -200px;
}
To this:
.slidercaption {
margin-top: -200px
}
Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.
Update:
A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.
So...
From:
.slidercaption {
position: relative;
top: -200px;
}
To:
.slidercaption {
position: absolute;
bottom:0;
}
Then what was causing the below elements to go up is because of this:
#sliderNav {
margin-top: -190px;
}
Change that to:
#sliderNav {
position: absolute;
bottom: 168px;
z-index: 99;
width: 100%;
margin: 0;
}
When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.
I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?
Currently i have tried:
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
But that doesn't work, so maybe it should only be centered after rotating?
Any ideas?
Try following CSS :
.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?
If you know the height:
div.centered{
height: 100px;
top: 50%;
margin-top: -50px;
}
Optional: position: absolute | relative | fixed depending on what you want to achieve
the margin-top should always be 0 - half of the height of your div to center.
Here's the site link with the "backbone" structure: http://www.vomow.net
Basically what i need to to is to put a div centered on the page, the same height, but 800 px width. The div needs to be with no background.
I've tried with "z-index" but didn't have any luck.
Can someone help?
I tried on your website this :
element.style {
margin-left: auto;
margin-right: auto;
width: 800px;
}
and it helps.
Good Luck !
If you just want to center a div, you could do like this:
#myDiv {
width: 800px;
margin-left: auto;
margin-right: auto;
}
But I'm not sure whether you want this div to cover some of the ones you have at the top. In that case, you could use position: relative; and then adjust the top property.
Some code would be useful, but I think you should use:
position: absolute;
To center div with absolute position use:
left: 50%;
margin-left: -400px; //this is because your div's width is 800px
It can also be written as follows:
#yourdiv{
margin: 0px auto;
width:800px;
}
Good luck!