Currently I just want a image link in a h2.
This link should be positioned bottom.
This is what I have:
<html>
<head>
<style>
body {
margin: 0;
}
h2 {
margin: 5px 0 10px;
background: #333333;
color: #f7f7f7;
line-height: 142%;
}
h2 a {
float: right;
}
h2 img {
vertical-align: bottom;
}
h2:after {
content:"";
height: 1px;
display: block;
clear: both;
}
</style>
</head>
<body>
<h2>Header <img src="http://placehold.it/26x26" /></h2>
</body>
</html>
But the strange thing is, that when I include this code in a .html file. I have an <a> tag of 26px height.
When I create a jsfiddle, the <a> tag is 34px and aligned bottom?!?!
HTML file
jsfiddle result
So, what is my mistake? I just want the image aligned at bottom...
Add a doctype before the html tag:
<!DOCTYPE html>
Related
I was trying to add color to the heading but the design was horrible.
I tryed to watch videos on youtube but they dont help me with the position and the horizontal line bugs.
https://imgur.com/a/c7eDeHi
I was expectating something like this
Paint model.
https://imgur.com/lGGPoZE
But I'm very bad at positions
https://imgur.com/a/c7eDeHi
<html>
<head>
<style>
h1 {
text-align: left;
color: #595959;
background: #80ff80;
width: 5000px;
height: 60px;
}
</style>
</head>
<body bgcolor="#ffb84d">
<h1>Test</h1>
</body>
</html>
Fixing the position,and horizontal line.
To remove paddings and margins around the page, you can use:
html, body{
padding: 0;
margin: 0;
}
To add a background color to body, you have to assign it in the styles ass well. You can select it with body:
body{
background: #ffb84d;
}
If you further want a buttom border for the headline, you can add the following rules to h1:
h1 {
text-align:left;
color:#595959;
background: #80ff80;
width:100%;
height:60px;
/* Specify a bottom border like this: */
border-bottom: 1px solid grey;
}
You need to set the margin of the body and of the heading to 0 to remove the border
body {
margin: 0px;
background-color: #ffb84d;
}
h1 {
margin: 0px;
text-align:left;
color:#595959;
background-color: #80ff80;
}
<html>
<body>
<h1>Test</h1>
</body>
</html>
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'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?
I have 2 elements that are not responding to margin: 260px 0 0 0; or margin-top: 260px;. And I don't know why. When I open dev tools in IE and inspect the element, the margin is there, but the element stays at teh top of the div as if margin: 260px 0 0 0; was not set at all.
Why isn't margin working for the a element inside .SideContainer a {...} or .RightSide a {...}?
<section class="RightSide SideContainer">
Packages & Pricing
</section>
.SideContainer h1 {
color: white;
}
.SideContainer a {
margin: 260px 0 0 0;
padding: 10px 15px 10px 15px;
background-color: #ec462f;
color: white;
}
.RightSide {
float: right;
}
.RightSide a {
margin-top: 200px;
}
Anchor tags are inline elements, so the top and bottom margin styles aren't applied to them as expected. Set the display property to inline-block, it should work.
.SideContainer a, .RightSide a {
display: inline-block;
}
Keep in mind that setting an element's display property to inline-block will cause spaces in the source code to be rendered. Here's how you can prevent that.
An alternative would be to set the display property to block and set the float property if required.
.SideContainer a, .RightSide a {
display: block;
float: left; /*if required*/
}
It's not working because your anchor tags are inline elements and don't respond to margin.
If you add display:block to your CSS on .SideContainer a, it will move.
http://codepen.io/anon/pen/Girwh
Inline element doesn’t respond to margin.
You need to make the a tag display block or you can float it to right so it will behave right like regular "a" tag and will respond to margin too.
try this:
.RightSide a {
margin-top: 200px;
float: right;
}
I worked on your code, you have to put display:inline-blcok in the anchor tag to get margin-top.
Solution:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
.SideContainer h1 {
color:white;
}
.SideContainer a {
padding:10px 15px 10px 15px;
background-color:#ec462f;
color:white;
}
.RightSide {
float:right;
}
.RightSide a {
display:inline-block;
margin-top:200px;
}
</style>
</head>
<body>
<section class="RightSide SideContainer">
Packages & Pricing
</section>
</body>
</html>
I think it's enough to add display:block
.RightSide {
margin-top: 200px;
display: block;
}
You need to float your 'a' tag like so:
.SideContainer a {
...
float:left;
}
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;
}