I have turned to this guide to solve my problem of vertically centering my text within the div. And I believe to understand what it says, but it still doesn't work.
.number {
position: relative;
height:50px;
margin: -25px 0 0 0;
top: 50%;
background-color: #00ff00;
}
Here is the fiddle, which recreates the problem. I want the green area (.number) to be centered vertically within the button (.numberElement)
Where is my problem? I reckon jQuery Mobile is complicating things and creating structures I am not foreseeing...
Thank you!
Sandro
You need to make some changes to your css like so:
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
display:table;
}
.numberElement .ui-btn-inner {
display:table-cell;
vertical-align:middle;
}
Working Demo
Your top property of .number is not working fine, as i can see in your fiddle. Try changing it from top to margin-top. It will center around margin-top:60px;
Also dont forget to remove the line in .number
margin: -25px 0 0 0;
here is the correct answer as i think
.numberElement {
position: absolute;
width:30%;
height:200px;
margin:0px;
}
.number {
position: relative;
height:50px;
margin: 50px 0;
line-height:50px;
top: 50%;
background-color: #00ff00;
}
#grid {
position:absolute;
padding:0px;
margin:0px;
border:solid 1px #ff0000;
height:400px;
width:400px;
}
Related
I have a menu and I want to centre it using CSS.
Current code:
.menu {
margin:10px 0 10px 20px;
float:right;
}
.menu li {
padding:0 20px 0 20px;
border-left:1px solid #FFF;
border-right:1px solid #DDD;
float:left;
}
.menu li.first {
border-left:none;
}
What would I add/change/remove to make the menu display centre and not left/right? thanks!
One of the easiest ways to do this is to set both the left and the right margin to auto and give the element a fixed width:
.menu {
width: 500px; // or whatever
margin-left: auto;
margin-right: auto;
}
The W3C recommends that if you want your .menu element to be closely fit around the content, you may want to use absolute positioning and 50% margins instead, like this:
.menu {
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
You can see how this works on the W3C page. However, the first method is more common (and readable).
i'm having a problem and i can't find a solution that fits, i'm have two divs and the second one moves out to below of the 1º one when i resize below 800px (1ºdiv width + 2ºdiv width). What i want it's to fix the elements (not position 'fixed'), but i want them side to side no matter what, like in the facebook page or google, when i resize they stay in same place even if they go 'outside' the window. http://jsfiddle.net/VLt9m/. Thanks in advance.
#wrapper {
padding:92px 0 0 0;
width:100%;
float:left;
}
#content a {
text-decoration: none;
}
#block1{
background-color: #FFC374;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b1Title{
width:400px;
height:100px;
margin:0;
background-color: #FFD190;
opacity: 0.8;
position: absolute;
}
#b1Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
#block2{
background-color:#449DCC;
width:400px;
height:400px;
margin:0;
float: left;
position: relative;
}
#b2Title{
width:400px;
height:100px;
margin:0;
background-color:#80B7D7;
opacity: 0.8;
position: absolute;
}
#b2Title h1{
color: #222;
font-size: 200%;
margin: 8% 0 0 12%;
}
If you wish, you can do it with media query. But, here is a quick fix with max-width
Working Demo
Add this to block
max-width:400px;
width:50%;
And this to title
max-width:400px;
width:100%;
Update
Give fixed width to wrapper
Working Demo
#wrapper {
padding:92px 0 0 0;
width:800px;
float:left;
}
If my guess is right, then you need to give min-width:800px; to Wrapper.
#wrapper{
padding:92px 0 0 0;
min-width:800px;
float:left;
overflow:auto;}
See here
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I have unordered list of thumbnail images to display horizontally across bottom of page. I want a few of the images to be visible while the others are scrolled horizontally in/out upon scrollbar use.
However I can't get my images to line up in one continuous line - they break up at the 100% width mark.
This may be an issue with my css rather than with jscrollpane.
Demonstration here: http://www.air.desensdesigns.com/temp.html
CSS:
#thumbnails{
position:fixed;
top:86%;
left:0px;
height:125px;
width:100%;
background:rgba(0,0,0,.6);
}
#thumbnails ul{
position:relative;
top:5px;
}
#thumbnails li{
list-style:none;
float:left;
margin:5px;
padding:0px;
height:100px;
width:133px;
border:2px solid #333;
}
JS:
$(function() {
$thumbnails.jScrollPane({});
});
Add a width to ul:
#thumbnails ul {
position: relative;
top: 5px;
width: 5000px;
}
UPDATE
Try add this:
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: red;
}
My Test:
I am trying to keep an image attached to the bottom-left of my page, but unlike How to keep background image on bottom left even scrolling, I do not want the image to follow the user as they scroll.
I have a feeling it has something to do with making #wrap fill up the entire window, but I can't seem to figure out how.
I am using normalize, with this code appended to the style sheet:
body {
background-image:url('/img/graph-paper3.png');
background-repeat:repeat;
}
#container {
width:960px;
margin:0 auto;
}
#sidebar {
float:left;
width:310px;
padding:10px;
}
#main {
float:right;
width:610px;
padding:0 10px 10px 10px;
margin-top: 40px;
background-image:url('/img/top.png');
background-repeat:no-repeat;
background-position:top center;
}
#paper {
margin:40px 0 147px 0;
padding:20px;
background-color:#ffffff;
min-height:400px;
}
#footer {
clear:both;
padding:5px 10px;
}
#footer p {
margin:0;
}
#wrap {
background-image:url('/img/jeremy-david.png');
background-repeat:no-repeat;
background-position:left bottom;
}
You can see the code in action here: http://www.jeremydavid.com.
How about:
.bottom-image{
position: absolute;
bottom: 0px;
left: 0px;
}
This will position the image absolutely to the page. (Make sure it isn't a child of another absolute or relative or fixed positioned element).
Use
.bottom-image {
max-width: //some %
z-index: -100;
position: fixed;
bottom: 0px;
left: 0px;
}
You can also use
#wrap{ //your main #wrap container
background: url('/img/jeremy-david.png') no-repeat bottom left;
}