Simple question, but for the life of me I cant figure it out. There is space to the right of the image which is a link inside a div how do I get rid of the space to the left of the image?
Code:
<style>
div.home a {
float: left;
display: inline;
}
div.home p {
top: 5%;
right: 50%;
}
div.home {
top: 10%
position: absolute;
width: 1400px;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
div.home #h1 {
width: 700px;
height: 400px;
display: inline;
background-image: url('parallax.png');
background-size: 700px 400px;
}
div.home #h2 {
width: 700px;
height: 400px;
display: inline;
background-image: url('normal.png');
background-size: 700px 400px;
}
<div class="home">
<p>Which version would you like?</p>
</div>
I guess it's because you set #h1 and #h2 an inline display. So there's some white space, I guess.
Try adding white-space:nowrap; to those elements. Or simply let them as block element (default behavior).
Related
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port decreases.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port descreses.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
http://www.bootply.com/fiF4GI3g0n
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
max-width: 916px;
height: auto;
display: block;
}
<div class="special_box">
<div class="special_content"></div>
<div class="rodney">
<img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
</div>
<div class="special_arrow">
<img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
</div>
</div>
Responsive Design
Try this. With this code the arrow decreases size according to screen size. You can edit it as you like,
Use #media screen property to display content with respect to screen size
<html>
<head>
<style>
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
width:60%;
height: auto;
display: block;
}
#media screen and (max-width:1800px){
.special_arrow img {
width:98%;
height: auto;
display: block;
}
}
</style>
</head>
<body>
<div class="special_box">
<div class="special_content"> </div>
<div class="rodney"> <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
<div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>
I have figured out a way to do this making the Rooster and arrow images with filler transparent space from the top. Not sure this this the best way, but it works.
http://www.bootply.com/wfxTqAKJfo
CSS Code
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 440px;
width: 100%;
position: relative;
z-index: 1
}
.special_content {
margin: auto;
height: auto;
width: 100%;
top: 0;
position: relative;
}
.rodney {
background-image: url("http://beta.madrooster.com/images/special_rodney.png");
background-repeat: no-repeat;
background-size: 22% auto;
background-position: right 21% top;
height: 440px;
width: 100%;
position: relative;
z-index: 5
}
.special_arrow {
background-image: url("http://beta.madrooster.com/images/special_arrow.png");
background-repeat: no-repeat;
background-size: 64% auto;
background-position: left top;
height: 440px;
width: 100%;
position: relative;
z-index: 10
}
HTML Code
<div class="special_box">
<div class="special_content">
</div>
<div class="rodney">
<div class="special_arrow"> </div>
</div>
</div>
I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/
I have the following setup
Html:
<div id="resizable">
<div id="fixHeightTop">Whatever</div>
<div id="problematicDiv">Whatever</div>
<div id="semiProblematicDiv">Whatever</div>
<div id="fixHeightBottom">Whatever</div>
</div>
Css:
#resizable {
position: relative;
}
#fixHeightTop {
position: relative;
height: 10px;
}
#fixHeightBottom {
position: absolute;
height: 10px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
}
The #resizable div is resizable (jQuery). What I need to do is to give to problematicDiv and semiProblematicDiv a height equal to 100% - fixHeightTop height - fixHeightBottom height so I can extend it on the full height of the resizable element. The problem is that I can't figure out a way to do it. If I use height: 100% it overlaps the bottom element.
Any ideas how to do that?
If I understood you right, you want to have two div with a fixed height and the two other divs show take up the rest of the height. If this is what you want, here is a way to do it.
#resizable {
height: 80px; //this is changed by JQuery, right?
}
#fixHeightTop {
height: 20px;
}
#fixHeightBottom {
height: 20px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
i have an idea, try to use position:absolute;
#problematicDiv {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
#semiProblematicDiv {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
Good luck