I am trying to create a pull quote class that can be applied to any text. Usually this will be a short quote I want to float to the right. I would like the text in the body to come up to the set margin for each line in the floated pull quote.
Goal: http://i.stack.imgur.com/XC5NA.jpg
The problem I am running into is that the div or span is creating a rectangle around the floated text so the shorter lines in the pull quote have a lot of whitespace to the left.
What I'm getting example: i.stack.imgur.com/bvJv2.jpg
I want this text flow effect to work automatically which means I don't want to have to set each line's "width" automatically. I just want to apply a class to a div or span and have it achieve this look. I would also like to keep this HTML/CSS/CSS3. I can't easily apply JS to this since it's a closed CMS I'm dealing with.
Any tricks? Is this even possible?
What you're trying to is not possible, as far as I know, with text wrapping around other text.
It is, however, possible to wrap text around floated shapes. Take a look at the spec for CSS shapes.
Maybe you can do something with a polygon to create the effect you're trying to accomplish; though, I suspect it will be a challenge since it is likely that the content of your quotes are dynamic.
What about doing something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
Making a h1 tag and put some spans inside them for each word/few words.
<h1>
<span>"This is a</span>
<span class="spacer"></span>
<span>blockquote</span>
<span class="spacer"></span>
<span>to test"</span>
</h1>
Then for the css the following:
h1 {
font-size:44px;
margin: 0;
font-family: sans-serif;
}
h1 span{
float:right;
text-align: right;
clear:both;
margin: 0;
margin-left: 14px;
}
.spacer {
height: 10px;
}
.paragraph {
text-align: justify;
}
Note im making the text around heading (.paragraph class) justified and that will give you something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
remember its editible for your likeing good luck
Related
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
I am using a php script that outputs the post like this:
<div class="postoutput">
<p>
<img src="content/xeon.png" alt="xeon.png">
This is text, Xeon is great.```
</p>
</div>
I can't touch the output but I can modify the CSS, is there way to add a margin that ONLY applies to the text using only CSS
The image is 100% wide and this is okay.
The desired goal is to keep the image as it is but make the text ONLY have a 10px margin on each side. Remember, I only have access to the CSS file.
Long story short... no you cannot apply css directly to the text in your case.
You could probably emulate something close though.
Assuming your image is fullwidth you could probably use something like:
p {
padding:10px;
}
p > img {
margin:-10px -10px 10px;
}
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
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