Looking over other question on this site, I used a method of setting all the positions to 0 with auto margins, but this has some unwanted behavior.
If you resize the window vertically, the top of the container moves off of the top of the page. It needs to stop when it hits the top.
JSFIDDLE:
http://jsfiddle.net/jd67ca5y/
HTML:
<div id="container">
<p>This is the container.</p>
<p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
<p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
</div>
CSS:
#container {
margin:auto;
height:300px;
width:300px;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
border:1px solid;
padding:10px;
}
I think this is what you want, in Chrome at least... http://jsfiddle.net/h6Lh9z0e/4/
Slightly modified HTML
<div id="container">
<div id="inner-container">
<p>This is the container.</p>
<p>If you resize the JSFiddle window horizontally, you will see that the left edge of the box doesn't move past the left edge of the window. This is correct behaviour.</p>
<p>Now if you move the window vertically, the top of this container will disappear off of the top of the window. This is wrong.</p>
</div>
</div>
More modified CSS
#container {
position:absolute;
width:100%;
height:100%;
background-color:#ff0;
display:flex;
align-items:center;
justify-content:center;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-ms-flexbox;
-ms-flex-align:center;
-ms-flex-pack:center;
}
#container #inner-container {
border:solid 1px black;
padding:10px;
width:300px;
height:300px;
}
I'm not sure about things like IE though, haven't had to work with that for a long time, but I know it doesn't support webkit.
Sorry for the half answer, but hopefully it'll help some.
EDIT: Ok, so turns out you can add in MS specific flexbox code to center it, but you still get the same disappearing top issue when you shrink the window vertically...
EDIT 2: Right, turns out that the -ms prefix is being depreciated from IE10 onwards (http://msdn.microsoft.com/en-gb/library/ie/hh673531(v=vs.85).aspx), so looks like you'll need to put non-prefixed names as well.
Here's a method that does what you want: http://codepen.io/pageaffairs/pen/spthD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
html,body,div,p {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
width:100%;
display:table;
background:#00F;
}
#pageWrapper {
display:table-cell;
min-height:100%;
text-align:center;
vertical-align:middle;
}
#content {
width:50%;
min-width:512px;
margin:0 auto; /* for non display:table browsers */
padding-top:1em;
text-align:left;
background:#DEF;
}
#content p {
padding:0 1em 1em;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Source
Set overflow:auto; to make it work in every size:
#container {
margin:auto;
height:300px;
width:300px;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
border:1px solid;
padding:10px;
overflow: auto;
}
working fiddle
Another solution is to use like this:
#container {
margin:auto;
height:300px;
width:300px;
margin-top: -150px; /* half of the height */
margin-left: -150px; /* half of the width */
top:50%;
left:50%;
position:absolute;
border:1px solid;
padding:10px;
overflow:auto;
}
demo
Related
What's the canonical way to ensure an image and text are vertically separated from one another in a fully responsive way?
Look at this:
Via putting the image and text in separate divs, specifying width and ensuring display:block-inline, I'm able to create the following:
But this isn't perfectly responsive. How? For instance, for really small sizes (sizes that I must support), the image and the text run into one another like below:
There has to be a way to keep them vertically separated along any screen size. Perhaps I should use tables?
Please advise with an illustrative example, preferably with well-support CSS 2.1 attributes since a substantial number of clients I have to cater are Opera Mini browsers with no CSS3 or JS support.
My code is:
<div style="background-color:#E1F5FE;border-radius:10px;padding:10px;overflow:hidden;">
<div style="width:20%;display:inline-block;">
<img src="X.png">
</div>
<div style="width:80%;display:inline-block;float:right;text-align:center;">
Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
</div>
</div>
This is a variant of the answers given to this similar SO question. It doesn't really solve my problem.
Simply add width:100% for the image
But check the whole css, on small screens it is better to show the div below each others
.main{
background-color:#E1F5FE;
border-radius:10px;
padding:10px;
overflow:hidden;
}
.main > div{
display:inline-block;
float:left;
text-align:center;
}
.imgDiv{
width:20%;
}
.textDiv{
width:80%;
}
.imgDiv > img{
width:100%;
}
#media screen and (max-width: 450px) {
.imgDiv{
margin: 0 0 20px 25%;
width:50%;
}
.textDiv{
width:100%;
}
}
<div class="main">
<div class="imgDiv">
<img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg" style="width:100%">
</div>
<div class="textDiv">
Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte
</div>
</div>
Here's a solution using flex with flex-wrap: wrap to take care of the responsive sizing. At small sizes the icon and text will stack vertically, and at larger sizes the icon and text will be horizontally aligned.
Flex has great support these days, even for the browser you mention.
.main {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.imgDiv {
flex: 1 1;
min-width: 80px;
text-align: center;
}
.imgDiv > img {
width: 80%;
height: auto;
max-width: 150px;
line-height: 0px;
}
.textDiv {
flex: 1 1 250px;
display: flex;
}
.textDiv > p {
flex: 1 0 0px;
padding: 0;
margin: 0;
align-self: center;
}
<div class="main">
<div class="imgDiv">
<img src="https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg">
</div>
<div class="textDiv">
<p>Lorem ipsum dolor sit amet, ex eam nulla veritus abhorreant, magna vocent molestiae ea pri, ut eos tritani incorrupte</p>
</div>
</div>
.wrapper {
height:1200px;
width:800px;
overflow: auto;
background:green;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.sidebar {
background:grey;
position:absolute;
left:10%;
top:0px;
bottom:0px;
width:20%;
height:100%;
float:left;
}
.content {
background:blue;
position:absolute;
left:30%;
right:0px;
top:0px;
bottom:0px;
width:70%;
float:left;
}
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Steven game dev</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
</div>
</div>
</body>
</html>
Hi all I'm new so go easy on me. I decided to make up a quick website something I haven't done in years and it turns out I literally forgot everything but I thought it would be easy enough to slide back in. I was wrong for some reason I cant add a background colour to one of my Divs. the div is inside a container div which could be the reason I'm having trouble but I'm fairly sure that shouldn't be an issue having done many times before. The div in question is my sidebar I don't understand why it's being difficult but I've tried many things to remedy it and I cant get it to work. Please excuse the sloppy nature of my css I was just quickly trying to block out the divs so that I could get a visual of what I was doing. Any help would be greatly appreciated I'm sure it's something silly that I have missed but this is basic stuff should be easy.
Seriously, this is a mystery, but I have got it working. Here is the solution:
#sidebar {
height: 100%;
width: 50%;
background-color:orange;
float:left;
}
“But wait”, I hear you say, “that’s the same code!”. Apparently not. Between the width: 50%; and the background-color: orange; is a character which I cannot see, but which stopped the background colour working.
When testing the snippet, I ended up deleting and re-typing the code, which is something I do when I get desperate.
You had whitespace characters before background-color: orange. So the browser thought the name was [whitespace][whitespace]background-color which it doesn't recognize. I know this because I looked at the #sidebar element in devtools and got unrecognized rule: background-color which only makes sense if there was some invisible white-space in that string. Turns out your sloppy css writing was inexcusable!
#sidebar {
height: 100%;
width: 50%;
background: orange;
float:left;
}
#container {
height: 800px;
width: 100%;
float:left;
background-color: grey;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
}
#content {
float: left;
background-color: red;
width:50%;
height:100%;
}
body {
height: 100%;
width: 100%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
background-color:blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styledesign.css"/>
</head>
<title>
Steven game dev!
</title>
<div id ="container">
<div id ="sidebar">
Home
About
Blog
Videos
Pictures
Contact
</div>
<div id ="content">
<h1>Welcome to my website take a look around </h1>
<p>
I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go.
Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4.
</p>
<p>
Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker.
I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke
following behind using Tails in ue4 particles editor.
</p>
</div>
</div>
</html>
I think you are looking for a sidebar navigation menu try my codes below. And I also recommend the following https://www.w3schools.com/w3css/w3css_sidebar.asp and http://jsfiddle.net/coltrane/cxQGc/.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="sidebar">
Home
<br>
About
<br>
Blog
<br>
Videos
<br>
Pictures
<br>
Contact
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
<style type="text/css">
.sidebar {
background: orange;
position: absolute;
left: 0;
top: 0px;
bottom: 0;
width: 178px;
}
.content {
background: red;
position: absolute;
left: 178px;
right: 0;
top: 0px;
bottom: 0;
}
</style>
I have a simple page with a navbar and a homepage. The navbar is fixed and the homepage takes up 100% of the screen. The viewer then scrolls down from the homepage to view the rest of the web content.
I'm having an issue with the font not scaling when viewing on a mobile device or devices with smaller screen sizes. I believe this is due to me changing the navbar to take up 100% width and for the homepage to be taking up 100% height. The text under section1 scales correctly (the font gets bigger when the screen is smaller).
How can I have the homepage and the navbar increase in font?
h1{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
html {
height: 100%;
min-height: 100%;
}
body {
background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
}
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
}
#top{
text-align: center;
height: 100%;
}
#home-content{
position: relative;
top: 50%;
transform: translateY(-50%);
}
a[href="#top"] {
margin-left:100px;
margin-right:50px;
vertical-align: middle;
text-decoration: none;
font-weight: bold;
}
a img{
vertical-align:middle;
}
.content {
margin-left:75px;
margin-top:25px;
overflow: hidden;
}
.content p{
margin-top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
Name
<a href="">
<img src="" alt="img" height="24" width="24">
</a>
</header>
<div id="top">
<div id = "home-content">
<h1>Top</h1>
<h2>Sub title</h2>
<p>
This text does not scale at all.
</p>
</div>
</div>
<div id="section1">
<h1>Section 1</h1>
<div class = "content">
<p>
This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
Here is an example on mobile that shows the top text not scaling, but the section1 scaling correctly.
That is a Galaxy S5 in google Chrome. The text in the homepage/top portion and navbar should be scaling similar to the way the section1 text does.
How can I fix it so everything scales to the screen?
First, none of it is scaling. It's applying browser defaults as you've not set any font-size in the css provided. You can test it in the web inspector (remember to reload the page after activating it).
You can use vh (view height) or or vw (view width) as percentage messure for the font.
use media queries to adjust according to screen size
ex:
#media screen and (max-width:1000px){
#top{
font-size : 40px; /change it to whatever you need/
}
}
change the max-width accordingly to manage perfectly for every screen
for more information on media queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a block of text that goes on top of a picture. Then below this there is a footer. But the text comes from a database, so sometimes the text is taller than the picture and sometimes shorter. I want the footer to come below the "whole thing" in either case.
Like this -- imagine the XXX's are the picture
Scenario 1:
XXXXXXXXXXXXXXXX
XXXX Short XXXX
XXXX text XXXX
XXXXXXXXXXXXXXXX
-- Footer --
Scenario 2:
XXXXXXXXXXXXXXXX
XXXX Long XXXX
XXXX text XXXX
XXXX runs XXXX
past
the
picture.
-- Footer --
It's easy enough to put the text on top of the picture with position: absolute for one or the other. But then the footer gets positioned without regard to the absolute element.
At the moment I've got two different versions of the screen, one where the picture is static and the text is absolute, for cases where I expect the text to be longer; and one where the text is static and the picture is absolute, for cases where the text is longer. This works, but only because I know what data is in the database today. I could have the program examine the text, but I have no way to know how tall it will lay out without knowing the size of the window the user sets for his browser, not to mention font sizes, etc.
Maybe position: absolute isn't the right way to do this?
Update *
Someone suggested I make a fiddle. I was about to, but I see Adam B Smith made one that illustrates my problem very well: http://jsfiddle.net/DIRTY_SMITH/EgLKV/6183/
That fiddle looks great if the text is taller than the image. Now delete a bunch of text so that the text is shorter than the image, and you see the footer overlaps the image.
OK this one will do it for you http://jsfiddle.net/DIRTY_SMITH/EgLKV/6185/
lol
#container{min-height: 400px;}
#image
{
position:absolute;
z-index:-9999;
left:0;
top:0;
}
#text
{
z-index:9999;
width: 200px;
color:red;
font-size:24px;
font-weight:bold;
}
.footer {
background:#ffab62;
width:100%;
height:100px;
z-index:9999;
bottom:0;
left:0;
}
If you know the size of the image, and set the container's size same as the image, it does work.
.container {
border: 1px solid red;
position: relative;
display: table;
width: 250px;
height: 193px;
}
.container img {
position: absolute;
z-index: -1;
}
.container span {
background: rgba(255,255,255,.7);
display: table;
width: 80%;
margin: auto;
margin-top: 25%;
margin-bottom: 5%;
}
.footer {
background: pink;
}
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</div>
<div class="footer">foooooooter</div>
<br>
<div class="container">
<img src="http://albanyvisitors.com/WpContents/wp-content/uploads/2015/06/200px-Big-Lake-Big-Sky-Mt-Washington-by-Bill-Origer-2015-photo-contest.jpg" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<div class="footer">foooooooter</div>
In order to follow correct web standards, I've tried to layout image and div inline. In orde to achieve that - I've used display:inline property.
But then I experienced the following issue: image renders from the center line, and div doesn't respect height parameter set to it. I've tried using line-height parameter, but that didn't give any useful results.
I've also tried various combinations with setting margin/padding to some values or to auto, or replacing div with span, or wrapping img and div with additional divs.
I've managed to achieve desired result by using position:absolute, but that doesn't help in cases where I want to use centered/relative positioning of the whole component...
Any clues or ideas or troubleshooting hints?
Please find the html example below:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div style="border: solid 2px green; height:40px;width: 600px;">
<span style="border:solid 2px green; position: absolute; height:50px; width: 50px;">
<i m g
style="display:inline; margin: 3px; padding:0px; border: solid 2px lightblue;"
height="38px"
width="38px"
src="someimage . JPG"
/>
</span>
<span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
Some text that should be displayed in the center/middle of the div
</span>
</div>
<br />
<br />
<br />
<br />
<div style="border: solid 2px green; height:80px;width: 600px;">
<span style="border:solid 2px green; position: absolute; height:50px; width: 50px; vertical-align:bottom;">
123
</span>
<span style="position:absolute; left: 100px; width:400px; height:60px; margin:3px; border: solid 2px red;">
Some text that should be displayed in the center/middle of the div
</span>
</div>
</body>
</html>
Thanks for trying to help out.
First - the solution:
I've added few attributes to image tag and that helped a lot:
hspace="0" vspace="0" align="top" border="0"
Second: explanation:
Since I wanted to do "inline" (or "inline-block") thing, I had to figure out how inline/inline-block elements are laid-out by browsers. If you read CSS2 layout spec, you will soon find out that there is an issue with image and divs. Problem is with vertical-align - where image is aligned/rendered comparing to baseline, while divs go for bottom-line (or vice versa). That caused my example not be aligned.
Setting above mentioned params for the image tag helped.
Remarks:
Due to the complex history of IE5,6,7, Firefox, Gecko, WebKit, Chrome, CSS2 and BoxModel, there are some shortcomings to Layout model. Original problem comes from IE5 and 6 handling BoxModel in different way from CSS standard. That's maybe the main reason for having quirks mode and DTD standards.
However, this is a broad topic, if you want to find out more, I recoomend readin CSS2 spec and recommendation.
If you want to discuss it more - feel free to contact me via PM
Thanks again to all for helping and good luck with your Layouts
Kind regards
MP
Try this:
<div style="display: inline-block;"></div>
It's actually part of the CSS2 standard to display an inline thing as a block like a character.
One thing is, though, that <div>s are not supposed to occur inside of a <p> element, so you should instead use <span> tags.
I'm not sure exactly what you are trying to achieve. But it sounds like you want to float an image left with text in the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Page</title>
<style>
.wrap {
border: solid 2px green;
width: 600px;
overflow:hidden;
}
.myimg {
display:inline;
margin: 10px;
padding:0px;
border:solid 2px green;
height:70px; width: 70px;
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<img src="myimagepath" class="myimg" />
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>