This is the main code that positions the box. I need to make the search input along with the other parts always center on any size screen. The input area of the box keeps moving to the far right of the screen, which is a problem.
.wsite-search {
position: relative;
margin-top:78px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
.wsite-search-input:focus {
background: #f8f8f8;
border: 1px solid #000;
}
.wsite-search-input {
width: 158px;
height: 19px;
border: 0;
padding: 10px 45px 10px 7px !important;
font-family: 'Oxygen', sans-serif;
color: #8e8e8e;
font-size: 17px;
line-height: 24px;
background: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight:300;
}
.wsite-search-button {
position: absolute;
width: 18px;
height: 18px;
border: 0;
right: 14px;
top: 10px;
background: url(submit-button-v3.png) no-repeat 0px 0px;
}
are you trying to center just the input box itself, if so you can center it by using margin
margin: 0 50%;
http://jsfiddle.net/rlynjb/eyjzhj8s/
if you want to center both input and button in the middle. you can wrap those 2 elements in a div tag and use the margin: 0 50% to center both elements.
Related
There is a button with a border: 3px solid #E82929; what technology can be used to add additional lines like in the photo?
.btn {
position: relative;
width: 362px;
height: 71px;
color: #FFFFFF;
background-color: #000000;
border: 3px solid #E82929;
font-family: 'Flamenco';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
}
<button class="btn">Забронировать столик</button>
Use gradient
.btn {
position: relative;
padding: 20px 50px;
color: #FFFFFF;
border: 3px solid #E82929;
font-family: 'Flamenco';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
background: linear-gradient(90deg, #E82929 40px,#0000 0 calc(100% - 40px), #E82929 0) 50%/100% 3px no-repeat;
background-color: #000000;
}
<button class="btn">Забронировать столик</button>
You do not need extra markup, because it can be done with the ::before and ::after pseudo elements.
Assuming your 2 lines at the left and right should have a width of 30px and a left and right padding of 10px, you could add this to your already existing CSS:
.btn {
position: relative;
width: 362px;
height: 71px;
color: #FFFFFF;
background-color: #000000;
border: 3px solid #E82929;
font-family: 'Flamenco';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
}
/* extra code comes here */
.btn {
padding: 0 40px; /* 30px line width + 10px padding */
}
.btn::before,
.btn::after {
background-color: #E82929; /* border color */
content: ''; /* content is mandatory for the element to show up */
height: 3px; /* 3px border width */
position: absolute;
top: 50%; /* 50% from the top */
transform: translateY(-50%); /* half of its height back to the top */
width: 30px; /* 30px line width */
}
.btn::before {
left: 0;
}
.btn::after {
right: 0;
}
<button class="btn">Забронировать столик</button>
Change the width and padding according to your needs.
What it does: It adds the ::before and ::after pseudo elements with no text content on the left and right and positions them vertically centered.
If you have any questions regarding details, feel free to ask.
Creating a circle around a letter or text works fine, but in my case I only want to circle a single letter within a word (which is within an H1 tag):
.large {
font-size: 5em;
}
.circle {
border-radius: 50%;
padding: -0.5% 5% 0% 5%;
background: #fff;
border: 10px solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Fiddle is here: https://jsfiddle.net/henzen/zwph2nsv/4/
This produces:
Notice that the circle is conforming to the H1 height (I think) - I need it to be compressed vertically, ie the vertical padding needs to be the same as the horizontal, tightly wrapped around the "e".
Is this possible, or would I need to separate the "e" from the "Text" completely in the HTML?
I have tried Unicode chars (eg, ⓔ), which work, but cannot be reliably styled across browsers.
Thanks for any pointers.
You could use a pseudo element.
.large {
font-size: 5em;
}
.circle {
position: relative;
color: red;
}
.circle:after {
content: '';
width: 39px;
height: 44px;
border: 4px solid red;
position: absolute;
border-radius: 50%;
left: -5px;
top: 27px;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
use a pseudo element.
Try This: https://jsfiddle.net/2gtazqdy/12/
* {
margin: 0;
padding: 0;
}
.large {
font-size: 5em;
}
.circle {
height: 50px;
width: 50px;
display: inline-block;
padding-left: 20px;
}
.circle::after {
display: inline-block;
height: 50px;
width: 50px;
z-index: 1;
position: absolute;
top: 18px;
left: 4px;
content: "";
color: red;
background: transparent;
border: 10px solid red;
border-radius: 50%;
}
My output:
try this
for your html do <h1> <span> C </span> ircle </h1>
then in the css define your h1 span
and give it padding, in the shape of a rectangle you could use this =
padding: 20px 10px;
then add a border, for example =
border: 5px solid #ddd;
then at last give it a border radius, this is a bit tidious to figure out but just play around with the pixels and you'll eventually get it right how you want it.
for example =
Border-radius: 20px
your html:
<h1> <span> C </span>ircle </h1>
your total css:
h1 span{
padding: 20px 10px;
border: 5px solid #ddd;
border-radius: 20px;
}
If you want to make a circle, the following is needed:
display: inline-block (or display: block)
same width, height and line-height
text-align: center
Use em to correspond with the font-size of the container.
Example
.large {
font-size: 5em;
}
.circle {
display: inline-block;
width: 0.8em;
height: 0.8em;
line-height: 0.8em;
text-align: center;
border-radius: 50%;
background: #fff;
border: 0.05em solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Please try this code
.large{
text-align: center;
font: 40px Arial, sans-serif;
color:#000;
font-weight:bold;
}
.circle {
border-radius: 50%;
background: #fff;
border: 6px solid red;
padding: 3px 10px;
text-align: center;
font: 28px Arial, sans-serif;
color: #000;
font-weight: bold;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
i was trying to make menu buttons with cutting edges, i want to give it a top border but it is not working at all, when i give it a border it come out a little to the left side.. please help
each menu button have different color, i want to make it top boder RED but it is not working DEMO
html
CSS
.btncol1 {
background-color: #8cc63e;
}
.btncol2 {
background-color: #aadcf3;
}
.btncol3 {
background-color: #87868e;
}
.btncol4 {
background-color: #c47269;
}
.btncol5 {
background-color: #8cc63e;
}
.button:not(:last-child) {
margin-left: 3px;
}
.button:before {
content:'';
width: 0px;
height: 0px;
display: block;
border-bottom: 14px solid transparent;
border-left: 14px solid White;
position: relative;
margin-left: -14px;
margin-top: -14px;
top: 4px;
left: 4px;
}
.button {
height: 55px;
padding: 10px;
width: 100px;
display: inline-block;
text-decoration: none;
color: white;
margin: 0;
float: right;
transition: all 300ms ease;
font-size: 14px;
font-weight: 400;
font-family:'Open Sans', sans-serif;
text-align: left;
}
The border is going out a bit to the left side because the red border is for the whole div and the cutting edge is positioned on top of the div by using CSS.
Now since you are applying the red border, you have to move the position of the :before pseudo-element a bit higher for the red border to become invisible and get positioned under the cutting edge.
.button {
border-top: 1px solid red;
}
.button:before {
content:'';
width: 0px;
height: 0px;
display: block;
border-bottom: 14px solid transparent;
border-left: 14px solid White;
position: relative;
margin-left: -14px;
margin-top: -15px; /* This was changed */
top: 4px;
left: 4px;
}
I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block