I'm trying to build a page with a wrapper that would be max-width: 700px
Optimally, the page would be responsive and resize the images to fit the window. I'm really having a difficult time getting the browser to resize the images and container to fit the window height. Width seems to scale just fine. Ultimately, the user wouldn't have to scroll down to see the page. Is this possible without JavaScript? If not, can someone point me in the right direction? Thanks! Code as follows:
jsfiddle: http://jsfiddle.net/LTchE/
<style type="text/css">
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
#wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 600px;
background: #de291e;
}
.happyHolidays {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.fromMe {
background: url('http://placehold.it/600x80') no-repeat center;
background-size: contain;
width: 90%;
height: 80px;
margin: 0 auto;
display: block;
}
.buttons {
text-align: center;
}
.snowperson {
text-align: center;
}
.snowperson img {
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="happyHolidays"></div>
<div class="fromMe"></div>
<div class="snowperson">
<img src="http://placehold.it/650x750" name="snowperson" border=0>
</div>
<div class="buttons">
<a href="javascript:NextImage()">
<img src="http://placehold.it/150x50" alt="Next snowperson">
</a>
</div>
</div>
</body>
Use the Overflow:hidden To the wrapper class
Give the Wrapper class to the overflow:hidden your scroll is hidden
The key is, in order for #wrapper to 'inherit' 100% height from the browser, all its parent elements (including the HTML tag) need to be position:relative; and height 100%;
<html>
<head>
<style>
html, body, .wrap {
position:relative;
height:100%;
margin:0;
}
.wrap {
max-width:700px;
margin:0 auto;
background:#aaa;
}
</style>
</head>
<body>
<div class="wrap">Test Text</div>
</body>
</html>
I threw it up temporarily on my server here: http://mechapps.co/fullheight/
And, here's your code: http://mechapps.co/fullheight/overflown.html
I ended up adding some styling to the wrapper:
#wrapper {
margin: 0 auto;
background: #de291e;
background-image: url('../images/snowbg.png');
background-repeat: repeat;
min-width: 600px;
max-width: 700px;
min-height: calc(690px * (90/150));
height: 90vh;
width: 150vh;
max-height: 890px;
position: relative;
}
This works relatively well for my situation... thought it's still not perfect.
You can see the final at www.ogilvypr.com/happyholidays
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>
demo: http://jsfiddle.net/LTchE/10/
HTML:
<body>
<div class="wrapper">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</body>
CSS:
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 100%;
background: #de291e;
}
.x {
background: url('http://placehold.it/300x505') no-repeat center;
background-size: contain;
max-width: 300px;
width:100%;
height: 505px;
display: block;
float:left;
}
.y {
background: url('http://placehold.it/500x505') no-repeat center;
background-size: contain;
max-width: 500px;
width:100%;
height: 505px;
display: block;
float:left;
}
.z {
background: url('http://placehold.it/100x505') no-repeat center;
background-size: contain;
max-width: 100px;
height: 505px;
width:100%;
display: block;
float:left;
}
i have this 3 divs in the screen, but when resizing the windows, they break into new rows...
i want then to continue in the same row, like being responsive..
anyone can help? im searching this for hours now.. :(
(also is it possible to they always match the screen size? ) for now the max value is 900px.. but I dont know, maybe if some one has a huge screen, to fit it)
You need to work in percentages.
Your wrapper is 100% and you have 3 divs side by side inside that wrapper.
Those 3 divs need to equal 100% so the first div can be 40%, the second 50% and the last 10% (Just play around until you get what you like)
body, html {
height: 100%;
margin: 0px auto;
padding: 0px auto;
}
.wrapper {
height: auto;
min-height: 100%;
margin: 0px auto;
padding: 0px auto;
max-width: 100%;
background-color: white;
}
.x {
background-color:green;
width:40%;
height: 505px;
float:left;
}
.y {
background-color:blue;
width:50%;
height: 505px;
float:left;
}
.z {
background-color:red;
height: 505px;
width:10%;
float:left;
}
The Problem is Width in your div's css, what your code says is that take the full with that is given to parent that might be suppose 1000px with width:100% but on the other hand you set a limit of max-width:300px so it wants to take the full width i.e. 1000px on the screen but max-width limits it to 300px so it looks like everything is working fine but there is a conflict in your css which is not noticable and then you just resize your window div moves to next row because there is not enough space. Basically what you have to do is give it a width that is actually need.
like i gave a value of width:33% to all the 3 divs rather than giving all of them 100% individually and code worked fine.
We want to display an image like this centred in a page: the height should be 100% of the window height, with corresponding proportional width. On either side of the image, we'd like to continue the grey brick pattern that you see at top and bottom of the image across the page on either side. The background should match the size of, and line up with, the one in the image, however big the image is.
Can anyone suggest a CSS-only way to do this?
Here's the kind of markup I've been trying so far:
<div id="container">
<img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>
CSS:
#container {
height: 100%;
background: url(visual-top.png) repeat-x;
}
#middle {
outline: 1px solid red;
display: block;
height: 100%;
margin: 0 auto;
}
Here's a Codepen.
Sure you can. You might run into aliasing-problems so that your images don't line up perfectly, but in theory it's easy.
The way I would do it is using multiple backgrounds. Here is the CSS you need:
body {
background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
background-size: auto 100%, auto 17.5%;
}
Then you need to fiddle with the height of the tile. I came up with 17.5%, but that depends on your screenshot.
Here is a working fiddle.
<div id="brick">
</div>
<div id="mario">
</div>
css
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#brick{
position:absolute;
width: 100%;
height: 60px;
background-color:gray;
background-image: url(brick.jpg);
background-size: 100% 100%;
top:0;left:0;
z-index: -1;
}
#mario{
width: 400px;
height: 100%;
z-index: 2;
background-image:url(mario.jpg);
background-size: 100% 100%;
margin: auto;
border: 1px solid;
}
yes it can be done.
<div class="wrapper"><img src="yourimage.jpg"/></div>
the css
.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}
So it will be on top of your background
html:
<div class="wrapper">
<div class="top"></div>
<img src="path/to/img.jpg"/>
</div>
and the css:
.wrapper{
text-align: center;
height: 100%;
width: 100%;
position: relative;
}
.wrapper .top{
position: absolute;
height: 80px;
left: 0px;
top: 0px;
background: url('pattern.jpg') 0 0 repeat;
width: 100%;
z-index: -1;
}
.wrapper img{
height: 100%;
width: auto;
}
<body>
<style>
.main{
width:100%;
display:table;
text-align:center;
height: "image-height";
}
.wrapper{
width:100%;
height:auto;
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="main">
<div class="wrapper">
<img src="image.jpg">
</div>
</div>
</body>
You can try this. This is nice article.
I have a problem with HTML.
The #content div wont get the width.
div test is centered, and #menu should have 15% width and #info to.
I tried clear: both; but it wont work...
Maybe its a issue to width 100%.
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
width: 100%;
height: 100%;
position: fixed;
}
#upper {
height: 15%;
background-color: blue;
}
#test {
height: 85%;
width: 100%;
margin: 0px auto;
}
#test #menu {
width: 15%;
height: 100%;
float: left;
/* scroll bar */
overflow-y: scroll;
overflow-x: hidden;
background-color: red;
}
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="upper">
upper
<!-- logo etc -->
</div>
<div id="test">
<div id="menu">
menu
</div>
<div id="content">
content
</div>
<div id="info">
info
</div>
</div>
</div>
</body>
</html>
Could somebody help me!
The problem is that you are overwriting your declarations:
#test #content {
width: 70%;
height: 100%;
float: left;
}
#test #content {
width: 15%;
height: 100%;
float: left;
}
I would recommend the Use of inline-block on the element instead of floating.
although it has is own faults..
http://jsfiddle.net/avrahamcool/gMMHL/1/
Auto margins don't work with percentages. You'll have to give it a fixed dimension in order for the margin centering to work.
I understand that this is quite a simple procedure, but I search for an answer every time I try to finish designing this page and none of the solutions I've found here and on Google did the trick for me.
I also understand that forcing an element to be centered is not exactly ideal, especially when there are so many different devices accessing the Internet these days, but I just want to get this done so I can focus on other issues.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Como chegar</title>
<style>
#container {
width: 800px;
height: 600px;
margin: 100px auto;
}
#content {
width: 800px;
height: 500px;
background-color: white;
}
.strips {
width: 800px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.navBar {
width: 250px;
height: 50px;
background-image: url(spritepimentarosa.png);
background-repeat: no-repeat;
float: left;
}
.nb1 {
background-position: 0px -450px;
margin-left: 25px;
}
.nb2 {
background-position: -250px -450px;
}
.nb3 {
background-position: -500px -500px;
margin-right: 25px;
}
.nb1:hover {
background-position: 0px -500px;
margin-left: 25px;
}
.nb2:hover {
background-position: -250px -500px;
}
.nb3:hover {
background-position: -500px -450px;
margin-right: 25px;
}
.logo {
background-position: 0px -200px;
}
.footer {
background-position: 0px -400px;
}
</style>
</head>
<body bgcolor="#D63B77">
<div id="container"><!-- beginning of container -->
<div class="navBar nb1"></div>
<div class="navBar nb2"></div>
<div class="navBar nb3"></div>
<div id="content"><!-- beginning of content -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&source=s_q&hl=en&geocode=&q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&aq=0&oq=980,+avenida+sao+camilo&sll=-23.583184,-46.836844&sspn=92.879748,186.152344&t=m&ie=UTF8&hq=&hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&ll=-23.583025,-46.83712&spn=0.037758,0.054932&z=14&iwloc=A&output=embed"></iframe><br /><small>Ver mapa ampliado</small>
</div><!-- end of content -->
<div class="strips logo"></div>
<div class="strips footer"></div>
</div><!-- end of container -->
</body>
</html>
If anyone can help me with this, it'd be much appreciated.
Thank you.
normally you simply add:
#content {
text-align: center;
}
another trick would be setting the width of the div and then auto margin your div:
#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}
You can use on your div
margin-left: auto ;
margin-right: auto ;
Do you want to center:
Page
Content of the page
Google Maps (iframe)
Page
In order to center the page you would have to use a wrapper, a div that will surround the div with the #content id.
.wrapper or #wrapper (depends if you want to use ID or Class)
{
margin: 0 auto;
}
Content of the page
Just apply the margin to the #context.
#contet
{
margin: 0 auto;
}
Margin
Just apply margin to the iframe tag through CSS.
iframe
{
margin: 0 auto;
}
** NOTE ** Have in mind that elements need to have width assigned to them in order for this to work. You cant use width: 100%; and expect it to work, but I guess you already know this.