Question posted in 
I have been coding in html and css for all of two months now and thought a good learning exercise would be building a mockup online resume. Obviously I’ve run into some issues that are beyond my current abilities.
So I am using @media with max/min width to resize my website depending on how large the viewport is. I am running into a problem however, that when my screen is larger than 761px, which is my min-width value, my unordered/ordered lists that are in my work experience section are moved to the very top of the screen and overlap my navbar making it useless. I can’t find the issue with them that’s causing this behavior however. Do you guys think you could help me out?
MY HTML BELOW:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">home</a></li>
<!-- will take you back to my resume (front page) -->
<li>
<a href="#">about ￬</a>
<!-- will take you to different sections of the resume page -->
<ul class="hidden">
<li><a href="#interests">Interests</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#education">Education</a></li>
<!-- <li><a href="#">Contact Me</a></li> -->
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<!-- will take you to different pages devoted to different topics -->
<ul class="hidden">
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<!-- GARBAGE DATA FOR TESTING -->
<div class="content-wrap">
<img class="profile-img col-narrow" src="images/coffeephoto3-resize.jpg" alt="Raymond Spencer Norton / October 2017">
<div class="col-wide">
<h1 class="title">Raymond Norton</h1>
<h2>Web/Game Developer + Coder</h2>
<p class="no-wrap-text"> As a Full-Stack Web/Game developer I specialize in exceeding all front and back-end
requirements for developing scalable and adaptable applications and games for my customers.<p/>
</div>
</div>
</header>
<main>
<!-- // Start of interests block -->
<section id="interests" class="interests">
<div class="content-wrap">
<h2> My Interests </h2>
<h3> Web Design </h3>
<p> REMOVED CAUSE NOT RELEVANT /p>
<h3> Programming </h3>
<p> REMOVED CAUSE NOT RELEVANT
</p>
<h3> Game Development </h3>
<p> </p>
<!-- // end of interests block -->
</div>
</section>
<!-- // Work Experience -->
<section id="work" class="work">
<div class="content-wrap">
<h2>Work Experience</h2>
<!-- Job Details 1: -->
<div class="col-narrow">
<h3>Front-end Website Developer</h3>
<p class="uppercase">Independent / Freelance </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>Provides various front end related services ranging from Website development work,
design consultations, character modelling and animation, scripting in Java, C++ or C# and
game development in Unity and the Unreal Game Engines.</p>
<p>Key Qualifications:</p>
<ul>
<li>Front-end web development for mobile and desktop applications utilizing HTML5, CSS3, WordPress, Javascript and JQuery</li>
<li>Back-end web development with Javascript, C++, C#, Python </li>
<li>Designing character models in Maya and Blender3D studios.</li>
<li>Game level design in Unity, Unreal engine.</li>
<li>Coding in Visual Studios</li>
</ul>
</div>
<!-- Job Details 2: -->
<div class="col-narrow">
<h3>Indie Game Developer</h3>
<p class="uppercase">Independent </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>I have launched several mobile arcade genre games for IOS and Android.
Some of my most successful game launches include Space-Invaders Reborn(800,000 downloads),
a modern take on a classic arcade game and Traveler(275,000 downloads), an action/adventure
side scrolling game with RPG elements. </p>
<p>Key Qualifications:</p>
<ul>
<li>Successfully launched numerous mobile titles via the IOS App store and Android marketplace.</li>
<li>Developed successful SEO strategies for the launch of my self published titles.</li>
</ul>
</div>
<!-- end of Job Details block. -->
</section>
<!-- // Education section starts-->
<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>
<!-- School details. -->
<h3>COLLEGE, BC</h3>
<p>Second Year General Studies - 2014-2016</p>
<!-- paragraphs . -->
<h3>Lynda.com - Online</h3>
<p>CSS & HTML, Java, C++, C# - 2016-2018</p>
<h3>UNIVERSITY, BC</h3>
<p>Diploma of Game Design - 2018-2019</p>
</div>
<!-- End of school details. -->
</section>
<!-- // Education section ends-->
</main>
<!-- // Footer & contact info -->
<footer id="contact">
<div class="content-wrap">
<h2>Contact me</h2>
<p> Please address all business communications to my email.
<!-- Social media and contacts-->
<div class="contact-info">
<a href="mailto:[email protected]"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Email</span></a>
<a href="https://twitter.com/removed"target="_blank"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Twitter</span></a>
<a href="https://www.linkedin.com/in/removed/"target="_blank"><i class="fa fa-linkedin-square fa-2x"
aria-hidden="true"></i><span class="sr-only">LinkedIn</span></a>
<a href="https://www.facebook.com/removed"target="_blank"><i class="fa fa-facebook-square fa-2x"
aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
</div>
<p>Copyright 2017 by Raymond Norton</p>
</div>
</footer>
</body>
</html>
MY CSS BELOW
ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: fixed;
opacity: 0.80;
}
/* create a horizontal list with spacing */
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/* style for menu links */
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/* hover state for top level links */
li:hover a {
background: #19c589
}
/* style for dropdown links */
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/* hover state for dropdown links */
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/* hide dropdown links until they are needed */
li ul {
display: none;
}
/* make dropdown links vertical */
li ul li {
display: block;
float: none;
}
/* prevent text wrapping */
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/* display dropdown on hover */
ul li a:hover + .hidden, .hidden:hover {
display: block;
position: relative;
/* CHANGE: Absolute to relative */
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/* responsive Styles */
@media screen and (max-width : 760px) {
/* make dropdown links appear inline */
ul {
position: static;
display: none;
}
/* create vertical spacing */
li {
margin-bottom: 1px;
}
/* make all menu links full width */
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
opacity: 0.8;
}
.col-narrow {
width: 30%;
float: left;
padding-right: 20px;
}
.col-wide {
width: 70%;
float: left;
padding-left: 20px;
}
}
@media (min-width: 761px){
header {
text-align: center;
}
.profile-img {
width: 200px;
border-radius: 50%;
}
}
/* NAVIGATION MENU END */
/* ///////////////////////////////////////////////////////////// */
/* Global Styles */
/*----------------------------------*/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Saira Semi Condensed', sans-serif;
margin: 0;
}
h1, h2 {
font-family: 'caveat', cursive;
font-weight: 300;}
h1 {
font-size: 60px;
}
h2 {
font-size: 35px;
margin-top: 0;
}
h3 {
margin: 0;
}
a {
color: #ef233c; /* link color */
}
a:hover {
text-decoration: none;
}
/* content-wrap */
/*----------------------------------*/
.content-wrap {
max-width:1080px; /*90%*/
margin: 0 auto;
padding: 60px 100px; /*35px 25px*/
overflow: hidden; /*auto*/
}
.uppercase {
text-transform: uppercase;
}
/*Download Button styles*/
/*----------------------------------*/
.btn {
text-decoration: none; /*Removes text underline */
background-color: #EF233C;
color: white;
padding: 5px;
display: inline-block;
}
/* Title */
/*----------------------------------*/
.title {
color: white;
}
/* Header & Footer */
/*----------------------------------*/
header, footer {
background: #2b2d42;
color: #8d99ae
}
header {
padding-top: 15px;
position: relative;
text-align: center;
/*is vital for download link position below*/
}
/*header */
/*----------------------------------*/
header h1, header h2{
color: #edf2f4;
margin: 0;
}
.no-wrap-text {
overflow: hidden;
}
/*Prevents the header text paragraph from flowing beneath the image*/
.profile-img {
border-radius: 25%;
float: left;
}
.download {
position: absolute;
bottom: 0;
right: 0;
/* Download controls the download button position */
}
/*footer*/
footer {
text-align: center;
}
.contact-info a {
padding: 8px;
margin: 10px;
display:inline-block;
color: white;
/*Modifies the contact me sections links*/
}
.contact-info a:hover {
color: #4668A5;
/*Highlights the contact info when the cursor is on it for better visability*/
}
/* my Interests*/
/*----------------------------------*/
.interests {
background: #edf2f4;
}
/* Work Experience */
/*----------------------------------*/
.work {
background: #edf2f4;
/*background: linear-gradient(rgba(237, 242, 244, 0.8), rgba(237, 242, 244, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;*/
}
h3 ~ p {
margin: 0;
}
.job-description {
margin-bottom: 20px;
}
.job-description p:first-of-type {
margin-top: 0;
}
/* job-description is only useful once you add additional jobs, with only a single job
it has no apparent affect.*/
/* Education */
/*----------------------------------*/
.education {
/*background: #8d99ae*/
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;
}
p + h3 {
margin-top: 20px;
}
3
Answers
Ivan got it right, I replaced everything important with div containers and it sorted my problem out really quick.
In short, remove line 7 of your CSS:
ul { list-style-type: none; margin: 0; padding: 0; top: 0; left: 0;position: fixed;opacity: 0.80; } ...You can read more about what
positiondoes here, but basically youruls are sticking to the top of the page because of that tag reference.If you haven’t visited it already, W3Schools‘ CSS section is an excellent wealth of information.
Your problem is that you have multiple
ultags and have one style for all of them while some are vertical and some horizontal.Changes on HTML:
I have left the
ulmenu as it is, but changed the other twoultodiv. I also added a container so you can keep the content (the inner<div>s) in place easier, If you like you can remove it.Changes on CSS:
Two classes added at bottom of styles.css to support
container divand eachinner div.NOTE: I have not done a quality check on the rest of the code. I have only solved your current problem.
Try running the code by cliking on
Run code snippetat the bottom of this answer.Here is the code: