I am trying the create a search page, where when i add text in search panel the images of those text will display. The issue I am facing is that the images are overlapping on the search div even though I have positioned it well.
I don't want to fix it using top values as I want the page to be responsive and the top values will be changing based on the width of the page. Is there a cleaner way to do it ?
<div class="jumbotron text-center">
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}">
</div>
css:
#body {
width: 100%;
}
#search {
position: absolute;
top: 174px;
left: 0px;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 10;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
.card {
position: absolute;
}
You can set the overflow on the card class to hidden(to hide the overlapping content) Or you can set it to auto( scroll bars appear if overlapping).
.card{
overflow: hidden;
}
Well you haven't positioned anything well there. Does everything really need the position property set to absolute? If so, try using JavaScript to get the search area's height (or set a fixed one) & apply it to the "top" property in the card.
Related
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
I am trying to have a number of circles that have background images and texts side by side. And I want when hovering over the circles the opacity of the image to change and also the text to disappear. Also, I don't want the underline sign for links to be shown. But I have a number of problems.
Here is my CSS code:
.ccont {
display: inline-block;
margin: 10px;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
justify-content: center;
align-items: center;
overflow: hidden;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(http://deepchains.com/images/team.png);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
font-size: 0;
}
and here is the HTML code:
<center>
<div class="circle">This is <br>Text1</div></div>
<div class="ccont" style="font-weight: bold"><div class="circle">Text2</div></div>
</center>
Here are the issues:
At the beginning when the page loads I see that because of a I get underline links under the images as is shown here:
When I hover over the left image, the text disappears but also the circle gets deformed as is shown here:
Finally when I hover over the right image its text correctly disappears as is shown here:
So here are my questions:
I have been trying to use text-decoration: none; in different places but I always see the underline marks under the images as they have links. How can I remove them?
Why when hovering over the left image, the image gets deformed, but the right image does not get deformed? The only difference is that the left image text has a <br> in it.
How can I have different background images for the left and right circles?
UPDATE:
I applied #chriskirknielsen solution and I get this:
The two images are not aligned correctly. It seems that the underlines are aligned and as two image texts have different heights it pushes two images to different vertical locations. If we can remove the underlines maybe this can be resolved?
It seems your sizing issue occurs because of box-sizing. Adding * { box-sizing: border-box; } at the start of your CSS fixes this issue because the padding from the text is taken into account when calculating the layout.
EDIT: OP's issue seems to be triggered by the font-size, so maybe just make the font transparent is the best idea?
.center {
text-align: center;
}
.ccont {
display: inline-block;
margin: 10px;
}
.cclink {
text-decoration: none;
}
.circle {
position: relative;
height: 180px;
width: 180px;
border-radius: 50%;
background-size: 0 0;
background-position: -9999px -9999px;
justify-content: center;
align-items: center;
overflow: hidden;
display: inline-flex;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: inherit;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.2;
}
.circle__text {
padding: 1px;
background-color: none;
}
.circle:hover:after {
opacity: 1;
}
.ccont:hover {
color: transparent;
}
<div class="center">
<a href="http://www.url1.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">This is
<br>Text1</div>
</div>
</a>
<a href="http://www.url2.html" class="cclink">
<div class="ccont" style="font-weight: bold">
<div class="circle" style="background-image: url(http://deepchains.com/images/team.png);">Text2</div>
</div>
</a>
</div>
PS: Your HTML code is not very compliant to today's standards. The <center> tag is deprecated, and tags should be lowercase.
I have the following:
https://codepen.io/anon/pen/KXYLrq
<header>
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</header>
with css that is too long to list. I'd like to focus on the #media query. Due to larger screen sizes i need to limit the width of the input bar. If i set a max-width, or fixed width the button will move along with the screen size and continually move to the right.
How do i fix the button in one position past a certain screen size ? (In codepen, if you take out the media query it works just fine, presumably because i set the width to 100%)
Add this also in media query
header button{
right: auto;
left: 695px
}
It will help you to align the button with the text box.
I placed a Container over your input and button, assuming you'll have other elements in the header later.
I then set the section as display: inline-block to make it take the width of the content and also made it position: relative for the child absolute elements. So that those elements will take the section as a starting point and not the header.
https://codepen.io/anon/pen/jGRooL
Just wrap input and button in one parent div and set position relative in it and add width in it.
header {
background: #25b99a;
border-radius: 0 0 10px 10px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
box-sizing: border-box;
height: 80px;
padding: 15px 25px 0 25px;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
header input {
background: rgba(255, 255, 245, 0.2);
border-radius: 5px 25px 25px 5px;
border: 0;
box-sizing: border-box;
color: rgba(255, 255, 255, 1);
float: left;
font-size: 15px;
height: 50px;
padding-right: 65px;
outline: none;
text-indent: 15px;
width: 100%;
}
.search-box {
position: relative;
width:100%;
max-width: 700px;
}
.search-box button {
background-color: white;
border-radius: 25px;
border: 0;
cursor: pointer;
height: 50px;
outline: none;
position: absolute;
right: 0;
width: 50px;
z-index: 2;
}
#media screen and (max-width: 767px) {
.search-box {
max-width: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="search-box">
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
</header>
Updated Codepen Demo
My CSS:
.topLogoContainer{
margin-top: 2%;
width: 100%;
height: 20%;
background-color: #660066;
border-radius: 10px;
}
.topLogoText{
width: 50%;
padding: 10px;
}
p.topButton{
text-align: center;
color: white;
}
my HTML:
<div class="topLogoContainer">
<table>
<tr>
<td class="topLogoText">
<font size="18">TB's Jewelry</font>
</td><td>
<a href="buy.php" class="topButton">
<div class="topButton2">
<p class="topButton">buy</p>
</div>
</a>
</td>
</tr>
</table>
</div>
I have a top bar of a website (let's call it "Tbar") (you know, where the logo and navigation buttons go), and I want the main text at the left, vertically center inside Tbar (of course, make it look nice and give it some margin/padding) while making 2 buttons (which are round colored divs that are links) at the very bottom of, in the right inner part of Tbar. I think I need the buttons to be relative, so it will always be inside Tbar. Trying "position: relative; right: 10px; bottom: 0px;" doesn't do what I want - since it doesn't move it to the inner right of Tbar.
Javascript seems ridiculous to use, and I'm not well practiced on it.
Some good practices:
Avoid adding elements like p or div inside your a tag.
This is a simple layout so mixing div with table is not necessary.
Using percentage for your div's height may not work.
Below is a working example. Try changing the height of your .topLogoContainer div to fit with your need.
.topLogoContainer {
margin-top: 2%;
width: 100%;
height: 300px;
background-color: #660066;
border-radius: 10px;
position: relative;
}
.topLogoText {
position: absolute;
left: 10px;
top: calc(50% - 9pt);
color: white;
font-size: 18pt;
padding: 10px;
}
.linkContainer {
position: absolute;
bottom: 10px;
right: 0;
}
.topButton {
margin-right: 10px;
float: right;
text-align: center;
color: white;
}
<div class="topLogoContainer">
<div class="topLogoText">TB's Jewelry</div>
<div class="linkContainer">
something else
buy
</div>
</div>
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}