hey guys is there a way I can make a text fit perfectly with an image like that of Netflix
https://www.netflix.com/ng/title/81067760 i already have the image but making the text fit exactly and also not covering the image is just impossible for me right now
this is my code for the image
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</head>
</body>
</html>
question is how do i make the div class of details fit with the image i just need to replicate the the big image and how the text is aligned vertically to the left of the screen like that of Netflix. Check this link out https://www.netflix.com/ng/title/81067760
Hope it's more clear now thanks...
I'm not sure what netflix element you are trying to replicate, but I can show you how to align the images vertically with the .details class.
Start by wrapping a div class='container' around both the picture and div class='details' elements.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<div class='container'>
<picture>
<source class="mov" media="(max-width: 599px)" srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img" src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
<div class = "details">
<h1><%=Details.title %></h1>
<p><%=Details.release_date%></p>
<h2><%=Details.description%></h2>
</div>
</div>
</head>
</body>
</html>
Add the following line to the top of styles.css
.container {
display: flex;
align-items: center;
}
Flexbox is great for this kind of thing. Read up here
Let me know if that helps.
Maybe z-index property is the property that can help you.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
This is one of the ways to allow text to cover the image. Sorry, if I hadn't understand you correctly.
Related
I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>
So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.
In html programming class I tried to make an html file and display two images. For any reason me and my teacher can't determine, there is one image which isn't being displayed.
Could you please let me know why this is happening?
<!DOCTYPE html>
<html Lang="es">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img scr="https://www.sublimetext.com/images/windows_48.png" />
</div>
<div>
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">
</div>
</body>
you have misspelled src, you have scr
it should be <img src="https://www.sublimetext.com/images/windows_48.png" />
I am new to stackoverflow. I'm asking about HTML code. On my sourcecode, I have an image that's 214px height(and 163px width). I Have a figcaption with that also. If I Set a paragraph tag with that it won't appear next to it, but under it. I'm trying to avoid a CSS "position: absolute" answer because i want this to be mobile compatible as well. Just wondering if we can make it so a p tag appears to the same height but to a set weight parallel to the image. Here's my code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Personal Webpage | Home</TITLE>
<meta charset="UTF-8">
<meta name="description" content="content, homepage">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">
<link rel="shortcut icon"
href="favicon.ico"
type="image/x-icon" />
<link href="style.css" type="text/css" rel="stylesheet" media="all and (max width: 5120px)"/>
</HEAD>
<BODY>
<div class="center">
<header><img src="header.png" alt="alttext" height="44px" width="792px" border="1px"/></header><br><h3><b>lorem ipsum dolor solem amit</b></h3></div><br><img src="img/image1.jpg" alt="" height="214px" width="163px" border="1px"><figcaption>Caption</figcaption>
<p style="border: 1px solid black;" width="100px" height="214px">lorem</p></p>
</BODY>
</div>
</HTML>
It's hard to answer this with the information provided but here are some ideas to try.
You can float the p next to the img or set it to display mode inline-mode.
Try absolute css property. Paragraph re sizes it self with smaller screen
p{
position:absolute;
left: 200px;
top: 40px;
}
First off, my website is: http://www.volunteeringnews.com
On the website I want white to continue to the bottom of the website but he is now cutting it just after the background image.
I could offcourse make my img 10000 px high but that seems to create a very big image in size.
So far I tried creating a new Div to go around the background divs but then he just goes over the background divs.
I tried z-index but that did nothing.
I tried to use the IMG from HTML and not CSS but that got my img out of line. (I have the background split in two images for the top and the main section).
I've been on it all day and hoped that someone might be able to help me out.
ps.I'm sorry if this is kind of a noob question but I am only on building websites for a few months.
Thank you!
#head{
margin:0px;
height:215px;
background-image:url(../img/background/background_01.gif);
background-repeat:no-repeat;
width:100%;
}
#mainc {
margin-top: 0px;
width:90%;
position:absolute;
background-image:url(../img/background/background_02.gif);
background-repeat:no-repeat;
min-height:100%;
add
background-color:#fff;
to your #mainc and #head as well ;)
just by adding
background-color: #FFFFFF;
to your #mainc style should do the trick
First off start by cleaning up your html which currently looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering News- All your volunteering news plus a database to look for your own advernture. - Cheap and free</title>
<link href="css/styles.css" rel="stylesheet">
<link href="wordpress\wp-content\themes\twentytwelve\style.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<!--body-->
<body>
<div class="topnav"></div>
<header><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
<div class ="sql">
</div>
</head>
<body>
<div id="wrapper">
<img src="img/form/background.jpg" class="stretch" alt="" />
</div>
<div id="head">
<div class="logo">
<img src="img/head/logo.png">
</div>
<div class="menu-top">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering Field- Volunteer direct, cheap and easy</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="Volunteering" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="navigation">
<ul id="nav" class="drop">
<li>Home</li>
You have multiple doctypes, multiple html tags, multiple head tags, multiple css declarations. This will never work properly.