I've made a dropdown menu, but now it's behind another div. I don't know how this happened and I've never had it before. Please help how I can fix this and that the dropdown menu isn't behind some text.
/* -------------
Header
------------- */
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
margin: 0 auto auto;
width: 100%;
background: #DADADA;
overflow-y: scroll;
}
#header {
background: linear-gradient(#4CAE97, #378171);
width: 100%;
height: 60px;
border-bottom: 1px solid black;
}
#header_text {
background-color: transparent;
font-size: 40px;
color: #e89696;
text-align: center;
text-shadow: -2px 0 #6a7e89, 0 2px #6a7e89, 2px 0 #6a7e89, 0 -2px #6a7e89;
}
/* ------------- */
/* Navigation */
/* ------------- */
#ul-nav {
list-style-type: none;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
width: 600px;
height: 50px;
}
.nav-item {
margin-left: 10px;
margin-right: 10px;
width: 170px;
text-align: center;
float: left;
padding: 0px;
}
.nav-a {
border: 1px solid black;
border-top: 0px;
border-radius: 0px 0px 10px 10px;
color: black;
background: linear-gradient(#FFADAD, #d38787);
text-decoration: none;
height: 100%;
width: 100%;
padding: 7px;
display: block;
}
.nav-a:hover {
background: linear-gradient(#d78e8e, #c67f7f);
height: 100%;
width: 100%;
margin: 0px;
display: block;
}
#nav-main:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-po:hover {
border-radius: 10px 10px 10px 10px;
}
#nav-contact:hover {
border-radius: 10px 10px 10px 10px;
}
/* ------------- */
/* Dropdown menu */
/* ------------- */
#nav-po-ul:hover ul {
display: block;
}
#nav-po-ul ul {
display: none;
position: absolute;
background: #d78e8e;
}
#nav-po-ul ul li {
display: block;
list-style-type: none;
width: 170px;
}
#nav-po-ul ul li a:visited {
color: black;
}
/* ------------- */
/* Container */
/* ------------- */
#container {
/*Vorm*/
height: 600px;
width: 600px;
margin: 50px auto 0px;
/*Border*/
border: 1px solid #000000;
border-radius: 10px;
/*Background*/
background: #f9f9f9;
/*Padding*/
padding-left: 200px;
padding-right: 50px;
padding-top: 10px;
}
#container_header {
position: absolute;
width: 900px;
}
#container_header_text {
width: 500px;
}
#container_header_hr {
width: 500px;
margin-left: -20px;
}
#container_text {
margin-top: 50px;
width: 450px;
}
/*Zet banaan op goede plek en formaat*/
#banaan {
width: 200px;
margin-left: 280px;
}
/*Laat de banaan draaien*/
#banaan:active {
transform: rotate(-180deg);
}
<!DOCTYPE html>
<title>Informatica → Jonathan</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<header id="header">
<h1 id="header_text">Jonathan's website</h1>
</header>
<nav>
<ul id="ul-nav">
<li class="nav-item">
<a class="nav-a" id="nav-main" href="index.html">Home</a>
</li>
<li class="nav-item" id="nav-po-ul">
<a class="nav-a" id="nav-po" href="#">Opdrachten</a>
<!-- Dropdown menu -->
<ul>
<li>
Test
</li>
<li>
Test
</li>
<li>
Test
</li>
</ul>
</li>
<!-- Eind dropdown menu -->
</li>
<!-- End test -->
<li class="nav-item">
<a class="nav-a" id="nav-contact" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<main>
<div id="container">
<header id="container_header">
<h1 id="container_header_text">Welkom op mijn Website!</h1>
<hr id="container_header_hr"/>
</header>
<div id="container_text">
<p class="text">Ga naar één van mijn po's of ga helemaal niks doen</p>
<p class="text">Als je kiest voor de optie niks doen heb ik nog een banaan hier onder voor je, ga daar maar mee spelen.</p>
</div>
<img id="banaan" src="img/banana.png" title=""/>
</div>
</main>
</body>
Modify the css adjust z index and position It will work.
#ul-nav {
list-style-type: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5);left: 50%;
right: 50%;
transform: translate(-50%, 0px); /*Zorgt er voor dat hij precies in het midden is*/
}
This is because you are using absolute positioning for your container.
#container_header {
position: absolute;
width: 900px;
}
If you remove position: absolute you'll see that the drop down behaves as expected.
Related
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
i am making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.
I want to make a responsive menu with only html and css , no Javascript.
I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo">
</div>
<div class="facebook" class="cfx"></div>
<img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook">
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de facebookpagina.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
#media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
It would make more sense to use a responsive framework, such as Bootstrap, or Foundation.
Here is a simplistic example for a responsive navigation menu which utilises bootstrap.
Responsive navigation bar Preview
Responsive navigation bar Download
You have this:
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (i.e. make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...
I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>
<style type="text/css">
body
{
background-image: url(img/backgroundimg.png);
background-repeat: repeat-x;
/*background-color:white;*/
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
}
#header
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 47px;
background-image: url(img/headerimg.png);
}
#headerlogo
{
position: absolute;
top: 0;
width: 201px;
height: 118px;
background-image: url(img/headerlogo_padding.png);
}
#header-nav-menu
{
position: relative;
left: 580px;
top: 0px;
width: 400px;
list-style-type: none;
}
.nav-button-header-menu-1
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 125px;
}
.nav-button-header-menu-2
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 104px;
}
.nav-button-header-menu-3
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 105px;
}
.nav-button-header-menu-1:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-2:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-3:hover
{
color: #d4d3d2;
}
#main-nav-container
{
width: 197px;
height: 500px;
float: left;
margin-top: 95px;
}
#mainnav
{
position: relative;
top: 0px;
left: 0px;
list-style-type: none;
margin: 0;
padding-left: 8px;
}
.navbutton-red-top
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black-bottom
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red-top:hover
{
background: #e91101;
}
.navbutton-red:hover
{
background: #e91101;
}
.navbutton-black:hover
{
background: #2c2b2b;
}
.navbutton-black-bottom:hover
{
background: #2c2b2b;
}
#content
{
background-color: white;
width: 1024px;
float: left;
box-shadow: 0px 3px 20px #515050;
}
#rotating-item-wrapper
{
position: relative;
margin-left: 240px;
margin-top: 20px;
padding: 150px;
}
.rotating-item
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#placeholderdiv
{
padding-left: 40px;
padding-top: 10px;
}
#slideshow
{
padding-left: 40px;
padding-top: 10px;
}
#video1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
.stats-offense
{
padding-left: 10px;
padding-top: 10px;
float: left;
}
#events1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
#rotating-item-wrapper-2
{
position: relative;
left: 455px;
top: 281px;
}
.rotating-item-2
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#rotating-item-wrapper-3
{
position: relative;
left: 240px;
top: 532px;
padding: 300px;
}
.rotating-item-3
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
.stats-defense
{
position: relative;
left: 766px;
top: -68px;
overflow: auto;
padding-bottom: 206px;
}
#rotating-item-wrapper-4
{
position: relative;
left: 240px;
top: -260px;
padding: 35px;
}
.rotating-item-4
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#footer-home
{
position: absolute;
bottom: -600px;
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#footer-nav-menu-left
{
position: absolute;
left: 0px;
list-style-type: none;
margin-left: 430px;
}
#footer-nav-menu-right
{
position: absolute;
list-style-type: none;
margin-left: 550px;
}
.nav-button-footer
{
font-family: Calibri;
color: white;
text-decoration: none;
}
.nav-button-footer:hover
{
color: #c5c5c4;
}
#SocialMedia
{
font-family: Calibri;
color: white;
}
#Facebook-icon
{
}
#Twitter-icon
{
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="headerlogo"></div>
<ul id="header-nav-menu">
<li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
<li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
<li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register
League</a></li>
</ul>
<div id="content">
<div id="main-nav-container">
<ul id="mainnav">
<li><a class="navbutton-red-top" href="#stats">STATS</a></li>
<li><a class="navbutton-red" href="#stats">EVENTS</a></li>
<li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
<li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
<li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
<li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
<li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>
</li>
</ul>
</div>
<div id="rotating-item-wrapper">
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
</div>
<div id="video1">
<img src="img/ContentArea1/Video/video1img.png" />
</div>
<div class="stats-offense">
<img src="img/ContentArea1/Stats/stats1img.png" />
</div>
<div id="events1">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-2">
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
</div>
<div id="rotating-item-wrapper-3">
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
</div>
<div class="stats-defense">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-4">
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png"
/>
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png"
/>
</div>
</div>
<div id="footer-home">
<ul id="footer-nav-menu-left">
<li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a>
</li>
</ul>
<ul id="footer-nav-menu-right">
<li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
<li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
</ul>
<div id="SocialMedia">Follow Us</div>
<div id="Facebook-icon">
<img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
<div id="Twitter-icon">
<img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
<div id="Instagram-icon">
<img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
<div id="YouTube-icon">
<img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>
</div>
</div>
</body>
</html>
Click the link below to see how it currently looks:
http://www.micre8tivegroup.com/default.html
As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:
The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.
Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).
The changes that I made:
Removed the position absolute for the header and footer (or changed to position:relative)
Restructured the page to fit a "more convenient" web page design.
Changed the CSS of some of the elements.
I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.
I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.
Just change your CSS to :
#footer-home
{
position: absolute;
bottom: 0; /* Put it back to 0 */
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
/* Add the code below */
left: 0;
right: 0;
position: absolute;
}
That way, the footer will always stay at the bottom.
I'm making a website (in Dutch) and I work on a laptop with a external screen. The external screen has another resolution then my laptop screen so the site comes out distorted when viewed on the other screen. How do I fix this?
<!DOCTYPE HTML>
<html>
<head> <style type="text/css">
body {
background-color: #D8D8D8;
}
nav {
/* Dit is voor de menubalk bovenin. */
position: relative;
background-color: black;
width: 100%;
height: 110px;
top: -16px;
left: -7.8px;
padding: 8px;
}
.menutekst1 {
position: relative;
width: 150px;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 40px;
font-family: verdana;
}
.menutekst2 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 25px;
font-family: verdana;
}
.menutekst3 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 50px;
font-family: verdana;
}
.menutekst4 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
font-family: verdana;
}
#logo {
/* Dit is voor het logo rechts bovenin. */
position: absolute;
top: 30px;
left: 0px;
width: 300px;
}
#facebook {
/* Dit is voor het Facebook logo rechts bovenin. */
position: absolute;
top: 30px;
left: 320px;
width: 70px;
}
#hometekst {
/* Dit is voor de tekst op de home pagina. */
position: relative;
text-align: center;
font-size: 20px;
font-family: Verdana;
}
#home1 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: left;
left: 0px;
/* left: 40px; */
}
#home2 {
position: relative;
display: inline;
width: 320px;
height: 161px;
float: right;
left: px;
right: 250px; */
}
#home3 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: right;
/* right: 50px; */
}
</style>
</head>
<body>
<nav>
<ul>
<img id="logo" src="Foto/logoalgemeen.png" />
<img id="facebook" src="Foto/facebookalgemeen.png" />
<div class="menutekst4"><li>Contact </li></div>
<div class="menutekst2"><li>Wat doen wij </li></div>
<div class="menutekst3"><li>Producten</li></div>
<div class="menutekst1"><li>Home</li></div>
</ul>
</nav>
<p id="hometekst">
<strong>Welkom bij VE-Screen</strong><br>
Ve-stoffering is een betrouwbare partner, denkt met u mee<br>
en weet wat kwaliteit is of het nu gaat om uw woning, schip<br>
of kantoor.<br>
Onze kracht is de ervaring en goede samenwerking met u<br>
als klant, de interieurbouwers en andere aannemers zodat<br>
alles perfect op elkaar afgestemd en opgeleverd wordt.<br>
Desgewenst incl. stoffering van banken, het leveren van<br>
matrassen en bedtextiel en natuurlijk het plaatsen van ons<br>
eigen Ve-screen zonwering.
</p>
<img id="home3" src="Foto/home3.png" />
<img id="home2" src="Foto/home2.png" />
<img id="home1" src="Foto/home1.png" />
</body>
</html>
I think it's because you're using the width as a percentage, then positioning your buttons absolutely. This means that the 100% value will adapt to the screen size but not the buttons' positions as they will always be absolutely positioned using the same values for each screen.
One solution could be to use one precise width value, another solution would be not to absolutely position the buttons and instead use the floatproperty for the buttons. Hope this helps.