I am trying to make a image responsive by using viewport width instead of pixels (vh) but when i resize the page the text also moves along with the image i tried to fix this by changing the font size of the text that's moving from pixels to vh but it did not work.
I have also the following meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML
<body>
<div id="top">
<div class="kygo">Kygo</div>
<div class="img"> <img src="maskGroup1.png" alt="Profile Picture"></div>
<div class="tag">#000</div>
</div>
<div id="bottom"></div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top{
float:bottom;
background-color:#1A1C1E;
width:100%;
height:200px;
}
#bottom{
position: relative;
float: top;
background-color:#2F3136;
width:100%;
height:1000px;
}
.kygo{
font-family: Segoe UI;
font-weight: 700;
padding-top: 24px;
padding-left: 103px;
color: white;
font-size: 20px;
}
.tag{
font-family: Segoe UI;
font-weight: 400;
margin-top: -40px;
padding-left: 103px;
color: #A2A4A8;
font-size: 13px;
}
img{
max-width: 11.333vw;
max-width: 20vw;
padding-left: 27px;
margin-top: -27px;
}
Thank you for reading.
for responsive image use width in %. And made some changes as follows
html, body {
margin: 0;
padding: 0;
}
#top{
background-color:#1A1C1E;
width:100%;
height:200px;
display: flex;
flex-direction: row;
align-items: center;
}
#bottom{
position: relative;
float: top;
background-color:#2F3136;
width:100%;
height:1000px;
}
.kygo{
font-family: Segoe UI;
font-weight: 700;
color: white;
font-size: 20px;
}
.tag{
font-family: Segoe UI;
font-weight: 400;
color: #A2A4A8;
font-size: 13px;
}
.name {
width:75%;
padding-left:5px;
}
.img{
width:25%;
padding-left:5px;
}
img {
width:100%;
border-radius: 300px;
}
<body>
<div id="top">
<div class="img"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="Profile Picture">
</div>
<div class="name">
<div class="kygo">Kygo</div>
<div class="tag">#000</div>
</div>
</div>
<div id="bottom"></div>
</body>
There are a few bugs in the css. As far as I can see, without knowing the idea behind the layout, this is the css with some cleanup.
Note that the size of the image is unkown so it is not clear to me how to give proper margins and paddings.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
overflow: hidden
}
#top {
width:100%;
height:200px;
background-color:#1A1C1E;
}
#bottom {
position: relative;
width:100%;
height:1000px;
background-color:#2F3136;
}
.kygo {
font-family: "Segoe UI", sans-serif;
font-weight: 700;
padding-top: 24px;
padding-left: 103px;
color: white;
font-size: 20px;
}
.img {
max-width: 20%;
padding-left: 27px;
margin-top: -27px;
}
.img img {
/* responsive image */
width: 100%;
height: auto;
border: 0;
}
.tag {
font-family: "Segoe UI", sans-serif;
font-weight: 400;
margin-top: -40px; /* this will partial overlay the top */
padding-left: 103px;
color: #a2a4a8;
font-size: 13px;
}
<!-- this in your <head> section -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this in your <body> section -->
<div id="top">
<div class="kygo">Kygo</div>
<div class="img">
<img src="https://picsum.photos/id/206/150/100" alt="Profile Picture">
</div>
<div class="tag">#000</div>
</div>
<div id="bottom"></div>
Related
My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can't seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
try it:
html,
body {
height: 100%;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005d;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
height: 100%;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005d;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img
src="Images/GCSCU_Color.png"
alt="Logo"
style="float:left;width:120px;height:70px; padding-right:10px"
/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>
This is just a test sentence for the main section of the
page.
</h2>
</main>
</div>
</div>
Please give height: 100%; and margin: 0; for html and body.
Your css will have below changes:
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
See working jsfiddle - here
Instead of percentage use Viewport units, in this case vh for height:
html, body {
min-height:100vh;
margin:0;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>CRIF Access Homepage</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px"/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
</body>
</html>
I'm wondering why do you want (or need) the wrapper, you can do the job only with body.
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
This is my first html/css project. I tried to use nav and ul tags to put a Log in option on the top right corner over the image. When I do it shifts everything from the middle. I did google before posting but I haven't been successful. I am just wanting to know if I have to float it over or mess with the padding and margins? Here is the html markup`
<!DOCTYPE html>
<html>
<head>
<title>AudioPhile</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Audio<img class="logo" src="https://image.ibb.co/n2A7gb/bar_diagram.png" alt=" folder with white music bars">Phile</h1>
<p>Create. Play. Share music anywhere, on any device with unlimited free storage.</p>
<input class="signup" type="email" id="myEmail" value="Type Your Email Here">
<a class="btn-1" href="#">Get Started</a>
<footer class="credits">© Natalie Pickrom</footer>
</div>
</div>
</section>
</body>
</html>`
The CSS:`#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Nunito:200');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background:linear-gradient(0deg,rgba(64,64,64,0.8),rgba(64,64,64,0.8)),url(https://preview.ibb.co/jZbkZw/james_stamler_153487.jpg) no-repeat 95% 95% ;
background-size: cover;
display: table;
top:0;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%
max-width: none;
}
.content {
max-width:500px;
margin: 0 auto;
text-align:center;
}
.content h1 {
font-family: "Archivo Narrow", Helvetica, sans-serif ;
color: #F9F3F4;
text-shadow: 0px 0px 300px #000;
font-size: 6em;
padding:0px;
margin:0px;
}
.content p {
font-family: Nunito, "Open Sans", sans-serif;
font-size: 1.253em;
color:#F9F3F4;
Paddding: 0px;
margin-top: 0px;
}
.signup {
border: 0px;
font-family: Nunito, "Open Sans", sans-serif;
letter-spacing: 2px;
color: rgba(128,128,128,0.7) ;
padding: 5px;
width: 67%;
}
.btn-1 {
border-radius:0px;
background-color: #008CBA;
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 3px 10px 4px;
width:50%;
}
.credits {
font-family: Nunito, "Open Sans", sans-serif;
color:#F9F3F4;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 768px) {
.content h1 {
font-size:4em;
}
.btn-1 {
padding: 2px 10px 3px;
width: 25%;
}
p {
font-size: .5em;
}
}
`
Here is the JSfiddle https://jsfiddle.net/1ysegrd6/
Here is what I want to achieve. I want log in where they have home subscribe
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
my website has a scroll bar that goes quite far over to the right and one that goes down. nothing is displayed in these areas so the scroll bar is unecesary! if anything it could fit all on one page. these creates a lot of white space around my page.
how can i stop this from happening?
<!DOCTYPE html>
<head>
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<title>Louis Moore | Creating The Future </title>
<!--[if IE]>
<link rel="stylesheet" type"text/css" href="ie.css" >
<![endif]-->
</head>
<style>
.box {
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
position: relative;
top: 100px;
height:450px;
width:100%;
}
.image1 {
position: relative;
top:-100px;
left: 390px;
}
body{
font-family: 'Paytone One', sans-serif;
font-size: 30px;
}
h1 {
font-family: 'Paytone One', sans-serif;
font-size: 40px;
position: relative;
top:-250px;
left: 370px;
}
h2 {
font-family: 'Paytone One', sans-serif;
font-size: 30px;
position: relative;
top:-300px;
left: 480px;
color: #FC3B3B;
}
h3 {
font-family: 'Paytone One', sans-serif;
font-size: 20px;
position: relative;
top:-290px;
left: 390px;
}
.image2 {
position: relative;
top:-300px;
left: 590px;
}
.box1 {
width: 100%;
height: 5px;
background-color: #FC3B3B;
position: relative;
top:100px;
left: 0px;
}
p {
position: relative;
top:150px;
left: 100px;
font-size: 15px;
font-family: arial;
color: #585858;
}
</style>
<body>
<div class="box">
<img src="louis.png" class="image1" alt="." width="400px" height="400px">
<h1> WELCOME TO MY PAGE</h1>
<h2>COMING SOON... </h2>
<h3>BUT FOR NOW FOLLOW ME ON TWITTER</h3>
<img src="twitter.png" class="image2" border="0" alt=".">
</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>
</html>
EDIT: this is how it should look like
It's an artifact of the relative positioning and setting a left value.
Remove it, and the extra space goes away.
Demo
EDIT
You do not need any relative positioning. The design you are trying to accomplish can be created much more simply with text-align: center.
HTML
<div>
<img src="//placehold.it/200x200">
<h1>Welcome to my page</h1>
<h2>Coming Soon...</h2>
<h3>But for now follow me on Twitter</h3>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Paytone+One);
div {
text-align: center;
background: #ddd;
border-bottom: 3px solid red;
margin: 5px;
padding: 10px;
font-family: 'Paytone One', sans-serif;
font-size: 24px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
color: red;
}
img {
width: 200px;
height: 200px;
}
Demo