I am making a site for a school project. Everything was going well until I zoomed my creation, the facebook icon and map hyperlink started moving left, their position didn't seem a problem on zooming out since they were exactly as they had to be. My code is clumsy written, I've just started learning CSS so please leave a negative response.
CSS:
body {
background-image: url("backgr.jpg");
background-size: cover;
overflow-x: hidden;
}
.site {
background-image: url("repet.jpg");
background-position: center top;
background-repeat: repeat-x;
}
.all {
position: relative;
}
.lin {
display: block;
margin-left: auto;
margin-right: auto;
}
.fc {
position: absolute;
height: 50px;
width: 50px;
margin: 0 auto;
left: 300px;
right: 0;
top: 55%;
}
.map1 {
position: absolute;
text-decoration: underline;
font-family: "Myriad-Pro", Calibri;
letter-spacing: -0.05em;
font-style: condensed;
font-size: 130%;
color: white;
left: 85px;
text-align: center;
width: 100%;
top: 53.2%;
}
.map2 {
position: absolute;
text-decoration: underline;
font-family: "Myriad-Pro", Calibri;
letter-spacing: -0.05em;
font-style: condensed;
font-size: 130%;
color: white;
left: 80px;
text-align: center;
width: 100%;
top: 70%;
}
HTML
<div class="all">
<a href="https://www.facebook.com/MumbaiIndianStruma31Burgas/?fref=ts">
<img src="fc.png" class="fc">
</a>
<a class="map1" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/#42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
Карта
</a>
<a class="map2" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/#42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
Map
</a>
<div class="site">
<img src="line.jpg" class="lin">
</div>
</div>
Fiddle demo
You can use Padding left, Padding Right and margin option to set the image
Related
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;
}
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!
So I need to setup multiple divs, one under another that have both a responsive background image with text over top. Right now I have the following setup:
http://secretsofpoolecreekvillage.com/index_temp.php
.. which worked fine when there was only the one div ".bg1". As soon as I add another div under it, they overlap. I'm assuming this has to do with the position: absolute; on each of these divs. I don't know how to accomplish this otherwise though.
.bg1 {
width: 100%;
height:auto;
text-align: center;
position: absolute;
}
.bg1 img {
width:100%;
height:auto;
}
.bg1 h1 {
color: #FFFFFF;
font-family:'ITCFranklinGothicStd-Book';
font-size: 34px;
margin-bottom: 5px;
line-height: 40px;
font-weight: normal;
}
.bg1 h2 {
color: #FFFFFF;
font-family:'TimesEuropaLTStd-Bold';
font-size: 62px;
margin-top: 0;
line-height: 50px;
}
.bgContent1 {
position: absolute;
top: 50%;
left: 50%;
padding: 0;
transform: translate(-50%, -50%);
}
<div class="bg1">
<img src="/images/bg_1.jpg">
<div class="bgContent1">
<h1>SECRETS OF</h1>
<h2>POOLE CREEK VILLAGE</h2>
</div>
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.
Ive just been practicing using HTML and CSS and I've ran into an issue. I want this (the objects in the blue square) to be on the right but it goes underneath everything else for some reason. How can I fix it? Here is what I have tried:
HTML:
<div class="status-post row">
<div class="post-meta col-xs">
<center>
<img src="./testpost.png" alt/>
<p>
"This is a test status... Test. Test. Test."
</p>
</center>
</div>
<div class="post-interact col-xs-2">
<a href="#" class="vote voteup">
<img src="./img/global/upvote.png" alt/>
</a>
<span id="picidhere" class="count">100</span>
<a href="#" class="vote report">
<img src="./img/global/report.png" alt/>
</a>
</div>
</div>
CSS:
#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}
#appbody .status-post .post-meta {
margin-bottom: 25px;
}
#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}
#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";
}
#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;
}
#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}
#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}
#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}
#appbody .status-post .post-interact {
position: absolute;
top: 10px;
right: 10px
}
use absolute positioning to place the element
EDIT
Check this demo to understand absolute positioning
http://jsfiddle.net/jja27pce/
Just like the others have said, you need to make your content positioned absolutely, and then position then to the top right.
Code like this should work:
.post-interact {
position: absolute;
top: 0px;
right: 0px
}
Please add below css
.post-interact {
position:absolute !important;
top:0 !important;
right:0 !important;
}
into bottom of your css.