In reference to my last question here
this time I'm facing issues when webpage scrolls. The content inside 'container' section is overlapping. I've tried to fix this many times but whenever I fix something, some other thing gets broken.
As you can see in the code snippet I've used 3 different stylesheets and custom Grid with 12 rows and 0.5% margin, so the page will show 3 different views according to the resolution. The problems with this code are:
Userinfo class is overlapped by the next class when zoomed.
When page is zoomed to 300%, the class next to 'userinfo' moves away.
Here's the code (I've included only one CSS because I can't find any option to add multiple css):
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.0vw;
}
h2 {
font-family: Roboto Light;
font-size: 30px;
}
h3 {
font-size: 2.5vh;
}
h4 {
font-size: 13px;
}
p {
font-size: 2vh;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
.nav {
font-family: Roboto Light;
height: 40px;
width: 100%;
position: fixed;
background: white;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: black;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #eeeeee;
}
.header {
visibility: hidden;
}
.container {
margin-top: 10%;
margin-left: 20%;
margin-right: 20%;
background: white;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.usericon {
margin-left: 10%;
border-radius: 10%;
width: 176px;
height: 176px;
}
.hire {
background-color: #689f38;
font-family: Roboto;
border-radius: 4px;
border: none;
color: white;
padding: 15px 32px;
outline: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.hire:hover {
background-color: #8bc34a;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.button:active {
background-color: #33691e;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.line {
border-radius: 1px;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 0.5%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
/* GRID OF TWELVE */
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.62%;
}
.span_10_of_12 {
width: 83.25%;
}
.span_9_of_12 {
width: 74.87%;
}
.span_8_of_12 {
width: 66.5%;
}
.span_7_of_12 {
width: 58.12%;
}
.span_6_of_12 {
width: 49.75%;
}
.span_5_of_12 {
width: 41.37%;
}
.span_4_of_12 {
width: 33%;
}
.span_3_of_12 {
width: 24.62%;
}
.span_2_of_12 {
width: 16.25%;
}
.span_1_of_12 {
width: 7.875%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12,
.span_10_of_12,
.span_11_of_12,
.span_12_of_12 {
width: 100%;
}
}
<html>
<head>
<title>
Yogesh Singh
</title>
<meta name="theme-color" content="#4caf50" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
</head>
<body>
<div class="nav">
<nav>
<img src="logo.svg" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
<br>
<div class="header">
</div>
<div class="container">
<!-- Rows are horizontal and Columns are vertical-->
<div class="section group">
<div class="col span_3_of_12" style="margin-top:0; max-width:50%;">
<div class="userinfo">
<img src="large.png" class="usericon" srcset="large.png, medium.png, small.png">
</div>
</div>
<div class="col span_6_of_12" style="margin-top:0; max-width:50%;">
<h2>Yogesh Singh</h2>
<h4>cyogesh56#gmail.com</h4>
<p><b style="border: 0.5px solid black;">21</b>
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_10" style="float:right; margin-right:3%;">
<center>
<button class="hire" type="submit" href="http://about.me/cy56">Hire</button>
</center>
</div>
</div>
<hr class="line" style="margin-left:3%; margin-right:3%;">
</body>
</html>
Related
I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
Sorry for the vague title , i'm fairly new to CSS and I have a problem with aligning a scroll box exactly to the right of another element
my page looks like this now:
I want it to look like this (i did some editing):
here is my html code and css styling of the boxes:
.center {
margin: auto;
width: 60%;
padding: 10px;
font-family: Helvetica;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>
EDIT: added CSS file some styles in the css files aren't related to this example page , I just made this example page out from bigger page for clarifying purposes
I've added display: inline-block; / removed padding: 10px; to your .center css to achieve the desired result.
.center {
margin: auto;
width: 60%;
font-family: Helvetica;
display: inline-block;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>
I have a two-columned div element that I need to have at the bottom of the page to act as a footer. The problem is I have tried using position:fixed and bottom:0 to make the element appear at the bottom. This works but only brings one of the #column divs down to the bottom, the other disappears. I would appreciate any assistance.
Code:
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019.
-->
<html lang="en-AU">
<head>
<title>Contact Us — Macleay Netball Association</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="../style.css" type="text/css">
<!-- Internal Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- External Font Stylesheet -->
<link rel="shortcut icon" href="../Assets/Img/mnaHeader.png">
<!-- Tab Browser Icon (Favicon) -->
</head>
<body>
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
</body>
</html>
Attached are some images if I put position:fixed bottom:0 in the #column CSS Code. Only Column 2 goes down, 1 is hidden.
The best way to achieve this having responsiveness in mind and easier manipulation on different screen sizes is wrapping the two div elements in another div that you will position fixed on the bottom and then adjusting the two divs to take 50% of its parent. You've done half of this job by putting the divs into a .row wrapper.
The best solution would probably be using flex to adjust the divs in their parent wrapper like this:
Plus, you can not use the same id twice as it is in your example.
<div class="row">
<div>1</div>
<div>2</div>
</div>
<style>
.row {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
}
.row > div {
flex: 1;
}
</style>
Then on mobile devices you can just change the flex direction and the footer will become one-columned instead of two-columned. Like this:
<style>
#media only screen and (max-width: 768px) {
.row {
flex-direction: column;
}
}
</style>
Add an id to the element you want as a footer, remove the class and use the css below to style the element.
#footer {
clear: both;
}
<div id="footer">
<div id="column">1</div>
<div id="column">2</div>
</div> <!-- End of Footer -->
Both 1 and 2 are fixed to the bottom. Only the float: left has no effect here and they are at the exactly same position. The 2 is in front of 1 and latter is not visible behind 2
Do this instead.
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* ~ Copyright (c) Macleay Netball Association (made by Tom Carpenter for Year 11 IPT Assessment Task #2.) 2019. */
html>body {
background: none;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
/* Trebuchet MS as main font throughout website, sans-serif acting as a backup */
}
#wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
position: absolute;
background: #1B315E;
}
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
/* Alignment of DropDown Navigation Menu and Slideshow */
}
.navigation {
background: #444;
overflow: hidden;
top: 0;
}
.menuDropDown {
overflow: hidden;
float: left;
}
.menuDropDown>#menuButton {
font-size: 12px;
padding: 16px 16px;
/* Will result in final height of navigation */
margin: 0;
outline: none;
border: none;
font: inherit;
background: inherit;
color: #FFF;
}
#menuButton:hover,
.navigation>.menuDropDown:hover>#menuButton {
border: none;
outline: none;
background: #666;
color: #1B315E;
}
.menuDropDown:hover>.menuContent {
display: block;
}
.menuContent {
display: none;
position: absolute;
background: none;
width: 100%;
left: 0;
max-height: 85vh;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.menuRow:after {
display: table;
clear: both;
content: "";
}
.menuColumn {
width: 25%;
height: 100px;
overflow-y: auto;
padding: 5px;
float: left;
background: #666;
}
.menuColumn>a {
float: none;
display: block;
text-align: left;
text-decoration: none;
font-size: 14px;
padding: 8px;
color: #1B315E;
}
.menuColumn>a.current {
background: #777;
}
.menuColumn>a:hover {
background: #888;
}
.logo {
float: right;
padding-right: 10px;
width: 60px;
height: 50px;
}
.main {
width: 100%;
height: calc(100vh - 43px);
float: left;
background: none;
position: absolute;
overflow: auto;
padding: 8px;
}
.mainHeader {
color: #FFF;
text-align: center;
}
.mainImg {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.mainBody {
color: #FFF;
padding: 8px;
}
.row:after {
content: "";
clear: both;
display: table;
}
.column {
float: left;
width: 33.33%;
padding: 8px;
}
#column {
float: left;
width: 50%;
padding: 8px;
background: #888;
bottom: 0;
}
.sponsers {
float: left;
width: 20%;
padding: 8px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.sponsers:hover {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
.slideshow {
/* Slideshow Container containing Images, Sliders and Captions */
position: relative;
margin: auto;
max-width: 1000px;
}
.slides {
display: none;
}
.slideshowImages {
width: 100%;
}
.slideButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #888;
color: #FFF;
border: none;
cursor: pointer;
padding: 16px 32px;
font-size: 18px;
text-align: center;
border-radius: 10px;
font-weight: bold;
}
.mnaHeader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.slideButton:hover {
background: #666;
}
.previous,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #FFF;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
table {
width: 100%;
font-size: 16px;
color: #FFF;
}
.tableCaption {
font-weight: bold;
font-size: 18px;
color: #33CC33;
}
table,
th,
td {
border-collapse: collapse;
border: 2px solid #888;
}
th,
td {
padding: 8px;
text-align: left;
}
#headerTable {
width: 33.33%;
background: #888;
font-size: 18px;
color: #33CC33;
}
.linkProp {
color: #FFF;
text-decoration: underline;
}
.newsPanel {
width: 100%;
background: #888;
height: 135px;
}
.imgNewsPreview {
width: 215px;
height: 135px;
padding: 4px;
float: left;
}
.newsHeaderPreview {
color: #FFF;
margin-top: 0px;
}
.newsBodyPreview {
color: #FFF;
margin-top: -12px;
}
.caption {
color: #33CC33;
text-align: center;
position: absolute;
font-size: 20px;
width: 100%;
padding: 8px 12px;
bottom: 16px;
}
.collapsible {
background: #888;
color: #FFF;
font-weight: bold;
width: 100%;
padding: 18px;
cursor: pointer;
font-size: 16px;
outline: none;
border: none;
text-align: left;
}
.active,
.collapsible:hover {
background: #666;
}
.collapsible:after {
content: '\002B';
color: #FFF;
font-weight: bold;
float: right;
margin-left: 4px;
}
.active:after {
content: '\2212';
}
.contentCollapsible {
padding: 0px 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background: #F8F8F8;
}
.fade {
-webkit-animation-name: fade;
/* To work on Safari (Apple) */
-webkit-animation-duration: 1s;
/* To work on Safari (Apple) */
animation-name: fade;
animation-duration: 1s;
}
.buttonReturn {
position: absolute;
margin-left: 20px;
margin-top: 20px;
background: #888;
color: #FFF;
border: none;
cursor: pointer;
font-size: 36px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
.videoProp {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height: 400px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#-webkit-keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media screen and (max-width: 600px) {
/* Stacks navigation menu acting for the site to be responsive */
.menuColumn {
width: 100%;
height: auto;
}
}
#media screen and (max-width: 800px) {
/* Stacks Image Header on Top - acting as responsive */
.column,
#column {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Responsive Sponser Images */
.sponsers {
width: 33.33%;
}
}
#media screen and (max-width: 800px) {
/* Increases video resolution as screen reduces */
.videoProp {
width: 100%;
}
}
#media screen and (max-width: 600px) {
/* Reduces font-size as screen resolution lowers */
.newsBodyPreview {
font-size: 14px;
}
}
#media screen and (max-width: 300px) {
/* Reduces font-sizes within the slideshow <div> */
.previous,
.next,
.caption {
font-size: 14px;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="wrapper">
<div class="navigation">
<div class="menuDropDown">
<button id="menuButton" title="Navigation Menu"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn">
<a title="Home" href="../index.html"><i class="fas fa-home"></i> Home</a>
<a title="Association Contacts" href="contacts.html"><i class="fas fa-address-book"></i> Association Contacts</a>
</div>
<div class="menuColumn">
<a title="Weekly Draw" href="weekly-draw.html"><i class="fas fa-user-friends"></i> Weekly Draw</a>
<a title="News" href="#"><i class="far fa-newspaper"></i> News</a>
</div>
<div class="menuColumn">
<a title="Quick Links" href="links.html"><i class="fas fa-bookmark"></i> Quick Links</a>
<a title="Representative Teams" href="representative-teams.html"><i class="fas fa-certificate"></i> Representative Teams</a>
</div>
<div class="menuColumn">
<a title="Documentation" href="documentation.html"><i class="fas fa-file"></i> Documentation</a>
<a class="current" title="Contact Us" href="contact-us.html"><i class="fas fa-phone"></i> Contact Us</a>
</div>
</div>
</div>
</div>
<img src="../Assets/Img/mnaHeader.png" alt="Macleay Netball Association" title="Macleay Netball Association" class="logo">
<!-- Macleay Netball Association Main Logo -->
</div>
<!-- End of Navigation -->
<div class="main">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3417.0548484369647!2d152.83521681537312!3d-31.080401281517187!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b9ddf84d6da904b%3A0xfc941d1ded8f7a25!2sPam+Guyer+Netball+Centre!5e0!3m2!1sen!2sau!4v1559129788713!5m2!1sen!2sau"
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe>
<!-- Google Maps Embed -->
<br>
<div class="row footer">
<div id="column">1</div>
<div id="column">2</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Main -->
</div>
<!-- End of Wrapper -->
First of all id must be unique for an element, shouldn't set same id on two elements.
When you set position fixed on an element it is positioned relative to viewport, not relative to flow of the page.
Both of your elements have bottom: 0, which is relative to browser window, that's why your first element is covered by the second one (it's not hidden). You can group them in the same parent and position the parent, so your elements are stacked as expected. Take a look at the following code:
body {
min-height: 200vh;
}
#column {
display: block;
padding 15px;
width: 100%;
position: fixed;
bottom: 0;
background: #e5e5e5;
}
#column div {
display: block;
padding: 10px;
width: 100%;
background: #9b009b;
color: #fff;
margin-bottom: 10px;
}
<div id="column">
<div>first col</div>
<div>second col</div>
</div>
I've tried finding a solution to my problem but to no avail.
I have a website created using media queries. In this project I can't use anything else besides pure HTML and CSS, that's why in order to keep the design clean, I hide some divs on certain widths (I'm referring to the 'play' button in the upper right corner, for instance).
Reproducing the problem:
Resize the window, so that the 'play' button disappears.
Go back to the initial width.
Unfortunately the problem occurs randomly, sometimes everything is perfect, sometimes it happens every single time. I've been able to reproduce it using both Safari 9.0.1 and Google Chrome 46.0.2490.86 running on OS X Yosemite 10.11.1.
Please find images explaining the issue below:
How it's supposed to look
How it looks upon resizing back
Thank you in advance for any help!
Code:
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>
just move your "play" div inside "artist-album"
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>
So I'm building a site and I want to have little tabs on the right hand side that will change the content on the main page without having to refresh the entire page, like an embedded page within the main page. I am working from a template (HTML and CS) and trying to modify the existing content. In the code you can notice that there is an ordered list which defines the buttons (Like Homepage and etc) and when hovered over they change background and look fancy, but they don't actually do anything. I've been reading up about how to make them change the page (by following a link) but I am confused and can't figure out how to do it. I was hoping you guys could help me. I'm very noobish to HTML and CSS and just trying to put something together and learn from example while also building a private site. Thank you for your help in advance!
INDEX.HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>/rootbox</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Rootbox</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>Distros</li>
<li>Wifi</li>
<li>Tools</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="banner">
<div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
</div>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post">
<h2 class="title">Welcome to /rootbox</h2>
<div style="clear: both;"> </div>
<div class="entry">
<p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
</br></br>
This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go here.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010#gmail.com.
</p>
</div>
</div>
</div>
</div>
<!-- end #content -->
</div>
<div id="footer">
<p>Copyright (c) 2012. All rights reserved. Design by FCT</p>
</div>
<!-- end #footer -->
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
background: #050505 url(images/img01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5B5B5B;
}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: normal;
font-family: 'Oswald', sans-serif;
font-weight: 200;
color: #222222;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
color: #5E5E5E;
}
a:hover {
}
#wrapper {
background: #FFFFFF url(images/img05.jpg) repeat;
}
.container {
width: 1000px;
margin: 0px auto;
}
/* Header */
#header-wrapper {
overflow: hidden;
}
#header {
width: 1000px;
height: 150px;
margin: 0 auto;
padding: 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 300px;
margin: 0;
padding: 0;
color: #FFFFFF;
}
#logo h1, #logo p {
}
#logo h1 {
line-height: 120px;
letter-spacing: -2px;
font-size: 3.8em;
}
#logo h1 a {
color: #1F1F1F;
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}
#logo p {
margin: 0;
padding: 0px 0 0 0px;
letter-spacing: -1px;
font: normal 18px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #8E8E8E;
}
#logo p a {
color: #8E8E8E;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #000000;
}
/* Splash */
#splash {
width: 960px;
height: 300px;
margin: 0px auto;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #E7EBED;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: right;
margin: 0;
padding: 20px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: right;
}
#menu a {
display: block;
line-height: 100px;
margin-right: 1px;
padding: 0px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 300;
color: #1F1F1F;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: url(images/img01.jpg) repeat;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 1000px;
margin: 0 auto;
padding: 30px 0px;
}
/* Content */
#content {
padding: 0px 0px 0px 0px;
}
.post {
overflow: hidden;
margin-bottom: 40px;
border-bottom: 1px solid #E7EBED;
}
.post .title {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
}
.post .title a {
border: none;
text-decoration: none;
color: #222222;
}
.post .meta {
margin-bottom: 30px;
padding: 10px 0px 0px 0px;
text-align: left;
font-family: 'Abel', sans-serif;
font-size: 16px;
font-weight: 300;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 40px 0px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
margin-right: 10px;
background: #222222;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
.comments {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
background: #222222;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
/* Sidebar */
#sidebar {
float: left;
width: 270px;
margin: 0px;
padding: 30px 0px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 40px;
border-bottom: 1px solid #E7EBED;
margin: 0px 0px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 20px;
background: url(images/img04.jpg) no-repeat left 50%;
}
#sidebar h2 {
height: 38px;
padding: 0px 0px 30px 0px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #222222;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Three Column Footer Content */
#footer-content {
overflow: hidden;
width: 1000px;
margin: 0px auto;
color: #D6E2F0;
}
#footer-content a {
color: #92A9B6;
}
#footer-bg {
overflow: hidden;
padding: 30px 0px;
background: #E8E8E8;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -1px;
font-size: 26px;
color: #262626;
}
#footer-content #fbox1 {
float: left;
width: 300px;
margin-right: 50px;
}
#footer-content #fbox2 {
float: left;
width: 300px;
}
#footer-content #fbox3 {
float: right;
width: 300px;
}
#footer-content a {
}
#column1 {
float: left;
width: 290px;
margin-right: 30px;
}
#column2 {
float: left;
width: 280px;
}
#column3 {
float: right;
width: 260px;
}
/* Footer */
#footer {
height: 140px;
margin: 0 auto;
padding: 50px 0 15px 0;
font-family: 'Abel', sans-serif;
}
#footer p {
margin: 0;
padding-top: 10px;
letter-spacing: 1px;
line-height: normal;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #5E5E5E;
}
#footer a {
color: #5E5E5E;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E7EBED;
border-bottom: 1px solid #E7EBED;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
text-transform: lowercase;
font-size: 34px;
color: #345E9B;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
text-transform: lowercase;
font-size: 30px;
color: #FFFFFF;
}
#banner {
margin: 0px auto;
width: 1000px;
height: 340px;
background: url(images/img03.png) no-repeat left bottom;
}
#banner .content {
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 a {
color: #7F7F7F;
}
<script type='text/javascript'>
$(document).ready(function() {
$('#menu #tab1').on('mouseover', function () {
$('#page').show();
$('#page2,#page3,#page4,#page5').hide();
});
$('#menu #tab2').on('mouseover', function () {
$('#page2').show();
$('#page,#page3,#page4,#page5').hide();
});
$('#menu #tab3').on('mouseover', function () {
$('#page3').show();
$('#page,#page2,#page4,#page5').hide();
});
$('#menu #tab4').on('mouseover', function () {
$('#page4').show();
$('#page,#page2,#page3,#page5').hide();
});
$('#menu #tab5').on('mouseover', function () {
$('#page5').show();
$('#page,#page2,#page3,#page4').hide();
});
});
</script>
Try this on your script and html..
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Rootbox</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item" id="tab1">Homepage</li>
<li id="tab2">Distros</li>
<li id="tab3">Wifi</li>
<li id="tab4">Tools</li>
<li id="tab5">Contact</li>
</ul>
</div>
</div>
<div id="banner">
<div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
</div>
</div>
<!-- end #header -->
<div id="page">
<div class="content">
<div class="post">
<h2 class="title">Welcome to /rootbox</h2>
<div style="clear: both;"> </div>
<div class="entry">
<p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
</br></br>
This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go here.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010#gmail.com.
</p>
</div>
</div>
</div>
</div>
<div id="page2">
<div class="content">
<div class="post">
<h2 class="title">page2</h2>
</div>
</div>
</div>
<div id="page3">
<div class="content">
<div class="post">
<h2 class="title">page3</h2>
</div>
</div>
</div>
<div id="page4">
<div class="content">
<div class="post">
<h2 class="title">page4</h2>
</div>
</div>
</div>
<div id="page5">
<div class="content">
<div class="post">
<h2 class="title">page5</h2>
</div>
</div>
</div>
</div>
Add this to your style..
#page2, #page3, #page4, #page5{
display:none;
width: 1000px;
margin: 0 auto;
padding: 30px 0px;
}
note:change the #content to class type..
If i were you, i would use css property
display: none;
on the elements that you are hiding initially, then use jquery's
.toggle()
method to fade in the elements when the user clicks the link. As in
$('.target').toggle();
Where target is the name of your div id.
IF you are looking for a way to load content on mouseover, here is what I would suggest:
Use a little bit o' jQuery and AJAX:
$("#menu a").on("mouseover",function(){
//Get url of link
var url = $(this).attr('href');
//Perform ajax call to said link
$.ajax(
{
url:"/echo/json",
success:function(data){
//USED FOR MOCKING PURPOSES ONLY
data = exampleContent;
//Append the data to your content wrapper
$("#page #content").html(data[url]);
}
});
});
Here is a working example
This is a fancier version with fading. I call that a splash of awesome