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;
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 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.
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;
}
I cannot figure out why the container-fluid div in my body has a grey background on top nor how to get rid of it. I'm assuming it's something that bootstrap is adding.
I was able to get rid of it with
container-fluid *{
background-color:#fff;
}
but then that caused problems with the button background of the jumbotron.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resuarant Name</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar navbar-right">
<div class="container">
<ul class="menuItems">
<li>Menu</li>
<li>Reservations</li>
<li>Reviews</li>
<li>Photos</li>
</ul>
<form id="searchForm">
Search
<input type="text" name="search"><br/>
</form>
</div>
</nav>
<nav class="navbar-header">
<div class="container">
<ul class="mainMenu">
<img id="logo" src="images/logo001.png"/>
<li>Home</li>
<li>History</li>
<li>Recipes</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
css:
.menuItems{
display:inline-block;
list-style:none;
float:right;
}
.menuItems li{
float:right;
padding: 0 10px;
}
#searchForm{
float:right;
}
#logo{
float:left;
max-height:80px;
padding-left:200px;
}
.mainMenu{
float:left;
width:100%;
margin-right:auto;
margin-left:auto;
padding:20px 50px;
border-top:dotted thin;
border-bottom:dotted thin;
}
.mainMenu li{
display:inline-block;
float:right;
padding: 20px 25px;
}
.welcomePost *{
}
.jumbotron *{
float:right;
padding: 0 150px;
}
Grey background is coming from jumbotron which is its default color just change jumbotron color like this
.jumbotron {
background-color: // whatever color you want or you can also make it "none"
}
For more on Jumbotron: https://getbootstrap.com/
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>