I’m in the process of learning CSS, so get mad on me if I ask many questions concerning webdesign. I’m passionate about, I learn, I try and sometimes I stuck I really appreciate your patience and wisdom!
I have a question about using inline span style. I used this as inline code <span style="padding: 10px 100px 10px;"> on this page http://olivia.be/steun-ons-vandaag-2/ (of course I closed span tag) but without success. Or it’s not possible to use this as for the whole page?
Just to let you know… I’m absolutey upset and cross because you asked a question. How, I mean, how in the world could you think that you could ask something CSS related in a CSS related category of a web related forum? Amazing !! Incredible!! Unbelievable!!
Now, regarding your question I will tell you that yep, using inline styles is not a good idea… most of the time. There’s just one exception: mail marketing. Unfortunately, when you’re creating a template for a e-mail, you have to use all the techniques that you would never use anywhere else
Now, you can forget that paragraph and concentrate on the page… That page is complicated and has a lot of styles included. I think that what’s happening is that you’re conflicting with the existing styles as well as the size of the paragraph itself.
Is this what you’re talking about?
<div class="page-post-content">
<p><span style="padding: 10px 100px 10px;"></p>
<h3><a href="http://olivia.be/wp-content/uploads/2014/09/faces_2lines.jpg"><img class="alignnone size-full wp-image-1223" alt="faces_2lines" src="http://olivia.be/wp-content/uploads/2014/09/faces_2lines.jpg" width="1322" height="196" /></a></h3>
<h3>Uw steun is levensbelangrijk</h3>
<p>Het Olivia Hendrickx Research Fund dankt u voor uw steun. Wij gaan onverminderd door met het inzamelen van fondsen. Omdat wij ervan overtuigd zijn dat kanker geen kans mag krijgen.</p>
<h3>Hoe kan u schenken?</h3>
Spans are inline elements and as a result, dimensions and paddings do not work. Spans follow the inline formatting context which doesn’t recognize them. You could set them as display:inline-block which would retain inline capabilities but also allow for padding to be recognized.
To be more precise, padding on inline elements does “work” but does not affect the height of the containing P, if that is what you are trying to do. If so, I suggest adding padding to the P tag instead.
Not sure I understand exactly what you want to happen with:
[quote=“Soapmarine, post:8, topic:96645”]
add space on the right and on the left of this particular page
[/quote]Perhaps you could explain that a bit more?
OK, looks like BaveMaxwell has shown you the exact class you need to work on.
As for inserting styling inline, you probably realize that doing things that way will simply add to the file size (assuming you use it often) and make editing much more difficult. I think most people would recommend creating a class for whatever you are using the inline style for, even if you use it only once in the whole document.
Some people will be more demonstrative about in-line styling because it’s not considered semantic. I’m not a real developer, of course, so I often try things with an in-line style, even in a to see how it looks!
@airbusdriver , I understand that using inline method is not efficient, but I dont want to touch and mess with style.css file, I just want to add some padding space to the text on one page without effecting any other pages. I dont want to create any specific separate template for that page neither. Indeed, I want to do it in-line to see how it looks and play with it.
If I use DaveMaxwell code, it will apply to numerous pages, I dont want this. I just want add space on the right side and on the left side of the text on the one single page by using padding. And it doesnt wooooork
If you want to add space to the right and left of the page and not only to a paragraph, what you’re doing will not work…
I’m assuming that you want to add some space only to this page, and that this page is the home page. I’m doing this differentiation because this is a WordPress theme and in WordPress you can have the home page different than the rest (well, actually any page but let’s no go there. Having the home page different is a bit easier than with any other page).
I would create a class called .moreMargin maybe and then apply this rule {margin: 10px 100px 10px; } and apply it to this particular page which would be a different php file (maybe called home.php) and I would configure WordPress to use this home.php as the home page.
Gotta say that just looking at the code of this page makes me want to re-do it from scratch.
There’s no such a thing when you’re trying to learn
<p><span style="padding: 10px 100px 10px;"></p>
I don’t know where the text is and the span element is not closed. Anyway, this will add padding to the this particular paragraph (if anything) and nowhere else.
This is not semantic and definately not the best way to do it.
Ugh. I don’t know who wrote the hooks for that theme or if that’s a WP thing, but there’s a class specific to that page applied to the body (why it’s not an id, I don’t know )
So this css will work if I understand what you’re looking to do…
I really appreciate your patience and wisdom!
)