I've recreated the issue I am having here:
https://jsfiddle.net/9p4z8fnj/
.youtube_text_infor {
margin-right: /**/
}
.youtube_video {
padding-right: 10px;
}
<div class="youtube_video"><p style="float: left;"><iframe width="300" height="200" src="https://www.youtube.com/embed/293ZfGilg-I" frameborder="0" allowfullscreen></iframe></p>
</div>
<p class="youtube_text_infor"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text ext Text Text Text Text Text Text Text Text</p>
<div style="clear: left;">
My goal is to add some white space (padding) from the youtube embedded link such that there will be a gentle gap between the text and the video.
I've tried toying with the padding and the margin with both the text and the embedded link, with no avail.
Any Help would be appreciated.
You need to add this css in your style
.youtube_video {
padding-right: 10px;
float: left;
}
Related
I have a symbol from other font-family and need to adjust its size. Unfortunately font-size:200% increase line-height of whole line;
How to increase one character font-size without increasing line-height?
I know about "severing" the character with position:absolute but this also shift text horizontally. When what I want is something line line-height: inherit (which doesn't work).
.increased {
font-size:200%
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
If you're sure that it won't be the only character in that line, you can use line-height: 0. Otherwise you would have to manually adjust line-height value.
.increased {
font-size: 200%;
line-height: 0
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
Make the element inline-block then you can adjust the line-height of only that character:
.increased {
font-size:200%;
line-height:0.2;
display:inline-block;
}
<p>normal</p>
<div style="background-color:yellow">.text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<p>increased (problematic)</p>
<div style="background-color:yellow"> <span class="increased">.</span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
Please help me with this paragraph I need to make my website paragraph to look like the photo below>>
I need this paragraph structure
<div class="row" style="font-weight:bold;display:inline-flex">
<div>
<p>1.2.1</p>
</div>
<div>
<p>text text text ext text text text text text ext
text text text text text ext text text text text text ext</p>
<p>text text text text text ext
text text text text text ext text text text text text ext text text text ext </p>
<p>text text text text text ext
text text text text text ext</p>
</div>
</div>
Use the following code to display the paragraph as you want :
<p style="display:inline-block;width:7%;vertical-align:top;">1.2.1</p>
<p style="display:inline-block;width:90%;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
I want to wrap the contents of a div around another sibling div (NOT a nested DIV)
The code example below comes very close. But what I need is for the contents of the DIV on the left so slide down enough to allow a few lines of the content of the right DIV to flow over the top (as it does on the bottom)
Here is full working HTML doc that demonstrates what is working so far, except for the text flowing on the top.
div.wrapper {
width: 500px;
}
div.Cover {
float: left;
width: 250px;
height: 350px;
margin: 10px;
padding: 10px;
border: 3px solid orange;
background-color: aqua;
}
div.Content {
padding: 5px;
}
<div class="wrapper">
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text</div>
</div>
If an html solution is enough, just position that div under a few Content divs in the html.
Before:
<div class="Cover"></div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
After:
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Cover"></div>
I'm not sure there is a css solution. Margin-top, top, both clear the space but don't allow floated elements past.
This just means that floated div is relative to the text content, not to the page.
What I think you really want, but can't use yet, are CSS Exclusions: https://www.w3.org/TR/css3-exclusions/. They're only supported in IE/Edge as of this writing, and only with the -ms prefix.
This article shows some practical examples: http://www.html5rocks.com/en/tutorials/regions/adobe/.
If you're able to paste this somewhere, anywhere after the html, this accomplishes the same thing using javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('.wrapper').prepend($('.Content:nth-of-type(2)'))
</script>
Im trying to alignin my <span class="fechar_fancy">Back/span> at bottom of my div, independing of the height of my content I want always this element at the bottom.
So Im trying to give position:absolute and bottom:0 to my element that I want to position at bottom, and position relative to container, but its not working.
Somebody there see why its not working??
This is my fiddle with my trying:
http://jsfiddle.net/KHU7h/1/
My html:
<div id="janela_fancybox-container">
<div id="janela_fancybox">
<h2>Title</h2>
<span id="data">Date time today</span> <br />
<img class="img_principal" src="../image1.jpg"/>
<p>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
<span class="fechar_fancy"><strong>Back</strong></span>
</div>
</div>
My css:
#janela_fancybox
{
text-align:center;
width:100%;
margin:0 auto 0 auto;
background:#fff;
position:relative;
}
#janela_fancybox .img_principal
{
width:180px;
height:200px;
float:left;
margin-right:10px;
border:5px solid #f3f3f3;
margin-top:15px;
}
#janela_fancybox #data
{
width:100%;
color:#ccc;
font-size:13px;
text-align:center;
color:#7a7a7a;
}
#janela_fancybox h2
{
width:100%;
color:#004B97;
font-size:16px;
text-align:center;
}
#janela_fancybox p
{
font-size: 14px;
text-align:justify;
line-height:25px;
height:25px;
word-spacing:-2px;
width:96%;
margin-top:15px;
}
#janela_fancybox .fechar_fancy
{
float:left;
text-decoration:none;
font-size:15px;
color:#000;
width:100%;
text-align:center;
cursor:pointer;
position:absolute;
bottom:0;
}
The main problem I see is that #janela_fancybox p has height:25px. This keeps the height of #janela_fancybox from expanding with the text content. I removed the height:
#janela_fancybox p {
...
/*height:25px;*/
}
Additionally, the absolutely positioned element could use left:0 to ensure that it starts on the left and expands to 100% width. The float is not necessary:
#janela_fancybox .fechar_fancy {
/*float:left; */
...
left:0;
}
And, the absolutely positioned element tends to overlap the text content. I added some padding to the bottom of the container to ensure that there is space at the bottom for the "back" link:
#janela_fancybox {
...
padding-bottom:25px;
}
WORKING EXAMPLE (jsfiddle)
P.S. In this context, I don't see a need to position that element absolutely. It could just be position:relative after the text. Of course, there may be more to your application than what is presented here.
Here's a demonstration.
The problem here is div#fancybox isn't clearing the floated elements within it. You can do the clearfix class and add it to the div#fancybox. You also have a height specified on the p tag which the text within exceeds that height (you might want remove that as well).
I am attempting to design a responsive layout in which there is an image and a paragraph side by side and the image is vertically aligned with the text (the paragraph height changes with adjustments to the browser width).
Here is my currant code,
http://jsfiddle.net/xSrpt/
I have tried using
vertical-align:middle;
and
vertical-align:central;
on the parent div (#intro) and have not been able to get anywhere with it.
I feel like this should be an easy fix and i am missing something but hopefully you guys can help.
please include a working fiddle with your answer.
Thanks a lot!
Just to add a comment to above answer ( rep too low ).
It is unnecessary to convert the div into table.
All you have to do is applying vertical-align:middle to child element and not the parent.
#intro > * { vertical-align:middle }
Here's your forked fiddle.
http://jsfiddle.net/UBD6S/
much simpler solution.
try add to its parent - display:table-cell;
edit:
you need to make the div "act" like a table, as below:
CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}
HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="p">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>