I have a modal box (CSS) and For some reason I cannot get images in the box to display horizontally, with out messing up the box? when I float the images in the gallery id they leave the modal box?
html
<head>
<title>Design and Development</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Ubuntu+Condensed|Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>PERSON</h1>
<h2>Front-End Design + Development</h2>
</header>
<ul id="menu">
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
<div id="aboutModal" class="modalDialog">
<div> X
<h1>ABOUT</h1>
<img src="images/me.jpg">
<p><strong>Hello!</strong>
<br></p>
</div>
</div>
<div id="workModal" class="modalDialog">
<div> X
<h1>WORK</h1>
<ul id="gallery">
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="images/yogasite.pnghttps://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
</ul>
</div>
</div>
<div id="contactModal" class="modalDialog">
<div> X
<h1>CONTACT</h1>
<br>
<br>I am currently looking for work.</p>
<img src="images/06-magnify-icon-32.png">
</div>
</div>
</body>
heres the fiddle https://jsfiddle.net/cpxd63a1/1/
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>
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>
My two section #wrapper and #stats are both being see as the wrapper by google dev tools. Now this is affecting my development as any changes to the css gets mangled within the two sections.
In google dev tools when i hover over the wrapper content, it shows the div as stats.
I have looked and looked but I cant find anything.
<!DOCTYPE html>
<html>
<head
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/responsive.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="main-header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
<span class="title">We offer garden building such as trellis and fencing, as well as outdoor lighting, water features and much more</span>
<h1> Garden Construction</h1>
<img class="arrow" src="img/arrow.svg" alt="arrow down">
</header>
<div id="wrapper">
<h2>Our Services</h2>
<section>
<ul id="gallery">
<li>
<a href="img/trellisandfence.jpg">
<p>Trellis and Fencing</p>
<img src="img/trellisandfence.jpg">
</a>
</li>
<li>
<a href="img/light.jpg">
<p>Outdoor garden lighting</p>
<img src="img/light.jpg">
</a>
</li>
<li>
<a href="img/gravelretention.jpg">
<p>Gravel renetion system</p>
<img src="img/gravelretention.jpg">
</a>
</li>
<li>
<a href="img/gardenbuilding.jpg">
<p>Outdoor building such as sheds and cabins</p>
<img src="img/gardenbuilding.jpg">
</a>
</li>
<li>
<a href="img/waterfeature.jpg">
<p>Water features - any size, any style</p>
<img src="img/waterfeature.jpg">
</a>
</li>
</ul>
</section>
</div>
<div id="stats">
<ul>
<li>
<h4>We can organise appointments at your convinence</h4>
<img src="img/appointments.png">
</li>
<li>
<h4>We offer free consulations and quotes</h4>
<img src="img/consultation.png">
</li>
<li>
<h4>We are fully licenced and qualifed with over 25 years experience.</h4>
<img src="img/licenced.png">
</li>
<li>
<h4>We have looked untaken multi-million euro projects</h4>
<img src="img/euro.png">
</li>
</ul>
</div>
</body>
</html>
I am trying to do a headbar
the problem is that when I zoom in after a while the list of buttons disappears from screen.
<html>
<head>
<link type="text/css" href="css/css.css" rel="stylesheet">
</head>
<body>
<div id="headbar">
<img src="http://opensource.org/files/osi_symbol.png" style="height:100%;float:left;"/>
<ul>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
</ul>
</div>
<div id="bodypage">
</div>
<div id="footer">
</div>
</body>
CSS code and how the page looks:http://codepen.io/overclock351/pen/qdyoBq
#isherwood was correct.
By removing the overflow:hidden from the #headbar your buttons will show when zoomed in. I got to 500% in Chrome with no problems.
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>