My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
Related
I am working on my laptop in VSCode, after I make my site, I go to stylizing him and after I make this after my pleasure, when I minimize Google, it doesn't keep his resolution.
This is full screen on google chrome.
And this is google chrome minimized.
What could I do for websites keep his style as I put him in full screen?
HTML:
<!--HTML SOURCE--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Proiecte</li>
<li>Staff</li>
<li>Contact</li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
CSS:
/* CSS */
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
I suggest you to try bootstrap, it will make your page responsive to all types of devices and you will write less CSS. Good luck.
I'm trying to make my first portfolio, but I encountered this problem that I can't manage to solve. I'm still trying to make all the elements resize correctly, but the navigation bar is my priority. Indeed, whenever I reduce the width of the page, the navigation bar goes up, out of the screen. Hopefully someone knows how to solve this, thanks in advance for your help . This is the code.
#import url(//db.onlinewebfonts.com/c/4aa3e37e571255737e5e6d4e9d9770a5?family=Rockwell);
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
}
.wrapper{
margin-left: auto;
margin-top: auto;
width: 100%;
}
body{
background-color: #222326;
}
.nav-bar{
margin-top: 100px;
transform: translateY(-870px);
background-color: #0C0C0D;
width: 380px;
padding: 18px;
border-radius: 50px;
margin-left: 33%;
}
.nav-bar>a{
text-decoration: none;
color: #3A3B40;
padding-left: 4%;
position: relative;
}
.nav-bar>a>h4{
display:inline;
font-family: 'Raleway', sans-serif;
}
.contactme-link{
border-right: 1px solid #88898C;
margin-left: 1%;
margin-right: 2%;
padding-right: 3%;
}
.skills-link{
border-right: 1px solid #88898C;
padding-right: 3%;
}
.myworks-link{
margin-left: 2%;
}
.bg{
background: url('background.jpg');
position: relative;
padding-right: 100%;
padding-bottom: 66.6%;
background-repeat: no-repeat;
background-size: contain;
z-index: -2;
border-radius: 0 0 70px 70px;
}
.layer{
background-color: rgba(34,35,38,.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 0 0 70px 70px;
}
.me{
margin-left: 25%;
margin-top: 20px;
transform: translateY(-870px);
}
.face{
background: url('face-bw.jpg');
background-repeat: no-repeat;
background-size: contain;
height: 590px;
border-radius: 60px;
margin-left: 75px;
width: 475px;
}
.black-box{
background-color: #0C0C0D;
width: 585px;
text-align: center;
padding: 25px 20px 25px 20px;
border-radius: 50px;
margin-top: -115px;
}
.black-box>h1{
color: #D9D9D9;
font-family: 'Rockwell', sans-serif;
font-size: 68px;
}
.black-box>h4{
font-family: 'Raleway', sans-serif;
font-size: 20px;
color: #3A3B40;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Andrea Testini Portfolio</title>
</head>
<body>
<div class="wrapper">
<div class="presentation">
<div class="bg">
<div class="layer"></div>
</div>
<div class="nav-bar">
<a href="#contact-me" class="contactme-link">
<h4>CONTACT ME</h4>
</a>
<a href="#skills" class="skills-link">
<h4>SKILLS</h4>
</a>
<a href="#my-works" class="myworks-link">
<h4>MY WORKS</h4>
</a>
</div>
<div class="me">
<div class="face"></div>
<div class="black-box">
<h1>Andrea Testini</h1>
<h4>Programmer and Web Developer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
<!---->
Change width: 380px; to max-width: 380px; in .nav-bar and you will be fine
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine.
My positioning is based off pixels when it should be percent?
How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website?
How do I choose between Absolute and Relative positioning?
Here's my HTML&CSS:
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 100%;
min-height: 100%;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
#verr {
position: absolute;
margin-left: 31px;
margin-top: 285px;
color: #6458b7;
}
#special {
position: absolute;
left: 77.9%;
top: 50%;
color: #6458b7;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" id="manyarms">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
<p id="verr">Here comes a very special boi!</p>
<p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do.
Whatever you do, thank you for reading and/or assisting.
You could change min-width: 100%; to min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. this will make the browser add a scrollbar when the window width is below 1000px.
Only applying min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. To fix this add position: relative; to #wrapper.
Why do we need to add position: relative; to #wrapper?
Absolute positioned elements will always position based on the first parent that has position: relative;. If none has this rule, it will just position based on the body. (https://developer.mozilla.org/de/docs/Web/CSS/position)
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. Ofc you can change the 1000px to any width you want.
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 1000px;
min-height: 100%;
}
#wrapper {
position: relative;
/* max-width: 1200px; Edit 1 */
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#wrapperForTheSecondImage {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
/* Removed
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
} */
#verr {
/*position: absolute;
margin-left: 31px;
margin-top: 285px;*/
color: #6458b7;
}
#special {
/*position: absolute;
left: 77.9%;
top: 50%;*/
color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<!-- Edit 2 -->
<div id="wrapperForTheFirstImage">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~">
<p>Here comes a very special boi!</p>
</div>
<div id="wrapperForTheSecondImage">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
<p>He loves to pose for photos!</p>
</div>
<!-- Edit 2 END -->
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Edit 1:
Added max-width to #wrapper to provide an example for (if i understand correctly):
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
Edit 2:
I think i know what u want now. Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately.
I just updated the source to provide an example. (and removed the max-width thing)
I am trying to make a div a clickable link and was told it is better to put the link inside the div rather than around the div. I noticed that whenever I mouseover one of the divs the webpage suddenly gains an extra 500 or so pixels on the right.
The page isn't supposed to be scrollable, and you can only scroll by holding the middle mouse button and dragging. This happens in Chrome 41.0.2272.101 and Opera 28, but NOT in Firefox 36.0.4.
Here is my code.
HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script type='text/javascript' src='jquery-1.11.2.js'></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset='utf-8'>
<meta name='description' content='Portfolio website displaying projects by John Doe.'>
<meta name='keywords' content='Portfolio, John Doe, Projects, Software'>
<meta name='author' content='John Doe'>
</head>
<body>
<!-- Top welcome bar. Holds name and description of profession(s). -->
<div id='welcome_bar'>
<div id='welcome_bar_name'>John Doe</div>
<p id='welcome_bar_description'>Software Engineer</p>
</div>
<!-- Holds all the navigation "blocks" leading to the about, portfolio,
contact, and [unused page] pages. -->
<div id='nav_block'>
<div id='block_list'>
<div class='block_container'>
<div id='left_out' class='block'>
<a href='webpages/about/about.html'>
<!-- Short description of page this block leads to "who I am". -->
<div id='about_description' class='block_description'>
<p>who I am</p>
</div>
<p class='block_title'>About Me</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/about_icon.png' alt='about_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='left_in' class='block'>
<a href='#'>
<!-- Short description of the page this block leads to "what I am proud of". -->
<div id='portfolio_description' class='block_description'>
<p>what I am proud of</p>
</div>
<p class='block_title'>Portfolio</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/portfolio_icon.png' alt='portfolio_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_in' class='block'>
<a href='#'>
<div id='sparepage_description' class='block_description'>
<p>stuff stuffs</p>
</div>
<p class='block_title'>Stuff Stuff</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/stuffstuff_icon.png' alt='stuffstuff_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_out'class='block'>
<a href='#'>
<div id='contact_description' class='block_description'>
<p>let's chat</p>
</div>
<p class='block_title'>Contact</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/contact_icon.png' alt='contact_icon.png'/>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3:
html {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
background-color: white;
}
#welcome_bar {
position: relative;
top: 10%;
left: 12.5%;
padding: 0;
width: 75%;
height: 10%;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#font-face {
font-family: "Roboto Regular";
src: url("fonts/Roboto-Regular.ttf");
}
#welcome_bar_name {
position: relative;
left: 5px;
top: 5px;
padding-left: 10px;
width: 75%;
height: 50%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.65);
font-size: 3em;
}
#welcome_bar_description {
position: relative;
left: 8px;
top: -15px;
padding-left: 10px;
width: 35%;
height: 20%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}
#nav_block {
position: relative;
top: 12%;
left: 12.5%;
padding: 0;
width: 75%;
height: 68%;
}
#block_list {
display: table;
position: relative;
top: 5%;
padding: 0;
width: 100%;
height: 90%;
}
.block_container {
display: table-cell;
width: 22%;
height: 100%;
}
.block {
height: 100%;
position: relative;
}
.block a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
}
#left_out {
width: 99%;
background-color: #00AE93;
}
#left_in {
width: 98%;
margin-left: 1%;
margin-right: 1%;
background-color: #9CA645;
}
#right_in {
width: 98.5%;
margin-left: 1%;
margin-right: 1%;
background-color: #EDB613;
}
#right_out {
width: 99%;
margin-left: 1.2%;
background-color: #D55435;
}
#about_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#portfolio_description {
position: relative;
top: 20%;
width: 90%;
height: 5%;
background-color: white;
}
#sparepage_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#contact_description {
position: relative;
top: 25%;
width: 90%;
height: 5%;
background-color: white;
}
#font-face {
font-family: "Ubuntu M";
src: url("fonts/Ubuntu-M.ttf");
}
#about_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #00AE93;
}
#portfolio_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #9CA645;
}
#sparepage_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #EDB613;
}
#contact_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #D55435;
}
.block_icon_container {
top: 48%;
position: relative;
margin: 0 auto;
padding: 3px;
}
#font-face {
font-family: "Ubuntu L";
src: url("fonts/Ubuntu-L.ttf");
}
.block_title {
position: relative;
max-width: 100%;
top: 45%;
height: auto;
color: white;
font-size: 1.5em;
font-family: Ubuntu L;
text-align: center;
}
.block_icon {
margin: 0;
padding: 0;
max-width: 100%;
opacity: 0.6;
}
Under .block a, I noticed that if you remove the width, the page doesn't expand when you mouse over the block. The size of the percentage seems to effect how far the page is expanded as well.
This bug probably wouldn't be noticed unless visitors randomly scrolled using the middle mouse button, but it bugs me.
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example