I am trying to put my navigation bar on top of my background image, and I would like to know what is the best and cleanest way to do so using the code below, here is my code:
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
<figure>
<img src="home_coffee_img.jpg" height="100%" width="100%" alt="Coffee Beans" style="height:100%;">
</figure>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8"><!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li><!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>
You can add your the image as a background image using css. Apply it to the element that is wrapping the header and the navigation elements, in this case that would be body.
body {
background-image: url(YOUR_IMAGE_PATH)
}
See the example in the code snippet.
body {
background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681);
}
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8">
<!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li>
<!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>
Related
I have been taking online courses at Udemy and have been struggling with a image slider lesson. I have followed all the steps to make a basic slider. The lesson had me make my banner to have overflow:hidden and then had me go to jquery cycle 2 in order to copy the script links and I did. Then I put my class as "banner cycle-slideshow" just as the lesson instructed me. However it did not make my image slider function. It only stays on the first image. Any help? Here are my codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Users/owner/Desktop/HTML/css/style6.css">
</head>
<body>
<div class="container">
<header>
<div class=left>
<a href="/Users/owner/Desktop/HTML/pages/page-6.html">
<img src="" height="100" width="200" alt="logo"></a>
</div>
<div class="right">
<form>
<input type="search" placeholder="Search...">
<input type="submit" value=">">
</form>
</div>
<div>
</div>
<nav class="main-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Ways to help
<ul class="drop">
<li><a href="https://homeguides.sfgate.com/ecofriendly-mean-
78718.html" target="_blank">Option 1</a></li>
<li><a href="https://www.wheelsforwishes.org/news/live-a-more-
eco-friendly-lifestyle/" target="_blank">Option 2</a></li>
<li><a href="https://money.usnews.com/money/blogs/my-
money/slideshows/ways-to-live-green-on-a-budget" target="_blank">Option 3</a>
</li>
</ul>
</li>
<li>Tell a friend!</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="banner cycle-slideshow">
<img src="" alt="Banner 1">
<img src="" alt="Banner 2">
</section>
<section>
<article>
<main class="push">
<h1 style="color: green;">GO GREEN</h1>
<p>Save the planet by going green. Be eco friendly!
Eco-friendly items and materials are defined as being
not environmentally harmful. These products promote green
living or green manufacturing methods that lessen the amount
or types of resources used. In short, eco-friendly products
help the earth, not cause it harm.</p>
</main>
</article>
</section>
<aside class=beta>
<div>
<h3>Widget</h3>
<ul>
<li>2019</li>
<li><a href="#">2020</li>
<li>2021</li>
</ul>
</div>
</aside>
<hr>
<footer>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="final">
<address>
Written by <a href="mailto:raymondhernandez_4#msn.com">Raymond
Hernandez</a><br>
Visit us at:<br>
<a href="#".com>#.com</a><br>
100, Someplace, Somewhere far. 3495<br>
USA
</address>
</div>
</footer>
<div class="final">
<p><small>Copyright © 2021. All rights reserved.</small></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
The CDN URL you're linking for Cycle2 is wrong.
The file you're linking to is a deleted file, so you can get it from Cloudfare instead:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
How I can use section like block for logo and search? I read a lot of article about semantics technique but unfortunately nowhere I did not find information or examples about it. How I can structure code by block how it does by using
<header>
<section> (instead of div I know it is not correct )
<a href="#">
<img src="images/logotype.png" alt="logo" class="logo">
</a>
</section>
<section class="search">
<span><i class="fa fa-search"></i></span>
<input type="search" placeholder="Srearch here">
</section>
<nav>
<ul>
<li>About</li>
<li>News</li>
<li>Tropic Islands</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header> <!-- header -->
figure img{
display:block;
width:50px
}
header{
display:flex;
align-items:center;
background-color: #ccc
}
<header>
<figure>
<a href="#">
<img src="images/logotype.png" alt="logo" class="logo">
</a>
</figure>
<nav>
Home
About
Contact
About US
</nav>
</header>
This is the best structure I suggest, hope this will helps you
I'm trying to create a webpage using Thymeleaf.Everything is set up right I manage to get into the homepage and then trying to use a link to another page but I get the following error:
"Exception parsing document: template="lor1", line 70 - column 68"
and "lineNumber: 70; columnNumber: 68; Element type "a" must be followed by either attribute specifications, ">" or "/>".
However the homepage is using and is working perfectly.
Here's the code:
<title>League Of Ronnie</title>
<link href="../../../resources/css/style.css"
th:href="#{/resources/css/style.css}" rel="stylesheet" />
</head>
<body>
<div id="background">
<div id="header">
<div>
<div>
<a th:href="#{/}" class="logo"><img th:src="#{/resources/images/logo.png}" alt="" /></a>
<ul>
<li>
home
</li>
<li>
the world
</li>
<li>
the game
</li>
<li>
about
</li>
<li class="selected">
the ronnie
</li>
</ul>
</div>
</div>
</div>
<div id="body">
<div>
<div>
<div class="blog">
<div class="content">
<ul>
<li>
<div class="header">
<b id="a1">Warrior</b><span>STRENGTHSWORDPLATE</span>
</div>
<div class="article">
<img id="im1" src="images/img1.jpg" alt=""/>
<p>
You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.<br/>
read more
</p>
</div>
</li>
</ul>
</div>
<div class="sidebar">
<div>
<span>Classes</span> <span>Servants</span>
</div>
<ul>
<li>
Warrior
<span><a href="2.html
" id="b2">STRENGTH</a>SWORDPLATE</span>
</li>
<li>
Paladin
<span>JUSTICEHAMMERPLATE</span>
</li>
<li>
Assassin
<span>AGILITYDAGGERLEATHER</span>
</li>
<li>
Ranger
<span>FOCUSBOWLEATHER</span>
</li>
<li>
Mage
<span>SPELLPOWERSTAFFCLOTH</span>
</li>
<li>
Priest
<span>SPIRITRELICCLOTH</span>
</li>
<li>
Warlock
<span>CURSESCEPTERCLOTH</span>
</li>
<li>
Warlord
<span>FURYAXEPLATE</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<ul>
<li id="facebook">
facebook
</li>
<li id="twitter">
twitter
</li>
<li id="googleplus">
googleplus
</li>
</ul>
<p>
# copyright 2012. all rights reserved.
</p>
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/resources/lor.js}"></script>
</body>
</html>
Thanks in advance!
Your error comes from a missing space between the href attribute (2.html) and the id attribute (b7).
It should be :
<span>JUSTICEHAMMERPLATE</span>
So i've got a drop-down menu on some elements in the middle of my page. This menu works with purely html and css. Now without any hover the menu items look like this: http://prntscr.com/3es3n8.
With hover however it looks like this: http://prntscr.com/3es3y2.
Now the hover itself works fine and i can style the child elements just fine. My question would be if it was possible for the child element to actually hover over the other items. I know z-index is supposed to do something like this but im not sure how to implement that. I'll try to post as much code as possible but the site is already in ModX.
I'm sorry about all the extra code but the general idea of the situation should be there. http://jsfiddle.net/C8sBp/1/
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten/" title="Kunsmest">
Kunsmest
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">test</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Kunsmest
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Zaden
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Handelsartikelen
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">pietjes eten</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Veevoer
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Diensten
</div>
</li>
</ul>
</div>
</div>
There are a variety of solutions, I've paired back your code a little to make the solution a little clearer, but have a look at this
http://codepen.io/dave_agilepixel/pen/cDtLk
I wouldn't repeat the item, or have the wrapper around the if you can avoid it, if you need the h2 for styling then use css or change the code to something like
<nav>
<ul>
<li><h2>Object</h2></li>
</ul>
</nav>
Also with the icons it might be easier to have those as CSS background images and use padding/background-position to set them in the design.
I hope that helps, in my example I've used position absolute and left to get the sub menu to work, but you could use display:none; or some other methods, if you use a combination of opacity and top then you can also add in css3 transitions to make it look jazzy.
Finally decided to have a look at HTML5 & see what all the fuss is about but have run into confusion with conflicting accounts from all over of what semantic tags to use when and where.
Can anyone tell me if this is semantically correct for HTML5 and whether there should be < figure > tags wrapped around the "Item Images").
Thanks in advance
<div>
<!-- Header/Logo -->
<header>
<div>
<h1 class="hidden">Website name</h1>
<a href="/">
<img id="Logo" src="#" alt="Website name" />
</a>
</div>
<!-- Main site nav -->
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</nav>
</header>
<!-- Item menu -->
<aside>
<ul>
<li>
<h2>ItemMenu1</h2>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</li>
<li>
<h2>ItemMenu2</h2>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</li>
</ul>
</aside>
<!-- Items -->
<section>
<ul>
<li>
<article>
<h2>Item 1</h2>
<img src="#" alt="image of item" />
<p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
<p>Price: $$$$</p>
<p>[Brief descrition..]</p>
</article>
<article>
<h2>Item 2</h2>
<img src="#" alt="image of item" />
<p>Date added: <time datetime="2011-07-30">7/30/2011</time></p>
<p>Price: $$$$</p>
<p>[Brief descrition..]</p>
</article>
</li>
</ul>
<!-- Paging -->
<nav>
<ul>
<li><a>Prev</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>Next</a></li>
</ul>
</nav>
</section>
<footer>
<div>
<p>Copyright...</p>
<!-- Site links etc -->
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>
</footer>
</div>
You're using section incorrectly as you haven't given it a heading. You're using it as a wrapper which is incorrect. A div would do.
<figure> and <figurecaption> are used to represent content who dont fit the context, such as code-cxamples.
They can also be used to provide additional information to a topic or something.
Did you read the definition at whatwg.org?