I want to separate the image from the text of this RSS with CSS.
http://redbolivia.com/index.php?format=feed&type=rss
Any ideas? Can I do this with CSS?
How do I add CSS to a feed that is not mine
But I put CSS to the title and the info, but now I want to separate the image from the text because it's too close.
I did this:
.rss_item_header
{
font-size:14px;
font-weight:bold;
}
/* image try */
.rss_item.img
{
margin:7px;
}
.rss_item_info
{
color:#666;
font-size:11px;
text-align:justify ;
Because I dont want to show this feed where the images are next to the info http://redbolivia.com/index.php?format=feed&type=rss
I want to put a margin to this feed, the image is too near.
No. CSS is used for styling elements, not extracting them.
img {
margin: 5px;
}
..Will add a margin of 5px to all sides of all the images on the page. (You stated this isn't your feed.. Why do you need to change this?)
Related
I'm trying to write it so that the text on my blog won't overlap. I tried putting the "white-space: nowrap" code into everywhere that had text, but it just made the words go out into the middle of the page. Here's a link to my page illustrating what I'm talking about http://schlurb.tumblr.com/post/68525778003/life-goals-marry-paris-hilton-birth-a
Here's a part of the code I'm using:
.quote {
float: right;
text-align: center;
font-size: {
text: Body font size
}
px;
line-height:20px;
text-transform:none;
margin-top:20px;
margin-bottom:20px;
width:620px;
font-family: {
font: body title
}
;
}
I think you encountered the collapse problem. This happens because of
float:right;
If really is the case you can solve it by adding
overflow:auto;
to the parent of your quote.
First of all, I'm just going to say that the bit of CSS code you've posted above does not currently apply to anything on your web page. Why? Well, the code above applies to all elements with the class name "quote". You have no HTML elements on your page with the class "quote" assigned to it.
Go through and add the quote class to the applicable elements.
Your CSS .quote{} has no corresponding e.g. <div> tag, this after looking into the pagelink you provided
I've a text as below is not aligning as vertical in the middle of icon.
How do I solve this, please?
align top http://www.kerrydeaf.com/ali.png
CSS:
#text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}
HTML:
<div class="blurb"><button class="blue_small" id="blue_small"></button> Available in video.</div>
UPDATE:
This should explain it.
align top http://www.kerrydeaf.com/ali2.png
You should be using a CSS background image and use padding-left: to move the text over, and use background-position: to adjust the position of the image. And if it's a link, use an A-tag, not a button.
Available in video.
No need to nest tags as you're doing.
Something like:
.videoBlurb {
display:block;
background-image:url(....);
background-repeat:no-repeat;
background-position:0px 0px;
padding-left:40px;
padding-top:20px;
color:#48c4d2;
font-size:15px;
font-family:opensansitalic;
}
Diodeus makes a good point and definitely has the most useful answer, but for the sake of curiosity without changing your markup - it should actually be this simple:
​button {
vertical-align:middle;
}
Of course, be more specific with the selector. Demo: http://jsfiddle.net/beV7j/2
I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?
Thanks
So i've got a posible answer for you.
First you have to add this css-styles to the a tag of the pictures:
display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;
It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P
I hope i could help!
In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.
For the anchor element having the photos use the float like this. This would take care.
float:left;
your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.
a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
Firstly I would recommend validating your html.
Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.
Thirdly, I would use a css class on the list, and style it like this:
ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE