I have a html document in which a menu I've made using uls is showing little dashes below the line. This is my html source code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, Consult, Consultation, Netconsultation">
<meta name="description" content="Website of Connet Consultancy Services.">
<meta name="author" content="Connet development team">
<title> Connet. Connect. Through the internet. </title>
<link rel="stylesheet" href="/page_files/css/Main.Style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script src="/page_files/js/Default.Interactivity.js"> </script>
<script src="/page_files/js/Default.Processing.js"> </script>
<noscript title="Could not connect to script">
We can't get our scripts. Reloading the page might fix it.
</noscript>
</head>
<body>
<div class="Wrapper">
<nav>
<ul class="NavList">
<li>
<a onclick="location.reload();">
<img src="/page_files/media/home-icon.png" alt="Home"/>
</a>
</li>
<li>
<a href="/Login.html">
<img src="/page_files/media/user-icon.png" alt="Login" />
</a>
</li>
<li>
<a href="/Conroot.html">
<img src="/page_files/media/connect-icon.png" alt="Enter consultation" />
</a>
</li>
<li>
<a href="/Blog.html">
<img src="/page_files/media/blog-icon.png" alt="Blog" />
</a>
</li>
<li>
<a href="/Careers.html">
<img src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a href="/Contact.html">
<img src="/page_files/media/contact-icon.png" alt="Contact us" />
</a>
</li>
<li>
<img src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input type="text" id="SearchBox" placeholder="Search...">
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSect">
</section>
<section class="MidSect">
</section>
<section id="NewSect">
</section>
<section class="LogSect">
</section>
</div>
</div>
</body>
</html>
This is my css:
/* CSS DOCUMENT */
body {
background-color: #fff;
color: #0094ff;
font-family: 'Segoe UI Light', 'Tahoma', Geneva, Verdana, sans-serif;
font-size: 24px;
font-weight: 100;
text-decoration: none;
}
ul.NavList {
list-style-type: none;
text-decoration: none;
text-align: center;
padding: 20px 20px 0 0;
}
ul.NavList li {
display: inline;
text-decoration: none;
}
I'm using Microsoft Edge, and these are the dashes I'm talking about:
It works fine in IE11:
But not in Chrome:
I can't get any clear idea bout what these "dashes" are. Help????
(Thanks in advance.)
They are the remnants of links.
Try something like
ul.NavList li a {
text-decoration: none;
}
Related
This question already has answers here:
Embed image in a <button> element
(11 answers)
Closed 10 months ago.
How would i add an image on a button? Right now i am trying to create a banner like thing for a big button but the image doesn't seem to get inside the button as shown here:
I want the image to be inside the button and not separate each other like that
Here is the HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Saharsh | Projects</title>
<link rel='stylesheet' href='/Styles/projects.css'>
<link rel='stylesheet' href='../style.css'>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<link rel='icon' type='image/x-icon' href='/Images/Branding/pfp.png'>
</head>
<body class='container'>
<div id='home'>
<nav class='navbar'>
<ul>
<li><a href='../index.html'>Home</a></li>
<li><a href='#aboutMe'>About me</a></li>
<li><a href='#moreSoon'>Contact me</a></li>
</ul>
</nav>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<h1 class='main'>My Projects</h1>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'>
<div>
<a href='#aboutMe'><img src='../Images/Projects/Modular-FPS.png' class='banner'><button class='project_button'>Modular FPS Template</button></img></a>
</div>
<br class='us'><br class='us'><br class='us'>
<br class='us'><br class='us'><br class='us'>
<div>
<h1 id='moreSoon' style='text-align: center;'>
<a href='https://github.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/github.svg'></span></a>
<a href='https://discord.gg/bkP2P5uuH2' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/discord.svg'></span></a>
<a href='https://youtube.com/SaharshDev' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/youtube.svg'></span></a>
<a href='https://twitter.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/twitter.svg'></span></a>
</h1>
</div>
<br class='us'>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='Scripts/scrollSmooth.js'> </script>
<!-- <script src='Scripts/i_am_a.js'> </script> -->
</body>
</html>
And here is the CSS code:
#font-face {
font-family: 'mainFont';
src: url("../Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}
#font-face {
font-family: 'descFont';
src: url("../Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}
.project_button {
font-family: 'descFont';
font-weight: normal;
font-style: normal;
background-color: #181818;
border: none;
color: white;
/* padding: 20px; */
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 6px;
border-radius: 10px;
cursor: pointer;
width: 450px;
height: 250px;
box-shadow: 0px 16px 16px rgba(0,0,0,0.14);
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.project_button:hover {
transform: scale(1.03);
}
.banner {
width: 350px;
height: 190px;
}
Thanks in Advance!
You can do this:
<button class='project_button'>Modular FPS Template <img src='../Images/Projects/Modular-FPS.png' /></button>
Move your image inside the button.
Please try this. Thanks.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<button><img src="image.jpg" alt="No Image" width="50" height="30"></button>
</body>
</html>
You can try adding the onClick event to the img tag:
<img onClick="window.open("https://example.com")" />
You should be able to do it using a form and using an input with the "image" type like this:
<input type="image" id="myimage" src="[...]" />
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part, its is not working, It does not show on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
[Code][1]
[Output][2]
[Design][3]
[1]: https://i.stack.imgur.com/K19ny.png
[2]: https://i.stack.imgur.com/Iluoa.png
[3]: https://i.stack.imgur.com/fGDMf.png
Your code looks fine and could also be tested successfully. The only thing which may cause your problem is your path to the CSS file.
Check if the path in <link rel="stylesheet" href="css/main.css"> is correct.
You said you are using scss for writing styles so you must be using local node setup or might be using the ruby compass thing.
Please check if your local development setup is outputting the css file at correct path.
you should try below command if using node-sass
sass --watch scss/main.scss:/css/main.css
Then add this to your HTML
<link rel="stylesheet" href="./css/main.css">
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part is not workink, I does not shown on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
Design in XD :
Code Image:
Output:
Try a.logo2:link, a:logo2:visited as a selector for that CSS rule. That should be more specific than the browser default a:link and a:visited and overrule them.
Can you help me get some space between <h1> and <ul>?
h1
{
margin:0;
padding:0;
float:left;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
<h1> has already margin & dispaly block property why your are overriding that. Remove your h1 css.
h1 has default margin-top: 0.67em; margin-bottom: 0.67em; so it will automatically align. See the snippet output after removing h1 css
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
If you want horizontal spacing use padding-right for h1.
h1
{
margin:0;
padding:0;
float:left;
padding-right:30px;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left:0;
}
li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="" href="style.css">.
<meta charset="utf-8">
<title>Road to succes</title>
</head>
<body>
<header>
<h1>Stefan Dobrincu</h1>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</header>
<footer>
<a href="https://www.facebook.com/dobrincu.stefan">
<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
</a>
<a href="https://www.instagram.com/stefanhab/?hl=en">
<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
</a>
<p> © Dobrincu Stefan 2017</p>
</footer>
</body>
</html>
Try adding margin-bottom to your h1 class in the css file.
f.e.
margin-bottom: 10px;
I'm not sure what's happened as haven't changed CSS but suddenly my background image stops towards the top of the page and won't cary on to the bottom no matter what i change
here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="../London Food Therapy/css/style.css" type="text/css" media="screen" />
<style type="text/css">
#import url("../../../CSS/JJ.css");
</style>
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li></ul>
</nav>
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<div class="arrow right"></div><div class="arrow"></div>
<h1>DENTAL PERFECTION</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
<script>
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200){
setLeftBarPosition();
}
});
function setLeftBarPosition(){
// your code to set position of lefftbar
}
</script>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Dental/Dental5.jpg" alt="Kookielogo" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental4.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Dental/Dental2.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons5.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Canons high/Canons6.jpg" alt="LFT" class="image" height="378" width="580">
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
html{
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/Lines%20background.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
in your body class you should add background-size: cover; so that it covers the entire <body>