I tried, but totally failed at positioning an interface that will go above a google maps layout. What I tried to do is this:
But I ended up with this
The format I have is like this:
<div id="GoogleMap"> // the containing google maps layer
<!-- map will go here <div id="GoogleMapCanvas"></div> --> //eventual map
<div class="map-topmenu"></div> //my interface
<div class="map-leftmenu"></div> //my interface
<div class="map-rightmenu"></div> //my interface
<div class="map-bottommenu"></div>//my interface
</div>
I succeeded in making the top menu horizontally centered, and 10px from the top of the screen.
I have been unable to center vertically the left and right menu's, and I started noticing that the code needed to center the left menu was becoming weird.
And as for the bottom menu, I utterly failed - however many different methods I tried.
Can anyone please look at my code and let me know where I messed up? Thanks so much!
body {
border: 0 none;
margin: 0;
padding: 0;
height:100%;
}
#GoogleMap {
position:absolute;
background-color: grey;
background-position: 50% 50%;
background-repeat: repeat;
height: 100%;
overflow: hidden;
width: 100%;
}
.map-topmenu {
height: 52px;
width: 353px;
background-image: url(http://i.imgur.com/KlyKR.png);
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.map-leftmenu {
height: 263px;
width: 77px;
margin-left: 10px;
top:50%;
position: absolute;
margin-top: -150px;
background-image: url(http://i.imgur.com/Q3d1r.png);
}
.map-rightmenu {
background-image: url(http://i.imgur.com/si6dl.png);
height: 147px;
width: 280px;
margin-right: 10px;
float: right;
top:50%;
}
.map-bottommenu {
background-image: url(http://i.imgur.com/iDmuP.png);
height: 52px;
width: 312px;
margin-right: auto;
margin-bottom: 10px;
bottom: 0;
margin-left: auto;
}
Use absolute positioning with negative margins:
http://jsfiddle.net/PJTDy/3/
#GoogleMap {
position:absolute;
background-color: grey;
height: 100%;
overflow: hidden;
width: 100%;
}
.map-topmenu, .map-leftmenu, .map-rightmenu, .map-bottommenu {
z-index:1;
position:absolute;
background:blue;
}
.map-topmenu {
top:0;
left:50%;
margin-left:-176px;
height: 52px;
width: 353px;
}
.map-leftmenu {
height: 263px;
width: 77px;
left:0px;
margin-top:-131px;
top:50%;
}
.map-rightmenu {
height: 147px;
width: 280px;
right:0;
top:50%;
margin-top:-73px;
}
.map-bottommenu {
height: 52px;
width: 312px;
bottom: 0;
left:50%;
margin-left:-156px;
}
Any reason why you are positioning the main container div (id="GoogleMap") absolutely? Your bottom menu does not have a position property set, otherwise you can position it exactly same way as the top one with bottom: 0.
Related
I was wondering how to align two elements side-by-side to the center of the page with position absolute. But when I am trying, I don't get that right. For my code, refer to this link: http://jsfiddle.net/6FnRr/
So basically this is what I want:
______________________ _________
| | | |
| | | |
| | | |
|______________________| (5px Gap here) |_________|
In the wrapper, they have position: absolute; Both those containers must be aligned side-by-side in the center with 5px gap between them. Please help me out, I have no idea how. I tried every single thing I know.
You might be interested to use display: inline-block + text-align: center; + vertical-align: top :
Fiddle
Don't use absolute! You want float: left.
.myblocks {
float: left;
}
.myfirstblock {
margin-right: 5px;
}
Make sure you clear it after.
http://jsfiddle.net/6FnRr/3/
#work_holder {
width: 100%;
position: abosulte;
}
#work_container {
background: #FFFF00;
position:absolute;
width: 681px;
height: 256px;
float: left;
}
#work_details {
background: #00FF00;
position:absolute;
left:686px;
width: 223px;
height: 256px;
float: left;
}
DEMO
Try this css:
#work_holder {
width: 100%;
position: relative; /* parent should be relative */
clear: left;
margin-left: auto;
margin-right: auto;
}
#work_container {
background: #FFFF00;
position:absolute; /* child absolute relatively to the parent*/
width: 681px;
height: 256px;
float: left;
margin-left: auto;
margin-right: auto;
}
#work_details {
background: #00FF00;
position:absolute; /* child absolute relatively to the parent */
left:686px; /* 681px + 5px;*/
width: 223px;
height: 256px;
float: left;
margin-left: auto;
margin-right: auto;
}
You can set your div's right and left to center of the page and add margin to both for gap. This will align the gap exactly on the center of your wrapper div. Here is JSFIDDLE.
#work_holder {
width: 100%;
position: absolute;
clear: left;
margin-left: auto;
margin-right: auto;
}
#work_container {
position: absolute;
background: #FFFF00;
width: 681px;
height: 256px;
right: 50%;
margin-right: 3px;
}
#work_details {
position: absolute;
background: #00FF00;
width: 223px;
height: 256px;
left: 50%;
margin-left: 3px;;
}
I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).
My code is here... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.
Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: fixed;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
position:relative;
}
JSFiddle
I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.
#bg {
position:absolute;
position:fixed;
top:0;
width:100%;
height:100%;
margin:auto;
overflow:hidden;
z-index:-1;
}
#bg img { max-width:100%; }
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}
Sorry about my english.
Please, i have a problem with divs, i have 3 divs "with image" horizontally, the images have to be together.
Here is the default view, if the screen is large enough.
If the navigator are resized i lost center with the #div2. The #div1 are aligned to the left, that is not i need.
What i need is the #div2 stay on center, but i don't know to do that. #div1 and #div3 are outside of the navigator, no one div can be resized, are a fixed size.
The html code:
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>
The CSS code:
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
float: left;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
float: left;
}
How i can do that?
Link to Fiddle: http://jsfiddle.net/murb83/BChLs/
Thanks!!
Making text-align center for wrapper will be helpful. This will show the elements in center.
#wrap {
width: 1484px;
margin: 0 auto;
text-align:center;
}
Other solution could be using absolute positioning like this:
#wrap {
..
position:relative;
..
}
#baseLeftBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
left:0;
}
#baseContent {
margin-top: 60px;
background: #A7A7A7;
width: 911px;
height: 776px;
position:absolute;
top:0;
left:0;
right:0;
}
#baseRightBg {
margin-top: 60px;
background: #CDCDCD;
width: 286px;
height: 776px;
position:absolute;
top:0;
right:0;
}
Why don't you consider using Javascript for solving your problem?
You should have a container larger as much as you want containing your three divs and with javascript, based on the screen width, you should set the left margin (obviously it could be a negative number).
Then, with JS, you can also handle the event on screen resize for "adjust" the left margin
I found a way to do that with jsQuery.
HTML
<body id="body">
<div id="wrap">
<div id="baseLeftBg">
</div>
<div id="baseContent">
</div>
<div id="baseRightBg">
</div>
</div>
</body>
CSS
#body {
text-align: center;
height: 100%;
margin: 0 auto;
padding: 0px;
background: #ffffff;
-moz-background-size: cover;
background-size: cover;
float: inherit;
}
#wrap {
width: 500px;
height: 300px;
}
#baseLeftBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}
#baseContent {
background: #A7A7A7;
width: 300px;
height: 300px;
float: left;
}
#baseRightBg {
background: #CDCDCD;
width: 100px;
height: 300px;
float: left;
}
JSQuery
$(window).resize(function(){
$('#wrap').css({
position:'absolute',
left: ($(window).width() - $('#wrap').outerWidth())/2,
top: ($(window).height() - $('#wrap').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
var $scrollingDiv = $("#wrap");
$(window).scroll(function(){
$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, 500, 'easeInOutSine' );
});
See in action: http://jsfiddle.net/murb83/BChLs/
That is the solution without JS works ok for me at the moment...
#wrap {
margin-top: 5%;
left: 50%;
margin-left: -742px;
position: absolute;
width: 1484px;
height: 776px;
}
Maybe you should try making it dynamic, with percentages like:
#baseLeftBg {
..
width: 20%;
..
}
#baseContent {
..
width: 60%;
..
}
#baseRightBg {
..
width: 20%;
..
}
I have essentially three divs.
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
With the following CSS
#headerLeft
{
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle
{
background-image: url("topMiddleRepeat.png");
background-repeat:repeat-x;
position:relative;
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight
{
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
I need the middle div to repeat horizontally to fill the rest of the header's space. I can't set the width of the div manually because this html will be inserted into other pages of unknown widths.
I've tried setting the width to 100% but that just fills up the whole line and pushes the leftHeader above the middleHeader and the rightHeader below the middleHeader.
Here is the page I am currently trying to manipulate. http://dl.dropbox.com/u/1501628/web/ipiphony.html
Any help would be greatly appreciated.
The way you are trying to do it i don't think it's possible, What i would do is this:
<div id="header">
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle {
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight {
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
That way your background will cover the header. Another option is to nest the divs and set the background to eack one and use padding for the sides.
<div id="header">
<div id="headerLeft">
<div id="headerRight">Your text here</div>
</div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
padding-left: 329px;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
padding-right: 47px;
}
Try the following:
Update the following styles:
#header {
position: relative;
overflow: hidden;
min-height: 85px;
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
position: absolute;
left: 0;
top: 0;
}
#headerMiddle {
background-image: url("topMiddleRepeat.png");
height: 73px;
color: white;
padding-top: 15px;
margin-left: 329px;
margin-right: 47px;
}
#headerText {
position: absolute;
left: 260px;
font-size: 20px;
font-weight: bold;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
width: 47px;
position: absolute;
right: 0;
top: 0;
}
If there are still issues, I recommend uploading the styles and HTML to jsfiddle.net so everyone can have an active play.