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;
}
Related
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>
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
On the website I'm working on (this), I have a div with an img in it. This is the html
<div><overlay> <img class="img1" height="225" src="NYC/wtc1.JPG" width="225" /></overlay</div>
<div><overlay> <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225" /></overlay></div>
<div><overlay> <img class="img3" height="225" src="NYC/sky.jpg" width="225" /></overlay></div>
<p> </p>
nothing too complicated. This is the CSS for the classes img1, img2, and img3.
.img1
{
position:absolute;
left:12%;
}
.img2
{
display:block;
margin:auto;
}
.img3
{
position:absolute;
right:12%;
}
also pretty simple. But, if you look at the website, the 3rd image (at least for me on Safari) is much lower than the other two. Why would this happen? I don't see anything in the CSS or HTML that would cause this.
If you have some markup like this:
<div class="wrapper">
<div><img class="img1" height="225" src="http://rwzimage.com/albums/NYC/wtc1.JPG" width="225" /></div>
<div><img class="img2" height="225" src="http://rwzimage.com/albums/NYC/wtcmem.jpg" width="225" /></div>
<div><img class="img3" height="225" src="http://rwzimage.com/albums/NYC/sky.jpg" width="225" /></div>
</div>
Then I think this CSS will have approximately the effect you're after:
.wrapper {
display: table;
width: 960px;
}
.wrapper > div {
display: table-cell;
width: 33%;
text-align: center;
}
.wrapper > div:hover img {
opacity: 0.5;
}
Demo. I set width: 960px; so that it would force things to be wider than the JSFiddle window, but you could set width: 100%; for your page.
I've tried to do the best I can with your code, the following will work for you:
<div class="container" style="overflow:hidden; text-align:center;">
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img1" height="225" src="NYC/wtc1.JPG" width="225">
</div>
</div>
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img2" height="225" src="NYC/wtcmem.jpg" width="225">
</div>
</div>
<div style="display:inline-block; margin: 0px 80px;">
<div class="overlay">
<img class="img3" height="225" src="NYC/sky.jpg" width="225">
</div>
</div>
</div>
Note that <overlay> is not a valid HTML element. also I've seen on the page you used something like <margin>. It's not a good practice to invent HTML elements.. You can get all the functionality you need using regular <div>s (although I don't think this will break your page.. maybe only in older browsers..).
What I basically did:
Wrapped the three <div>s with a container with text-align:center. This will make the three divs inside it aligned to the center.
Added display:inline-block; to make all the divs follow the text-align.
Added margins to the divs to space them
Note that I strongly recommend to replace your <overlay> with something like <div class="overlay">
div tag naturally stack vertically. So you will need to add an id to each div or you could just put all the img in one div.
The block css attribute is effecting the layout. It is pushing the next img to the next line.
I'm working on the "About Us" header on this page
Basically the little div there with the images and blue "About Us" block was an image, but for SEO purposes, I'm now replacing it with a structure that can use an <h1>...</h1> tag.
As you can see, the layout of the images and header tag works perfectly, but it's pushed the right column of the page in under the content.
I've checked, and double-checked and it looks like all floats are properly contained (unless I missed something) so I'm not sure how to fix this.
Can anyone tell me what I'm doing wrong here?
The HTML:
<div class="page_header">
<div>
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
<img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
<h1>About Us</h1>
</div>
</div>
The CSS:
/* Page Headers
----------------------------*/
.page_header div {
overflow: hidden;
min-width: 665px;
}
.page_header img, .page_header h1 {
float: left;
margin: 10px 10px 0 0;
}
.page_header img:nth-child(2) {
clear:right;
}
.page_header h1.about-us {
line-height: 90px;
background: #00f;
color: #fff;
padding: 0 42px;
}
Thanks in advance!
Hey Ortund Actually wrote a HTML markup in bit of improper way so you should write like this :-
<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>
see the attached image its working fine through this method :-
That is because your <div id="sidebar-parimary"> should reside inside the <div id="main"> element.
Currently it is:
<div id="main">
<div id="content">...</div>
</div>
<div id="sidebar-primary">..</div>
it should be:
<div id="main">
<div id="content">...</div>
<div id="sidebar-primary">..</div>
</div>
My knowledge of css and html is fairly limited. I am trying to make tiles that contain an image and one line of text, and these tiles should go next to each other, then continue on the next line if the screen's width has been used.
This image shows what I need. The blue areas are images, the text below it is horizontally aligned center. The tiles are 160px wide, their height depends on how long the text is, but should be at least 150px. I know I have to work with divs, obviously, but I can't really get any further than that.
HTML
<div><img src=".jpg" width="110" />text</div>
.
.
.
<div><img src=".jpg" width="110" />text</div>
CSS
div{
width:160px;
border:1px solid grey;
text-align:center;
min-height:150px;
height:auto;
vertical-align:middle;
padding:8px;
float:left
}
img{display:block; margin:0 auto}
DEMO
Resize the result part to see the effect
min-height:150px make default height as 150px
height:auto helps to extend the div based on the content.
float:left makes divs to sit next to each other.
Have you seen this image gallery example in w3schools-
http://www.w3schools.com/css/css_image_gallery.asp
Sample Code-
Html-
<div class="img">
<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
Css-
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
Have a look at this:
http://jsfiddle.net/LX6EY/
HTML
<div class="element">
<p>Some content goes in here!</p>
</div>
<div class="element">
<p>Some content goes in here!</p>
</div>
<div class="element">
<p>Some content goes in here!</p>
</div>
CSS
.element { background: #666; border: 1px solid #000; color: #fff; float: left; height: 260px; padding: 20px; width: 210px; }
For more information about floats please see here, they're incredibly useful, and at the moment pretty vital to the layout of most websites.