I'm not too fluent in javascript, so I can't really find any solutions that work for me. I'm trying to align these two elements/divs: the image and the "everything" div to have equal heights, so that my footer fits in. None of the solutions seem to be working. You don't need to pay attention to much of the text or anything. All I need is a solution in how to keep the height of the image the same as the "everything" div. In doing so, I would want the "everything" div not to be sstatic, so it can change according to browser size using the em font values and percentage width/height values. So, basically, the image height should be equal to the "everything" div height without changing the hight of the "everything" div as it would be without the added code. Here is the code :
html {
margin: 0 0;
}
.kewlimage {
z-index: 1;
float: left;
width: 50%;
height: 45.4em;
}
.everything {
width: 50%;
float: left;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: "comic sans ms";
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div>
<img class="kewlimage" src="https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg">
</div>
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
Since you have tagged javascript, here is one js solution:
<script>
img=document.getElementsByClassName('kewlimage')[0];
every=document.getElementsByClassName('everything')[0];
img.style.height=every.offsetHeight+'px';
window.addEventListener('resize', function(event){
img.style.height=every.offsetHeight+'px';
});
</script>
Place this code at the bottom of your page, before closing of body tag. Script simple calculates height of everything div, and apply it to image.
However, nowadays, you can easily get equal blocks/columns heights, using only CSS methods, and by slightly changing your html structure. However, this should work, without modifying anything in your current html/css.
First of all, check out this very helpful website to avoid giving other people eye cancer when they visit your website :-)
Then wrap your content in a holder div, I gave it the class .fullbackground. This class receives a background image with the background-size: 50% cover, which means it will always be 50% of the div's with and will resize to cover the full height. As you don't have a DOM element for the image anymore, you don't need floating, so you can just give .everything a width and margin of 50%.
Here's the same thing in a minimal version:
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
background: #f0f0f0;
}
<div class="fullbackground">
<div class="everything">
<p>start of content</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>end of content</p>
</div>
</div>
<footer>Footer</footer>
And here is your adapted code:
html {
margin: 0 0;
}
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: Verdana;
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div class="fullbackground">
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
<p></p><p></p><p></p><p></p><p></p><p></p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.
Here is my css and html:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Raleway Webfont';
}
body {
margin: 0;
padding: 0;
height: 4000px;
font-size: 16px;
line-height: 1.5;
}
ul, li, h1, h2, p, a, .logo {
font-family: 'Raleway Webfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: black;
font-weight: 200;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
padding-top: 0px;
background: #e5e5e5;
transition:.25s;
z-index: 100;
border-bottom-style: solid;
border-width: 1px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}
.inner {
width: 800px;
position: relative;
margin: 0 auto;
}
nav {
overflow: hidden;
}
nav ul {
float: right;
}
nav li {
display: inline;
float: left;
list-style: none;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 25px 15px;
transition:.25s;
}
nav a:hover {
margin: -8px 0 0 0;
}
nav ul li:first-child a {
background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {
background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {
background:#898989 !important;
}
nav ul li:nth-child(4) a {
background:#727272 !important;
}
nav ul li:nth-child(5) a {
background:#5b5b5b !important;
}
nav ul li:first-child:hover header {
background: #b7b7b7;
}
nav ul li:nth-child(2):hover header {
background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
background: #898989;
}
nav ul li:nth-child(4):hover header {
background: #727272;
}
nav ul li:nth-child(5):hover header {
background: #5b5b5b;
}
.logo {
float: left;
color: #000;
font-size: 30px;
font-weight: 300;
text-decoration: none;
line-height: 70px;
}
section .inner {
padding-top: 125px;
}
p {
padding-top: 25px;
font-weight: 400;
}
h1 {
text-align: center;
}
<header>
<div class="inner">
<div>
<a class="logo" href="Home.html">W </a>
</div>
<nav role='navigation'>
<ul>
<li>ME</li>
<li>CV</li>
<li>RD</li>
<li>AV</li>
<li>RR</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="inner">
<h1>about me</h1>
<p><span> A work in progress.</span>
</p>
</div>
</section>
I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.
Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!
I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):
$('[role=navigation] a').hover(function(){
$(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
$(this).closest('header').css('background-color', '#e5e5e5');
});
https://jsfiddle.net/5d1tvnwh/
Have a problem with the navigation when scrolling down. It puts itself behind the .post class.
Scrolled down:
Not Scrolled down:
jQuery:
var num = $('.header').height();
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed-nav');
$('.wrapper').before($('.menu'));
} else {
$('.menu').removeClass('fixed-nav');
$('.menu-menu-container').prepend($('.menu'));
}
});
CSS:
.post {
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
}
/* Navigation style */
.nav {
margin-top: 20px;
margin: 0 auto;
width: 60%;
}
.nav ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
font-size: 14px;
text-align: center;
background: rgba(255,255,255,0.9);
border-bottom: 1px rgba(0,0,0,0.1) solid;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
text-transform: uppercase;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
URL:
http://www.bradlyspicer.net
Edit:
add z-index for div#header {
}
div#header {
z-index: 999;
}
Your stacking context is broken. Inside of Div#header you have nav#navigation. Outside div#header you have div#wrapper.
You can't have div#wrapper scroll below nav#navigation but above div#header. Any element outside div#wrapper is either above or below div#wrapper and its children (without some significant modifications that change the stacking context).
Stacking order isn't as simple as "Higher Z-Index = On Top". Stacking takes into account the location of the element in the element tree, opacity, positioning, and a number of other factors.
Philip Walton wrote a good article about z-index and stacking.
As for a solution, remove nav#navigation from div#header and put it inside the body, and add "position: absolute;" to the nav#navigation element. The result should look something like this.
<body>
<div id="header">...</div>
<div id="wrapper">...</div>
<nav id="navigation" style="position:absolute;">...</nav>
</body>
I am currently working on a mobile website and I could use some help with its footer.
Here is an image of how its supposed to look:
http://i.stack.imgur.com/alH8M.jpg
It should have the following:
1) the width needs to work on different mobile devices so it cant be fixed
2) the margin to the left of home and to the right of newsletter should be equal
3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple "lines". What im trying to say is, there should be no horizontal scrolling
Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
Thanks in advance to anyone who can help me!
nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }
ul with text alignment to the center and li displayed as inline block.
I think this should handle.
nav{width:100%; display:block;}
nav ul{padding:0px; margin:0px;}
nav ul li{ width:20%; float:left;}
try this
nav ul { list-style-type:none; margin:0; padding:0; }
nav ul li { float:left; padding-left:10px; margin-right:10px; border-left:1px solid #fff; }
nav ul li:first-child { margin-right:0 !important; }
nav ul li a { color:#fff; }
I am not sure this will help you....
But i have done some works. you can resize the window it will display in multiple "lines.
here jsfiddle: http://jsfiddle.net/thilakar/XM2qU/1/
To your curren HTML structure, you can set some CSS to achieve a replica of the provided image:
See this working Fiddle Example!
HTML
<nav>
<ul>
<li>Unternehmen</li>
<li>Kompetenz</li>
<li>Produkte</li>
<li>Partner</li>
<li>News</li>
</ul>
</nav>
CSS
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: blue;
text-align: center;
}
ul {
list-style-type: none;
padding: 12px 0;
width: auto;
margin: 0 auto;
display: block;
}
li {
display: inline-block;
margin: 0;
padding: 0;
}
a {
color: #FFF;
border-left: 1px solid #FFF;
text-decoration: none;
font-family: sans-serif;
padding: 0 8px;
font-size: 12px;
line-height: 17px;
}
li:first-child a {
border-left: 0 none;
}
a:hover {
text-decoration: underline;
}
Preview:
Some relevant links that can help you learn about what is being suggested:
CSS display Property
CSS Lists
CSS Padding
CSS Tutorial, Learning CSS