I am used to creating a hero image as a background image and overlaying a hero button on top as a relative/in-line component.
Today, I was given a hero image that has text on it (see below). The hero button is supposed to go under the text that says "Check out the Open Enrollment Overview...". But, two things are happening:
1. when I position the button as I usually would, the button doesn't stay under that text when I shrink the length of my screen.
2. the button won't go on top of the hero image but instead, is laying below the bottom of the image and won't go on top.
<!-- Hero Image-->
<div id="banner" class="row">
<div class="col-xs-12">
<img src="../img/headers/bannerHome_OpenEnrollment.png" class="img-responsive" alt="open enrollment" tabindex="0">
<!-- Hero Button -->
<div class="hero-text">
<button class="btn btn-secondary hero-text">Learn More <img src="../img/icons/btnArrow_white.png"></button>
</div>
</div>
</div>
#banner .col-xs-12 {
padding-left: 0;
padding-right: 0;
background-color: #49c8f4;
position: relative;
}
.img-responsive {
margin-left: auto;
margin-right: auto;
display: block;
}
.hero-text button {
border: none;
position: absolute;
margin-left: 150px;
margin-bottom: 150px;
outline: 0;
display: inline-block;
color: white;
background-color: #003057;
font-size: 24px;
font-family: "Klinic Slab Medium";
cursor:pointer;
}
It is not considered a best practice to have text baked into the image. Preferably you would build out the text sections in html. This would allow them to be positioned relative to each other.
Related
I'm trying to make a design that utilizes white space.
I have an image that I want on a white background. I have a class that has a white background, and the image itself (which also has a white background as part of the image). I'm having an issue where I can't ensure that the div class is the same height as the image itself if I have both be responsive.
I've tried adding a second image with the same height as the initial image that is just white space, setting the div to be responsive, and a bunch of other things, but I'm not sure what the best way to do this would be. The page itself is up at http://jamieaurora.com/devinTribute.html to get an idea of what I'm going for (though the code is a bit out of date than what I'm posting here). If anyone could point me in the right direction, it'd be greatly appreciated. I cut out the portions of the code that I don't feel are relevant, but if you would like to take a look at the full HTML file, it is located in this hastebin. Thank you so much!
https://hastebin.com/tifiqaciri.xml
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
width: 100%;
height: auto;
}
.hero-section
{
background-color: white;
font-family: Oswald;
letter-spacing: 4px;
top: 0;
height: 64%;
width: auto;
padding-top: 5%;
padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
<div class = "container-fluid">
<div class = "row">
<div class="col-xs-6">
<img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
</div>
<div class="col-xs-6">
<h1 style="padding-left: 62%" class="responsive">Title Text</h1>
<h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
</div>
</div>
</div>
</section>
I had a parent div container with two main components side-by-side. I had an image on the right that was responsive. I wanted the text on the left side to stay in the centre and to the left of the image as it changed size depending on the browser's screen size.
I set the parent's container height to the same size as the image in its original form but in em.
Using a combination of height: auto and max-height: 100% worked for me.
The return in my React Component was:
<div className="videoAndDescription">
<div className="left33">
<div className="textToSquare">
<h1>Firewood, delivered...</h1>
</div>
</div>
<div className="right66">
<img src={stoveburning} />
</div>
</div>
My CSS:
.videoAndDescription{
display: flex;
flex-direction: row;
background-color: red;
height: 40em;
}
.left33{
color: orange;
display: flex;
justify-content: center;
align-content: center;
width: 60%;
}
.left33 .textToSquare{
height: auto;
background-color: black;
}
.right66{
width: 40%;
}
.right66 img{
max-height: 100%;
}
I have a series of full-screen divs in Visual Composer and I want an arrow at the bottom of each one indicating to users they should scroll for more content. I tried absolute positioning on the divs containing the icon with no luck. All I've done is move the icon a few pixels to th
<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>
<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>
<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">
<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">
<i class="Defaults-chevron-down"></i>
</div>
</a>
</div></div></div></div></div></div></div>
</section>
Existing CSS:
.aio-icon.none {
display: inline-block;
}
.aio-tooltip {
display: inline-block;
width: auto;
max-width: 100%;
}
.vc_column-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
}
.wpb_column {
position: relative;
}
.vc_column_container {
display: flex;
flex-direction: column;
}
.vc_row {
position: relative;
}
.l-section-h {
position: relative;
margin: 0 auto;
width: 100%;
}
The icon itself is the Defaults-chevron-down.
Do you have an idea how to position that icon properly?
I also struggled a little with this. But there is a rather quick and dirty fix for this:
Just put another row below the full height row. Place your icon there and give this element a top margin of i.e. -200px.
For some strange reason the rather logical approach to put the icon in the full height row itself and to position it absolute to the bottom is not properly supported by the source generated from WPB.
I had this issue this week. The way I resolved it was added the icon in that row/section (in my case a single image element with a custom link to a .svg) and added a class to it.
The CSS for the class was then:
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;
(I added a negative margin top as I noticed the icon was cutting of a little on my Google Pixel phone with the fixed bottom bar so that pulled it up a little.)
I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?
First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}
I need to make my app title centered in the app Semantic menu.
Below is my current code :
HTML:
<div class="ui red inverted borderless top attached menu">
<div class="ui red dropdown icon launch button">
<i class="sidebar icon"></i>
</div>
<a class="item mytitle ">My App Title</a>
<div class="ui right aligned category search item">
User Name
</div>
</div>
CSS :
.mytitle {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 35px;
display: table-cell;
color: #FFFFFF;
text-decoration: none;
}
I tried to add the width="90%" in the CSS, but although it is able to make it centered, it pushed the Username, which I want to avoid.
Is there another way to make it centered?
Here is my current JSFiddle
Like This https://jsfiddle.net/DIRTY_SMITH/85fenw7t/1/
.mytitle {
height: 35px;
color: #FFFFFF;
text-decoration: none;
margin-left: calc(50% - 90px);
}
The UI of my page currently shows an Image in backgroud and text on left hand top corner of the page. Following is the code I am using for the image.
<div>
<div style= "z-index: 1; position: absolute; text-align: left; border: 1px solid black;">
<img src="slide1.jpg" alt="alt text" style="height:220px;width:500px;border-width:0px;" />
</div>
<div id="curtain" style="z-index: 2; position: absolute; padding-left: 10px;">
<div style="background-color: transparent; font-weight: bold; font-size: 1.8em; padding-top: 5px;">
Profile
</div>
<div style="font-size: 1em; width: 215px; color: #cccccc;">
He is a good citizen and a great teacher.
</div>
</div>
</div>
I want to add 2 small icons aligned vertically on the right hand side of this image.
Can someone help me with the css ?
Something like this?
http://jsfiddle.net/7KTEQ/
Just add <div id="smallImages"><img src='ONE' /> <img src='two' /></div> inside second div
and css for it is:
#smallImages {
position:absolute;
margin-left:400px;
}
change margin-left for css depending on second div width and image sizes..