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
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'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 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;
}
I am building a mobile app for a band and obviously want it to display well in all the plethora of handsets out there today. I built it at first for my own device and it looks and works great, so now I am reworking it in percentages so that it works in all devices.
I have a slider (jquerytools) going on and if i set width to 100% then it is perfectly wide in my iphone and my ipad... success, however I am not having any luck with height. It seems to only accept a height in px. If i set a height in percent it just doesn't display.
any ideas?
Updated CSS:
#header{
width:100%;
position:relative;
z-index: 20;
box-shadow: 0 0 10px white;
}
.scrollable {
position:relative;
overflow:hidden;
width: 100%;
height: 100%;
box-shadow: 0 0 20px purple;
/* height:198px; */
z-index: 20;
}
.scrollable .items {
/* this cannot be too large */
width:1000%;
position:absolute;
clear:both;
box-shadow: 0 0 30px green;
}
.items div {
float:left;
width:10%;
height:100%;
}
/* single scrollable item */
.scrollable img {
float:left;
width:100%;
height: auto;
/* height:198px; */
}
/* active item */
.scrollable .active {
border:2px solid #000;
position:relative;
cursor:default;
}
if your element mustn't be position:relative, i'd do like that
.scrollable {
position:absolute; // instead of relative
overflow:hidden;
width: 100%;
top:0;
bottom:0;// instead of height: 100%;
box-shadow: 0 0 20px purple;
/* height:198px; */
z-index: 20;
}
basically I defined the position as absolute, and added the fact the element begins at zero from top and at zero from bottom, which would be equivalent to height:100%;
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;
}