This seemed simple in my head.. But it's not. I have 2 div's. floating next to eachother
The right div should have an image that is always sticking to the footer
It's not even applying the 100% Height of my .block div, the parent div ( body ) is also set at 100%
For some reason this is not working with my following code.
JSFIDDLE
HTML
<div class="header">
Header
</div>
<div class="block">
<img src="http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg" />
</div>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
}
.header {
float: left;
height: 100%;
width: 40%;
background: red;
}
.block {
float: left;
width: 60%;
height: 100%;
background: green;
}
.block img {
max-width: 100%;
}
You can try this. check and let me know, have you asked for this:
.header {
height: 100%;
width: 40%;
background: red;
}
.block {
position:absolute;
bottom:0;
width: 60%;
height: auto;
background: green;
}
Related
When the viewport is larger than the width of the image, the image is centered, but when the width of the image is larger than the width of the viewport, the image is aligned to the left rather than to the center. The effect I am aiming for is for the image to always be cropped to the width of the viewport and always be aligned to the center.
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
}
#cropped-img {
position: relative;
height: 100%;
display: block;
margin: auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
You can achieve what you want with flexbox:
body,
html {
margin: 0;
padding: 0;
}
.crop {
overflow: hidden;
background-color: red;
display:flex;
justify-content:center;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" >
</div>
Nevermind, I managed to get the exact effect I needed using the background-image property. Here is the HTML and CSS I used if anyone else is interested:
HTML:
<div class="crop"></div>
CSS:
body, html {
margin:0;
padding:0;
}
.crop {
width: 100%;
height: 500px;
overflow: hidden;
background-image: url("http://img1.jurko.net/wall/paper/donald_duck_4.jpg");
background-repeat: no-repeat;
background-position: center;
}
Try giving variable values the image that occupy 100% of width of the element
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
text-align: center;
}
#cropped-img {
position: relative;
height: 100%;
width: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
Currently I'm using this code:
<style type="text/css">
.icondiv{
border:1px solid;
content: url(image.png) 100% 100%;
}
</style>
<div class="icondiv"></div>
The output is like, the image stays in 1/4 of the div. How can I make the image fill the whole? I already checked the image and it has no extra whitespace.
If you don't want to use background image
.container{
width: 400px;
height: 100px;
}
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
<div class="container">
<img src="http://i62.tinypic.com/2dh8y1g.jpg" alt="" />
</div>
But pay attention to the support: http://caniuse.com/#search=object-fit
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.icondiv {
width: 400px;
height: 100px;
border: 1px solid #f00;
position: relative;
}
.icondiv img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
<div class="icondiv">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSL19OsbasMqU64_o3uoov5liyKmD8KMStU1OR8hXUtV4pwALr7Sg" alt="" />
</div>
You should use
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
.container {
width: 700px;
height: 400px;
background: #444;
margin: 0 auto;
border: solid black 1px;
}
.container img{
width: 100%;
height: 100%;
}
Fiddle Here
Try this:
.icondiv{
border:1px solid;
background: url(yourimage.png) no-repeat center center;
background-size: cover;
width: 200px; // Adjust your needs
height: 200px; // Adjust your needs
}
You could create some css class like this:
full {
background-image: url(image_path('yourimage.jpg'));
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
It looks like you're trying to add the image into the div using CSS rather than inline in the HTML... I will assume you've got a good reason for this and follow suit. Instead of using "content:" you can drop the image in as a background and make it spread to fill the container.
.container {
width: 700px;
height: 400px;
background:#f00 url(http://i48.tinypic.com/wrltuc.jpg) no-repeat center center;
background-size:cover;
margin: 0 auto;
border: solid black 1px;
}
<div class="container">
</div>
The benefit of using this "background-size:cover" technique is that your image will always fill the containing div regardless of its proportions.
I am trying to have a fixed and centered navbar div which is within another div that's using a parallax effect. If I set the position to relative, the navbar will be centered within the other div however setting it to fixed will have a fixed navbar but not centered. I would like to avoid using margin left x amount of px because it doesn't seem consistent for cross resolutions. Is there anyway to keep the navbar fixed position but have it centered within the other div without mar?
This is my code:
#page-wrap {
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 95%;
}
header {
background: url('../images/cover1.jpg') no-repeat;
background-size: 100% 90%;
width: 100%;
height: 1000px;
}
#nav {
background: #f0f;
margin: 0 auto;
height: 500px;
min-width: 980px;
max-width: 2048px;
position: fixed;
opacity: 1;
}
#main {
background: #fff;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-wrap">
<header>
<nav id="nav">Nav</nav>
</header>
<div id="main">Lorem ipsum flash.</div>
</div>
<script>
$(document).on('scroll', function(e) {
$('#nav').css('opacity', ($(document).scrollTop() / 500));
var st = $(window).scrollTop();
$('header').css({
'background-position-y': 0 + (st * .77) + "px"
});
});
</script>
You could keep your nav in center of screen, but you need to wrap it inside fixed container, working Fiddle. HTML is slightly different:
<div id="page-wrap">
<header>
<div class="nav_container">
<nav id="nav">Nav</nav>
</div>
</header>
<div id="main">Lorem ipsum flash.</div>
</div>
In CSS fixed element becomes .nav_container and nav must become inline-block - that way we can use text align:
#page-wrap {
position: relative;
min-width: 1366px;
max-width: 2048px;
margin: 0px auto;
width: 95%;
}
header {
background: url('http://placehold.it/500x500') no-repeat;
background-size:100% 90%;
width: 100%;
height: 500px;
}
.nav_container {
margin: 0 auto;
width: 100%;
position: fixed;
opacity: 1;
text-align: center;
}
.nav_container nav {
display: inline-block;
background: #f0f;
min-width: 100px;
max-width: 2048px;
height: 100px;
}
#main {
background: #fff;
position: relative;
height: 500px;
}
How about centering your nav using javascript?
$('#nav').css({'left': (($(document).width() - $('#nav').width())/2 )+"px"});
This should suffice for what you're trying to do. Let me know if this doesn't work.
#nav {
background: #f0f;
margin: 0 auto;
height: 500px;
min-width: 980px;
max-width: 2048px;
position: fixed;
opacity: 1;
left: 50%;
}
Okay so I have been working on implementing the 'holy grail'-style layout for my website, so far it's pretty close but I noticed two things I want to fix.
The goal is a 'sticky' footer with the page length expands with the browser window height, a header, and 3 columns. 2 fixed columns on the left and right side, and a fluid column in the middle.
The issues I am having are that right now, my center 'fluid' column doesn't seem to be acting like I expected. Basically I want the fixed columns to always be fully shown, with the center column filling the remaining horizontal space. But the center column is taking up a lot of room and making it so that I have to scroll to view the right column (see image below). Also, the 'text-align: center' code doesn't appear to be centering text within the viewable area of the center column. Any help appreciated!
image: http://i.imgur.com/FPuSiIu.png
html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="center">
<p>Content</p>
</div>
<div id="left">
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
css:
* {
margin: 0;
}
#container {
width:100%;
}
#header {
text-align: center;
background: #5D7B93;
height: 95px;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 15;
}
#center{
text-align: center;
margin-top: 105px;
background: red;
position: relative;
float: left;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 150px;
text-align:center;
background:#EAEAEA;
margin-top: 105px;
margin-left: -100%;
overflow: scroll;
position: relative;
float: left;
}
#right {
position: relative;
height: 100%;
width: 150px;
margin-right: -100%;
margin-top: 105px;
background: blue;
text-align: center;
float: left;
}
#footer {
text-align:center;
background: #5D7B93;
height:25px;
padding:5px;
position: fixed;
bottom: 0;
width: 100%;
}
No need to float. Just position: absolute the sidebars and give the center div fixed margin on both sides.
JSFiddle
CSS
#container{
position: relative;
}
#left, #right {
width: 200px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: 0;
}
#right {
right: 0;
}
#center {
margin: 0 200px;
}
i've done this on my layout and it works fine for me
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container{
display: inline-flex;
width: 100%;
height: 100%;
background: lightblue;
}
#left {
width: 240px!important;
min-width: 240px!important;
background: red;
height: 100%;
}
#right {
width: 400px!important;
min-width: 400px!important;
background: red;
height: 100%;
}
#center {
background: blue;
width: 100%;
min-width: 600px;
height: 100%;
}