please have a look at the attached picture... For a wordpress site I need to enter a custom CSS. I have a slogan or company name which needs to have a background color. But when the site is responsive and the text is splitted into another row, I need a space.
But when I search through google I only get results for changing the complete background of the text field.
.ueberschrift {
background-color: #FF00E9;
padding: 8px;
}
Can somebody help me?
Regards
Markus
My results...
try changing the css code to:
.ueberschrift p {
background-color: #FF00E9;
padding: 8px;
}
i added a "p" after ".ueberschrift" class which should only select the text.
If I understand you need a margint(white space) between Schwere and disthymische.......
To achive this you must think first of all to put the all sentence in 2 containters.
for example:
HTML:
<div class="ueberschrift">
<span>Schwere</span>
<span>disthymische.......</span>
</div>
CSS:
.ueberschrift span {
background-color: #FF00E9;
padding: 8px;
margin-bottom: 8px;
}
In this way you will set a margin bottom between 2 spans, when you at a small resolution.
Related
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
I'm webmaster of a directory site with basic CSS skills, using SobiPro on a Joomla base. Directory entries display 2 images at top - an exterior and interior photo. At times, only 1 or the other (sometimes neither) is available; so, I have a line entry that asks anyone who can supply the missing pic(s) to email it/them to me. Until our latest upgrade, this was not a problem, but now it is. Cannot get the two divs aligned. You can see an example here!
This is what the CSS template currently looks like:
div.field_photos
{
border-style: none;
font-weight: bold;
font-size: 12px;
color: #000000;
padding-left: 5px;
margin-top: 360px;
margin-left: 5px;
}
div.field_addy1
{
border-style: none;
font-color: #000000;
font-weight: bold;
font-size: 12px;
margin-top: 0px; /* position it horizontally */
margin-left: 5px;
margin-right: 5px;
}
where field_photos is the intro line (select list choosing either 'interior' or 'exterior' text) and field_addy1 is the bot-protected email addy. I tried floats, but the text tried to wrap on the pics. Tried making it into a single div, using the intro text and 'Directory Webmaster' combo into a single hyperlink, but that didn't fly.
Field widths are 150px and 200px respectively with the Title length and URL length set at 200px max. Any suggestions would be much appreciated.
Your positioning here with margins is a bit crazy. I'm not fully sure what's going on with that. To fix this issue a quick way:
Firstly, remove the margin-top from your .field_photos divider and remove the float:left properties from your main image:
<img class="spFieldsData field_sobi2_icon" src="..." alt="">
.field_sobi2_icon {
float:none;
}
Then change the display of the two fields you want aligned alongside eachother:
<div class="field_photos">...</div>
<div class="spField newClass2">...</div>
.field_photos, newClass2 {
display: inline;
}
i have the following css to put padding around a div:
.orangeAllDay, .orangeAllDay a {
background: #fab384 !important;
color: white;
padding: 5px;
}
it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.
Is there a workaround for this issue or another solution that doesn't break on multiline.
It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.
You would need to separate them like so:
.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
}
.orangeAllDay a {
background: #fab384 !important;
color: white;
}
this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.
You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.
If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:
...
a.orangeAllDay {
background: #fab384 !important;
color: white;
padding: 5px;
display: block;
}
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}