Can someone please tell me what I am doing wrong here? What I have are quote images. I want to wrap the text in between these quotes. The open quote is fine and displays correctly. The image is top left and the text wraps around and below it. The closing quote however will not render properly. It goes below the paragraph tag.
Thanks
<div id="box1">
<div class="info">adfda</div>
<div class="post">
<img style="float:left" src="quotes-open.jpg" alt="" />
<p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
<img style="float:right" src="quotes-close.jpg" alt="" />
</div>
</div>
.post p {
line-height: 1.2em;
margin: 0 0 20px 0;
}
Anyone??
First of all, if it's a quote, use the <blockquote> element. If you absolutely wanted two quotes, you could make one quote the background image of the blockquote, and the other the background image of the enclosed <p> element. With the right padding, this should work just fine.
You can move the trailing close quote image to a place some where inside your <p> (you'll have to play with the positioning of it however; safe bet is about 10-15 words away from the end of the last sentence) So from your example you would have:
<div id="box1">
<div class="info">adfda</div>
<div class="post">
<img style="float:left" src="quotes-open.jpg" alt="" />
<p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj
asg hagl lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
<img style="float:right" src="quotes-close.jpg" alt="" />
lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
</p>
</div>
</div>
I think you'll have better luck with something like what Stephen suggested:
HTML:
<div>
<div class="info">adfda</div>
<div class="post">
<blockquote>
<p class="closeq">lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
</blockquote>
</div>
</div>
CSS
.post blockquote { background: url(quotes-open.jpg) no-repeat top left; /*padding*/ }
.post blockquote p.closeq { background: url(quotes-close.jpg) no-repeat bottom right; /*padding*/ }
Notes
.post blockquote: gets the opening quote set as a background and position to the top and the left. You'll want to adding some padding to the element so as to not crowd the text or overrun it.
.post blockquote p.closeq: I went ahead and made it to where you have to explicitly tell where you want the closing quotes. This is because you may want a quote with more than one paragraph. Again here you'll want to play with the padding to make sure your text doesn't run over the closing quote.
<blockquote>
<q>This is the quote</q>
<q>This is another quote</q>
<q>Etc...</q>
</blockquote>
blockquote {
padding-bottom: 10px;
background: transparent url(end-quote.gif) no-repeat 100% 100%;
}
blockquote q:first-child {
display: block;
padding-top: 10px;
background: transparent url(start-quote.gif) no-repeat 0 0;
}
You could also do this the opposite way, using <blockquote> as the opening quote and q:last-child as the closing quote.
It goes below because the p tag is a block-level element.
Try moving both images above the paragraph, or set the <P> tag to float as well and set a fixed width to it.
A simple solution:
<!-- HTML: -->
<blockquote><div>
Your text
</div>
</blockquote>
/* CSS: */
blockquote {
background: url('link-to-open-quote.gif') left top;
}
blockquote div {
background: url('link-to-closing-quote.gif') right bottom;
padding-bottom: 40px; /* To prevent the text from flowing over the quote */
}
<blockquote>
<p>This is the quote</p>
<p class="last-child">This is the last paragraph</p>
</blockquote>
blockquote {
background:url(./quote-open.gif) no-repeat top left;
padding:10px 0 10px 30px;
}
blockquote p {
padding:0 30px 0 0;
}
blockquote p:last-child, blockquote p.last-child {
background:url(./quote-close.gif) no-repeat bottom right;
}`
Play around with the padding to make it look how you want.
There are a lot of ways to do this... search Google and explore. Here's a link with a bunch of examples, use Firebug to inspect the ones you like and see how they did it: http://www.smileycat.com/design_elements/pull_quotes/
Related
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}
I have tried all sorts to find an answer to this, but what I want to do is have some text centered under two images.
I have tried using a turned into a line, but I cannot get the text to be under the centre of the image. Can any one help me ?
The web page is www.c5d.co.uk/captain.php
The HTML is:
<img class="social" src="http://www.c5d.co.uk/captain.png" alt="Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<div><ul class="captain"><li><p>John Lewis: Captain</p><p>Bill Wrigley: President</p> </li></ul></div>
<img class="social" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<div><ul class="ladycaptain"><li><p>Beryl Harrison: Lady Captain</p><p>Kieran Metcalf: Junior Captain</p></li></ul></div>
The relevant CSS is
.captain, .ladycaptain { /* ul - controls normal comp results& junior open*/
list-style-type:none;
display:table;
padding:0;
margin:0 auto;
}
.captain li, .ladycaptain li {
display:table-row;
text-align:left;/* ul - controls normal comp results& junior open*/
padding:0;
margin:0;
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.captain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 20px 3px 0; /* padding-right visually separates "columns" */
}
.captain p + p {
padding-left:225px; /* padding-left visually separates "columns" */
}
.ladycaptain p + p {
padding-left:180px; /* padding-left visually separates "columns" */
}
Right now you have more HTML and CSS than you need, which is making your code harder to read and fix than it needs to be. Putting the text for each image in their own div will make it easier to center them, and be closer semantically to what you're trying to achieve. Then you can also use far less CSS to make it behave as you want.
Restructuring your HTML and CSS should do the trick:
<html>
<head>
<style>
#officers {
width:554px;
}
.officer {
width:267px;
position:relative;
float:left;
text-align:center;
margin:3px 10px 3px 0;
}
</style>
</head>
<body>
<div id="officers">
<div class="officer">
<img src="http://www.c5d.co.uk/captain.png" alt="Captain" />
<span class="caption">John Lewis: Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<span class="caption">Bill Wrigley: President</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain" />
<span class="caption">Beryl Harrison: Lady Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain" />
<span class="caption">Kieran Metcalf: Junior Captain</span>
</div>
</div>
</body>
</html>
Remove the margin-bottom of the images.
Increase the height of the ul containing the text.
Set the line-height of that li ( or a group of 'em ) to that height. It will be perfectly centered. Well of course it will be centered vertically, if that's what you want to achieve. Otherwise just setting the text-align to center should do the trick.
Try something like this:
<ul>
<li>
<img class="img1" src="" alt="">
<div>image 1</div>
</li>
<li>
<img class="img2" src="" alt="">
<div>image 2</div>
</li>
<li>
<img class="img3" src="" alt="">
<div>image 3</div>
</li>
....
</ul>
with css
li
{
display: inline-block;
margin: 20px;
}
div
{
text-align: center;
}
Here's a LIVE DEMO
Suggested by #Rob Grzyb :
Try grouping the image and caption into a single container/div and centering the contents. It will be much easier to do if you can restructure the HTML.
Suggested by #Pow-Ian : jsfiddle.net/KV7zT
Edited by me : jsfiddle.net/KV7zT/1 or jsfiddle.net/KV7zT/2/
html
<div style='text-align:center;width:50%;float:left;'>
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<div style="clear:both"> Text Goes Here</div>
</div>
css
.none-needed {css:not needed 'yet';}
I gave up ! and tried something different.
Just have a text spacing error now !
Thanks for all your suggestions
Antony
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I have a word spacing issue which I cannot seem to resolve.
The web page is www.c5d.co.uk/captaintwo.php
The word spacing under the top images look ridiculous. Yet as far as I can see, the CSS is the same.
What am I missing ? If I put a /p tag after Wrigley it works fine but fails validation as there is no opening p tag
Relevant HTML and CSS is as follows:
.captain{word-spacing:185px;display:inline;}
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }
<img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<p class="pres">
<br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
<img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<p class="pres">
<br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
Make the following changes:
.pres {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
.captain {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
<br> is outdated. Use the self-closing <br /> instead. The names should be wrapped in something (p, span, h3, something). There are 2 styles (one inline (inside the document) and one attached to #header) that are adding around 500px of space there. That's why there is a large gap.
Consider making it easier on yourself.. use 1 class to define each TYPE of object.
#people {
styles for container div
}
.box {
styles for the individual boxes
}
.photo {
styles for <img>
}
.title {
styles for names of people
}
Then just apply the classes to the appropriate item like so
<div id="people">
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
etc...
</div>
I'm trying to keep everything aligned vertically but can't seem to figure it out
here is the css
fieldset span{
padding:50px 10px 0px 10px;
float:left;
clear:none;
}
fieldset span.buttons{
float:right;
}
and the html markup
<fieldset class="remove">
<span class="itemtype">story</span>
<span class="itemtype">53547</span>
<span class="title">New online education program aimed at curbing dangerous drinking</span>
<span class="buttons">
<img src="img/edit.png" alt="edit story" />Edit
<img src="http://www.bibliomania.com/graphics/read.gif" alt="read story" />Read
</span>
<input type="hidden" name="featured[items][53547]" value="story" />
</fieldset>
and a fiddle you can see how the image pushes down also the text in the 'a' tag text needs to be corrected as well
edit
using background image would be nice but that makes the image go under the text see new fiddle
Try this :
fieldset span a img {
vertical-align: middle;
}
Vertical-align is a CSS property that is often misued to align text. However its aim is to align images (and yes, it also does align text but only in table).
See CSS-tricks.com - What is vertical-align
Fiddle to test
What about just using the padding for both top & bottom:
fieldset span{
padding:25px 10px 25px 10px;
...
http://jsfiddle.net/SxCH2/5/