Hello I am needing some help with my website. As you can tell from the image I have provided I need the text to be centered in the middle of the rectangular box. How do I go about doing this?
My css is,
.extendcontainer {
background: rgba(255,255,255,0.1); // Transparent White Background
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
}
set the height of the box and the line-height of the box to be the same.
Example:
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
height:30px;
line-height:30px;
}
Doesn't work for multiple lines though
add this rule
padding-top:40%;
Like this
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
padding-top:40%;
}
You can play with % to adjust it.
You can using vertical-align: middle;
.extendcontainer {
background: rgba(255,255,255,0.1); // transparent white
background: #fff; // Left as a fallback for older browsers
color: #FFFFFF;
vertical-align: middle;
}
Using line height is probably the easiest, if the text will always be on one line.
Looks like your container is 38 pixels high. To exactly center your text, try adding this:
.extendcontainer {
line-height:38px;
height:38px;
}
using padding-top may show the content centered for the screen that you are viewing currently. If the same page is seen from larger sized monitors, it may not. It is highly appreciated to use
vertical-align: middle;
so that, it is centered in all size monitors.
Related
I am trying to style the Textarea's resizer in the dark mode of my website so that it is not a white block in an otherwise dark website. As such, I tried to both use ::-webkit-scrollbar-corner and ::-webkit-resizer, although the first one leaves white corners (see screenshot), while the other one removes the characteristic two lines from the resizer. I know these changes will affect only Webkit and Blink based browsers, thus not IE, older versions of Edge and Firefox. Is there a way I can style ::-webkit-scrollbar-corner to avoid having those white corners? I want to avoid adding custom wrappers with custom scrollbars as much as I can, as it would take me way longer and add unnecessary complexity.
Here is a minimal example to reproduce the issue:
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
textarea {
background-color: black;
color: white;
}
<textarea>
Hello
World
</textarea>
Update: To clarify, I still need the textareas to be resizable, I want to know if there is a way to remove the white top and left borders from the resizer without styling ::-webkit-resizer which would mean using an SVG to have the two lines typical of the resizer, as in the image.
It's because the textarea can be resized, so the bottom right corner is resizing box.
You can remove it by setting the resize property of textarea as none;`
I think you can do like this.
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: #002200;
border-radius: 20px;
border: 3px solid transparent;
background-clip: padding-box;
}
textarea {
background-color: black;
color: white;
resize: none;
width: 100%;
height: 100px;
}
<textarea>
Hello
World
</textarea>
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
I try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.
I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.
Screenshot without hover effect: http://i.imgur.com/TWSvdUt.png
Screenshot with hover effect: http://i.imgur.com/NdELr4T.png
My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!
Here is what I did:
.frontpage-box {
position: relative !important;
border-top: 8px solid #233c5b !important;
background: #eeeff1 !important;
height: 280px !important;
}
.frontpage-box:hover {
cursor: pointer;
position: relative !important;
border-top: 8px solid #daaf36 !important;
background: #233c5b !important;
color: #ffffff !important;
}
Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.
Thanks in advance,
Chris
Without seeing your full code you would want to do
.frontpage-box:hover p { color: #fff }
and not set it in .frontpage-box:hover with the important.
Having a small problem where the background image is not showing in any of the IE versions (except IE 9 I believe), not sure what is going wrong, any helps/thoughts/things I could try out?
Kind regards
http://www.trucknetuk.com/phpBB/viewforum.php?f=46 It is the Michelin banner(not the small sponsor) just above the new topic button
background: url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x scroll center 0 transparent;
Change this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif')repeat-x scroll center 0 transparent;
To this:
background: url('./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif') repeat-x scroll center 0 transparent;
The difference is a space after the closing bracket and before the "repeat-x". IE is much pickier than other browsers regarding syntax.
Your background shorthand is wrong, transparent needs to come first
#page-body {
background: transparent url("./styles/Owner_Fleet_Operator_MS/theme/images/michelinback.gif") repeat-x center 0;
clear: both;
padding: 4px 5px;
}
proper shorthand is : body {background:#ffffff url('img_tree.png') no-repeat right top;}
Not sure what you are trying to do with the scroll declaration
.button{
background: transparent url('../images/backrgound.jpg') no-repeat top center;
}
CSS Standard
background : color URL repeat-section and position
JPEG Images
Check whether images are of JPEG2000, if yes, then open any image editor and save it again with proper jpeg extension
im using iframe to desplay some pages that hold a gallerys and i added
2 divs that 1 of them is an arrow build by borders.
now when i try to see the 2 divs with the iframe the background on the div that holds the arrow is white i tryed to set the background color:
background-color:transparent;
but it didnt work.
is there any way to make the div background transparent?
i should add that the page that hold the iframe got an image.
this is the css of the arrow:
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 37px;
width: 0px;
height: 0px;
You will need to add to the iframe:
allowTransparency="true"
[UPDATE]
The problem might be your arrow itself. You need to make the borders you don't want to see transparent instead of white. Compare these two:
http://jsfiddle.net/XtMCa/
And this (your CSS), which has a white background:
http://jsfiddle.net/XtMCa/1/
.transparent_div
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}