I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it.
Screenshots : Before and After
CSS
body {
background-color: #1a1a1a;
}
header,
h1 {
text-align: center;
font-family: CGF Locust Resistance;
font-size: 50px;
color: lightgray;
-webkit-text-stroke: 1.5px #000;
}
header {
margin: 0;
padding: 0;
height: 100px;
border-bottom: .5px solid #b3b3b3;
}
nav {
position: relative;
top: -5px;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
border-bottom: .5px solid #b3b3b3;
}
nav ul li {
display: inline;
color: #fff;
font-family: CGF Locust Resistance;
font-size: 12.5px;
padding: 20px;
}
.red {
color: red;
}
#omen {
z-index: -1;
}
Set the image as a background-image of header. Is that what you're after?
h1 {
background: url(the/filepath/to/your/image.jpg) no-repeat center 100px;
background-size: 400px auto;
}
That's approximately how you would use a background image in this situation. center 100px means horizontally centered and 100px from the top (in relation to the h1 element).
h1 {
position : abosolute;
}
This should do the trick but it is preferable to use ids instead of changeing the h tags everywhere on your side
Put this parameter to the image object in css (example creating custom classes) :
.image{
position: relative;
}
And this one to the text :
.text{
position: absolute;
}
Of course, you have to set this classes to it's respective objects. Hope it helps !
Related
Code pasted below. I'm trying to get the two castle images to stick to the bottom of the page, specifically the bottom of their container div. I tried using display:flex on the image container div, with align-items: baseline, but it didn't do anything. I tried playing around with various justify and align values, as well as position:relative and absolute, but that just gave a lot of unexpected (to me, at least) results e.g. one of the two images disappearing off-screen.
Any suggestions for fixes greatly appreciated!
Cheers
#import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=MedievalSharp&family=Roboto+Condensed:wght#300&display=swap');
body {
margin: 0 auto;
background-color: #1D1D1D;
cursor: url('snake-moving.png'), pointer;
font-family: 'MedievalSharp', cursive;
}
header nav {
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20 px;
height: 88px;
width: auto;
border-style: double;
border-top: 15px;
border-color: white;
}
header nav * {
font-size: 30px;
color:antiquewhite;
text-decoration: none;
font-weight: 800;
}
header nav form, a::after {
content: url('pie-logo.png');
position: relative;
top: 10px;
left: 20px;
}
.game {
border: #1D1D1D solid 40px;
width: auto;
background-color: #F4F186;
}
.image-container {
width: auto;
height: 800px;
margin: 0 auto;
position: relative;
}
.image-container img {
position: absolute;
bottom: 0;
}
.game h1 {
color: midnightblue;
}
I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box.
How can I make it align at the bottom of the page, with correct padding?
Here's the HTML & CSS file:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #202020;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
}
.currency {
background-color: #202020;
height: 20%;
color: white;
}
.currency-flag {
float: left;
padding: 5px;
}
.currency-name {
text-align: left;
font-size: 120%;
/* padding-top: 5px; */
}
.currency-value {
text-align: left;
font-size: 50%;
}
<center>
<div id="list">
<div class="currency">
<img class="currency-flag" src="flags/eur.svg"></img>
<p class="currency-name">European Euro</p>
<p class="currency-value">1 R$ = 2 EUR</p>
</div>
</div>
</center>
The problem is that you have set fixed height to .currency insted of height:20% use height:auto;
.currency {
background-color: #202020;
height: auto;
color: white;
}
to fixed it at botton use positions like
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
position: absolute;
bottom: 0;
}
.currency {
background-color: #202020;
height: auto;
color: white;
}
Set the height property to auto instead of fixing it it will make your p tag inside the div
One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
Newbie here
I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.
Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!
Screenshot: http://imgur.com/7BQrcP7
CSS Code:
Section A {
margin: 0px;
padding: 0px;
background-color: #FAFAFA;
float: left;
width: 75%;
}
Section B {
float: right;
width: 25%;
text-align: left;
}
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
}
You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements
CSS
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
z-index: 100; /* a large number to ensure it's on top */
}
Add the z-index to the Footnote-tooltip
Footnote-tooltip {
z-index:100;
}
If you want to achieve this without z-index then follow my pen.
Hope this pen will help you.
'http://codepen.io/anon/pen/NGeaKp'
I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)
Here is my css
body
{
background-color: yellow;
margin: 0;
}
header > * {
margin: 0;
float: left;
}
header
{
background-color: white ;
width: 100%;
height: 40px;
}
/*header > input {
margin: 10px 20px 0px 10px;
}*/
#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}
article > * {
margin: 0;
}
article
{
background-color: red;
}
#search {
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;
}
#mostdesired
{
background-color: #c7d1d6;
height: 200px;
}
section h2 {
margin:0;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
Here is my html
<body>
<header>
<p class="site-title">#Html.ActionLink("Site", "Index", "Home")</p>
<input id="toptext" type="text" />
</header>
<article>
<section id="search">
<div id="middlesearch">
<h2>Search Here</h2>#RenderBody()
</div>
</section>
<section id="mostdesired" ><h2>This is the most section</h2></section>
</article>
</body>
Vertically aligning with CSS is notoriously tricky.
Change the CSS to
#search {
position: relative;
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
position: absolute;
background-color: grey;
width: 700px;
top: 50%;
left: 50%;
margin-left: -350px; /* half the width */
}
and add one line of JQuery to up the div to be correctly centered
$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)
this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.
This avoids having to use tables.
The CSS declaration for header isn't closed on line 20
http://www.vanseodesign.com/css/vertical-centering/
Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.
You have to do a little work for block level elements, refer to these examples
http://phrogz.net/CSS/vertical-align/
http://www.vanseodesign.com/css/vertical-centering/
#middlesearch {
display:inline-block;
line-height:500px;
vertical-align:middle;
}