I have this simple page layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
text-align: center;
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 50px;
background: url('http://tinyurl.com/o8w87av') 50% 0 no-repeat;
}
.outer {
width:960px;
height: 300px;
background: #dadada;
margin: 0 auto;
}
.footer {
width: 100%;
height: 50px;
background: #000;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer"></div>
<div class="footer"></div>
</body>
</html>
On desktop it works fine but on mobile or tablet no. I think that there is some problem with width: 100%; but I can't figure it out how to resolve it.
Some interesting things I find out:
I put this HTML+CSS code to jsfiddle (http://jsfiddle.net/STXmQ/) and there is same problem like on my mobile or table
But when I turn jsfiddle to fullscreen mode (http://jsfiddle.net/STXmQ/embedded/result/) on desktop it's ok and also on my mobile and table it's OK!!
Online version of my layout
Thank you very much for helping me!
SOLVED: Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.
Your outer div has an absolute width of 960px that’s why it’s wider on mobile than the other ones. Change its width to max-width and it should shrink to viewport width.
Thanks to Maximilian Hoffmann advice I was able to figure it out. I just add min-width: 960px to header and footer and now it's working correctly.
Related
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
position: fixed is a quirky little fellow especially when it comes to mobile.
When attempting to use a fixed element with another element that has a width greater than the device's height, it breaks Mobile Safari.
I would like to keep the header on top while the content is scrollable. Is there a way around this issue without losing the experience?
Thanks in advance!
EXAMPLE:
http://debug.studiotate.com/mobile-safari-position-fixed (this is the issue i'm seeing - the header goes away when you scroll down and/or right)
EXPECTED:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (this is what it should look like - the header stays put)
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
I think that div must be remove and set background to body
<body>
<header>Header</header>
</body>
And CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
I am new to web design and for a class I am creating a site for a restaurant and I made my mockup but I am having issue (or maybe it's not possible) about having my image display as I do in my mockup (image to follow)
Here is the top of my mockup
I want to have the header 100% (figured that out)
the image 100% width
the image is 1480x808
and with this code it stays 100% width but the height isn't matching up with my next section (it either pushes it off the page entirely or in other resolutions has a big white gap between it and the next section)
Could someone point me in the right direction here?
Would really appreciate it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
try removing the height and max-height property from #mainpicture
Update
For the red bar I'd remove them from your markup and use border-bottom on the first image and border-bottom on the second
Here's a fiddle
remove the height from #mainpicture.
or
if you need the height you can try putting the image in background of #mainpicture and set background size cover..Leave the #mainpicture div blank
like
<div id="mainpicture"></div>
css
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
If you want your page to be responsive, you must have some rules.
You want the image to show, as well as the slogan area. But the page can be seen in several devices, with several sizes.
So, you should use relative dimensions, so your goal can be achieved trought the many devices...
Place the image inside a div with relative dimensions...
I have the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {margin: 0; padding: 0}
.left {
background-color: yellow;
width: 200px;
height: 100%;
position: fixed;
}
.right {
background: green;
height: 3000px;
left: 200px;
right: 0px;
position: absolute;
}
</style>
</head>
<body>
<div class="left">d</div>
<div class="right">dafsdsfsdafkdasfjdslkfja;jdfsklsfdjaklfjdkafsjklsdjkfajklfdaksjlfjlsdsfjasdfkjldsa;fksdalfjdsafjdksa;lfjsdlfjaslfdjsafhdasjfhdsakjfhdsakjfjkadsflasfdfadfasfdasfdsfasfdasfdsaadfkljdsalfsafdsafdsaf</div>
</body>
Which renders the following result. How should I resize the right div to fill the entire screen minus the width of the left div, which is 200px? Currently it overflows the screen width, and I do not know why!
Thanks in advance.
your text in div.right is too long. So you can use
word-wrap: break-word;
also
right: 200px;
see in jsfiddle
the problem is that you enter a nonspaced string so navigator dosn´t know how to display it in multi line you can add the css word-wrap: break-word; to solve this.
this is your example modified:
http://jsfiddle.net/q4kwy/3/
I found an elegant solution, and it can be found here
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/