Attempting to put the Nav bar containing Home, Menu, etc on the left of the page, and the rest in the center, and the windingroad.jpg floated to the right of all the text. I am lost in how to split these into multiple columns and continue, any help would be appreciated.
~HTML~
<head>
<meta charset="UTF-8">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" type="text/css" href="javajam.css">
<style>
#nav {
background-color:#999;
width:100px;
padding-top: 10px;
font-weight: bold;
float:left; }
#nav a {text-decoration: none;
padding-bottom: 15px;
a:link; { color: #996633;}
a:visited { color: #ccaa66;}
a:hover { color: #330000;
}
#nav ul { list-style-type: none;}
</style>
</head>
<body>
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House"
width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div id="nav wrapper">
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
<main>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road"
width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</main>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p><a href="#college.edu">
a#college.edu</a>.</p>
</footer>
</body>
</html>
There are many ways to achieve this, but here is one way:
body {
margin: 0;
padding: 0;
}
#navigation {
width: 200px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
background-color: gray;
}
#main {
margin-left: 200px;
padding: 5px;
}
<div id="navigation">
<h1>
<img src="javalogo.gif" alt="JavaJam Coffee House" width="619" height="117">
</h1>
<p>Follow the winding road to JavaJam...</p>
<div>
<ul class="nav">
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</div>
<div id="main">
<div>
<div id="wrapper">
<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" class="floatright">
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
</div>
<p>
12312 Main Street<br>
Mountain Home, CA 93923<br>
1-888-555-5555
</p>
<footer>
<p>Copyright © 2014 Javajam Coffee House</p>
<p>a#college.edu.</p>
</footer>
</div>
Wrap your navigation into one container and your content into another container then apply css to separate split these two containers so it can be left and right.
Also, for your css id attribute it cannot contain more than one word, because this value is unique.
Related
I am a newb here. I have been attempting to fix this code for the past couple days to no avail. I am trying to create a page that is reactive. It was working well before I added media queries and made some other small changes. I currently can not get the images to appear on the schedule and classes pages (#lounge , #mat). I also cannot get the nav bar to no longer be stuck in two columns.
index.html page
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="home">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> welcomes all to experience a yoga practice in a tranquil,<br> peaceful
enviroment.Our studio offers classes at every level, from beginner to <br> advanced. Whether you are new to yoga
or have been practicing for years,<br> our dedicated instructors can modify a practice to help you improve your well-<br>being.
Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear">Path of Light Yoga Studio<br>612 Serenity Way<br>El Dorado, CA 96162
<br><br>
<a id="mobile" href="tell:888-555-555">888-555-5555</a>
<span id="desktop">888-555-5555</span>
</div>
</main>
<br><br>
<br><br>
<footer>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</footer>
</div>
schedule.hmtl
<!DOCTYPE html>
<html lang="en">>
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<head>
<meta name="viewport"
content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<div id="wrapper">
<main>
<div id="loungehero"></div>
<h2>Yoga Schedule</h2>
<p> Mats, blocks and blankets provided. Please arrive 10 minutes before your class begins.
Relax in our Serenity Lounge before or after your class.
</p>
<div id="flow">
<section >
<h3>Monday - Friday</h3>
<ul>
<li>9:00am Gentle Hatha Yoga</li>
<li>10:30am Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
<li>7:00pm Gentle Hatha Yoga</li>
</ul>
</section>
<section >
<h3>Saturday & Sunday </h3>
<ul>
<li>10:30am Gentle Hatha Yoga</li>
<li>Noon Vinyasa Yoga</li>
<li>1:30am Gentle Hatha Yoga</li>
<li>3:00pm Vinyasa Yoga</li>
<li>5:30pm Restorative Yoga</li>
</ul>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
classes.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href =yoga.css>
<title>Path of Light Yoga Studio</title>
<div id="wrapper">
<head>
<meta name="viewport"content="width-device-width,initial-scale=1.0">
</head>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<header class="content">
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id="mathero"></div>
<h2>Yoga Classes</h2>
<div id="flow">
<section>
<h3>Gentle Hatha Yoga</h3>
<p> A 60 minute class of poses and slow movement that focuses on asana(proper alignment
and posture), pranayama (breath work), and guided meditation to foster your mind and body connection.
This class is intended for beginners and anyone wishing a grounded foundation in the practice of yoga.</P>
</section>
<section >
<h3>Vinyasa Yoga</h3>
<p>A 60 minute class that focuses on breath synchronized movement - you will inhale and exhale as you
flow energetically through yoga poses. While intended for intermediate to advanced students,
beginners are welcome to join in this class.</p>
</section>
<section >
<h3>Restorative Yoga</h3>
<p>A 90 minute class that features very slow movement and long poses.Restorative yoga is useful in
relieving stress and fostering a sense of well-being. This clamins, restorative experience is suitable
for students of any level of experience</p>
</section>
</div>
</main>
<br><br>
<footer>
<small><i>Copyright © 2020 Path of Light Yoga Studio<br>
amanda#alcottherr.com
</i>
</small>
</footer>
</div>
yoga.css
* { box-sizing: border-box;}
nav ul {display:flex;
flex-flow:row wrap;
margin:0;
font-size:1.2em;
list-style:none;}
nav li {
width:40%;
padding:0 1em 0 1em;
display:inline;}
nav{position:fixed;
top:0;
left:0;
width:100%;
padding-top:0.5em;
padding-right:0;
margin:0;
text-align:right;
background-color: white;
z-index:9999;}
nav a{display: block;
text-decoration:none;}
nav a:link{color:#3F2860;}
nav a:visited{color:#497777;}
nav a:hover {color: #A26100;}
header {background-color: #40407A;
background-image:url(sunrise.jpg);
background-size:100% 100%;
color:white;
font-size:90%;
margin-top:50px;
min-height:200px;
text-decoration:none;}
header a:link{color:#FFF;text-decoration:none;}
header a:visited{color:#FFF;text-decoration:none;}
header a:hover{color:#EDF5F5;text-decoration:none;}
h1 {text-decoration: none;}
.home {height:20vh;
padding:2em 0 0 10%;}
.content {height:20vh;
padding:2em 0 0 10%;}
#wrapper{background-color: #F5F5F5;
padding:2em;}
body {background-color: #3F2860;
color:#40407A;
font-family: Arial,
'Segoe UI',
Tahoma,
Geneva,
Verdana,
sans-serif;
margin:0}
.studio {font-style: italic;}
#mathero{background-image:url(yogamat.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
#loungehero{background-image:url(yogalounge.jpg);
background-repeat: no-repeat;
background-size:300px ;
display:none;}
section {padding:0 .5em 0 .5em;}
footer {
font-size:0.6em;
font-style: italic;
text-align:center;}
#mobile{ display:inline;}
#desktop{display:none;}
#media (max-width:600px){
nav ul {display:flex;
flex-flow:row nowrap;
justify-content:flex-end;}
nav li { width:7em;}
section{ padding:0 2em 0 2em;}
#mathero{ display:block;
padding-bottom:1em;}
#loungeher0{ display:block;
padding-bottom:1em;}
#flow{display:flex;
flex-flow:row;}
#mobile{display:none;}
#desktop{display:inline;}
}
#media(min-width:1024px){
header {font-size:120%;}
.home {height: 50vh;
padding:5em 0 0 8em;}
.content {height:30vh;
padding:1em 0 0 8em;}
#wrapper {margin:auto;
width:80%;}
}
About your navbar:
You have the width of each li set to 40%, this means the 40% of your window width.
nav ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
}
nav li {
padding:0 1em 0 1em;
}
As for your pictures, the containers #loungeheroand #mathero (if you remove the display:none;) have 0 height.
Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Your UL is being centered, but you just need to give the wrapping div a width else it takes up 100%:
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
width: 300px;
}
ul {
padding: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
I'm trying to put my two lists beside the image that is centered in the middle one on each side but the two lists have to be centered and not all the way right or left.
Thanks in advance.
*Please fullscreen the html snippet.
div.main p {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
div.main h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
text-align: center;
font-size: 36px;
}
div.material {
float: left;
}
div.material h2 {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
}
div.list li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
list-style-type: none;
}
div.materialy {
float: right;
}
div.materialy h2 {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: underline;
}
div.listy li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
text-align: right;
}
div.method p {
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: underline;
font-weight: bold;
}
div.method li {
color: white;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
list-style-type: none;
line-height: 40px;
}
div.skill li {
font-weight: bold;
font-style: italic;
font-size: 18px;
}
div.skill p {
font-style: italic;
text-decoration: none;
font-size: 16px;
color: #F00;
}
div.image img {
display: block;
margin: 0 auto;
}
body {
background-color: blue;
}
div.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font: Arial, Helvetica, sans-serif black;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
border-radius: 5px;
border-bottom: solid black;
border-top: solid black;
border-left: solid black;
border-right: solid black;
background: #09F;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#09F, #9FF);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#09F, #9FF);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#09F, #9FF);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#09F, #9FF);
/* Standard syntax (must be last) */
}
div.nav li {
float: left;
}
div.nav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.nav li a:hover {
background-color: #0FC;
}
<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />
<head>
<title>Tips</title>
</head>
<div class="nav">
<ul>
<li>Home
</li>
<li>Tips
</li>
<li>Learn
</li>
<li>Contact
</li>
</ul>
</div>
<body>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p>
<br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
</div>
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<div class="image">
</br>
</br>
</br>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
<img src="person-drawing.jpg" height="296" width="395"></div>
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
</br>
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
</body>
</html>
Here is the rewritten code:
https://jsfiddle.net/vsjka9r7/
<div class="nav">
<ul>
<li>Home</li>
<li>Tips</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p><br>
Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>
They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.
</p>
</div>
<div class="centerContentController">
<div class="leftList">
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<br>
<br>
<br>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
</div>
<img src="person-drawing.jpg" height="296" width="395" class="materialsImg">
<div class="rightList">
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
<br>
</div>
</div>
<div class="bottomContent">
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:
</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
Does that work for ya?
If not I am here to help :)
What I changed:
I simply created a div container to contain the image and the two unordered list.
I then created a div for each of the unordered list and floated them to the right/left. For the center image I positioned it in the center.
First of all, you have to put all DIV tags inside BODY. Then you have to clean up a little your DIVs. In order not to rewrite the whole HTML code, I would suggest you to use a table for the lists:
<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />
<head>
<title>Tips</title>
</head>
<body>
<div class="nav">
<ul>
<li>Home
</li>
<li>Tips
</li>
<li>Learn
</li>
<li>Contact
</li>
</ul>
</div>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p>
<br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
</div>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center" width="33%">
<div class="material">
<h2>Materials for a beginner or newbie:</h2>
</div>
<div class="list">
<ul>
<li>HB #2 Pencil</li>
<li>Clean white vinyl eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
</ul>
</div>
</td>
<td align="center" width="33%">
<div class="image">
</br>
</br>
</br>
<img src="person-drawing.jpg" height="296" width="395">
</div>
</td>
<td align="center" width="33%">
<div class="materialy">
<h2>Materials for the advanced:</h2>
<div class="listy">
<ul>
<li>Staedtler Design/Drafting Pencil Set</li>
<li>Clean white vinyl eraser</li>
<li>Gum eraser</li>
<li>Kneaded eraser</li>
<li>White printer paper</li>
<li>Good lighting or desk lamp</li>
<li>Blending sticks</li>
<li>0.5/0.7 mechanical pencils</li>
<li>0.5/0.7 mechanical pencil lead</li>
<li>Fine tip liner marker</li>
<li>Adjustable drafting table</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</br>
<div class="method">
<p>Here are some good methods and techniques to practice drawing skills:</p>
<ul>
<div class="skill">
<li>Drawing is a skill</li>
<p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
</div>
<li>Drawing or sketching lightly</li>
<li>Observe your artwork while drawing regularly</li>
<li>Look for basic shapes</li>
<li>Take your time</li>
<li>Use guidelines/structure to form the foundation of the drawing</li>
<li>Use resources if needed</li>
<li>Be consistent</li>
<li>Relax and have fun</li>
<li>Keep practicing constantly</li>
</ul>
</div>
</body>
</html>
I'm writing some html and css to create a webpage. On the left of the page is a nav section. At the top is a header, below which is a 'main' section containing text in various sections, and below that is a footer.
I have managed to get the header and footer to remain fixed as desired and also get the main section to scroll between the header and footer. The links in the nav are supposed to let the user jump to a section of main as required. However, when clicking on introduction, the introduction section gets positioned at the very top of the page (hidden under the header) where as I would like it to jump to its position just below the header. I've tried various combinations of setting top and position:absolute in main but without success. Can anybody help?
The html and css are below:
index.html:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">
<style type="text/css">
</style>
</head>
<body>
<header id="top">
<h1>
<dl>
<dt>
John Doe
</dt>
<dd>
<img src="logo.jpg" alt="Logo" >
</dd>
</dl>
</h1>
</header>
<nav class="navlist">
<ul class="menuitem">
<li>Introduction</li>
<li>Previous Experience</li>
<li>Skills</li>
<li>Courses Taken</li>
<li>Courses Being Taken</li>
<li>Useful Links</li>
<li>Contact</li>
<img src="selfie.jpg" alt="Selfie" >
</ul>
</nav>
<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>
<p>Blah blah blah</p>
<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at
Prodrive,
Lotus Engineering and
Ricardo.
</p>
<p>At Prodrive I did some stuff.</p>
<p>At Lotus I did some stuff.</p>
<p>At Ricardo I did some stuff.</p>
<h2><a id="skills">Skills</a></h2>
<ol>
<li>Awesomeness</li>
<li>Mathematics</li>
<li>Problem Solving</li>
<li>CSS?</li>
</ol>
<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
<li>BEng Degree</li>
<li>Games Programming</li>
<li>Java</li>
<li>Android Programming</li>
</ul>
<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
<ul>
<li><h3>Modules</h3></li>
<li>Apps</li>
<li>Research</li>
<li>Databases</li>
<li>Internet</li>
</ul>
</li>
</ul>
<h2><a id="useful_links">Useful Links</a></h2>
<ul>
<li>
<a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
</li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
<li>Address: xxxx</li>
<li>Telephone: xxxx</li>
<li>Email: <a href="mailto:xxxx#uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
<!-- Horizontal rule and update comment -->
<hr />
<p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>
homepage.css:
body {margin:0; padding:0;}
header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}
h1 {font-family:Helvetica,Arial,sans-serif;
font-size:x-large;
color:blue;
font-style: italic;}
h2 {font-family:Helvetica,Arial,sans-serif;
font-size:medium;
color:#0088FF;
font-style: italic;}
header{ width: 100%;
height: 12vh;
position: fixed;
top: 0;
background: #AAAAAA;
}
#main {
left:6em;
width: 80%;
margin: 13vh 0 6vh 6em;
}
footer{ position: fixed;
width:100%;
height:6vh;
bottom:0;
text-align:center;
background: white;}
p { font-family:Helvetica,Arial;
font-size:x-small;}
a {background-color:yellow}
header a {background-color:inherit}
nav img {max-width:100%;}
ul.menuitem {font-size:small;
margin:0;
padding:1em;}
nav.navlist {width:6em;
position: fixed;
top:12%;
bottom:94%;}
header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}
header dt {
position: absolute;
top: 6vh;
transform: translateY(-50%);
}
It may be necessary for you to reduce the window size of your browser in order to see the issue I've described to ensure that main cannot fit on the screen all at once.
So my banner is in a .wrapper.style1 and I've used a webkit-filter to blur the photo but everything gets blurred the Nav Bar and the information inside the Banner. How could I fix this so only the image is being blurred?
Here is the section of my CSS:
.wrapper {
padding: 6em 0em 4em 0em;
}
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
-webkit-filter: blur(10px);
background-size: cover;
}
.wrapper.style2 {
background: #f2f2f2;
}
.wrapper.style2 .major {
text-align: left !important;
}
.wrapper.style2 .major h2 {
display: block;
margin-bottom: 0.70em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.8em;
font-weight: 400;
}
.wrapper.style2 .major .byline {
letter-spacing: normal;
line-height: 1.6em;
text-transform: capitalize;
font-size: 1.4em;
}
.wrapper.style2 h3 {
display: block;
margin-bottom: 1em;
letter-spacing: 1px;
line-height: 1.4em;
text-transform: uppercase;
font-size: 1.6em;
font-weight: 400;
}
.wrapper.style3 {
padding-bottom: 6em;
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style3 .container {
padding-left: 6em;
padding-right: 6em;
}
.wrapper.style3 p {
font-size: 1.6em;
}
.wrapper.style4 {
background: white;
}
.wrapper.style5 {
background: #82b440;
text-align: center;
color: white;
}
.wrapper.style5 .image {
display: block;
width: 60%;
margin: 0em auto 2em auto;
}
.wrapper.style5 .image img {
border-radius: 50%;
border: 10px solid;
border-color: white;
}
Here is a copy of some of the HTML:
<html>
<head>
<title>NueroEdge | Powered By Anazro</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<script src="js/footage.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="index.html" img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<!-- Nav -->
<nav id="nav">
<ul>
<img src="images/NueroEdgeText.png" alt="NueroEdge" style="width:105px;height:55px">
<li class="active">
Home
<ul>
<li>About Us</li>
<li>Contact Us</li>
</li>
</ul>
<li>Anazro Store</li>
<li>Application</li>
<li>
Roster
<ul>
<li>Call Of Duty</li>
<li>Streaming</li>
<li>Staff</li>
</ul>
</li>
<li>
More...
<ul>
<!--<li>Lorem ipsum dolor</li>-->
<li>
LeaderBoard
<ul>
<li>
Ryan Tarson
<ul>
<li><img src="images/ryantarson.png" alt="TECGaming" style="width:50px;height:50px">Ryan Tarson AKA: TECGaming</li>
<li><Strong>Age:</Strong> 17</li>
<li><Strong>Current Favourite Game:</Strong> Grand Theft Auto V PC</li>
<li>I am Ryan Loves video games, computers and coding specifically Java, He plays really all types of</li>
<li>games from a wide range and is willing to play any games from any genre to. He has a great and</li>
<li>fun personality which would keep you hooked on his stream like it was a drug. Ryan is the type</li>
<li>of streamer that is willing to do anything to keep his fans entertained. He has streamed before </li>
<li>but never streamed seriously but planning to do so. I am the website Programmer as well!</li>
<li>Click the links below and become apart of my life!</li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Kavin I.
<ul>
<li><img src="images/profile.jpeg" alt="NueroEdge" style="width:50px;height:50px">Kavin I. AKA: KaVn Ne</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> Advanced Warefare</li>
<li>Kavin I. AKA KaVn Ne is Co-Founder along Side Ryan Tarson, Kavin loves video games</li>
<li>mostly Call of Duty because that’s all he ever plays. He mostly plays all he</li>
<li>ever plays. He mostly plays competitively and will stream singles matches or just</li>
<li>random hangouts with fans but he would play other games if Call of Duty is down</li>
<li> or someone requests something different. Kavin loves computers and any type of</li>
<li>electronics for some odd reason. Kavin has a unique personality and which could</li>
<li>make you become addicted to watching him play video games BEWARE!</li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Nick Marchitelli
<ul>
<li><img src="images/Praise.jpg" alt="Praise" style="width:50px;height:50px">Nick Marchitelli AKA: Praise</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player and Captain for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the supportive role on the team and also calls most of the shots and plays since he</li>
<li>is captain but everyone has their time to shine if no plays aren’t working.</li>
<li>Hybrid player AR and SMG role.</li>
<li>Currently in 16th place In North America for win on GameBattles</li>
<li>Been Playing Competitive Since COD Ghost</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>UMG Gaming</li>
</div>
</ul>
</li>
<br>
<li>
Luke Pondillo
<ul>
<li><img src="images/profile.jpeg" alt="nueroedge" style="width:50px;height:50px">Luke Pondillo AKA: Flusso</li>
<li><Strong>Age:</Strong> 16</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Objective role on the team he nice on the sticks with his spot on AR skills but</li>
<li>also can use a SMG, which makes him a hybrid player. The kind of player who can step up when </li>
<li>the team needs it.</li>
<li>Been Playing Competitive Since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</ul>
</li>
<br>
<li>
Joseph Balasico
<ul>
<li><img src="images/palm.jpeg" alt="palm" style="width:50px;height:50px">Joseph Balasico AKA: Palm</li>
<li><Strong>Age:</Strong> 15</li>
<li><Strong>Current Favourite Game:</Strong> N/A</li>
<li>Player for NueroEdge Call of Duty eSports Team.</li>
<br>
<li>Usually plays the Slayer role on the team he is known to be getting 30+ kills in every respawn</li>
<li>and He is a hybrid player where he can use an AR and a SMG. His slaying skill itself helps guide </li>
<li>his team to victory.</li>
<li>Like to use an AR and SMG which makes him a Hybrid Player</li>
<li>Been Playing Competitive COD since COD Ghost.</li>
<li>Won a few Online Twitter Tournaments with his team.</li>
<li><Strong>Previous affiliations:</strong></li>
<li>✦<Strong> Spectra eSports</Strong></li>
<li>✦<Strong> Livid eSports</Strong></li>
<div class="row double">
<li>Twitter</li>
<li>YouTube</li>
</div>
</li>
</ul>
</li>
</ul>
<!--<li>Veroeros feugiat</li>-->
</ul>
</li>
</nav>
</div>
</div>
<!-- Banner -->
<<div id="banner">
<section class="container">
<h2>NueroEdge</h2>
<span>NueroEdge Outstanding performance at MLG Event</span>
<p>Looking for more fantastic players for our team!</P>
Sign Up
</section>
</div>
</div>
I've done this a few times before with several different solutions. What I found the most useful is using the ::before selector. You inherit every background-property you specified and apply the filter.
.wrapper.style1 {
padding: 0em;
background: url(../images/mlg.jpg); #222222 no-repeat;
background-size: cover;
}
.wrapper.style1::before {
content = "";
background: inherit;
background-size: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(10px);
}
Sadly, blur doesn't leave sharp edges, so you probably have to zoom in a bit to cover that up.
You can not apply filter to the container div. For that you either call the image using tag or use different container div for image.
Use this stackoverflow question - How to apply a CSS 3 blur filter to a background image