I am trying to position a div to the left of the screen and I am also trying to make it work on any screen resolution and browser.
Here's my code below:-
#Biography {
background: #ffffff ;
text-align: center ;
text-transform: uppercase ;
color: #fff ;
padding: 5em 0;
width: 100%;
font-family: 'Conv_Lato-Regular',Sans-Serif;
margin: 0;
}
#info {
left: -10px;
float: left;
top: -80px;
position: relative;
color: #000;
}
<div id="Biography">
<div class="container">
<div class="tittle">
</div>
<div id="info">
<div class="col-md-8">
<div class=" wow bounceInDown" data-wow-delay="0.5s">
<div class="view view-fifth" style="height: 20%">
<img src="images/Dan.jpeg" alt="" style="height:80%; width:100%">
<h4> NAME</h4>
<h5> sean</h5>
<h4> OCCUPATION</h4>
<h5> Computer Programmer,Software Developer,Student</h5>
</div>
</div>
</div>
</div>
The problem is that the #info div is not fully to the left. I don't know what I am doing wrong.
You need to use 'position:absolute' instead of 'position:relative' to be located fully to the left in this case.
#info {
position: absolute;
left: 0px;
top: 0px;
color: #000;
}
Related
I'm trying to get the div with the product name amount price and total to the top of the div it's nestled in, but changing the position isn't working. Stuff like vertical alignment didn't work for me either. I made a screenshot of the page, the buttons are in the right place, it's just the sort of table that has to move to the top of the screen. This has to contain all kinds of products later on.
this is the html:
<div class="checkout">
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!-- Added products overview-->
<div class="checkoutTable">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
<hr style="background-color:white;">
<div class="row">
<div class="col-4">Product Name</div>
<div class="col-2">Amount</div>
<div class="col-3">Price</div>
<div class="col-3 ">Total</div>
</div>
</div>
<!-- -->
<!-- Buttons -->
<div class="row">
<a class="checkoutBtn" href="">
<div class="col-12 checkoutBtn">
<i class="fa fa-shopping-cart"></i> Checkout
</div>
</a>
</div>
<div class="row">
<a class="addDiscountBtn" href="#">
<div class="col-6-xs addDiscountBtn">
% Add Discount
</div>
</a>
<a class="cancelBtn" href="#">
<div class="col-6-xs cancelBtn">
<i class="fa fa-ban"></i> Cancel
</div>
</a>
</div>
</div>
</div>
This is the css:
.checkout{
background-color: #22303e;
height: calc(100vh - 50px);
color: white;
font-size: 13px;
}
.checkoutBtn{
background-color: #0090e3; height: 50px;
text-align: center;
line-height: 50px
}
.addDiscountBtn{
background-color:#f8ac59; height: 50px;
text-align: center;
line-height: 50px
}
.cancelBtn{
background-color: #ed5565; height: 50px;
text-align: center;
line-height: 50px
}
a.checkoutBtn{
width: 100%;
color: white;
}
a.addDiscountBtn{
width: 50%;
color: white;
}
a.cancelBtn{
width: 50%;
color: white;
}
a:hover{
text-decoration: none;
opacity: 0.9;
}
.checkoutTable{
vertical-align:top;
}
For container-fluid, do not use any inline styling like you are using style="position: absolute; bottom: 0;"
Example
<div class="checkout">
<div class="container-fluid"></div>
You are placing your div
<div class="checkoutTable">
in parent div
<div class="container-fluid" style="position: absolute; bottom: 0;">
And here the style= "bottom: 0;" that is making everything in it to go at the bottom of the page.
<div class="checkoutTable">
<!--content-->
</div>
<div class="container-fluid" style="position: absolute; bottom: 0;">
<!--content-->
</div>
there is more than one solution for this issue
you can add position like
.Class {
position : absolute;
top : 0;
}
.Class {
position :fixed;
top : 0;
}
I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?img of the sections I am talking about
ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too?
edit: this is a pic of how i wish it would look
HTML:
<section class="one">
<div><span class="title">New products</span></div>
<br>
<button class="left">
<span class="Lmain"></span>
<span class="Lside"></span>
</button>
<div class="items">
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
</div>
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
</section>
CSS:
.title {
text-align: center;
position: absolute;
margin: auto;
border: 1px solid goldenrod;
font-size: 40px;
}
.one {
background-color: hotpink;
position: relative;
}
.two {
background-color: rgb(255, 0, 128);
}
/*items appearance*/
.items {
position: relative;
margin: auto;
}
.item {
border: 1px solid rgb(255, 170, 0);
float: left;
position: absolute;
top: 0px;
margin: 0px 8px;
left: 12%;
width: 350px;
height: auto;
}
.itemImg {
width: 100%;
height: auto;
}
/*end of item appearance*/
.right {
right: 0px;
top: 0px;
position: absolute;
}
.left {
left: 0px;
top: 0px;
position: absolute;
}
Utilize flexbox to make this layout easy:
body {
margin: 0;
background: #1a1a1a;
color: #fff;
font-family: sans-serif;
}
h1#title {
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#products {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
}
.product {
padding: 2rem 1rem;
background: #fff;
color: black;
margin: .5rem;
}
<body>
<h1 id="title">Items</h1>
<main>
<div class="arrow" id="arrow-left">←</div>
<div id="products">
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
</div>
<div class="arrow" id="arrow-right">→</div>
</main>
</body>
Here a list of problem I see:
the .title element is position:absolute, so it doesn't fill any space and other elements will position weirdly. Solution: remove position: absolute
the .title is a <span> element witch is an inline-element who doesn't behave like a block element (<div>, <p>, <h1>, etc.), so the text-align: center doesn't take effect. Solution: remove the span and give the .title class to the parent <div>
the left and right buttons should be wrapped in a <div> with position:relative
Here is a jsfiddle with the fixed code.
I didn't fix the image positioning because i think those will be positioned by js, anyhow it dipends by the images dimensions and is a very weak method. So I strongly suggest using flexbox that is widely supported by browsers.
You can follow the #yerme example or this guide on flexbox.
How do i place text over image div in certain position while keeping it responsive(doesn't move from that spot on smaller devices or bigger)
Problem im getting is that most of the content wont fit like i want it or wont even stick to image in smaller devices, so i need solution on how to solve this one,placing 3 text divs on image div without using method of making background image, i need it to work with tag
Bootstrap v4
i tried this:
CODEPEN
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test"><h2>Gradjevina koja se gradi duze od egipatskih piramida</h2></div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="#asset('/images/slider-1.png')">
</div>
</div>
and CSS:
.cover-image {
position: relative;
}
.slider .image-link {
position: absolute;
bottom: 20px;
left: 10px;
width: 100%;
color: white;
}
.img-test {
font-family: Oswald;
font-size: 40px;
font-weight: 600;
position: absolute;
bottom: 50px;
left: 10px;
color: white;
text-transform: none;
}
.slider .image-date {
position: absolute;
bottom: 150px;
left: 10px;
color: white;
border-bottom: 1px solid white;
margin-bottom: 0;
}
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test">
<h2>Gradjevina koja se gradi duze od egipatskih piramida</h2>
</div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="http://vietlongtravel.com/wp-content/uploads/2017/05/151548909_high-770x530.jpg">
</div>
</div>
Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX
Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>
.page-scroll {
text-align:center;
}
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->