I'm trying to make an adaptive, but as soon as I started to reduce the width, I saw that everything had shifted very much.
The question is why the photo shifts instead of shrinking while dragging the content along with it
CSS
//Styles for background
.header{
position: relative;
min-height: 900px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
//Styles for the search menu
.search {
width: 700px;
position: absolute;
left: 50%;
transform: translateX(-50%);
/* If you also want it vertically aligned to the center, uncomment the below lines and remove the above transform */
top: 40%;
transform: translateX(-50%) translateY(-50%);
}
.search_bar {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 17px;
color: antiquewhite;
padding: 15px 20px;
border: 2px solid white;
background-color: rgb(58 58 58 / 0.38);
width: 100%;
outline:none;
}
enter image description here
enter image description here
I hope for your help friends
Related
This question already has answers here:
Text in Border CSS HTML
(10 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
So I am working on a front end website with React/HTML/CSS to mimic a wireframe design and am curious about achieving the desired effect below where the border breaks just behind the image placement over it. Perhaps there is a trick I can do with the image to give it a similar texture and color as the background image, but I would prefer to use code to achieve the effect. Any ideas on how to achieve this? Is this possible?
Attempted CodePen Link
Relevant CSS:
.middle-logo {
width: 100%;
height: auto;
max-width: 125px;
}
.negative-top-margin {
margin: -50px 0px 0px 0px;
}
.bg-image-container {
position: relative;
text-align: center;
}
.bg-image {
/* The image used */
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(68, 105, 126, 0.788),
rgba(68, 105, 126, 0.788)
),
/* bottom, image */
url("https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/nature.png?alt=media&token=f2dc74ac-bb80-4847-9345-f47346f736de");
/* Full height */
height: 700px;
/* Center and scale the image nicely */
background-position: 50% 35%;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-content {
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
width: 75%;
}
.bg-content:before {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
border: 1px solid white;
}
.bg-h1 {
font-size: 2.5em;
margin: 0;
}
.bg-p {
font-size: 1.2em;
}
.bg-text-box {
padding: 50px 0 50px 0;
}
Design to achieve:
This is one way to do it. Remove the top border and use :after and :before elements for those top lines.
BTW Your image is not completely symmetrical, it should have the same empty space in both sides for it to look perfect.
.middle-logo {
width: 100%;
height: auto;
max-width: 125px;
}
.negative-top-margin {
margin: -50px 0px 0px 0px;
}
.bg-image-container {
position: relative;
text-align: center;
}
.bg-image {
/* The image used */
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(68, 105, 126, 0.788),
rgba(68, 105, 126, 0.788)
),
/* bottom, image */
url("https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/nature.png?alt=media&token=f2dc74ac-bb80-4847-9345-f47346f736de");
/* Full height */
height: 700px;
/* Center and scale the image nicely */
background-position: 50% 35%;
background-repeat: no-repeat;
background-size: cover;
}
/* Position text in the middle of the page/image */
.bg-content {
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
width: 75%;
border: 1px solid white;
border-top: 0;
}
.bg-content:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: calc(50% + 125px/2);
height: 1px;
background: white;
}
.bg-content:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: calc(50% + 125px/2);
height: 1px;
background: white;
}
.bg-h1 {
font-size: 2.5em;
margin: 0;
}
.bg-p {
font-size: 1.2em;
}
.bg-text-box {
padding: 50px 0 50px 0;
}
<div class="bg-image-container">
<div class="bg-image"></div>
<div class="bg-content">
<img
class="responsive middle-logo negative-top-margin"
alt="creek"
src="https://firebasestorage.googleapis.com/v0/b/theblairfamilyfoundation-org.appspot.com/o/Asset%202.png?alt=media&token=df5a94b2-2b06-4fd8-947e-13dd0d5abbf9" />
<br/>
<div class="bg-text-box">
<h1 class="bg-h1">Committed to Montgomery County</h1>
<div class="m-width center">
<p class="bg-p">Working with partners and communities across the county to address long-term quality of life challenges and opportunities.</p>
</div>
</div>
</div>
</div>
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
I use three shots of a button on an image to give impression of a button in action.
Normal / Hover / Active.
Here is an image of that:
The CSS code for picking the right image for the right state is here:
#btnSet1 {
position: absolute;
left: 200px;
top: 100px;
}
.btn1 a {
padding: 0px;
text-decoration: none;
opacity: 0.7;
}
.btn1 a.link1 p {
position: relative;
text-align: center;
left: -10px;
top: 20px;
color: white;
font-family: sans-serif;
text-decoration: none;
text-shadow: 5px 5px 5px #111;
opacity: 1;
}
.btn1 a.link1:link {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0 0;
}
.btn1 a.link1:hover {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -90px;
}
.btn1 a.link1:active {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -180px;
}
.btn1 a.link1:visited {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -270px;
}
#tHeader {
position: absolute;
top: 100px;
left: 300px;
}
I made these images to be large, because I need to scale them, occasionally. The HTML image element can be used to stretch any image, but I only show a region of the total image with the CSS style. So, for the sake of clarity, let's call each button face being shown a view... so, how can I stretch the view of each button face in code, since the x y refer to unscaled metrics of the image?
background-size
sprite *
px
css
div{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0px 0px;
background-size:75px 135px;
text-align:center;
line-height:45px;
}
div:hover{
background-position:0px -45px;
}
Demo
http://jsfiddle.net/katPx/
percent
css
div{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
background-size:100% auto;
text-align:center;
line-height:45px;
}
div:hover{
background-position:0% 50%;
}
Demo
http://jsfiddle.net/katPx/1/
this last one scales automatically based on the container size.
use a class
.btns{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
background-size:100% auto;
text-align:center;
line-height:45px;
}
.btns:hover{
background-position:0% 50%;
}
html
<div class="btns">whatever</div>
demo
http://jsfiddle.net/katPx/2/
How about using CSS background-size?
.btn1 a.link1:link {
background-size: 144px 90px;
}
This post has more info - Set size on background image with CSS?
You can achieve this by using percentage-based background-size and background-position. Here is a basic working example you can adapt to your needs.
JSFiddle
a {
display: block;
background-image: url('http://i.stack.imgur.com/8yNbR.png');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
a:hover {
background-position: 0 50%;
}
a:active {
background-position: 0 100%;
}
a.big {
width: 150px;
height: 90px;
}
a.small {
width: 75px;
height: 45px;
}
I am trying to prevent line breaking in this Html
http://jsfiddle.net/DD3v8/
It happens that when I resize my window, both icons and text break into new line. I've already tried with whitespace CSS property. I've tried also, a table approach, but the behaviour is the same
Can anyone figure what is happening?
Thanks in advance
try this:
.line {
height: 44px;
width: 100%;
display: inline-block;
background-color: #6c7987;
white-space: nowrap;
position: relative;
}
.icon {
position: absolute;
left: 0;
height: 44px;
width: 90px;
background-color:
#FF0080;
color: white;
text-align: center;
line-height: 44px;
font-family: Arial;
float: left;
font-size: 12px;
font-weight: bold;
padding: 0;
}
.title {
position: absolute;
left: 90px;
color: white;
line-height: 44px;
text-align: left;
padding: 0 0 0 10px;
font-family: Arial;
float: left;
font-size: 12px;
display: inline;
white-space:nowrap;
}
.botoes {
position: absolute;
width: 300px;
right: 0
}
.botao {
width: 46px;
height: 45px;
float: right;
line-height: 44px;
text-align: center;
display: block;
white-space:nowrap;
cursor: pointer;
}
.botaoVerRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoVerRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoEditarRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoEditarRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoFavRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoFavRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoPartRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoPartRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoApagarRecurso {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.botaoApagarRecurso:hover {
background: url('http://www.think-cell.com/images/cross.png') center no-repeat;
}
.clear {
clear: both;
}
The explanation is simple: with floating, you can't put more width to a holder, which is bigger than the holder's height, the float will automatically drops it, and breaks line.
If you use positions, use it like this:
CONTAINER (position: relative)
SUBelement (posision: absolute, top: 0, left: 0) < put to the top left
SUBelement (posision: absolute, bottom: 0, right: 0) < put to the bottom right
in W3C: http://www.w3schools.com/css/css_positioning.asp
If I understand your problem correcly, you need to be able to resize the window width without having the text and the "x" icons jumping down, is so:
REMOVE CSS FROM .title
min-width: 500px;
See this Fiddle Example!
I am working on this site: http://www.problemio.com and I am supposed to make a background image for half of the width of the screen for the very top of the page with the links for log-in, sign-up, etc. and make those links appear on the right side bottom of the banner border.
I tried giving it this css:
.banner
{
position: relative;
height: 80px;
/* These paddings increase the height padding a little bit */
/* padding-top: 10px;
padding-bottom: 5px; */
z-index: 1;
border-style:solid;
border-width:1px;
border-color: gray;
}
.site_title
{
float:left;
margin-top: 10px;
margin-left: 20px;
font-weight: bold;
color: #ffce2e;
text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
font-size:2.5em;
text-align: left
text-color: black;
width: 300px;
}
.site_login
{
width: 700px;
float:right;
height: 80px;
position: absolute;
right: 0.5em;
top: 0.5em;
bottom: 0.5em;
color: black;
text-align: right;
text-align: bottom;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-position: right;
margin-top: 10px;
margin-left: 20px;
}
but for some reason I can not get the log-in, create-profile text to get aligned to the bottom instead of the top. And for some reason the image does not fit perfectly into the borders of the banner div.
How could I accomplish those two things?
Thanks!!
You can make a new div inside the banner div like:
.bgdiv{
position:absolute;
right:0px;
left:240px;
top:0px;
bottom:0px;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
}
...and for the site login:
.site_login
{
width: 700px;
float:right;
position: absolute;
right: 10px;
bottom: 10px;
color: black;
text-align: right;
text-align: bottom;
}
Which produces: