I am having an issue with this new website for my local Church. I followed this tutorial to create a burger menu with just HTML and CSS: https://www.youtube.com/watch?v=xMTs8tAapnQ&list=PLu-osytzWPuUXmu5BZTuHNRyMBpZS1bsG&index=4&t=0s
Now after learning how to do it, the issue I am running into is I am trying to put an image in the body under the navigation menus, however, when I make my web resolution smaller and click on the burger menu. It is under the image.
I appreciate any help, I tried to look for it everywhere, or I tried at least. I am new to coding. So thank you for your time spent helping me. I really do appreciate it.
**HTML**
<!DOCTYPE html>
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" contet="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> The Church of Christ </h1>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Contact
About
<span>Members</span>
</div>
</div>
<h2> location </h2>
<img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>
**CSS**
html, body {width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
just remove css clear:right and add float:right
.menu {
margin: 0 30px 0 0;
float: right;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
/* this line changed */
position: relative;
}
.menu {
margin: 0 30px 0 0;
}
/* i advice,that a tag will made bacgraund-color,because when dropdown menu covering image */
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
/* background-color: blue; */
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
Related
This is the CSS and HTML for the nav bar which goes:
menu icon (#image), then main text (.red), then search icon (#search), and the search bar that won't stay up, (input [type=text].
My problem is that the search bar won't stay with the rest of the items despite it still having tons of space. It doesn't want to expand to a width larger than 64.2px and then it decides to stay under the rest of the items.
I've tried all sorts of displays and widths, but this is the only one that keeps it on top and it's too small in my opinion.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
/* this is the css the text box follows */
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
/* This is the css for the nav */
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
width: 60%;
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
/* This one (.red) appears before the search photo and text box */
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
/* menu icon */
#search {
width: 7%;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
/* search image magnifying glass icon everything else after this point is
just part of a dropdown list which i don't think is relevant to the problem */
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si">
<img class="dropbtn" id="image" src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon">
</a>
<div class="dropdown-content">
Home
<br>
Music and Lyric Videos
<br>
Information
<br>
Performances
<br>
Photos
<br>
Song Info
<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li>
<img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search">
</li>
<li>
<input type="text" placeholder="Search...">
</li>
</ul>
I don’t know what style you want, but I tried to make some modifications. Do you want this Style?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
flex-grow: 1;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
/* width: 60%; */
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
#search {
width: 40px;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*
*/
ul>li {
float: left;
}
ul>li:last-child {
width: 30%;
}
input[type=text] {
width: 100%;
}
.fixedWidth {
width: 65px !important;
}
body,
html {
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown fixedWidth">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si"><img class="dropbtn" id="image"
src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon"></a>
<div class="dropdown-content">
Home<br>
Music and Lyric Videos<br>
Information<br>
Performances<br>
Photos<br>
Song Info<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li><img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search"></li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</div>
</body>
This is how my code looks like
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
.leftsidebar a:not(:first-child) {
display: none;
}
.leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.leftsidebar.responsive {
position: relative;
}
.leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
When I resize my site everything stays the same, nothing changes. I changed the lines so many times and nothing changed. Besides this problem everything else I could solve on my own.
My code is from this example. The only difference from the example site is, that my websites navbar is on the left and my logo in in the top navbar. So when I resize it or am on a certain width the menu elements are in the navbar hidden behind a icon.
You where using the .leftsidebar selector (class selector) instead of #leftsidebar the ID selector. The element doesnt have a class so you have to use #leftsidebar
function myFunction() {
var x = document.getElementById("leftsidebar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
padding-top: 5px;
background: #efefef;
color: #000;
font: 10pt/18pt Arial, sans-serif;
border-top: 6px;
}
#navbar {
max-width: 928px;
font-size: 22px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
padding: 10px;
font-size: 2em;
font-weight: bold;
background-color: #4596d8;
margin-bottom: -4px;
}
#content {
display: flex;
max-width: 946px;
background: #FFF;
box-shadow: 0 0 20px #CCC;
border: 1px solid #ccc;
zoom: 1;
margin: 0 auto 10px;
font-size: 2em;
font-weight: bold;
margin-bottom: -4px;
background: #FFF;
}
#leftsidebar {
width: 200px;
border-right: 2px solid #4596d8;
}
#leftsidebar ui a {
display: block;
font-size: 18px;
color: black;
width: 100%;
padding-left: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: 1px solid red rgba(255, 255, 255, .1);
border-bottom: solid 1px;
text-decoration: none;
}
#leftsidebar ui a:hover {
background-color: #4596d8;
}
#maincontent {
width: 728px;
padding: 10px;
padding-top: 5px;
font: 10pt/18pt Arial, sans-serif;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
border-width: 6px;
}
div {
display: block;
}
#container {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
padding: 0;
}
table {
margin-left: 20%;
margin-right: 20%;
border: 1px solid #4596d8;
}
form {
margin-left: 0 auto;
margin-right: 0 auto;
}
#footer {
text-align: center;
margin: 0 auto;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
#media screen and (max-width: 600px) {
#leftsidebar a:not(:first-child) {
display: none;
}
#leftsidebar a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
#leftsidebar.responsive {
position: relative;
}
#leftsidebar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
#navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="navbar">
MySite
</div>
<div id="content">
<div id="leftsidebar">
<ui>
Site1
Site2
Site3
<a href="site4.html" class="w3-bar-item w3-button">Site4/a>
Site5
</ui>
</div>
Your code has a lot of bugs. Firstly the ui (unordered list) has to have li as it children. Anything besides an li as a ui child is a bug. Though you can have your link inside li you cannot have it as child of ui directly. If you put value 0 as border it doesn't work and is a bug. You should value it as none instead of 0 so border: none; the same with background padding and outline it should have a value of none.
Margin cant be both 0 and auto just say auto instead of 0 auto. You should also see some actual code of others. You are using code like english not like computer you have used a lot uneccesary css properties. Watch others coding youtube. You can use padding and margin the best way instead of writing padding left padding top. Just use thus syntax: padding: top right bottom left;
For example padding: 0 9px 0 9px;
For your media queries search on internet and use #media only screen and (max-width: 600px) {} device that has 600 px width like a mobile
Dont use the same value use a different value.
#media only screen and (max-width: 900px) {} this implements on a 900px width device like tablet.
I have this list:
How can I make the list be in line with the top bar, ie. the total width of the list will be 960px just like the top bar?
I don't understand why it isn't working. The size of each of the squares is 159px + 1px for margin, and yet they make a profit from the right that I didn't define.
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2TheGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo_bg">2Tg</div>
</header>
<article id="games">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</article>
</div>
</body>
</html>
Try this
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>
Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}
I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.
You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.