Anyone know how to put a tag next to the youtube videos without creating extra line space between the border box and the video vertically? Like I'm trying to put text in the right side of the first video but it keeps making extra space between the video and the border box where it says vide.
<!DOCTYPE html
<html lang="en">
<meta charset="UTF-8">
<head>
<title>007 Nightfire | Videos</title>
</head>
<style>
.div1 {
background-color:#77BFC7;
text-align:center;
font-size:50px;
border:1px solid #77BFC7;
height:70px;
font-weight:bold;
}
body {
background-color:#00AAFF;
}
hr {
height:0px;
background-color:#000000;
border:solid;
}
</style>
<body>
<div class="div1">
Videos
</div>
<center>
<iframe width="520" height="300"
src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<br>
<br>
<hr>
<iframe width="520" height="300"
src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</body>
</html>
You just need a div with inline style, and to float the text to the right. I'd also recommend to change the center tag to a div, as its not the recommended HTML5 way to center stuff.
.div1 {
background-color: #77BFC7;
text-align: center;
font-size: 50px;
border: 1px solid #77BFC7;
height: 70px;
font-weight: bold;
}
body {
background-color: #00AAFF;
}
hr {
height: 0px;
background-color: #000000;
border: solid;
}
<div class="div1">
Videos
</div>
<center>
<div style="display: inline-block;">
<iframe width="520" height="300" src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<p style="float: right">Text Content Here</p>
</div>
<br>
<br>
<hr>
<iframe width="520" height="300" src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</center>
Related
The following code (jsfiddle) implements an image viewer in CSS
<!DOCTYPE html>
<head>
<title>Trains, Planes, Automobiles, and Boats</title>
<meta charset="UTF-8">
<style type="text/css" media="screen">
html, body { background:#ddd; margin:0; padding:0; height:100%; }
#foo { position:absolute; left:5%; width:60%; top:5%; height:80%; background:#dcc; }
#bar { position:absolute; left:70%; width:25%; top:5%; height:80%; background:#cbd; vertical-align: middle; }
.fullwidth { width: 100%; vertical-align: middle; }
.vcenter {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="foo">
<div class="vcenter">
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
</div>
</div>
<div id="bar">
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/4703/ryanlerch-Steam-Train-Engine.png" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" />
<img class="fullwidth" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" />
<img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/24418/Jarno-Boat-1.png&disposition=attachment" />
</div>
</body>
How do I fix the following two bugs?
The bar side does not scroll.
The image in the foo side is not centered. The intention is to make all the image visible in the left side while filling its container in one dimension (vertical/horizontal) and being scaled in the other (horizontal/vertical) to remain at 1:1 ratio.
I'm not sure I understood your question, but if you only want to make your right div scrollable then add this to your css
#bar{
overflow: scroll;
}
Example
To answer your second question (vertically centering the left image), add these rules to your vcenter class
position: relative;
top: 50%;
transform: translateY(-50%);
Example 2
I want to put one image left, one image right and text in the middle.
I keep thinking I am close then one or another runs away! I would appreciate some help and guidance.
Code for page and CSS below
VB page
<div id="HeaderTitleWrapper">
<h2><img src="images/Header/logo.jpg" alt="Writting Icon" />
<div id="HeaderTel">
GATEWAY<img src="images/Header/pic2.jpg" alt="Writing Icon" />
</div> <!-- HeaderTel -->
</h2>
</div> <!-- HeaderTitleWrapper -->
CSS
/* Header Text Title */
#HeaderTitleWrapper {
width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
#HeaderTitleContent {
padding: 0px;
height: auto;
position: relative;
left: 0px;
top:10px;
}
#HeaderTel
{
position:absolute;
right:150px;
top:auto;
}
Using text-align:justify and pseudo , you can spray inline-boxes from left to right.
<header>
<img/>
<span>text</span>
<img/
<header>
header {
line-height:0;
text-align:justify;
}
header span {
display:inline-block;
vertical-align:middle;
line-height:1.2em;
}
header:after {
content:'';
display:inline-block;
width:99%;
vertical-align:top;
}
similar exemple : http://codepen.io/gcyrillus/pen/dlvCp
<div
id="firstImage">
<img
src="1.jpg"
alt="Writting Icon"
/>
</div>
<span
id="Text">
GATEWAY
</span>
<div
id="secondImage">
<img
src="2.jpg"
alt="Writing Icon"
/>
</div>
<!-- HeaderTel -->
</div>
On my website, section "Presse and Medias", I'd like a white square to appear a few px next to the video (on the right side) with the word "hello" in it.
Unfortunately this is not working. I see the word hello, but not in a white square.
Any idea what the issue is and how to fix it?
Many thanks,
Here is my html:
<div class="section" id="medias">
<div class="center">
<iframe width="350" height="200" class="youtube-player" src="http://www.youtube.com/embed/qqXi8WmQ_WM" frameborder="0" allowfullscreen></iframe>
<div id="medias-txt"
<p>hello</p></div>
</div>
</div><!--END page4-->
And here is my css:
#medias-txt
{
background-color:#fff;
color:#000;
width:100px;
height:100px;
padding:10px;
float:right;
}
You aren't closing your div tag
<div class="section" id="medias">
<div class="center">
<iframe width="350" height="200" class="youtube-player" src="http://www.youtube.com/embed/qqXi8WmQ_WM" frameborder="0" allowfullscreen></iframe>
<div id="medias-txt">
<p>hello</p></div>
</div>
</div><!--END page4-->
This should do the trick.
PS Love the video on that page :)
In your css, you need to add spaces between the colons and the content.
eg:
#medias-txt
{
background-color: #fff;
color: #000;
width: 100px;
height: 100px;
padding: 10px;
float: right;
}
When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.
Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/
HTML:
<div class="container">
<canvas width="200" height="100"></canvas>
</div>
<div class="container">
<canvas id="block" width="200" height="100"></canvas>
</div>
CSS:
.container {
border: 1px solid blue;
}
canvas {
border: 1px solid red;
}
#block {
display: block;
}
Output:
For anyone wondering what the gap actually is:
As ThinkingStiff mentions, these are inline elements. That means that by default they will try to align themselves with the baseline of text. If you had some adjacent text, it would be easier to see what's happening.
The amount of space left below the svg is the size of a descender at the current font-size. This is why Teg's solution only works for the default font-size. The default font-size is 16px and 4px of that is dedicated to the descender. If you increase the font-size, the descender will also increase.
See the same piece of DOM using font-sizes of default (16px), 50px and 0px;
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}
<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>
Margin -5px is working in Firefox.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas>
</div>
</body>
</html>
I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.
<body>
<form id="form1" runat="server">
<div id="BGContainer">
<div id="PageContainer">
</div>
<div id="Content">
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="Bottom">
<div id="Copyright">
Copyright
</div>
</div>
</div>
</form>
</body>
In a different file, I have the content for the ContentPlaceHolder
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
<div id="Heading">
Overskrift
</div>
<div id="LeftColumn">
/*Content Here*/
</div>
<div id="CenterColumn">
center
</div>
<div id="RightColumn">
right
</div>
</asp:Content>
The problem is that #MainContent is not resizing in height. It always stays the same height
CSS
html {
height:100%;
}
body {
margin:0;
width:100%;
height:100%;
font-family: Verdana, Sans-Serif;
background-image:url(../Gfx/Design/bg.png);
background-repeat:repeat;
}
#BGContainer {
margin:0px;
background-image:url(../Gfx/Design/Background-top-gradient.png);
background-repeat:repeat-x;
height:210px;
width:100%;
}
#PageContainer {
background-image:url(../Gfx/Design/top-gradient.png);
background-repeat:no-repeat;
height:100%;
width:1016px;
margin-left:auto;
margin-right:auto;
}
#Bottom {
background-image:url(../Gfx/Design/Bottom.png);
background-repeat:no-repeat;
height:32px;
width:964px;
margin-left:auto;
margin-right:auto;
}
#Content {
background-color:#FFFFFF;
background-image:url(../Gfx/Design/content-background.png);
background-repeat:no-repeat;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
}
#MainContent {
width:980px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}
#Copyright {
color:#000000;
font-size:xx-small;
text-transform:uppercase;
margin-left:50px;
padding-top:5px;
}
#LeftColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#CenterColumn {
width:311px;
margin-left:10px;
border: 1px solid gray;
min-height:400px;
float:left;
}
#RightColumn {
width:311px;
margin-left:10px;
margin-right:10px;
border: 1px solid gray;
min-height:400px;
float:right;
}
To clear the floats without any additional markup use overflow:hidden
#MainContent {overflow:hidden;zoom:1;}
The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.
The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.
If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.
You need to clear the floated content.
Insert as follows:
<div id="MainContent">
<asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
</asp:ContentPlaceHolder>
<div class="clear"></div>
</div>
... and the CSS:
.clear{clear:both}
use the <p> tag and your text will resize depending on content needs
<div style="width:400px; border-bottom:1px solid teal; padding:20px;">
<p>your text or database field here</p>
</div>
I use the tag when i want a div height to change depending on the amount of text inside.
This example will give you a nice results list when querying from database that places a border in-between results.
Probably because you have a height set on the #BGContainer - if you remove this you might find that the box expands with the text