I am working on a wordpress theme right now and I am wondering how to adapt font size of text inside boxes so that it always stays in the middle.
In my page at some point I have 3 rows in a section, with 3 images and in the first row I also have a text saying "En savoir plus" that is inside the image :
my wordpress section & rows
The section and its rows are responsive.
What it looks like without reducing the window
I have a class for that row that is set to "image" and the text is inside so I have put this code inside a HTML row:
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
As you can see the text-align center works perfectly when the page is normal.
But when you reduce it, my page looks like this :
After reducing a little the window
And when you reduce it again, my page looks like this :
After reducing a lot my window
What I would like is the text to change size and stay at the same place (center of the blue thing) proportionally when the boxe changes size. I will then duplicate this to all boxes.
Do you have any ideas how to do this?
Thanks in advance for your help guys, I would really appreciate is as I am kind of new to this :)
PS : I don't know if it helps but I am using the POFO template.
Have a wonderful day!
EDIT : All the code of my page :
<style>
.bordure {
border-bottom: 1px solid black !important;
}
.sub-menu > li > a {
color: blue !important;
}
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li {
background-color: white !important;
}
.simple-dropdown .dropdown-menu {
background: white !important;
}
a {
color:#71c9dd;
}
header.sticky nav.navbar-default, header.sticky nav.navbar.bootsnav {
background-color: transparent !important;
}
.pofo-footer-bottom {
display:none;
}
.texte_cabot {
z-index: 700;
position: absolute;
top: 550px;
left: 1600px;
font-size: 40pt;
}
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background-image: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/bg_header.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: transparent !important;
position: fixed;
top: 0;
left: 0;
}
header nav .nav-header-container {
padding-bottom: 163px !important;
padding-left: 0 !important;
}
.box-layout {
margin-top:-55px;
}
a:hover {
color:black;
}
body {
margin-bottom: 0;
padding-bottom: 0;
}
.image p {
position: absolute;
top: 86%;
width:100%;
color:white;
margin: auto;
text-align: center;
}
.image {
position: relative;
}
#media screen and (max-width: 778)
header nav.navbar-default, nav.navbar.bootsnav, .full-width-pull-menu {
background: url('http://newstart.visceral.fr/wp-content/uploads/2018/12/small_bg_header.png') repeat-x !important;
background-size: cover !important;
padding-bottom: 0 !important;
}
</style>
EDIT : Entire page HTML : (including POFO stylesheet (very long, sorry)) :
Tried to import it but it is too long to publish. Numbers of characters execeed. Could you please check it clicking the View code source on? :
http://newstart.visceral.fr/fluimucil/
Related
I want to achieve this:
What I already achieve:https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
.dropdown-menu { //container
overflow-y: overlay;
background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background:$blue !important;
border-radius: 6px;
}
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design?
I tried putting z-index in the elements but seems not to work.
Just switch the unit in body tag from % to vw
and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!
Make some changes in your css file use this code
.dropdown-menu::-webkit-scrollbar-track {
background-color: #E0E0E0;
}
remember to remove display: none; property from your code or change it to display: block;
please go through below link :
http://2.kidsdial.com/customer/account/login
and login with this email id : kidsdial2#gmail.com & password : kidsdial2
than please check this : http://2.kidsdial.com/marketplace/marketplaceaccount/myproductslist/
on top , you can see : Listings, Orders, Returns . above there is a
logo image: totaltoys.
I want to display background color from top of the logo [totaltoys] to bottom of the menu as like this :
you can test these CSS rules
#horizontalmenu .mymenu > li {
height: 32px;
line-height: 32px;
width: 100px;
}
#main_header .header-container .header {
background-color: #ffff00;
}
#horizontalmenu{
margin-top: -5px;
}
I would remove .bkg_header_bottom from:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom{
background-color:#fff !important;
}
and possibly remove the color here as well so you aren't duplicating code:
.adapt-0 .em-box-custom .bkg_header_bottom, .em-box-custom .container_header, .bkg_header_bottom {
background-color: #3fbdf7;
background-image: url(../images/stripes/blank.gif);
background-position: 0 0;
background-repeat: repeat;
color: #FFFFFF;
clear: both;
}
Add the background color you want here, this class contain both elements you want colored:
.page.one-column{
background-color: #3fbdf7;
}
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding