In my title I am trying to have two images on both sides of the text. I have tried a few methods, but none have worked. Here is my live website. I would like to have the icons also automatically resize based on the window size. Any help is greatly appreciated.
Related code here:
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
<p align="middle" class="rusty"> RedstoneGaming </p>
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
position: relative;
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
z-index: 1;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: 0;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom: 5%;
padding-top: 30px;
width: 100%;
border-bottom: thick solid rgba(189, 34, 34, 1);
}
.video-container iframe, .video-container object, .video-container embed {
position: relative;
top:15%;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
height: 100%;
}
.border-right
{
border-right: thick solid rgba(189, 34, 34, 1);
}
.text-center
{
text-align: center;
}
.footer
{
background: #CCCCCC;
position:fixed;
bottom:0px;
height: 50px;
width: 100%;
opacity: .85;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="border-right feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
<div class="footer">vv</div>
</body>
</html>
make p tag inline.
.rusty {
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
display: inline;
}
try this code:
.menu li.current-item {
float:none;
width:100%;
}
just change you code
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->"
to
<div>
<div class="left">
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
</div>
<div class="middle">
RedstoneGaming </p>
</div>
<div class="right">
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</div>
<div class="clearfix"></div>
<style>
.left{
float:left;
}
.middle{
float:left;
}
.right{
float:left;
}
.clearfix{
clear:both;
}
</style>
There are plenty of methods, each width some pros and cons.
If you need maximum possible browser compatibility, use:
Method 1
The markup:
<table>
<tr>
<td><img src="path/to/img"></td>
<td><p>This is text</p></td>
<td><img src="path/to/img"></td>
</tr>
</table>
the CSS:
table{
width: 100%; border: none;
border-spacing: 0;
border-collapse: collapse;
text-align: center
}
table img, table p{
display: inline
}
If you have some flexibility on browser compatiility, you may choose the inline-block method:
Method 2
The markup:
<div class="parent">
<img src="path/to/img"><!--
--><p>This is text</p><!--
--><img src="path/to/img">
</div>
the CSS:
.parent{
text-align: center
}
img, p{
display: inline-block;
vertical-align: middle
}
Related
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
I am making a website and I want, on different displays, for it to look almost the same, if I zoom the margin to be smaller - I think you know what I am trying to say. I am looking at another site to see how it works. You can check it here: http://motika.com.mk/. Try to zoom there. I don't know what the problem is.
This is my code:
<head>
<link rel="stylesheet" href="dodatoci/stilovi/stilovi.css">
<meta charset="utf-8"/>
<title>Услуги | Што се нуди?</title>
</head>
<body>
<div id = "glavendrzac">
<!--<table id = "goretabela">
<tr>
<td style="width:220px;"><img src="dodatoci/sliki/logo.png" id = "logoslika" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></td>
<div class="dropdown">
<td style="width:220px;"><button class = "dropbtn"></button></td>
</div>
</div>
</tr>
</table>-->
<div id = "meni">
<nav>
<ul id = "meninav">
<li><img src="dodatoci/sliki/logo.png" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></li>
<li><div class="dropdown" style="float:left;">
<button class="dropbtn"></button>
<div class="dropdown-content" style="left:0;">
<table id = "tabelamenispusti">
<tr>
<td>
Берово
Битола
Богданци
Валандово
Велес
Виница
Гевгелија
Гостивар
Дебар
</td>
<td>
Делчево
Демир Капија
Демир Хисар
Кавадарци
Кичево
Кочани
Кратово
Крива Паланка
Куманово
</td>
<td>
Крушево
М. Брод
M. Каменица
Неготино
Охрид
Пехчево
Прилеп
Пробиштип
Радовиш
</td>
<td>
Ресен
Свети Николе
<strong>Скопје</strong>
Струга
Струмица
Тетово
Штип
</td>
</tr>
</table>
</div>
</div></li>
</ul>
</nav>
</div>
<div id = "uslugibn">
<img style="width:100%; height: 300px;" src="dodatoci/sliki/banner.png"/>
</div>
<div id = "reklama">
<img src="dodatoci/reklami/setec1.jpg" style = "width:100%;"/>
</div>
</div>
</body>
And this is CSS code:
body{
background-color: #e4e4e4;
margin: 0;
}
#glavendrzac{
margin-left: 10%;
margin-right: 10%;
margin-top: 1em;
background-size: contain;
}
.logoslika:hover{
cursor:text;
}
#goretabela{
border-collapse: collapse;
background-color: #41c2ac;
width: 100%;
}
#goretabela td{
border-collapse: collapse;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
#goretabela td tr{
border-collapse: collapse;
}
.dropbtn {
background-image: url("../sliki/meni.jpg");
width: 220px;
height: 60px;
border: none;
cursor: pointer;
display: inline;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
.dropdown-content a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #51d2bc}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-image: url("../sliki/menihover.jpg");
}
#uslugibn{
background-image: url("../sliki/banner.png");
width: 100%;
height: 300px;
}
#meninav{
background-color: #41c2ac;
height: 60px;
margin: 0;
}
#meninav li{
display: inline-block;
}
#tabelamenispusti{
border: 2px solid #41c2ac;
padding: 0;
margin: 0;
}
#tabelamenispusti a{
width: 150px;
}
#tabelamenispusti td{
padding: 0;
margin: 0;
}
Can you add this code
#main {
max-width: 1278px;
width: 90%;
}
I have this page with a sidebar and I want the content in the sidebar to move down with the page but only if you scroll past it. So If you are at the top of the page it would be at the top of the sidebar but if you are at the bottom it would be at the top of the screen. How would you do that? I tried using position: fixedbut that just moves it with the screen no matter what and I only want it to move if the top reaches it.
Gif of Webpage with sidebar content that has the position fixed:
Here's the CSS of the content:
#content-list {position: fixed;}
#content-list ul {padding: 0px; list-style: none;}
#content-list li { padding-bottom: 25px; }
Here's the HTML of the content:
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<li>Quick Description</li>
<li>Help Menu</li>
</ul>
</nav>
</div>
EDIT
I would like to be able to do this using only CSS/HTML if possible (No javascript etc.)
Full demo:
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0px;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 10%;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
position: fixed;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
The term for this is 'Sticky sidebar', so you want it to always stick to the top of the page when the user scrolls.
There's millions of plugins for it, I'm particularly fond of this one:
DEMO: http://spoiledmilk.com/demos/sticky-sidebar/
This article explains in detail how to implement it and what it does exactly.
As #Manoj says in a comment this can be done using
position: sticky; position: -webkit-sticky;
Sadly this only works in Firefox and Safari (For now, see here for more info). I went with that and for browsers that don't support it I used this simple javascript (Which does not require JQuery and in my opinion creates a "cleaner" look than most complicated sticky sidebars) and anything I wanted to be sticky was of class "sticky"
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
EDIT
To make the script work in IE and Firefox you must use document.documentElement as well as document.body.
Complete Demo:
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 150px;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
top: 0; padding-top:10px;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
I tryed to create a simple dropdown menu, but i dont get it...
I looked at some tutorials now and the position of the submenu is crap. I want a "normal" dropdown menu nothing special. The problem is maybe the position absolute, but in the tutorial he used it too. The Dropdown menu is at the secound point (Produkte). Here is my Page: Page and the Code:
*{
padding: 0px;
margin: 0px;
font-family: Raleway;
line-height: 20px;
color: #003399;
}
body{
background-image: url(images/hintergrund.png);
}
section{
margin-top: 50px;
width: 1100px;
background: white;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #fcb774;
}
article{
width: 100%;
}
article:after{
content: '';
display: block;
clear: both;
}
.bild{
height: 200px;
width: 200px;
float: left;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
overflow: hidden;
}
.bild:hover{
cursor:pointer;
}
.text{
float: right;
width: 860px;
word-wrap: break-word;
height: 200px;
border: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
background-color: white;
}
hr{
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid black;
}
nav{
width: 100%;
}
nav ul{
background-color: #fcb774;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 0;
border-bottom: 2px solid black;
box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
}
nav ul li{
display: inline-block;
font-size: 16px;
}
nav ul li a{
display: block;
padding: 10px 20px 10px 20px;
transition: all 0.5s;
text-decoration: none;
}
nav ul li a:hover{
background-color: white;
text-decoration: underline;
}
.dropdown{
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
nav ul li:hover .dropdown{
display: block;
}
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="index.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide1').cycle({
fx: 'fade',
next: '.slide1',
timeout: 0
});
})
$(document).ready(function() {
$('.slide2').cycle({
fx: 'fade',
next: '.slide2',
timeout: 0
});
});
$(document).ready(function() {
$('.slide3').cycle({
fx: 'fade',
next: '.slide3',
timeout: 0
});
});
</script>
</head>
<body>
<nav>
<ul>
<li>Startseite</li>
<li>Produkte
<ul class="dropdown">
<li><a>T-Shirts</a></li>
<li><a>Ansteckbuttons</a></li>
<li><a>SexToys</a></li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
<section>
<article>
<div class="bild slide1">
<img src="images/tshirt1.png" width="200" height="200" />
<img src="images/tshirt2.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide2">
<img src="images/tshirt3.png" width="200" height="200" />
<img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
<hr>
<article>
<div class="bild slide3">
<img src="images/tshirt3.png" width="200" height="200" />
<img src="images/tshirt4.png" width="200" height="200" />
</div>
<div class="text">
<h1>T-Shirts</h1>
</div>
</article>
</section>
</body>
</html>
Using position: absolute removes the element from the flow of the document and by nature becomes relative to the document. You need to contain the submenu in it's parent by using position: relative. Add that to your parent li like so:
nav ul li {
display: inline-block;
font-size: 16px;
position: relative; //add
}
FIDDLE
I am working on an assignment and I need to place some images in a table, which normally isn't a problem for me. Today when I added the images to the table it just displays a square border with the alt text written in it. I am pretty sure that I am pointing to the right directory.
My folder structure is:
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 40px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:50px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation li{
list-style-image: url('navIcon.png');
float: left;
padding-right:45px;
margin-bottom: 25px;
color: black;
}
li {
}
.navigation a {
font-size: 19px;
font-family: customFont;
text-decoration:none;
color: #01ebfe;
}
.navigation a:hover {
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: list-item;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 5px;
color: #12A7CB;
background-color: #e4f4f8;
}
td {
background-color: #f2eded;
width: 150px;
height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: #####
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Home - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Discography</h1>
<div class="disco" >
<table >
<tr>
<th>
Album
</th>
<th>
Year
</th>
<th>
Record Label
</th>
<th>
CD Cover
</th>
</tr>
<tr>
<td >
The Better Life
</td>
<td>
2000
</td>
<td>
Universal Republic
</td>
<td>
<img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Away from the Sun
</td>
<td>
2002
</td>
<td>
Universal Republic
</td>
<td>
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Seventeen Days
</td>
<td>
2005
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
<tr>
<td >
3 Doors Down
</td>
<td>
2008
</td>
<td>
Universal Republic
</td>
<td>
<image />
</td>
</tr>
<tr>
<td >
Time of My Life
</td>
<td>
2011
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
</table>
</div>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
Changed href="../images/imageName.png" to src="../images/imageName.png"
change the code below code...
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
New code
<image src="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
href attr is for links i.e for a tag. For image use src attr
I checked your code. The image path is you mentioned in your HTML code is point to this link only. So check the path and make sure the images are there
It's < img src="" >, not < img href="" >.