I'm trying to get my header and image to line up exactly on the same line but am having difficulties. Can anyone see why/suggest a fix?
<!DOCTYPE html>
<html>
<head>
<style>
#header img {
position: relative;
width: 75px;
height: 75px;
}
#header h1 {
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<img src="2000px-Smiley.svg.png" alt="Smiley Face" >
</div>
</body>
</html>
it's because of the h1 default margin, you see? elements comes with default styling and you need to custom it to your needs, generally for what you want you need to remove the margin-top from h1 but you can also set it to margin: 0; if you dont need the margin-bottom.
#header h1
{
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
margin: 0;
}
example: http://jsfiddle.net/L2e1rL6L/
In addition to #header h1 css you should do
#header h1 {
margin:0;
}
thats it.
Wouldn't you need to have the image inside the <h1><img > </h1> tags?
Related
With my tags I am trying to stop it from auto creating a line space.
<h1>Title</h1>
Here is my current css rule.
h1
{
font-family: Blackadder ITC;
text-align: left;
}
And in my body rule I have this
body
{
text-align: center;
}
When I add this to my css h1 rule
display: inline;
It does prevent the h1 tags from automatically creating a line space but then it overrides the:
text-align: left;
rule, therefore the text centers in the middle of the page, and I don't want that.
Is there a way to make the text go in the left hand side of the page, as well as to prevent it from creating automatic line spacing?
You can just go ahead and remove the margin on the <h1>.
body {
text-align: center;
margin: auto 0;
}
nav {
position: relative;
}
h1 {
font-family: Blackadder ITC;
text-align: left;
margin: 0;
}
.button {
position: absolute;
top: 0;
right: 50%;
border-width: thin;
border-style: groove;
border-color: alpha;
margin: 3px 0;
}
.paragraph {
background-color: blue;
padding: 10px;
color: white;
font-family: calibri;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<h1>Title</h1>
Button 1
</nav>
<br/>
<div class="paragraph">
<h2>Title</h2>
<p>
Information
</p>
</div>
</body>
</html>
EDIT: I had given previously given the solution to reduce the line spacing (which is the space between two lines) on the h1 element. I guess you wanted both the h1 and the button on the same line, which was not clear in the question. To have your two elements in the same line, you can either make use of positioning (like I have done above), or make use of floats after setting the display of h1 to inline.
I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.
Here is my HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Olivera Miletic graphic desig</title>
<link rel='stylesheet' href='style.css' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="mainText">
<p> OLI<span class="secondColor">APPARENTLY </p>
<p class="stayTuned"> SOON. STAY TUNED. </p>
</div>
<div>
<p class="meanWhile"> meanwhile WORK / BE / TW / <a href="mailto:miletic.olivera#gmail.com" > MAIL </a>
</p>
</div>
</div>
</body>
</html>
Here is my CSS:
.container {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
display: box;
}
.body {
margin: 0;
}
.mainText {
font-family: 'Open Sans', sans-serif;
font-size: 64px;
color: #FF0066;
font-weight: bolder;
line-height: 0%;
margin-bottom: 70px;
}
.secondColor {
color: #00ccff;
}
.stayTuned {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: #ffffff;
font-weight: bolder;
}
.meanWhile {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: lighter;
}
a {
color: #ffffff;
text-decoration: none;
}
Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code:
Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.
Regards,
Some browsers/frameworks/environments add default margin, padding values to either the body or the html.
You have to override the margins/padding to the html or body for the white space to disappear.
Just add the following:
html, body {
margin: 0;
padding: 0;
}
EDIT
To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.
Hence the container div overflows its parent thus producing a scroll.
A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/
I would suggest you to read more about box-sizing, and the css box model as a whole.
Remove the .body and replace it to body.
.body is applied to the class named body, while you want to select the tag, which would be just body.
Alternatively, add class="body" to your body tag.
I am making a website and I am trying something new, except when I try to create a background for my H1 element I have no way of making sure the background color borders fit to the top of the screen, left and right.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="site.css"
<body>
<title>Test Tab</title>
<div class="main">
<h1>Website Heading</h1>
</div>
</body>
</html>
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
You need to change your CSS to this:
html,body {
margin:0;
padding:0;
}
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
.main h1 {
margin:0;
}
JSFiddle
You need to make sure you set your body to have no padding or margins and also make sure your h1 doesn't have any margin either. That way it will happily sit at the top of your page.
Say I have div that is a specified width of 200px. Then I have 3 h1 elements in that div with different amounts of letters / different widths. How do I stretch them horizontally to fill the div?
<div id="Header">
<div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>
What I need is the words to be same width---the width of the containing div.
I tried text-align justify on the h1 but that didn't do any good.
.Logo {
margin-left: 100px;
height:auto;
width: 250px;
background-color:#666;
font-family: Impact, Charcoal, sans-serif;
text-align: justify;
}
.Logo h1 {
font-size: 40;
text-align:justify;
display: inline;
}
I don't think there's a pure CSS way to do it as of now (I mean using some straight CSS way, you need to juggle things around), what you can do is use nth-of-type in CSS and give letter-spacing to each.. this way you don't have to declare classes for each h1 and also you'll get stretched text
Demo
<div class="Logo">
<h1>CORROBORREE</h1>
<br />
<h1>FROG</h1>
<br />
<h1>PROJECT</h1>
</div>
html, body { /* Using this or not depends on you,
nothing to do with the example */
width: 100%;
height: 100%;
}
.Logo {
background: #f00;
width: 300px;
}
.Logo h1:nth-of-type(1) {
letter-spacing: 4px;
}
.Logo h1:nth-of-type(2) {
letter-spacing: 70px;
}
.Logo h1:nth-of-type(3) {
letter-spacing: 25px;
}
Why you want to do it, I don't know, cuz this will look super weird
Use letter-spacing
eg: letter-spacing:20px
Check this out:
Demo
CSS:
#Header{
width:200px;
height:200px;
background-color:grey;
overflow:hidden;
}
#h1{
-webkit-transform:scaleX(0.78);
margin:0 0 0 -25px;
}
#h2{
-webkit-transform:scaleX(2.3);
margin:0 0 0 70px;
}
#h3{
-webkit-transform:scaleX(1.3);
margin:0 0 0 25px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="Header">
<div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div>
</body>
</html>
text-align:justify and display:block.
And there can be only the one h1-tag on one page
I want the elements within my top logo div to be centered. I'm not sure quite how to do that.
My navigation div is not matching up with the logo div. There is still space between the divs even tho I have set the margins to 0px.
My placeholder graphic for some reason has more padding on the bottom than anywhere else within the logo div. What do I need to do to change that?
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
margin: 0px;
}
#logo p {
display: inline;
}
#logo h2 {
display: inline;
}
#logo a {
float: right;
color: rgb(255, 200, 0);
text-decoration: none;
font-size: 1.25em;
padding: 10px;
}
#navigation {
background-color: rgb(255,200,0);
width: 100%;
margin: 0px;
}
body {
margin: 0px;
font-family: Arial, Helvetica, Verdana;
}
</style>
</head>
<body>
<div id="logo">
<p>
<img src="picture.jpg" >
</p>
<h2>SUBSCRIBER PORTAL</h2>
LOG-IN
CONTACT US
</div>
<div id="navigation">
<p>
This is just a navigation test.
</p>
</div>
<div id="contents">
<p>This is just some dummy text. Dummy. </p>
</div>
</body>
</html>
1) give the img { vertical-align:middle; }. also remove the around the img.
2) have you tried padding:0;?.
3) padding-bottom:-<value here>px; or you could try just padding:0; or padding-bottom:0;.
I'm not sure about the questions, because they are not really setup well.
Use position: absolute; in your CSS for your navigation and logo or a tags to specify exactly where you want them to appear. Such as this example:
#logo {
position:absolute;
top: 170px;
left: 300px;
}