Before someone labels this as a duplicate, I have searched on here and not finding a solution that quite fits what I need to do.
Here is my fiddle
Here is the code for the html..
<div class="top-background"></div>
<div class="center-content"></div>
<div class="bottom-background"></div>
and here is the CSS stylesheet...
body {
margin: 0;
padding:0;
}
.top-background {
background-color:black;
width:100%;
height:50%;
position:absolute;
top:0;
left:0;
}
.bottom-background {
background-color:white;
width:100%;
height:50%;
position:absolute;
bottom:0;
}
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:relative;
}
I can move the center-content div towards center by using top:300px. But that won't be any good because of depending on screen size.
The center-content div will have a graphic in it (it will not be a yellow background as shown), the graphic is reversed in the colors I have. I could have probably done this in the body along with text-align center, but then everything I put in will align center (and that's not going to be pretty) and used a table.
For doing this assing some css properties to the class center-content is enough..
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -125px;
}
See this fiddle http://jsfiddle.net/Cwm76/sscuL/
Apply this:
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
margin-top: -60px; /* half of the height */
margin-left: -125px; /* half of the width */
}
Related
I have a full width background image with some content.
At the end I want to position my buttons in center (vertically and horizontally), but with position:absolute, that doesn't work. You can see it in JSFiddle.
There is some code lines from my CSS
.buttons{
position:relative;
}
.buttons .button-pos{
width:100%;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
And there is little scheme of that what I want.
1.) Your .buttons div doesn't have a height, so first you need to define a height for it, otherwise there is no vertical centering possibility ( I made it 200px in the fiddle).
2.) To center .button-pos within .buttons, use
.button-pos {
width: 100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Here's the fiddle: https://jsfiddle.net/Luo1k7Lt/1/
I make some solution by myself and it works now very well, I decided to center all my content, what was in the header. Only some little changes with screen sizes and it works well
#welcome-header .welcome-content{
width: 80%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.buttons{
margin-top: 40px;
}
Try this:
.buttons .button-pos {
display: inline-block;
zoom: 1;
}
A simple IE hack is to add display*: inline; in that CSS rule
I have this fiddle here and this is the illustration below
what I need to achieve is to make the black container dynamically expand base on the item inside (the items are A, B, C) the output must be
without setting the height statically
my html is
<div class="container">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
<div>
my css is
.container{
position:relative;
width:200px;
min-height:300px;
background-color:black
}
.itemA{
position:absolute;
top:260px;
background-color:red;
width:30px;
height:30px;
}
.itemB{
position:absolute;
top:50px;
right:90px;
background-color:green;
width:30px;
height:30px;
}
.itemC{
position:absolute;
top:220px;
right:50px;
background-color:blue;
width:30px;
height:30px;
}
You can use this script. First compute the max height then set the height of the container
$(function(){
var y = 0;
$('.container .item').each(function(){
y = Math.max(y, $(this).height() + $(this).position().top);
});
$('.container').css('height', y);
});
.container{
position:relative;
width:200px;
min-height:200px;
background-color:black
}
.itemA{
position:absolute;
top:260px;
background-color:red;
width:30px;
height:30px;
}
.itemB{
position:absolute;
top:50px;
right:90px;
background-color:green;
width:30px;
height:30px;
}
.itemC{
position:absolute;
top:220px;
right:50px;
background-color:blue;
width:30px;
height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="itemA item">A</div>
<div class="itemB item">B</div>
<div class="itemC item">C</div>
<div>
I prefer to using jQuery so here it is, "borrowed" this answer's code as its pretty much what we need. Just made some small changes.
So we look at the parents children div and get the farthest child position, add that child's height and then set the parents height to that. Boom, done.
var t = 0;
$(".container div").each(function() {
var position = $(this).position();
if (position.top > t) {
// Get the position and the height so we can set the parent height
t = position.top + $(this).height();
$('.container').height(t);
}
});
.container {
position: relative;
width: 200px;
min-height: 200px;
background-color: black
}
.itemA {
position: absolute;
top: 260px;
background-color: red;
width: 30px;
height: 30px;
}
.itemB {
position: absolute;
top: 50px;
right: 90px;
background-color: green;
width: 30px;
height: 30px;
}
.itemC {
position: absolute;
top: 220px;
right: 50px;
background-color: blue;
width: 30px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
</div>
In js you can have the position of each absolute-positionned elements. I wrote you a script that find the biggest value horizontaly and verticaly and apply this width and height to the container : http://jsfiddle.net/45atnh0u/7/
Its basically use $(this).offset().left and $(this).offset().top
But be carrefull with the right and bottom values.
The closest is to give the container overflow: hidden , then move your elements left right top bottom in the dimensions of your container . If the container has width 200px you move element left 200px - element width and it shall remain in your container.
Updated fiddle:
.container{
display: block;
position:relative;
width:200px;
min-height:200px;
background-color:black;
overflow: hidden;
}
.itemA{
position:absolute;
top: 0;
left: 170px;
background-color:red;
width:30px;
height:30px;
}
.itemB{
display: block;
position:absolute;
top:50px;
right:90px;
background-color:green;
width:30px;
height:30px;
}
.itemC{
display: block;
position:absolute;
bottom: 0;
right:30px;
background-color:blue;
width:30px;
height:30px;
}
http://jsfiddle.net/45atnh0u/8/
As mentioned above JS might be a better fit, but I thought a quicker way with just CSS might also appeal.
The idea is for the container to take the height of the body.
Add
body {
height: 100%;
position: absolute;
}
and change your container height to
min-height:100%;
Here's an updated fiddle.
Hope it helps you.
I'm new to front end design.
made a code like this.
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
in here will be login module
</div>
how can the sidebar will be trespassing area like the pic?
any good solution?
If you simple need to position sidebar like this, you can use position: absolute. As a very basic test add following classes to your HTML:
body {
margin:0
}
div {
border: 1px solid black
}
#header {
height: 50px;
}
#content {
height:200px
}
#sidebar {
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 250px;
}
And here is a demo: http://jsfiddle.net/Mxqh4/
Again this is just a demo, and in a real project would have to be dynamically adjusted, but that's should give you a start.
Of course it's possible. Anything is possible with CSS ;)
You have to learn to use the position property and float.
DEMO HERE
#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}
hello stackoverflow community,
i have a problem with my fixed header. my html structur looks like that:
<div id="site_wrapper">
<div id="site_header">Header</div>
</div>
The CSS Looks like this:
div#site_wrapper {
max-width:1500px; min-width:900px;
}
div#site_header {
position:fixed; left:50%; top:0px; z-index:10;
height:160px; width:1500px;
margin-left:-750px;
background-color:#fff;
}
My Problem is, that i need the header centered and fixed with the width 1500 ...
Some Ideas?
Since #site_header is inside site_wrapper you need to center #site_wrapper div, i also update the #site_wrapper code to be always centered inside #site_wrapper
div#site_wrapper {
margin-right: auto;
margin-left:auto;
max-width:1500px; min-width:900px;
}
div#site_header {
position: fixed;
top:0px;
z-index:10;
height:160px; width:1500px;
margin-left:auto;
margin-right:auto;
background-color:#fff;
}
If you want to make the header fixed, center align and some special width, try updating you CSS code with below:
div#site_wrapper {
max-width:1500px;
min-width:900px;
margin: 0 auto;
}
div#site_header {
position:fixed;
z-index:10;
height:160px;
width:1500px;
background-color:#ffff00;
}
Refer this fiddle: http://jsfiddle.net/aasthatuteja/B2Tnj/
Hope this helps!
To have a fixed header just use the following code:
div#site_header {
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
height: 160px;
width: 100%;
margin: 0;
text-align: center;
padding: 0;
}
I'm trying to make fixed 100% but with a little frame around.
I just cant get it right, the frame would appear EITHER top/ bottom, or left/ right, but not from both sides...
Here's what I've got so far:
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
padding:15px;
}
div.wrap1{
width:100%;
height:100%;
background-color:#00AEEF;
}
EDIT:1 ALLRIGHT THEN, This is what I've gotten to so far:
http://jsfiddle.net/Hm7Mw/
div.all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
overflow:auto;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
min-width:962px;
bottom:6px;
top:6px;
left:0px;
right:0px;
}
div.wrap2{
margin:0px auto;
max-width:960px;
height:100%;
position:relative;
overflow:visible;
}
div.wrap3{
overflow:hidden;
height:auto;
min-height:100%;
width:100%;
position:absolute;
background-color: #FFF;
}
Again, it works perfectly with scrolling - ie,. I've made it scroll the whole thing, rather than what's inside the wraps.
However if I scroll it down, the padding at the bottom vanishes for some reason.
if I put overflow auto to the inner containers instead, then it would sort of 'fix' it, but they would have very ugly scrollbars in the middle of the screen- which I don't want.
HTML:
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
(BLA)
</div>
</div>
</div>
</div>
</div>
You need something like this:
.onTopOfAll {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
/* Something else for style */
}
.onTopOfTop {
bottom: 15px;
left: 15px;
position: fixed;
right: 15px;
top: 15px;
z-index: 2;
/* Something else for style */
}
<div class="all_reviews">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
/8Content/8
</div>
</div>
</div>
</div>
all_reviews{
background: url(../design/trans-gr.png);
position:fixed;
width:100%;
height:100%;
z-index:12500;
display:none;
}
div.wrap1{
display: block;
position:absolute;
height:auto;
width:100%;
bottom:25px;
top:5px;
left:-10px;
right:0px;
}
div.wrap2{
margin:0px auto;
width:100%;
max-width:940px;
min-height:100%;
position:relative;
}
div.wrap3{
overflow:auto;
height:100%;
width:100%;
position:absolute;
background-color: #FFF;
border:5px solid #CCC;
padding:5px;
}
Note to undo display : none with a script, and make the body fixed with overflow:hidden, so it doesn't scroll along the way on the background.
Try height and width of auto of div.all instead of 100%. You may need to add a height of 100% to your body.
your padding is adding some extra width in your div. You gave you div a width of 100% and as you applied the padding now the total width is 15px + 100% + 15px. If you can provide your html as well some idea about what you are going to do then it'll be helpful for rest of us to help you.
thanks.