This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I dont get it, it seems so simple. I want to add a span style to
the "Hello" text with a .class
http://www.mysecretathens.gr/kulte_test/index.html
Why doesnt this .greeting class work? It only becames 60pixels when I put it like that
<span style="font-size:60px;">
Any ideas?
You havent closed a CSS class above it. Put a curly brace righ before:
::selection{
like so:
#container2 {
background-color: #ebebeb;
height: 400px;
background-image: url("white_arrow.png");
background-repeat: no-repeat;
background-position: 50% -28px;
margin: 0 auto;
padding-top: 80px;
text-align: center;
color: #636161;
font-family:'Open Sans', sans-serif;
font-size: 20px;
line-height: 30px;
}
::selection {
color: #fff;
color: rgba(255, 255, 255, .85);
text-shadow: none;
background: #da0225;
}
The problem is that you didn't close the #container2 css rule.
#container2 {
background-color: #ebebeb;
height: 400px;
background-image: url("white_arrow.png");
background-repeat: no-repeat;
background-position: 50% -28px;
margin: 0 auto;
padding-top: 80px;
text-align: center;
color: #636161;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 30px;
}
Use spaces between your curly braces!
(it rhymed).
oh and the real issue with your site is #container2 is missing a closing }.
Related
#dent {
background-image: url(C:\Users\Samuel Oniyilo\Documents\GitHub\hng-wonderwoman-task-1\hngi7-task2-HearthHotels\images\black-rotary-telephone-beside-ball-pen-on-white-printed-47319.jpg);
background-size: 1350px 600px;
background-repeat: no-repeat;
filter: blur(0.2px);
margin-top: 5px;
color: #fff;
text-align: left;
font-weight: 150px;
font-size: large;
font-family: 'Times New Roman';
padding-top : 1px;
}
Please what could be the solution here? I realized the issue is the space between my name "Samuel Oniyilo" in the image.There anything that can represent the space in a css style
Wrap the path in "quotations".
background-image: url("C:\Users\Samuel Oniyilo\Documents\GitHub\hng-wonderwoman-task-1\hngi7-task2-HearthHotels\images\black-rotary-telephone-beside-ball-pen-on-white-printed-47319.jpg");
I'm using a wordpress theme which is all good but when I add sharethis buttons, they are half visible. I've tried everything but couldn't locate the exact issue.
Look at top of the page.
site URL: http://ccl5.com
.stButton .stButton_gradient {height: 16px}
This css cause the elements to take only half of its height. That css is generated by sharethis itself.
You can add this css to override.
.stButton .stButton_gradient, .stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {height: 22px !important}
Thanks
Here is the fix
update heights for the containers as follows:
.stButton .stButton_gradient
{
height:26px;
}
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices
{
height:26px;
}
this fix will solve the problem
Firstly please specify a ShareThis Publisher Key (For help, contact support#sharethis.com) on your site.
Secondly, to answer your question, the file buttons.css contains the following code (at line 139):
.stButton .stButton_gradient {
background-repeat: repeat-x;
border: 1px solid #bfbfbf;
padding: 2px;
font-family: serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
height: 21px;
background: #d5d5d5;
background: -moz-linear-gradient(top, #d5d5d5 0, #efefef 48%, #fff 94%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d5d5d5), color-stop(48%, #efefef), color-stop(94%, #fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d5d5', endColorstr='#ffffff', GradientType=0);
}
Firstly remove the line:
height: 21px;
as it is causing you problems.
Thirdly please remove the line:
height: 16px;
from this passage (line 737):
.stButton .stFb, .stButton .stTwbutton, .stButton .stMainServices {
background-image: url(/images/facebook_counter.png);
background-repeat: no-repeat;
display: inline-block;
white-space: nowrap;
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
height: 16px;
padding-top: 3px;
padding-bottom: 3px;
line-height: 16px;
width: auto;
position: relative;
}
as this is also causing problems.
Hopefully this will solve your problem.
This website localhotchat.com has text flowing out of the red bar. I have tried adjusting it but, it doesn't seem to go away.
The 14pt text snippets on the homepage (and internal) are supposed to be inside the red_colored_strip but it ain't and half of it is flowing outside (the text is white in color so you will have to select it to view it). I am not familiar with Joomla and don't know how to fix this. Please offer some advice.
Here are the classes being used by the where the disoriented text is located on the html sheet.
.steps_blurb {
margin: 0 auto;
padding: 0;
color: #ffffff;
background-image: url('../images/redbox_bg01.jpg'); /*url('../images/redbox_bg02.jpg');*/
background-repeat: no-repeat;
background-position: top left;
width: 845px;
height: 65px;
border: none;
}
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
/*margin-top: 40px; Added by yuvi to fix the red_banner issue*/
}
the table row that holds the red box, is above the next row..
to fix it, I would create a, p tag with a class which can pull the text up!
<style>
.pullup{
margin: -85px 0px 0px 0px !important;
position: absolute;
padding: 0px;
width: 93%;
text-align: center;
}
</style>
<p class="pullup">All text here</p>
:)
Find this class in your template.css:
.steps_blurb01, .steps_blurb01td
Located in root/templates/lhc13/css/template.css
And add this:
margin-top: -20px;
So the whole block looks like this:
.steps_blurb01, .steps_blurb01td {
color: #ffffff;
font-size: 14pt;
text-align: center;
border: none;
margin-top: -20px;
}
You can adjust -20 up or down if you need more or less space.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Hi at my site website (password: ebriff) i have added small white triangles as pictures to the active link. But since i have a picture as my first menu link, it won't get added to that. How do I get around this?
CSS:
.top-menu li{
margin: 0;
float: left;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
color: #fff; /* text color */
font-size: 15px;
text-shadow: 0 1px 0 rgba(0,0,1,.5); /* drop shadow */
letter-spacing: 1px;
font-weight: 300;
}
li.top {
border-right: 1px solid #007472;
border-left: 1px solid #009C9A;
}
li.top:last-child {
border-right: none;
}
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
.current {
background: url({{'triangle.png'|asset_url}}) no-repeat center bottom}
}
You can put the home icon as background image for the link instead of the list item. At least this worked for me when I tried it in chrome developer tools ;)
So instead of
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
use
li.top:first-child {
width: 70px;
border-left: none;
text-indent: -9999px;
}
li.top:first-child a{
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
}
You may use CSS3 multiple backgrounds
background: url(...), url(...);
or you may manually create an image with arrow overlayed over the "normal background icon" and use it for the :active selector.
Consider using CSS sprites as well.
On multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/
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)