Develop Reference

How can I only allow the mouse to hover over two elements?

When you hover over a green highlight, a div of colors will appear. This will allow you to change the color of the highlight. By the way, the SO Editor is making the offset measure incorrect for the #change_color div. How can I make it where, unless the mouse is over .green_mark or #change_color, #change_color has its visibility hidden?
$(".green_mark").mouseover(function() {
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
#change_color {
position:absolute;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
visibility: hidden;
}
.blue_mark {
background: #AAF6FF;
cursor: pointer;
}
.red_mark {
background: #FF9B9F;
cursor: pointer;
}
.green_mark {
background: #D6FFAA;
cursor: pointer;
}
.yellow_mark {
background: #FFF8AA;
cursor: pointer;
}
.orange_mark {
background: #FFBF98;
cursor: pointer;
}
.purple_mark {
background: #D7D5FC;
cursor: pointer;
}
.boxes, .boxes2 {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box2 {
background: #AAF6FF;
}
#green_box2 {
background: #D6FFAA;
}
#orange_box2 {
background: #FFBF98;
}
#purple_box2 {
background: #D7D5FC;
}
#red_box2 {
background: #FF9B9F;
}
#yellow_box2 {
background: #FFF8AA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>
Lore
<span class="orange_mark">
m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt
</span>
aria in quo. Te aliquid ce
<span class="red_mark">
teros legendos has. Veritus assueverit intelleg
</span>
eba
<span class="orange_mark">
t id per
</span>
, eos cu vero pri
<span class="green_mark">
mis philo
</span>
sophia, no nec blandit propriae
<span class="green_mark">
. Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id.
Ut cas
</span>
e nominavi pro,
<span class="yellow_mark">
dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel. Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri
</span>
s sed id, mei et animal equidem, clita atomorum at has.
<span class="green_mark">
Ut noluisse placerat suscipiantur mel
</span>
, cu pri mundi dicunt
<span class="green_mark">
praesent. Ignota dicunt vulputate ad vim,
</span>
populo option aperiri
<span class="orange_mark">
me
</span>
<span class="purple_mark">
l in. Has cu essent eirmod malorum, nisl electram pri et.
In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per
</span>
<span class="orange_mark">
fe
</span>
cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne.
Mel feugiat recusabo platonem ei, sea cu numquam constituam. Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam.
Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum.
</span>
<div id='change_color'>
<div id='blue_box2' class='boxes2' title='Blue'></div>
<div id='green_box2' class='boxes2' title='Green'></div>
<div id='yellow_box2' class='boxes2' title='Yellow'></div>
<div id='orange_box2' class='boxes2' title='Orange'></div>
<div id='purple_box2' class='boxes2' title='Purple'></div>
<div id='red_box2' class='boxes2' title='Red'></div>
</div>

You can subscribe to mouseenter and mouseleave events.
var colorPickerHovered = false;
var timer;
$(".green_mark").mouseenter(function() {
if(timer){
clearTimeout(timer);
}
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
$(".green_mark").mouseleave(function(){
timer = setTimeout(function(){
if(!colorPickerHovered){
$("#change_color").css("visibility","hidden");
}
}, 250)
})
$("#change_color").mouseenter(function(){
colorPickerHovered = true;
})
$("#change_color").mouseleave(function(){
colorPickerHovered = false;
$(this).css("visibility","hidden");
})
jsfiddle example

Use the mouseout event:
$(".green_mark").mouseout(function() {
$("#change_color").css("visibility","hidden");});
If you mouseout from the green to get to the color div, it will go wrong though, so make sure the position error is fixed so you never leave the green to go over the color div (so the color div is close by enough); you could render the color div at the mouse position to fix that part too.

Text Box Resizing to Stay within Background Picture

Click here for photo of the text overrunning the pictureI have a text box with a background picture as I resize the picture changes appropriately (using percentages) but the text box overflows. I am using the overflow function in CSS but I need the text box to resize it`s length as it runs out of room so that the picture stays behind. Any ideas? Thanks in advance.
P.S. Any more elegant solutions to replace the use of CSS overflow function welcome!
P.P.S. I am currently researching the jquery function "resize" and I think the solution could be in linking the text box to this function.
HTML code is as follows
<main id="about">
<img src="images/Lace Eckhardt 1425.jpg" alt="" id="laceBike">
<section class="lace">
<h2>About Lace</h2>
<div id="aboutText">
<p>Lace Eckhardt has never done things by halves and her latest venture Sidekicks is certainly no exception. Eckhardt, 31 leads a dynamic life, a self-confessed ‘kidult’ she can be found on her BMX heading for an early morning surf, or practicing her skate tricks on the custom half pipe built in her garden.</p>
<p>Having spent half her life trashing numerous pairs of shoes she started to take the search for sturdy, well-made kicks seriously. “I spent so much time on-line looking for stylish skate shoes but most of what I found were either poorly made or way too commercial. When I did find a style that suited my lifestyle and my taste I’d tell everyone how great they were…then someone suggested I set up a shop. I listened, and the rest is history!” </p>
<p>Starting off with twenty of her top styles, Eckhardt set up a successful eBay shop and is now launching this new site Sidekicks, concentrating predominantly on her six feature shoes. “I have so much faith in the brands and styles I’m selling, as long as I have one of each of them in my wardrobe I honestly don’t need anything else. Although new colours and fabrics are released every season and I’m a sucker for those.” Eckhart has some loyal customers who won’t buy their shoes anywhere else. “One guy in Ecuador bought his first pair from me just a month after I’d set up the eBay store and now owns at least one of each style. He sends me photos of him when he gets a new pair, I love seeing my customers wearing my shoes and doing what they love. It’s like a cool little like-minded community…one of my long standing customers even sent me a skateboard she’d designed, how awesome is that?!’</p>
</div>
</section>
</main>
Current Relevant CSS
main {
width: 100%;
margin-left: auto;
margin-right: auto;
clear: both;
}
.lace {
position: absolute;
width: 500px;
margin-left: 22px;
float: left;
background-color: rgba(248,246,246,0.50);
margin-top: -79%;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
overflow: auto;
margin-bottom: 20px;
}
#aboutText {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 20px;
color: rgba(75,1,3,1.00);
}
#laceBike {
position: relative;
margin-top: 0px;
width: 100%;
}

use VH or VW units for all sizing of that box AND the font. see example here https://jsfiddle.net/5rkxkq62/
VH or VW units are in range 0-100, and stands for VIEWPORT HEIGHT/WIDTH. If you use only one of units for both sizing (width and height), you can keep the sizing ratio always the same
But I reccomend to copy it and try it in plain html page, because on jsfiddle you cannot work with resizing window well, and also vh and VW units does not have correct behaviour in that output frame.
<div class="box">
<div class="text">
Lorem ipsum dolor sit amet......
</div>
</div>
.box{width:80vh; height:50vh; position:relative; margin:auto;
background:url("http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg"); background-size:100% auto;}
.text{background: rgba(255,255,255,.3); color:white; font-size:5vh; position:absolute; top:10px; left:10px; height:40%; width:calc(100% - 20px);}

Hi I have found a complete solution by posting the picture as a background image and then using percentages, media queries and overflow: scroll; in CSS.
#charset "UTF-8";
/* CSS Document */
#media (max-width: 1500px){
#main {
background-image: url(images/Unknown.jpeg);
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height: 100vh;
margin-left: auto;
}
#text {
width: 55%;
margin-left: auto;
margin-right: 1%;
float: right;
overflow: scroll;
height: 483px;
background-color: rgba(233,226,227,0.50);
padding-left: 13px;
padding-top: 13px;
padding-right: 13px;
padding-bottom: 13px;
text-align: center;
font-size: 19px;
}
h1 {
width: 50%;
margin-left: auto;
margin-right: 4.5%;
text-align: center;
float: right;
}
}
#media (max-width: 980px){
#text {
height: 300px;
}
}
#media (max-width: 700px){
#text {
height: 108px;
font-size: 18px;
}
}
#media (max-width: 470px){
h1 {
font-size: 20px;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Contained To Pic</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="main">
<h1>Where is the Picture in the Background?</h1>
<div id="text">
<p>Lorem ipsum dolor sit amet, posse nusquam ne vix, justo sensibus at has. Ius dicat congue doctus id. Vim ornatus antiopam ea, ea sensibus accusamus mediocritatem has. Ne mollis ullamcorper voluptatibus eos, eum choro virtute facilis eu, cum iusto oratio democritum ad. Pri tacimates adolescens ei, eum augue suscipit interesset an.</p>
<p>Mei ea clita nullam, ea nullam deserunt vulputate cum, tale invidunt eam id. Vidisse honestatis ius ad, in duo facilis definitionem, ea nec equidem sanctus petentium. Mea te evertitur consequuntur. Ex his justo dignissim definitionem, est mutat consequat te, ne dicunt prodesset vix. Percipit electram rationibus ius cu, audire dolorum veritus eu eam.</p>
<p>Lorem imperdiet constituto eu est. No usu quis fabulas verterem. Eirmod volumus electram qui id. Porro oratio at pro, illud sententiae omittantur eum ut. An qui vide summo, vis ex animal impetus. Deserunt sensibus definitionem at eam, in nam hinc rebum dolores.</p>
<p>Te omnis denique probatus est, ex pri justo melius incorrupte. Ex posse euripidis has, nec no vidit invenire. Nam cu hinc possit omnium. Ei clita perpetua pertinacia has, ad eum modo saperet appellantur. Assum adipisci in eum, an clita animal vis, vis id postulant consulatu. Pri eu exerci detracto iudicabit.</p>
<p>Te velit posidonium sed, libris postea per ut. Democritum abhorreant appellantur ad nec, periculis torquatos consetetur pro te. Ex vis tritani alterum rationibus. Sea ex feugiat constituto dissentiet. Sapientem voluptatibus ad his, vix cibo accusam ei.</p>
</div>
</div>
</body>
</html>
This is just a random image I pulled in from the web for the example.
So if you put all this together you will have a site that contains the text within a background image. I hope this helps, happy coding!

How to Create a Link to a DIV

Here is what im working on... A maximizable and minimizable pop-up that is called by an hyperlink.
<html>
<style type="text/css">
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
/* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
</style>
<script type="text/javascript">
var max = true;
function expand_collapse(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
if (max === false) {
elem.innerHTML = "▼";
top_div.classList.toggle("minimized", false);
top_div.classList.toggle("maximized", true);
max = true;
} else if (top_div.classList.contains("maximized")) {
elem.innerHTML = "▲";
top_div.classList.toggle("minimized", true);
top_div.classList.toggle("maximized", false);
max = false
}
}
function close_pop(elem) {
var top_div = elem.parentNode.parentNode.parentNode;
top_div.style.display = 'none';
if (top_div.classList.contains("maximized")) {
max = false;
}
}
</script>
CLICK HERE<!--Right Here -->
<div style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop" onclick="close_pop(this);">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
</div>
</div>
But the pop up opens with the page and i want the pop up to only be opened when the hyperlink commented is clicked and not when the page is loaded. Any help will be much appreciated. I have tried different methods on the hyperlink but to no avail.

Please check the link below
$(document).ready(function() {
$('.show-popup').on('click', function() {
$('.popup').fadeIn();
});
$('.close_pop').on('click', function() {
$('.popup').fadeOut();
});
});
.popup {
display: none;
}
.pop_out {
background: #333;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 10px #000;
}
.minimized {
display: inline-block;
margin-right: 10px;
bottom: 0;
width: 250px;
height: 60px;
overflow: hidden;
}
.maximized {
top: 0;
position: fixed;
display: block;
width: auto;
height: auto;
/* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
cursor: pointer;
color: #fff;
}
.close_pop:hover {
color: red;
}
.expand_collapse {
margin-right: 10px;
cursor: pointer;
color: #fff;
height: 3px;
}
.expand_collapse:hover {
color: #ccc;
}
a {
position: fixed;
top: 150;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
<div class="pop_out maximized">
<div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
<span style="position:absolute;right:15px;">
<span class="expand_collapse" onclick="expand_collapse(this);">▼</span>
<span class="close_pop">&times</span></span>
</div>
<div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
</div>

The pop-up element isn't being hidden on initial page load.
Add style to the pop-up element in CSS.
display:none
Give the pop-up element an ID attribute for easier Javascript targeting
id="pop1"
Add attribute to the hyperlink
onclick="open_pop('#pop1')"
Add javascript function
function open_pop(elem)
{
elem.style.display = 'block';
}
Or to synchronise more effectively with your code, give the pop-up one of your custom classes to modify the display style.
I would also consider using ID's for Javascript selection as opposed to crawling through parents which could break the code if children elements or added or removed from the tree.

in simple code,
html
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
javascript
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
I could not share my jsfiddle link. so this helps you i guess.
OR
Just make the div style = "display:none" on mouse click toggle the display.

Wrap text with any tags except div with Jquery?

I have a problem with a text: cannot wrap anything except div children.
Here is my problem:
- I use PHPBB forum. Comments texts not wrap any container, I have just plain text.
- I need text-indent to every paragraph
- Comments text include img, strong and many html tags, include divs (like quotes).
What I think, I'd like:
- wrap text to a span (because I can use inline-block indent) with any html tag, exclude div
- delete duplicated br tags, just use one br tag only
I made two way for solution, but have a few problem with these solutions.
HTML code:
<div class="postbody" id="postdiv24216">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<br />Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.
<br />
<br />
<br />Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.
<br />
Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</div>
CSS code:
.postbody {
padding: 5px 15px;
text-align: justify;
}
.quotetitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #A9B8C2;
color: #333333;
background-color: #A9B8C2;
font-size: 0.85em;
font-weight: bold;
}
.quotecontent {
margin: 0 5px 10px 5px;
padding: 5px;
border-color: #A9B8C2;
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
font-size: 1em;
line-height: 1.4em;
font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: #FAFAFA;
color: #4B5C77;
}
.firstline {
text-indent: 1.1em;
display:inline-block;
}
JQuery code (First solution): http://jsfiddle.net/mykee/9VpjP/29/
$('.postbody').each(function(){
var container = $(this);
container.contents().filter(function() {
return this.nodeType == 8;
}).remove();
$("div.quotecontent br").remove();
if (container.filter("div", "a")){
var html = container.html().split('<br>');
container.html("");
for(var i in html)
{
if($.trim(html[i]))
container.append('<p class="gensmall"><span class="firstline">'+html[i]+"</span></p>");
}
// $(".firstline > a").unwrap();
$(".firstline > div").unwrap();
}
});
JQuery code (Second solution): http://jsfiddle.net/mykee/2AByk/12/
$('.postbody')
.contents()
.filter(function () {
return this.nodeType === 3;
})
.wrap(function () {
return $("<span>").addClass("firstline");
})
.end();
$("span.firstline div").unwrap();
$("span.firstline").filter(function () {
return $.trim($(this).html()) === '';
}).remove();
$('.postbody br').each(function () {
if ($(this).next().is('br')) {
$(this).next('br').remove();
$(this).next('br').remove();
}
});
My problem with first solution: split working with all content, and trim my div. If div include any br tag, then div container will wrong after unwrap. I put a remove to div for br tag, but this not solution :(
With second solution my problem is with filter nodeType: just plain text will wrapped to span, img or strong or any other html tag will outside span.
I need this results:
<div class="postbody" id="postdiv24216">
<p class="gensmall"><span class="firstline">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni</span></p>
<div class="quotetitle">valaki írta:</div>
<div class="quotecontent">
<div class="quotetitle">Másvalaki írta:</div>
<div class="quotecontent">No <strong>meg ezt</strong> sem...
<br />
<!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&feature=youtu.be&desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>
<!-- m -->
</div>
<br />Ez tök jó! ez idézet</div>
<p class="gensmall"><span class="firstline">Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent
oportere corrumpit habemus donec minim offendit tritani tempus risus
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent;
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat
diam interdum agam docendi primis.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto,
tractatos? Constituam dicat convallis perpetua fastidii</span></p>
</div>
What's hard: this one post, and I have more post on one page. I use now first solution, but not a better.
How can I except any div in div.postbody, but wrap and indent first line on other texts?

You could apply padding-left to the entire .postbody, and then use negative margins to move the quotes to the left. That would give you a pure CSS solution.
http://jsfiddle.net/9VpjP/28/
The relevant changes are:
.quotetitle {
margin: 10px 5px 0 -20px;
}
.quotecontent {
margin: 0 5px 10px -20px;
}
.quotecontent .quotecontent,
.quotecontent .quotetitle {
margin-left: 5px;
}
.postbody {
padding-left: 20px;
}
In this case I've applied 20px padding/margin.
Tested only in Chrome.
I'm not familiar with phpbb so I can't promise this solution won't interfere with your broader layout, but with a bit of tweaking it should be solid.

What the difference between classes with space and no space in css, what the use of multiple classes with no space

I am making an accordion using CSS, the below is my use of CSS class without space. I use this to eliminate the animation of padding during slideDown and slideUp effect
.acc_container.block{
padding: 20px;
}
since it stated out that padding is 20 pixels but when i check it seems like no padding at all!!
instead, i need to add this in order to let my padding works
.acc_container. block{
padding: 20px;
}
(with space)
So what's the difference between the class in CSS with and without a space?
This is all my HTML, jQuery with CSS code:
<html>
<head>
<style type="text/css">
body {
font: 15px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
display: block;
padding: 0 0 0 50px;
color: #fff;
cursor: pointer;
}
h2.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container.block {
padding: 20px;
}
.block {
padding: 20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script> type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show();
$('.acc_trigger').click(function(){
if($(this).next().is(':hidden'))
{
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false; });
});
</script>
</head>
<body>
<div class="container">
<h2 class="acc_trigger">Web Design and Development</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need A website?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
<h2 class="acc_trigger">Logo/ Corporate Identity</h2>
<div>
class="acc_container">
<div class="block">
<h3>Need a Logo?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">Search Engine Optimization</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need to be heard</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
</div>
</body>
</html>

.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.
So you probably ask what's the difference between .classA .classB and .classA.classB selectors.
First selector will match any element with class classB that's placed within element with class classA, eg.:
<div class="classA">
<p>
Hello World!
<span class="classB">this text will be matched by first selector</span>
Lorem ipsum!
</p>
</div>
Second selector will match any elements with both, classA and classB classes, eg.:
<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>

It´s all about addressing the right element the right way AND taking into account the fact that older versions of Internet Explorer don´t recognize multiple classes on an element and will only use the last one.
Suppose your html is:
<div class="one two">some content</div>
older versions of IE will only apply class .two.
However, in modern browsers you can access it like:
.one {
}
or
.two {
}
or
.one.two {
}
The last one is obviously the most specific.
By the way, something like:
.acc_container. block{ padding: 20px; }
is bound to lead to problems as there is no html element called block and .acc_container. is not a valid class name I think...

.acc_container.block - this one means that both "acc_container" and "block" are applied to element
Like
<div class="acc_container block another-class">
.acc_container .block - means: each element with class "block" inside element with class "acc_container"
For example:
<div class="acc_container"> <p class="block">...