I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
Related
In my form validation I'm using bootstrap tooltips to show
error message.
I adjusted the css to change the appearance (img 1)
/* Tooltip */
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 4px;
font-size: 9px;
letter-spacing: 0.5px;
}
.tooltip.bottom {
padding: 0px !important;
margin-top: -6px !important;
}
/* Tooltip arrow */
form .tooltip.top > .tooltip-arrow,
form .tooltip.bottom > .tooltip-arrow,
form .tooltip.left > .tooltip-arrow,
form .tooltip.right > .tooltip-arrow {
border: 0px;
}
I would place my tooltip to the left of the element as in img 2,
but I haven't found a way to do it. (bottom-left not working)
Bootply
How would I do it?
Thank you
According your pen, just add this css to your css
.tooltip.fade.bottom
{
left:30px !important;
}
I just use !important to override the current left value and you will get your result.
Please add the following in your css:
.tooltip{
left:20px !important;
}
modify css like below,
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 0px;
font-size: 9px;
letter-spacing: 0.5px;
margin-left: -352px;
}
.tooltip-inner {
max-width: 85px;
text-align: center;
border-radius: 4px;
}
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
Our application has a master .css common for all our pages and we are not allowed to change anything in this file.
We have an entry there as follows:
ul li{display:block;padding:0 0 0.5em 15px;margin:0 0 0 0;background:url(../images/bullet.gif) top left no-repeat;}
I am implementing predictive search on one of the jsp-s and I have a specific css file for this purpose which is as follows
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: none;
list-style: none;
padding: 0;
margin: 0;
list-style: disc inside;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
My problem is that I am unable to remove this bullet.gif from my current predictive search list . If I add background: none I am loosing all the existing background colours.
How can I stop this bullet.gif to appear in my list.
PLEASE NOTE : I tried with background-image:none; also and it did not work, the bullet.gif is still coming up in my search list :(
Regards, M
Instead of background: none try:
background-image: none
You should write
background-image:none;
On this page I'm trying to position quote images around the block quote but they won't sit right.
This is the CSS:
blockquote {
padding-left:10px;
color:#444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
blockquote p {
padding: 0 100px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
I want to keep the images the same size ideally. I just want to make the text stop overlapping the images. I tried specifying the width of the .blockquote as 500px but it didn't seem to make any difference.
Any ideas would be welcomed. Thanks - Tara
Two things:
In order to see the images behind
the text you should not specify a
background color for the inner paragraph; make
it transparent instead.
The specified padding is not applied due to another property (.entry p) which is more specific. You could set this blockquote padding to !important but that's generally not recommended, another option is to make this one more specific than the other (.entry p) by adding the .entry class. Be aware that only blockquotes with a parent .entry class will be selected this way. (more info about specificity)
The css:
blockquote {
padding-left: 10px;
color: #444;
font-style: normal;
width: 500px;
background: #ff9999 url(/wp-content/themes/primus/primus/images/quoleft.png) left top no-repeat;
}
.entry blockquote p {
padding: 0 100px;
background: transparent url(/wp-content/themes/primus/primus/images/quoright.png) right bottom no-repeat;
}
Try adding this property:
.entry p {
margin: 5px 5px 5px 15px;
padding: 0px 40px 0px 0px;
line-height: 20px;
font-family: Tahoma,Georgia, Arial,century gothic,verdana, sans-serif;
font-size: 13px;
}
I managed to get the following:
Hope that helped (:
Depending on the browser support that you need, you can try it without images, using CSS:
blockquote {
padding: 0;
margin: 0;
border: 1px solid blueviolet;
}
blockquote:after,
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 0;
height: 0;
vertical-align: -0.5em;
display: inline-block;
}
blockquote:after {
content: "”";
margin-left: 0.05em;
}
blockquote:before {
content: "“";
margin-right: 0.05em;
margin-bottom: -0.5em;
}
Live example here
(Tested on Firefox and Chrome only)
I hope you can help my with a exercise I have been stacking. I am wondering why the header is not appears in blue - as I actually have assigned: Please not the header area. I have assigned color "blue". BUt I have tried any color as well. The header keeps white
This is the CSS Code. (HTML is ok according to Dreamwaver)
Thanks a lot!
Best regards from Berlin, Germany.
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font: 1.1em/1.3em Georgia, "Times New Roman", Times, serif;
/*1.1em/1.3 typischer Code für: Schriftgröße 1.1em und Zeilenhöhe 1.3em*/
}
h1, h2, h3 {
padding: 0.7em 0;
}
p {
padding: 0.3em 0;
}
/*-------- CONTAINER POSITION (#CONTAINER)----------*/
#container {
margin: 1em 6%;
background-color:#ffffff;
border:1px solid #1166cc;
}
/*-------- TOP AREA POSITION (#HEADER)----------*/
#header {
background-color: blue;
}
#header h1 {
color: white;
float: left;
width: 65%;
padding: 0.5em 2%;
}
#header form {
padding: 0.4em 1%;
float: right;
background-color: #77aadd;
width: 20%;
margin: 0.5em;
}
#header input {
padding:5px;
background-color: #ffffff;
border: 2px solid;
font-size: 1em;
color: #999999;
width: 70%;
}
/*-------- CONTAINER NAVIGATION POSITION (#NAVBAR)----------*/
#navbar {
clear:both;
background-color:#77aadd;
padding: 0.1em;
}
#navbar ul {
padding: 0.6em;
}
#navbar li {
display:inline;
list-style:none;
}
#navbar li a {
padding: 0.3em;
color: #fafafa;
}
/*-------- CONTENT POSITION (#CONTENT)----------*/
#content {
float: left;
width: 65%;
padding: 0.5em 3%;
}
/*-------- INFOBAR DESIGN (#SIDEBAR)----------*/
#sidebar {
float:right;
padding: 0.5em 3%;
font-size: 0.95em;
background-color:#cceeff;
width: 23%;
}
/*-------- FOOTER POSITION (#FOOTER)----------*/
#footer {
clear:both;
background-color:#5599dd;
text-align: right;
color: white;
}
#footer p {
padding: 0.5em;
}
Use firebug to debug it.
Select the elemnt (with the arrow icon) then see the CSS style panel. It will tell you all css styles and where they were defined for the element.
Double check your use of ID's and Classes.
Make sure your Header container has a height value (Use Firebug). If you are using floating elements in your Header, remember to place <div style='clear:both'></div> just before closing Header Container.
Add position, width and height to #header, for example:
#header {
background-color: blue;
position: absolute;
width: 80%;
height: 20%;
}
If you don't, the browser have no way of knowing how big #header is supposed to be.
Also, use http://validator.w3.org to check that your code is OK. It's much more reliable than Dreamweaver. At least Dreamweaver 8, that I'm using; later versions may be better.
By the way, if you're learning HTML, CSS or one of several other computer languages, http://www.w3schools.com is a great resource.