Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.
Related
I am trying to create responsive circle which fit on every screen size like this:
I tried some codes from but anyone not work properly according to requirement.
You should do it with SVG or 2x res PNG. It will be approximately the same size regarding bandwith but you'll get a better control and much faster render.
Try something like this:
<div class="container">
<div class="circle">
<img class="image" src="http://lorempixel.com/800/800/">
</div>
</div>
.container {
width: 100%;
background: #000;
}
.circle {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
background: #fff;
position:relative;
overflow:hidden;
z-index:2;
}
.image {
z-index:1;
position:absolute;
top:0;
left:0;
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}
The circle should fit the container..
see on fiddle: http://jsfiddle.net/jimmynewbs/doan8b2f/
You can then create a div inside this for the text / image and set the image to a maximum width of 100% and width auto. this will make sure it doesn't get bigger than the circle. Positioning the image absolute can help keep it within the circle too if you wanted to make it expand out to the edges...
I am I using percentages based grid system to build a page for my personal website which uses a relative positioned banner and an absolute positioned div that falls in the center horizontally and at the bottom of the banner vertically. However, because said div is a screenshot of a webpage it is important to keep its height and its width relative to one another so that the image doesn't distort.
Below is a little code and a jsfiddle -
<div id="aps-group-banner">
<div id="aps-group-banner-wrap">
<div class="screenshot-banner"></div>
</div>
</div>
#banner {
height:100%;
background:red;
}
#banner-wrap {
position:relative;
width:67%; height:100%;
}
.screenshot {
position:absolute;
background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
background-size:100% 100%;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
http://jsfiddle.net/sHanf/
Hope you guys can help! Thanks in advance
Liam
Maybe I don't understand the question completely, but is this what you need?
http://jsfiddle.net/RpW4r/
I just changed the background-size to 100% auto;
Give this a try:
.screenshot {
position:absolute;
background: url(http://liamhodnett.com/img/case-study/aps-group/screenshot-banner.jpg) bottom left no-repeat;
background-size:100% auto;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
This will scale the background to 100% width and adjust its height to be proportional, plus move it to the bottom of the .screenshot element.
Fiddle link: http://jsfiddle.net/sHanf/7/
example:
<div id="parent">
<div id="top">
</div>
<div id="mid">
</div>
</div>
http://jsfiddle.net/VTNxe/
i want the green div to be under the yellow one, and his height should be always that high to exactly fill the parent div.
exampke: parent-height:300 & yellow height:100 => green-height:200
or : parent-height:350 & yellow height:50 => green-height:300
this should even be if the yellows or the green height is changed dureing runtime with javascript for example.
is it possible to archieve this only with css?
thx
If you want to stick with pixels, I think this is the closest you can get with only css:
#mid{
position:absolute;
background:green;
width:100%;
top:100px;
bottom:0px;
}
http://jsfiddle.net/Pevara/VTNxe/4/
Note that I set the top property the same as the height of the #top div. This means that the height of #top has to be fixed. As you state in your question, you might want to change this height with javascript or something. Perhaps you could consider changing the top at the same time then?
http://jsfiddle.net/VTNxe/1/
Play a bit around with position:absolute;: the #top div is always fixed size at the same place. and then use a height: 100% for the #mid div.
#parent{
position:relative;
border: 1px solid red;
height: 300px;
width: 200px;
}
#top{
position:absolute;
background:yellow;
height: 100px;
width:100%;
top:0px;
bottom:0px;
z-index: 1; /* necessary, else the #mid would lay over it */
}
#mid{
background:green;
width:100%;
height: 100%;
}
The short answer to your question is yes, it is possible to do with just CSS. One way might be to make the green box with a height:100%; and do overflow:hidden; in the parent div. Then changing the height of the yellow will make it look like they vary proportionally.
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.