I am trying to make a portfolio for an assignment and when I try to make the page window smaller, the text will overlap making it all messy. I once fixed this issue with min-width but I can't seem to fix it this time.
I can't get my head around why it keeps doing it, I am fairly "new" to HTML/CSS and lack the experience to fix this issue, if someone could help me resolve this I'd be grateful.
Thanks.
HTML
<head>
<title>CPD Portfolio - Home</title>
<meta charset="UTF-8">
<meta name="description" content="CPD Portfolio">
<meta name="author" content="Ashley Tanner-Mortell">
<meta name="viewport" content="width=device-width, inital=scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li>University</li>
<li>Sports</li>
<li>Student Mentor</li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<div class="centered" style="top:15%">CPD Portfolio</div>
<div class="centered" style="top:20%;">_______________</div>
<div class="centered" style="top:30%; font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
</html>
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
Here you go, just replace below code HTML and CSS - Refer my comments for changed code.
CSS
body,html{
margin: 0;
min-width:500px;
}
footer {
float: left;
background-color: grey;
padding: 0;
width: 100%;
text-align: center;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to right, silver, lightgrey);
}
li {
list-style-type: none;
float: left;
}
li a {
list-style-type: none;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
list-style-type: none;
background-color: #E1E1DC;
}
.active {
background-color: #00628B;
}
.container {
margin: 0;
color: white;
font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}
.centered {
position: absolute;
top: 10px;
left: 0;
right:0;
/* transform: translate(-50%, -50%); */
}
#gradient {
height: 1300px;
background-color: grey; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}
.box1, .box2{
border-style: solid;
border-width: 1px;
background-color: #F5F5F5;
}
.box1{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box2{
float: left;
width: 44vw;
height: 400px;
padding: 1vw;
margin: 1vw;
}
.box3{
float: center;
width: 90%;
}
/* added css for portfolio section */
.portfolioSection{
padding-top: 100px;
text-align: center
}
/* added css for portfolio heading */
.portfolioHead{
border-bottom:1px solid #000;
display: inline-block;
}
HTML
<ul>
<li><a class="active" href="home_page.html">Home</a></li>
<li>University</li>
<li>Sports</li>
<li>Student Mentor</li>
</ul>
<div id="gradient">
<div class="container">
<img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
<!-- wrapped your divisions with parent devision for better control through out screens -->
<div class="centered portfolioSection">
<!-- added class to control heading styles -->
<div class="portfolioHead">CPD Portfolio</div>
<div style="font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</div>
</body>
<footer>
<p>Footer Details</p>
</footer>
Also suggest you to go through this - https://www.w3.org/ and also youtube some free tutorial on HTML and CSS as i can see many basic issues in your css and html. :)
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I was wondering how I can get my footer to stay at the bottom. Sorry I am still new to this and still learning. If you guys see anything in my code I could do better on just let me know. I was messing around with the positioning a lot. I think the next website I design I will be using flexbox lol. If anyone has any suggestions or some tips for me to do better please let me know. I tried making the body relative and made the footer absolute with bottom set to 0 but that didn't work
#font-face{
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body{
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container{
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper{
padding: 60px 155px ;
}
ul{
text-align: left;
list-style-type: square;
}
.button_1{
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header{
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding{
float: left;
font-family: 'HeadingFont' , 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1{
margin: 0;
}
.navbar a{
color: white;
padding-right: 20px;
}
.navbar{
padding-right: 20px;
}
.side-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a{
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close{
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas{
float: right;
font-size: 30px;
}
header .highlight, header .current a{
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner{
width: 90%;
height:400px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
}
.slider-inner img{
display:none;
width:100%;
height:500px;
}
.slider-inner img.active{
display:inline-block;
}
.prev,.next{
float:left;
margin-top:130px;
cursor: pointer;
}
.prev{
position:relative;
margin-right:-45px;
z-index:100;
}
.next{
position:relative;
margin-left:-45px;
z-index:100;
}
/*Homepage packages*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze{
color: #cd7f32; /*Bronze*/
text-align: center;
}
#boxes .silver{
color: #C0C0C0; /*silver*/
}
#boxes .gold{
color: #CFB53B; /*Gold*/
}
/*Gallery Page*/
#gallery{
max-width: 90%;
padding: 50px;
}
.image{
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img{
width: 200px;
padding: 10px;
}
.image img:hover{
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width:70%;
padding: 50px;
margin: 0 auto;
}
#contact{
width: 90%;
}
input[type=text], [type=email], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover{
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact{
padding: 50px;
line-height: 3em;
}
/*footer*/
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
/*Media Queries*/
#media only screen and (max-width: 940px){
#wrapper{
padding: 0;
margin: 0;
}
#boxes .box{
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header{
padding: 10px;
}
header nav{
margin: 0;
float: left;
}
.image{
width: 450px;
margin: 0 auto;
}
#gallery{
width: 100%;
}
#contact{
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script
src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
I Use:
.footer{
width: 100%;
height: 4rem;
bottom: 0;
left: 0;
position: absolute;
}
Your Css had:
footer{
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
}
You can make your footer fixed
make sure you add z-index value so that other element don't overlaps the footer.
footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;
}
Making your footer position: fixed will help you achieve this. You may have to watch out for other elements near the bottom colliding and overlapping. You can use margins to help with that. Also, using a high z-index will prevent other elements from being displayed over top of it.
You can read more about fixed positioning here.
#font-face {
font-family: 'HeadingFont';
src: url(../fonts/KaushanScript-Regular.otf);
font-style: normal;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
background: #ffffff;
box-sizing: border-box;
}
/* global */
.container {
width: 100%;
margin: 5px 0 15px 0;
overflow-x: hidden;
}
#wrapper {
padding: 60px 155px;
}
ul {
text-align: left;
list-style-type: square;
}
.button_1 {
height: 38px;
background: #e8491d;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
}
/* header */
header {
background: #35424a;
color: #ffffff;
padding: 30px 10px 0 20px;
min-height: 70px;
border-bottom: #eB491d 3px solid;
}
header #branding {
float: left;
font-family: 'HeadingFont', 'Times New Roman', Times, serif;
font-size: 0.9rem;
}
header #branding h1 {
margin: 0;
}
.navbar a {
color: white;
padding-right: 20px;
}
.navbar {
padding-right: 20px;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
right: 0;
background: #35424a;
opacity: 0.9;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
}
.side-nav a {
padding: 20px 30px 20px 10px;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.side-nav .btn-close {
position: absolute;
top: 20px;
left: -50px;
font-size: 36px;
margin-left: 50px;
padding: 10px;
}
.fas {
float: right;
font-size: 30px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
transition: all 0.3s ease;
font-weight: bold;
}
/*Slider*/
.slider-inner {
width: 90%;
height: 400px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
width: 100%;
height: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
cursor: pointer;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
/*Homepage packages*/
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .bronze {
color: #cd7f32;
/*Bronze*/
text-align: center;
}
#boxes .silver {
color: #C0C0C0;
/*silver*/
}
#boxes .gold {
color: #CFB53B;
/*Gold*/
}
/*Gallery Page*/
#gallery {
max-width: 90%;
padding: 50px;
}
.image {
border-radius: 5px;
width: 70%;
background: #35424a;
margin: 0 auto;
padding: 50px;
}
.image img {
width: 200px;
padding: 10px;
}
.image img:hover {
transform: scale(1.2);
}
/*Contact Page*/
form {
border-radius: 5px;
background: #35424a;
color: white;
width: 70%;
padding: 50px;
margin: 0 auto;
}
#contact {
width: 90%;
}
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
width: 100px;
}
.submit:hover {
color: black;
background: rgb(60, 255, 0);
transition: all 0.9s ease;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#contact {
padding: 50px;
line-height: 3em;
}
/*footer*/
footer {
width: 100%;
height: 30px;
padding: 10px;
color: white;
background-color: #e8491d;
text-align: center;
position: fixed;
bottom: 0;
}
/*Media Queries*/
#media only screen and (max-width: 940px) {
#wrapper {
padding: 0;
margin: 0;
}
#boxes .box {
float: left;
text-align: center;
width: 100%;
padding: 5px;
}
header {
padding: 10px;
}
header nav {
margin: 0;
float: left;
}
.image {
width: 450px;
margin: 0 auto;
}
#gallery {
width: 100%;
}
#contact {
padding-left: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width">
<title>photagraphy - Welcome</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="jqslider/js/main.js"></script>
<script src="https://kit.fontawesome.com/01fc06f1b4.js" crossorigin="anonymous"></script>
<script src="navigation.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> <span class="highlight">Jamie's</span> photagraphy</h1>
</div>
<nav class="navbar">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
</nav>
<div id="side-menu" class="side-nav">
×
Home
Gallery
Contact Us
</div>
</div>
</header>
<div id="wrapper">
<div class="container">
<div class="slider-outer">
<img src="jqslider/images/arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="jqslider/images/image1.jpg" class="active">
<img src="jqslider/images/image2.jpg">
<img src="jqslider/images/image3.jpg">
<img src="jqslider/images/image4.jpg">
</div>
<img src="jqslider/images/arrow-right.png" class="next" alt="Next">
</div>
</div>
<section id="boxes">
<div class="container">
<div class="box">
<h3 class="bronze">Bronze</h3>
<ul>
<li>Full Day coverage of your wedding.</li>
<li>Unlimited Photographers time on Wedding day.</li>
<li>Includes 2 hour Engagement session or subtract $200 if not needed. Includes 25 Digital Photos, two 8x10s and three 5x7s.</li>
<li>1 hour Bridal Portrait session with 1 16x20 Canvas and 8x8 photo book with 10 sides or subtract $200 if not needed.</li>
<li> Video of photos from Engagement session and Bridal Session to use on your wedding day.</li>
</ul>
</div>
<div class="box">
<h3 class="silver">Silver</h3>
<ul>
<li>
Up to 8 hours photography for pre-wedding, wedding, and reception photographs.
</li>
<li>
Includes 1 hour Engagement session with 1 16x20 print and 2 8x10 prints. (Subtract $100 if not needed)
</li>
<li>
1 hour Bridal Portrait session with 1 16x20 and 2 8x10 custom prints. (Subtract $100 if not needed)
</li>
<li>
OPTION - Engagement Session and Bridal Session or COPY OF 200 DIGITAL PHOTOS of your choice.
</li>
<li>
Online proofs.
</li>
</ul>
</div>
<div class="box">
<h3 class="gold">Gold</h3>
<ul>
<li>Up to 6 Hours of photography for pre-wedding, wedding, and reception photographs. (ask about additional time)</li>
<li>Online proofs.</li>
<li>Two photographers</li>
<li>One 16x20 Print!</li>
<li>Four 8x10s, Eight 5x7s, 10 4x6s</li>
<li>Custom Hard Cover Photo Book.</li>
<li>15 full format images of your choice, copyright free.</li>
</ul>
</div>
</div>
</section>
</div>
<footer>
<p>Created by Justin Hamilton. Copyright © 2019</p>
</footer>
</body>
</html>
#container {
position: relative;
min-height: 100vh;
}
#content {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="container">
<div id="content">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
So my website shows the images in google chrome but not in firefox! Anyone who can help? It only shows the background image in firefox! I've tried many things but nothing works for me. Anyone who can help :D
website: http://z16-zacho.it.slotshaven.dk/html/index.html
body {
background-color: transparent;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
margin:0px 0px 0px 0px;
}
h1, h2 {
color: black;
text-align: center;
}
h1 {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
border-radius: 100px;
display: table;
margin: 0 auto;
margin-bottom: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
}
h3 {
text-align: center;
color: black;
font-size: 24px;
}
p {
text-align: center;
border-style: solid;
border-color: rgb(176, 184, 196);
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 6px;
background-color: white;
opacity: 0.9;
color: black;
font-size: 24px;
font-weight: bold;
}
span {
color: rgb(16, 140, 206);
}
ul {
list-style-type: none;
margin-top: -3px;
padding: 0px;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#boks1 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: left;
background-color: white;
overflow: hidden;
}
#boks2 {
max-width: 48%;
width: auto;
padding: 0.5%;
border: 1px;
border-style: solid;
border-color: purple;
float: right;
background-color: white;
overflow: hidden;
}
#background {
background-image: url(../billeder/background.jpg);
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img-me {
content: url(../billeder/billede_af_mig.jpg);
width: 300px;
height: 300px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
float: center;
margin: 0 auto;
display: table;
}
#head {
content: url(../billeder/head.png);
margin-bottom: 3px;
background-color: rgb(238, 242, 254);
height: 0 auto;
max-width: 100%;
float: center;
margin: 0 auto;
display: table;
}
#facebook {
content: url(../billeder/fb.png);
width: 16px;
}
#instagram {
content: url(../billeder/instagram.png);
width: 16px;
}
#twitter {
content: url(../billeder/twitter.png);
width: 20px;
}
#snapchat {
content: url(../billeder/snap.png);
width: 16px;
}
#normalP {
font-size: 16;
font-weight: normal;
text-align: left;
border-style: none;
display: table;
margin: 0 auto;
margin-top: 20px;
padding: 0px;
opacity: 1;
color: black;
}
HTML
<!DOCTYPE html>
<html>
<head>
<link href="../css/frontpageStyle.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<title>Zacool site</title>
</head>
<body>
<body id="background"></body>
<header>
<a href=" (link here was url shortened so i removed it) " target="_blank">
<div id="head"></div>
</a>
<ul>
<li><a class="active" href="index.html">Forside</a></li>
<li>Min valgfrie ting</li>
<li>Kronik</li>
<li><a id="facebook" href="https://www.facebook.com/tobias.zacho" target="_blank"></a></li>
<li><a id="instagram" href="https://www.instagram.com/tobiaszacho99/" target="_blank"></a></li>
<li><a id="twitter" href="https://twitter.com/Tobi1790?lang=da" target="_blank"></a></li>
<li><a id="snapchat" href="snap.html" target="_blank"></a></li>
<li>Slotshaven</li>
</ul>
</header>
<h1>Velkommen! Denne side er kodet af <span id="header-shadow">Tobias Zacho</span></h1>
<div id="img-me"></div>
<p>↓ <span>Scroll ned for mere info</span> ↓</p>
<body>
<div id="background"></div>
<div style="height:0px;background-color:transparent;"><!-- Lavet så man får scrolling effekten! --></div>
</body>
<div id="boks1">
<h3>
Hvem er jeg?
</h3>
<p id="normalP">
Test
</p>
</div>
<div id="boks2">
<h3>
Overskrift
</h3>
<p id="normalP">
Test
</p>
</div>
</body>
</html>
Try changing #head on your CSS:
#head {
background-image: url(../billeder/head.png);
background-color: rgb(238, 242, 254);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 15vh; /* 15% of the screen's height */
}
The way you set it, it doesn't have a defined height, and different browsers interpret that in different ways.
Also, a thing to note: on small width screens, that header image looks quite small. Try cutting a bit of that whitespace on the .png to give it some space!
And lastly, this is one solution to it. If you're ever unsatisfied, there surely are other ways to accomplish what you're looking for!
I am creating a webpage and the css and html are fairly straightforward. However, in Chrome, and only on 100% zoom, when I hover over a navbar item a tiny sliver of the container div color stays the same. If I change the zoom level or use another browser this effect is not present. Any thoughts: Code is below.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Site Title</title>
</head>
<body>
<div class="img_div" id="visible_div1">
<img src="images/logo_transparent.png" class="logo_img" id="img1"/>
</div>
<div class="nav_bar_div" id="visible_div2">
<ul class="nav_bar" id="ul1">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="main_div" id="visible_div3">
</div>
</body>
<footer>
Footer Text
</footer>
CSS:
body{
background-color: #5d5953;
font: arial;
color: white;
}
.img_div{
position: relative;
margin: auto;
height: 10%;
overflow: hidden;
background: white;
width: 60%;
}
.logo_img{
top: 10%;
float: right;
height: 80%;
padding: 0 2% 0 2%;
position: relative;
}
.nav_bar_div{
width: 60%;
background: #ff9900;
margin: auto;
padding: 0;
}
.nav_bar{
list-style-type: none;
margin: auto;
overflow: hidden;
}
.nav_bar > li{
display: inline-block;
margin: 0;
padding: 1%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.nav_bar > li:hover{
background-color: white;
}
.nav_bar > li > a{
display: block;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
font-size: 2em;
margin: 0;
}
.nav_bar > li:hover a{
color: #ff9900;
}
.main_div{
background-color: white;
color: black;
width: 60%;
height: 85%;
margin: auto;
background-image: url("images/welcome_image.jpg");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
footer{
background-color: #ff9900;
font-family: arial;
width: 60%;
margin: auto;
text-align: center;
padding: 0.5% 0 0.5% 0;
}
Example (Chrome):
NavBar Issue In Chrome
Example (IE):
NavBar Correct In IE
I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).
It seems that when I zoom in on my browser, my navigation buttons completely go on top of each other. Check the following images:
Normal: http://i.imgur.com/yFxwrXw.png
Zoom: http://i.imgur.com/OnUP6Sg.png
Does anyone know a way to prevent this / stop this from happening?
body {
width: 100%;
height: 100%;
padding: 0;
max-width: 960px;
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 0.4166666666666667% 2.5%;
background: #595959;
margin: 0 10px;
border:1px solid #828282;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
width: 99.79166666666667%;
min-height: 50%;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="logo">
<img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
padding: 0;
min-width: 960px; /* Change max-width to min-width */
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
Set min-width: 960px; in body
DEMO
Here is a Fiddle