.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>
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 2 years ago.
I have
html {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
body {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
background-color: $bgcolor;
}
.main-content {
height: 95%;
}
header {
background-color: $header-bg;
color: $header-text;
text-align: left;
padding: 20px;
height: 5%;
display: flex;
}
and I have a div with class main-content and a header.
For some weird reason I'm seeing extra whitespace at the bottom of my page. (header has a height of 5% - hence giving main-content height of 95%), any ideas why there's extra space there and how I can remove it??
html is
<body>
<%- include ('../partials/header.ejs') %>
<div class="main-content">
<%- body %>
</div>
</body>
header is -
<header>
<a id="aaa" href="/">AAA</a>
<nav id="topnav">
---
</nav>
</header>
Please try the snippet of code I am sharing with you in this response. I added the height: 100vh; corresponding to the 100% of the viewport height, applied to both html and body to keep the consistency of the height to the max of the screen since they don't have a default size. Also, since it is kind of hard to calculate the max width of any screen and subtract the 20px of padding that you have on the HEADER tag in each screen scenario, an overflow:hidden rule has been added to this element.
I also added the P tag to test the div with the class .main-content with some actual content on it to test the whole site with some real content on it.
I am assuming you are using some JavaScript HTML Markup template generator language tool such as EJS to create this page, hence I have temporarily replaced <%- body %> and <%- include ('../partials/header.ejs') %> blocks with real content to see the end result. Don't forget about placing them back instead of my hard-coded content, please.
I certainly hope this helps. Cheers, champion!
html {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
padding: 0;
}
body {
padding: 0;
margin: 0;
height: 100vh;
min-height: 100%;
color:#b2d8d8;
box-sizing: border-box;
background-color: #004c4c;
overflow: hidden;
}
header {
background-color: #189ad3;
color: #f9fafc;
text-align: left;
height: 5%;
padding: 20px;
display: flex;
width: 100%;
position:relative;
}
.main-content {
height: 100%;
}
p {
padding: 10px;
text-align: justify;
text-justify: inter-word;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 BoilerPlate - Alvison Hunter</title>
<meta name="description" content="HTML5 BoilerPlate - Alvison Hunter">
<meta name="author" content="https://alvisonhunter.com/">
<link rel="stylesheet" href="css/styles.css?v=1.0"> </head>
<body>
<header> <a id="aaa" href="/">AAA</a>
<nav id="topnav"> --- </nav>
</header>
<div class="main-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>
<script src="js/scripts.js"></script>
</body>
</html>
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'm creating a website that is all one page. However, the top of the page has a div that takes up 100% of the screen height to create a full page effect. Everything is working fine, but on mobile, any text that is in the 100% height div is decreasing in font size. I posted this question before, however, I've been doing much more research this time.
Here is the code that I've written:
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 using Chrome Device Mode with a Galaxy S5. Note, I scrolled down a bit so you can see the text on the landing section and the text for Section 1.
The font size for Top should be the same as the font size for Section 1.
If I remove the line in the #top:
height: 100%;
The font size does not change for the top portion:
I know that I'm using the default font sizes but I wouldn't expect that to cause issues. Using Chrome Inspector here are the font sizes:
HTML - 16px
Body - 16px
Div id=top - 16px
h1 (inside #top) - 32px
Div id=section1 - 16px
h1 (inside #section1) - 42.6667px
The font size for h1 is 2em. Therefore, the 32px for Top make sense, however, the 42.6667px does not. I do not have this issue on my laptop using any web browser, just mobile. I actually prefer the 42.6667px on mobile as it make it more eligible. However, I want the font sizes to match.
Because the #top div's font size is fine when I removed the div height=100%, I decided I could create the same full page effect using jQuery and margins.
var winHeight = $(window).height();
var topHeight = $('#top').outerHeight(true);
$('#top').css({
'marginTop':(winHeight/2)-topHeight
,'marginBottom':(winHeight/2)//-topHeight
});
However, I would really prefer not to do it this way.
So, is there a way I can have the #top font size match the #section1 font size?
You're making a responsive website but you haven't configured the viewport. Great link here about it but essentially:
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
So with your 100% height and Chrome's device mode rendering that height as a lot bigger than it is, you got the small text.
Adding the following to the head will make your site display properly on a mobile device:
<meta name="viewport" content="width=device-width, initial-scale=1" />
However, you'll need to make some changes as your 100px margin either side on your body squishes your content into a slim column.
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
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>