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;
}
Related
I working with images at this moment, in my html document. A don't want, that adjust image width for each img element, so I made separated class (for e. thumbnail) for img tag in my style.css, but that doesn't works. Then I'd created style in my head tag, and placed the thumbnail class in there. That works, but now my style.css doesn't works at all. What I should do?
EDIT:
Working example:
index.html:
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#">
<img src="plug.png" class="thumbnail">
</a>
</div>
</div>
</div>
</body>
</html>
style.css:
body{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.thumbnail{
width: 30px;
height: auto;
}
link should have a href instead of src
<link rel="stylesheet" type="text/css" href="style.css">
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.
Hello I have created a website: Omicrome.com The desktop version works find bar a few things I am still working out that are irrelevant. When I go onto the mobile version everything is zoomed in. If I dont set the viewport and put in:
<meta name="HandheldFriendly" content="true"/>
The content fits the way I want it on my Android HTC one m9. I run a "is my site mobile friendly test" and It says it isn't mobile friendly because I have not set the viewport and the content dosnt fit the screen, on my phone it does but on the image on those sites it is all zoomed in. If I do set the viewport then everything is zoomed in on my phone and on those websites. Here is a quick snippet of the head part of my page.
<html class="HTML1">
<head>
<title>Omicrome</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"language="javascript" type="text/javascript"></script>
<link rel="SHORTCUT ICON" href="img/icon.ico" type="image/x-icon" />
<link rel="ICON" href="img/icon.ico" type="image/ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_24_col.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/MobileStyle.css">
<meta NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta name="description" CONTENT="The homepage for Omicrome.com, where you get the best of technology, science and making. We have on going projects and many articles for your enjoyment.">
</head>
<body>
<div class = "container_24" style="min-height: 100%;">
<header>....
Why does this happen and can I fix this. By the way I do have media queries for the css:
#media screen and (max-width:380px) {
#HTML1{
}
#rectban{
position: relative;
width: 100%;
height: 120px;
margin-right: 6px;
background: #ffffff;
}
#ULBTN{
margin-top:-13px;
}.....
I did try setting HTML1 to have a margin and padding of 0 and set their widths and heights to 100% but still it didnt work. Feel free to visit the page and tell me if it is zoomed in or not.
Try to set this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
This is the proper mobile viewport declaration:
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}
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.