I tried to use text-align property with display block but that didn't work either. I wanted a div that covered the entire webpage with the mountain image center aligned at its bottom. I managed to move the mountain image to bottom by setting bottom:0; but then I was unable to center align the image. Thank you very much.
<!-- following is the html code: -->
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
</div>
</body>
<!-- and this is the css: -->
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: inline-block;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
I edit the code a little bit to achieve what you want just add a parent div to the image tag and styled it. So here is the my solution and I hope it is helpful for you.
HTML:
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<div class="mountain">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
<div>
</div>
</body>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
The easiest solve here would be to make the divs background image in CSS rather than using the image tag. Something like this:
<div class="topcontainer">
//other stuff in here
</div>
.topcontainer {
height: 100vh;
width: 100vw;
background-image: url('http://seanhalpin.io/assets/img/content/home/masthead/land.svg');
background-repeat: no-repeat;
background-position: bottom;
}
Hope this helps!
Related
How to make my website look from:
To This Look:
I'm using CSS, JavaScript And Html, But I don't Know how to achieve that type of look to My website
Add line (div) and use ::before and ::after on it.
body {
margin: 40px;
background-color:#0f0e0e;
font-family:Arial;
}
.flex {
display: flex;
}
.flex > div:last-child {
margin:10px 0 10px 15px;
}
.flex h1 {
color:#d7d6d6;
font-weight:100;
margin:0;
}
.flex p {
margin:0;
color:#a6a3a5;
font-size:0.9rem;
font-weight:100;
margin-top:10px;
}
.line {
width: 1.5px;
background: #333030;
position: relative;
margin-right: 10px;
}
.line::before {
content: "<h3>";
position: absolute;
color:#483f3f;
top: 0;
transform: translate(-43%, -100%);
}
.line::after {
content: "</h3>";
color:#483f3f;
position: absolute;
bottom: 0;
transform: translate(-45%, 100%);
}
<body>
<div class="flex">
<div class="line"></div>
<div>
<h1>Simpfey</h1>
<p>An Indie Web Dev.</p>
</div>
</div>
</body>
CSS and images
.main {
height: 100vh;
width: 100vw;
display: flex;
background-color: #0F0E0E;
}
.side {
width: 125px;
height: auto;
min-width: 125px;
background-image: url(https://i.stack.imgur.com/B6aic.png);
background-repeat: no-repeat;
}
.content {
font-family: "Bahnschrift light", "sans-serif";
font-size: 5em;
color: white;
padding-top: 5%;
}
<div class="main">
<div class="side"> </div>
<div class="content">Simpfey</div>
</div>
I'm trying to add a button on top of a background image in the landing page of the website. I tried using position tag in CSS and it didn't work. Then I tried adding z-index and that didn't work too.
I'm open to any more suggestions. Thank you.
Maybe You can use this:
function testFunc() {
alert('YESS');
}
.wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.background-image {
position: absolute;
width: 100%;
height: 100%;
}
.yourbtn {
position: relative;
padding: 30px;
background-color: red;
color: yellow;
top: 50%;
left 50%;
}
<div class="wrapper">
<img class="background-image" src="https://cdn.vox-cdn.com/thumbor/ZlgvBM5ZISrK4O6gL1YkTOJST2M=/0x0:1221x787/920x613/filters:focal(514x297:708x491):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/60732143/Screen_Shot_2018_08_05_at_10.37.13_AM.0.png">
<button class="yourbtn" onclick="testFunc()">Your Button Right Here</button>
</div>
I don't know what you mean by putting a button on a background image, but this is what I would do.
<body>
<header>
<h1 class="title">text here</h1>
<a class="button" href="#">button</a>
</header>
</body>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
header{
background-image: url(image.png);
background-size: cover;
text-align: center;
height: 30vh;
margin-top: 0;
}
.title{
font-size: 10vh;
color: orange;
margin: 0;
margin-bottom: 5rem;
}
.button{
background-color: #6495ED;
padding: 1rem 3rem 1rem 3rem;
border-radius: 10px;
color: #fff;
text-decoration: none;
}
Is there a way of creating a hero image with text on top of it without using background-image: url(); and position relative?
Maybe it can be done with css grid, not sure? I got this far:
https://codepen.io/labanino/pen/NejZEy?editors=1100
without position:relative and background:url()
url("https://fonts.googleapis.com/css?family=Londrina+Solid");
* {
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 2rem;
color: #fff;
margin:0;
padding:0;
position:absolute;
}
.hero {
display: flex;
justify-content:center;
align-items:center;
}
.hero {
img {
width: 100vw;
}
}
<div class="hero">
<h1>This is my dummy text!</h1>
<img src="//unsplash.it/600/200" alt="">
</div>
Why? Pos relative is the best way here
U can use height 0 and overflow visible on text
This accomplishes what you're asking for:
<div class="hero">
<h1 class="theText">This is my dummy text!</h1>
<img class="theImage" src="//unsplash.it/600/200" alt="">
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Londrina+Solid');
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 2rem;
color: #2F4858;
}
.hero {
position: relative;
}
.theImage {
position: absolute;
width: 100vw;
top: 0;
z-index: -1;
}
.theText {
position: absolute;
top: 80px;
width: 100vw;
left:50%;
margin-left: calc(-50vw);
text-align: center;
z-index: 1;
}
I want to add text on top of two images and then place them side by side. I tried do this in the following way:
#main {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#front-header {
font-family: "Linux Biolinum";
font-size: 42pt;
line-height: 0pt;
font-weight: bold;
text-align: center;
}
#PI {
font-family: "Linux Libertine";
font-size: 22pt;
line-height: 0pt;
font-weight: normal;
font-style: normal;
text-align: center;
color: red;
}
#copyright {
font-family: "Latin Modern Mono";
font-size: 10pt;
line-height: 0pt;
font-weight: normal;
text-align: center;
}
#meerkat {
width: 18cm;
height: 14cm;
}
#salt {
width: 17.5cm;
height: 14cm;
}
#figu {
display: inline-block;
float: left;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#container {
height: 17.5cm;
width: 14cm;
float: left;
position: relative;
}
#images {
position: relative;
float: left;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 50px;
top: 50px;
}
.image {
position: relative;
float: left;
/* optional */
}
.image .text {
position: absolute;
top: 10px;
/* in conjunction with left property, decides the text position */
left: 10px;
width: 300px;
/* optional, though better have one */
}
<body style=" height: 723.09px;">
<p id="front-header">Learning HTML</p>
<p id="PI">Author:TH</p>
<p>
<br>
</p>
<p>
<br>
</p>
<div>
<img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">
<div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;">
<h1 style="color:white;">Hello World!.</h1>
</div>
</div>
<br>
<div>
<p id="copyright">Created Today</p>
</div>
</body>
I want to add text on top of the figures named "meerkat.jpg" & "salt-1.jpg". After that I want to place them side by side.
Please suggest. Thanks.
There are several solutions to achieve this and this is my take. I make use of the display: flex; property that is being explained at MDN. Examining the code in your question, I expect that you don't have that much experience in CSS, so I got rid of all the code and made a clean example.
When you set an image as background-image, you can just add an <hX> element inside of it to add the text on top of the image.
Another solution I provided is in the second row and makes use of position: relative; and position: absolute; together with an inline image. Setting the container to relative and the text that's inside of it to absolute will only affect the text inside the div.
You could also use float, but this can cause problems to your layout.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.image-wrapper {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
flex: 1;
width: 50%;
height: 300px;
border: 2px solid red;
/* Only to show that there are two images */
}
.image-wrapper h1 {
color: #fff;
margin: 0;
}
.container-position {
margin-top: 100px;
}
.image-wrapper-position {
position: relative;
flex: 1;
width: 50%;
}
.image-wrapper-position h1 {
position: absolute;
left: 20px;
top: 20px;
color: #fff;
margin: 0;
padding: 0;
}
<div class="container">
<div class="image-wrapper">
<h1>This is text</h1>
</div>
<div class="image-wrapper">
<h1>This is text on top of image</h1>
</div>
</div>
<div class="container container-position">
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
</div>
Use the following code as a guide for your website. Alter the width and height in <img> to suit you.
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
float: left;
width: 500;
height: 500;
margin: 50px;
border: 1px solid 0;
}
</style>
</head>
<body>
<h2>Text appearing above images</h2>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
</body>
</html>
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.