I'm trying to place h2 right below h1, but it seems to be creating a huge gap/space. Is there a certain way to avoid this or is this an error in coding? Thank you.
Link to site:
http://younani.com/armen/musicindex.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Armens website</title>
<meta charset="utf-8">
</head>
<body>
<div class="clearfix" id="container">
<p><link rel="stylesheet" href="armen.css" /></p>
<h1><i>Four To The Floor</i></h1>
<h2>Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br /> it’s where you take them to.” <br /> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
</body>
</html>
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 70px;
text-align: center; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
h* elements in browsers tend to have some .. fairly large default top and bottom margins. You can just set them specifically to some smaller value, even zero:
h1, h2 {
margin-top: 0;
margin-bottom: 0;
}
You can of course apply these rules to your specific headers.
Add this to your css:
h1, h2 {
margin: 0px;
}
It's the margin on the h1 and h2. Adjust them in your CSS, e.g.
h1, h2 {margin: 0;}
Code :-
You can try this
<div id="container" class="clearfix">
<p><link href="armen.css" rel="stylesheet"></p>
<h1 style="margin-bottom: -18px; margin-top: 0px;"><i>Four To The Floor</i></h1>
<h2 style="margin-top: 0px; margin-bottom: 0px;">Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br> it’s where you take them to.” <br> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
REFER THIS LINK http://css-tricks.com/forums/discussion/3825/solved-h1-and-h2-tags-leaving-too-much-space/p1
Related
ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
I have a question about aligning two bootstrap divs beside each other horizontally, whereas the left image "in one div" should have no margin to the left and the right text "in the other div" should be centered besides the image to the left. The right div may have some margin to the right
For some reason when I set my two divs beside each other and set margin to 0, I receive this result here as on the pic.
As can be seen, the div overlaps the other, why does that happen? What would I need to do in order to make it properly aligning to the right in the center?
I tried using col-md-offset-1 but it only displays it below the picture. What can I do best to keep it properly aligned to the right?
This is my html / css:
.row-provider-signup {
margin-top:6em;
margin-bottom:4em;
text-align:center;
}
.container-provider-signup > [class*="container"] {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left:0;
margin-right:0;
}
.provider-signup-header-text {
color: #212121;
font-family: Raleway;
font-size: 62px;
font-weight: 400;
line-height: 72px;
margin-bottom:1.5em;
}
.provider-signup-body-text {
color: #616161;
font-family: Raleway;
font-size: 16px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0.2px;
text-align:center;
margin-bottom:6em;
}
.provider-signup-button {
width: 150px;
height: 45px;
border-radius: 4px;
background-color: #4a90e2;
}
.provider-signup-button-text {
color: #ffffff;
font-family: Raleway;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
}
<div class="container-provider-signup">
<div class="container">
<div class="row row-provider-signup">
<div class="col-md-6">
<img src="{{route('cacheImage', ['newDesign', 'panorama-signup.png']) }}"/>
</div>
<div class="col-md-6">
<p class="provider-signup-header-text">Test Header</p>
<p class="provider-signup-body-text">
Test Text <br/><br/>
Test Text <br/><br/>
Test Text <br/>
</p>
<button class="btn provider-signup-button"><span class="provider-signup-button-text">SIGN UP</span></button>
</div>
</div>
</div>
</div>
I want a <div> that its background is an image . I define width and height but when I use background-image to import the image , nothing appears !
whats the problem ?
of course the path is correct because it works in <img>
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
this is the whole code (the last div is going to be backgrounded by image)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>put.ac.ir::پرتال سایت</title>
<link rel="stylesheet" href="C:\Users\user\Desktop\font-awesome-4.7.0\css\font-awesome.css">
<style>
/* .........................things I should add to page....................*/
/* 1: href to top-menu links*/
/* ---------------------------------------------------------------*/
#font-face {
font-family:'Btitr';
src:url('font/BTitrBold.eot') format('eot'),
url('font/BTitrBold.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:"sahel";
src:url('font/sahel.eot') format('eot'),
url('font/sahel.ttf') format('truetype');
}
#font-face{
font-family:'Bcompset';
src: url('font/BCompset.eot')format('eot'),
url('font/BCompset.ttf')format('truetype');
font-weight:normal;
font-style:normal;
}
body {
margin :0;
padding :0;
}
#header{
margin:0;
padding: 10px;
height :20px;
background-color: #4d4d4d;
list-style-type: none;
}
li{
color: white;
display: inline-block;
}
#circle {
text-align: center;
width: 45px;
height : 45px;
border-radius: 50px;
background-color: white;
box-shadow: 1px 1px 2px 4px rgba(166, 166, 166, 0.3);
position: fixed;
right: 10px;
bottom : 10px;
}
#header-logo {
background-color:#800000;
height : 250px;
}
#header-logo div img{
height : 100px;
width : 400px;
padding-left: 550px;
padding-top:60px;
}
#top-menu{
font-family :sahel;
list-style-type:none;
}
#top-menu li{
color:#cccccc;
padding-top: 30px;
padding-left:25px;
font-size : 13.5px;
}
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
/* ---------------------------------------------------------------------------*/
</style>
</head>
<body>
<a name="top"></a>
<ul id="header">
<li class="fa fa-search" style="color:white;"></li>
<li style="padding-left:10px; font-family:tahoma; font-size:15px;"> ...جستجو نکنید </li>
<li style="font-family:tahoma; padding-left:350px;">شنبه خر است</li>
<li style="padding-left:200px; font-family:tahoma; font-size:16;">اقتصاد مقاومتی ، اقدام و عمل</li>
<li style ="padding-left:400px; color:#cccccc;">[lori] [torki]</li>
</ul>
<div id="circle"><i class="fa fa-angle-up" style="font-size:40px;"></i></div>
<!logo and top of the main page >
<div id="header-logo">
<div>
<img src="project-pics/assets/header-logo.png"/>
</div>
<div>
<ul id="top-menu" title="comming soon">
<a><li style="padding-left:295px;"> دانشگاه TER سامانه</li></a>
<a><li>داعش کده ها</li></a>
<a><li>معاونت حمل و نقل با گاری</li></a>
<a><li>معاونت دانشجوهای کلنگی</li></a>
<a><li>معاونت آمرزشی</li></a>
<a><li>موزه فراست</li></a>
</ul>
</div>
<! slide show of the page>
</div>
<div id="slide-show">
</div>
</body>
</html>
OK !
Its the path in the image
enter image description here
You can't have a space in your url.
background-image: url("project assets\files\project-pics\assets\harvard-university.jpg");
Use %20 or rename that folder with - or _.
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("projectassets\files\project-pics\assets\harvard-university.jpg");
}
use the code above. rename your folder project assets to projectassets.
You cannot have a space in your url path.
Also you don't have semicolon at the end of your height deceleration.
You have not defined a unit for your width declaration,use a valid unit like px,%,em to define your width.
Here is my code I want everything inside the div class="col-md-6 col-md-offset-3"> To be completely centered for some reason when I'm trying the Bootstrap text-center class it's not centering properly.
Here is my index.html code. Also I'm using Bootstrap and a Google Font.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg1">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="lgsize" src="logo.gif" alt="Logo">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="pushdown">
<div class="col-md-6 col-md-offset-3">
<span class="text-center title">Proto X Media</span>
<p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And also here is my style.css file I have made.
.title {
font-family: 'Bree Serif', serif;
font-weight: 800;
font-size: 500%;
color: 373d44#;
text-align: center;
}
.bg1 {
background-image: url("bg2.jpg");
background-size: cover;
}
.lgsize {
width: 150px;
height: 140px;
}
.pushdown {
padding-top: 150px;
padding-bottom: 250px;
}
.menu {
font-size: 100%
font-family: 'Bree Serif', serif;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
background-color: transparent;
text-decoration: none;
}
.subtext {
text-align: center;
font-family: 'Bree Serif', serif;
font-size: 16px;
}
Thank you guys very much :) !
Elements to be aligned must have
display: block /*(or inline-block)*/
Also, put
text-align:center
on the parent div and remove from children.
I can't get my menu bar to change font. I made this in Dreamweaver so there's lots of extra css code for the menu bar, but I've tried every option I can think of and I still can't access the text in the menu bar to change the font or the color or anything.
Here's the html:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Australian Design Architects</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="ADA.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="javascript/html5.js"></head>script><![endif] -->
</head>
<body>
<div id="main">
<header>
<h1 id="hheading">Australian Design Architects</h1>
<img src="logo2.gif" alt="ADA LOGO" width="130" height="130" id="himg" />
<nav>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><code> <!--id="home"-->Home</code></li>
<li><code>Portfolio
<ul>
<li>Commercial</li>
<li>Residential</li>
<li>Heritage</li>
<li>Rennovations/Additions</li>
</ul>
</code></li>
<li><code>Services </code> </li>
<li><code>About Us</code></li>
<li><code>Contact us</code></li>
</ul>
</nav>
</header>
<p> </p>
<p> </p>
<div id="maincontent">
<article id="inner"></article>
<img src="3drender.png" alt="3d render" name="mimg" width="640" height="480" id="mimg"></div>
<footer>
<div id="fbtw">Content for id "fbtw" Goes Here</div>
<ul>
<li><p>Privacy Statement</p></li>
<li><p>Accessability Statement</p></li>
<li><p>Site Map</p></li></ul>
<p>© Samuel Martin 2014. All Rights Reserved.</p>
</footer>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
And here's the css:
#charset "utf-8";
/* CSS Document */
#font-face {
font-family: 'flux_architect_regular';
src: url('flux_architect_regular-webfont.eot');
src: url('flux_architect_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('flux_architect_regular-webfont.woff') format('woff'),
url('flux_architect_regular-webfont.ttf') format('truetype'),
url('flux_architect_regular-webfont.svg#flux_architectregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'monospacetypewriterregular';
src: url('monospacetypewriter-webfont.eot');
src: url('monospacetypewriter-webfont.eot?#iefix') format('embedded-opentype'),
url('monospacetypewriter-webfont.woff') format('woff'),
url('monospacetypewriter-webfont.ttf') format('truetype'),
url('monospacetypewriter-webfont.svg#monospacetypewriterregular') format('svg');
font-weight: normal;
font-style: normal;
}
*{
margin:0;
padding:0;
}
article, aside, figure, footer, header, nav, section{
display:block;
}
body {
font-family:'monospacetypewriterregular', sans-serif;
color: #999;
width: 1024px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 3px dotted #6a8c3f; /*1764fc 323aea*/
background-color:#666;
}
#main{
background-color:#fff;
/*box-shadow: 0 0 25px 5px #1764fc; 00aae4 */
}
#himg {
float: left;
padding-top: 10px;
padding-left: 10px;
}
nav {
font-size: 18px;
position: absolute;
padding-top: 50px;
padding-left: 140px;
padding-bottom:50px;
}
footer {
font-size: 12px;
line-height: 1.5em;
color: #999;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
footer li {
display: inline-block;
position:relative;
margin-left:10px;
margin-right:10px;
}
footer p {
margin-bottom: 5px;
}
footer a {
color: #999;
}
#hheading {
position: absolute;
top: -500px;
}
#maicontent {
float: left;
width: 700px;
border: 1px solid #999;
padding-top:50px;
margin-top:106px;
}
I need to get that font changed over. Please help.
Add this to your CSS
// This removes the unordered list circle
nav ul{
list-style-type:none;
}
// this floats the element inline
nav ul li
{
float:left;
display:inline-block;
}
// This is used to remove the underline and give effects to the text
nav li a
{
font-family:'monospacetypewriterregular', sans-serif;
text-decoration:none;
}
Fiddle Demo here..!!