I am building a website and I am using 2000px wide images. I want the images to be visible on wide screens (like mine - im using TV as monitor) but the smaller screens will only see the images size adequate to their size. (rest will be cropped). The problem is that the image must be centered no matter what size the viewport is. I have used text-align:center; to make the text responsive. I did read the similar topics but no matter what I do the image stays static and not centered. Please help.
HTML:
<body>
<div id="wrapper">
<div class="header">
<img src="images/design/header.png">
</div>
<div class="nav-bar">
Home
About
Portfolio
Gallery
Service
Contact
</div>
<div class="side-bar">
<h1>This is my side bar</h1>
</div>
<div class="content">
<h1>This is my content</h1>
</div>
<div class="footer">
<h1>This is my footer</h1>
</div>
</div>
</body>
CSS:
#wrapper {
max-width: 2000px;
margin: -8px;
overflow: hidden;
text-align: center;
}
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this: Get the screen size using mediacheck and then set up thresholds using #media.
Use the following css to make the image center. max-width:100% will fit the image if the container is smaller than the image width. the image width and height will be reduced to fit.
#wrapper > .header img
{
display: block;
height: auto;
max-width: 100%;
margin:0 auto; /* to make the image center of its container, if container is larger than image size */
}
Update
If you know the exact height of the image, then please see this fiddle. Resize fullscreen to see the image cropping.
HTML:
<div class="position-img-outer">
<div class="position-img-inner">
<img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " />
</div>
</div>
CSS:
.position-img-outer
{
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.position-img-outer .position-img-inner
{
display: inline-block;
position: relative;
right: -50%;
}
.position-img-outer .position-img-inner .position-img
{
position: relative;
left: -50%;
}
If you know the width of the images, you can use the following:
#wrapper .header img{
position:relative;
width:2000px;
left:50%;
margin-left:-1000px;
}
UPDATE:
To avoid a horizontal Scrollbar, you can set the container element to width:100% and overflow:hidden
#wrapper .header {
position:relative;
width:100%;
overflow:hidden;
}
Related
I am trying to center an image (both horizontally and vertically) in a modal dialog body. I have tried every permutation of everything I know. top / left = 50%, margin 0 auto, class=center-block... Read through the bootstrap documentation and I am stumped. Here is my html... Any help would be greatly appreciated
<div id="processing" class="modal fade">
<div class="modal-dialog" style="max-width: 350px">
<div class="modal-content">
<div class="panel-heading modal-header dialog-header">
<h4 class="modal-title">Please Wait...</h4>
</div>
<div class="modal-body" style="height: 230px;">
<img src="~/images/ajax-loader.gif" class="img-responsive" />
</div>
</div>
</div>
</div>
EDIT:
Thank you Chun for the response, but it did not achieve the desired results.
Here is a link to 2 images. One is the result from Chun's suggestion, the other is a manipulated image to exhibit my desired result.
https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0
This will center the image inside of the modal.
.modal-body > .img-responsive {
display: block;
margin-left: auto;
margin-right: auto;
}
It must be working by adding more class :
<style>
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
========= Updated Answer ==========
I did see the image from your link going outside of your div container, here's what needs to be done in order to fix this problem. Forget all the code provided previously, let's start over. Giving a position:relative; to .modal-body will avoid the image of going outside of the container, here's an example:
.modal-body {
position:relative; /* This avoids whatever it's absolute inside of it to go off the container */
height: 250px; /* let's imagine that your login box height is 250px . This height needs to be added, otherwise .img-responsive will be like "Oh no, I need to be vertically aligned?! but from which value I need to be aligned??" */
}
Then, create your centered login image by styling the class .img-responsive
.img-responsive {
width:50px; /* This value will depend on what size you want for your loading image, let's say it's 50px */
height: 50px;
position:absolute;
left:50%;
top:50%;
margin-top:-25px; /* This needs to be half of the height */
margin-left:-25px; /* This needs to be half of the width */
}
Here's an example
I would like to know how can i set my footer width to 100%? I tried to set .footer-container and .footer width to 100% as well as absolute position.
Here's the website:
http://buysmartcardsonline.com/
If you moved your div.footer-container outside the div.page container, it should automatically cover the width of the page.
Before:
<div class="page">
...
<div class="footer-container">...</div>
</div>
After:
<div class="page">
...
</div>
<div class="footer-container">...</div>
As #Hubro mentioned in his answer moving the div.footer-container outside the div.page container would be ideal. But if you don't want to move the divs you could try using absolute positioning for the footer like below
.wrapper{
position: relative;
}
.footer-container{
width: 100%;
position: absolute;
left: 0;
bottom: -27px; (height of the footer container)
}
Remove class="footer-container" from class="page" and make it direct child of class="wrapper"
from
to
Try following code - I hope this is what you are looking for
.footer-container {
left: 0px;
width: 100%;
position: fixed;
bottom: 0px;
}
You should place the .footer-container outside the .page and then inside the add a div within the .footer-container with the class of .page to get content within the footer the same width.
<div class="page">Your page content</div>
<div class="footer-container">
<div class="page">
Footer Content
</div>
</div>
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.