I want to make a div that is 960 x 960px with the glow corners.
How do you position this image correctly using css so it appears in the corners?
http://www.halogamertags.com/sprite_glowCorners_62_59.png
This is how it can be done.
div{
position:relative;
width:300px;
height:200px;
}
img{
position:absolute;
width:100%;
top:0;
bottom:0;
}
Changing the height of the div will also affect the dimensions of the glow image. There are other ways of accomplishing a similar effect, but using the image provided this is how it can be done.
Check working example at http://jsfiddle.net/ZRnJf/
I saved an 1x1 px slice of your glow effect as glow.png.
I do not know what exactly your goal is, but with this code I get the corners, and the content in the middle.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta name="page-topic" content="CSS, HTML, Tutorialo" />
<meta name="robots" content="index,follow" />
<meta name="distribution" content="global" />
<meta name="keywords" content="Keywords, here" />
<meta name="description" content="A good listing to vote up" />
<title>CSS - DEMO</title>
</head>
<body style="background-color: gray;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: top; width: 960px; height:960px; margin: 15px;">
<div style="background-image: url('glow.png'); background-repeat: repeat-x; background-position: bottom; width: 960px; height:960px; ">
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: left; width: 960px; height:960px; " >
<div style="background-image: url('glow.png'); background-repeat: repeat-y; background-position: right; width: 960px; height:960px; ">
<div style="margin: 1px;">
Hello World
</div>
</div></div></div></div>
</body>
</html>
EDIT: Nowadays there are rumors going on for better using HTML5 doctype rather than XHTML, so before just using XHTML better do some research on the (dis)advantages. I think HTML5 is standard.
Related
I want my web to have a full background with no white parts or blank parts, I have tried several codes and stuff but none seems to work well.
The background image that I have is not on the internet but is instead offline and only available in my desktop because I edited it, so I can only use the commands background-image or body background with my own files (I thought that would be important to know if someone wanted to help me with the code)
My web is this one:
[![Background I use][1]][1]
[![Issue][2]][2]
[![EDIT with suggested code][3]][3]
The whole code is:
<html>
<head>
<script src="https://kit.fontawesome.com/18f289db08.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
</html>
<meta name="author" content="Iván Camacho"/>
<meta charset="UTF-8" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="author" content="Iván Camacho"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style>
body {
background-repeat: no-repeat;
background-size: contain;
background-attachment:local;
background-image: url("2022-03-08\ \(3\).png");
}
</style>
</head>
<body>
<div class="Negro3">
<img src="Fondo_Negro - copia.jpg" width="270" height="310">
</div>
<div class="Negro2">
<img src="Fondo_Negro - copia (2).jpg" width="270" height="310">
</div>
<div class="Negro1">
<img src="Fondo_Negro.jpg" width="270" height="310">
</div>
<div class="superscript">
<i class="fa fa-superscript" style="font-size:60px;color:white;"></i>
</div>
<div class="calculator">
<i class="fa fa-calculator" style="font-size:60px;color:white;"></i>
</div>
<div class="flask">
<i class="fa fa-flask" style="font-size:60px;color:white;"></i>
</div>
<div class="Sciencestudio">
<h1> Science studio </h1>
</div>
<p> google link <img src="https://www.google.com/search?q=imagen&rlz=1C1CAFB_enES711ES711&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiBudns5aT2AhVDrxoKHVc9DR8Q_AUoAXoECAIQAw&biw=1242&bih=568&dpr=1.1#imgrc=GEeCSbujNt4WcM"/> cuerpo </p>
<div class="Matemáticas"> <p2> MATEMÁTICAS </p2> </div>
<div class="FÍSICA"> <p2> FÍSICA </p2> </div>
<div class="QUÍMICA"> <p2> QUÍMICA </p2> </div>
</body>
</html>
[1]: https://i.stack.imgur.com/dwWjx.jpg
[2]: https://i.stack.imgur.com/13g0M.jpg
[3]: https://i.stack.imgur.com/NQLZc.jpg
You have contain for background-size which makes sure that image is fully visible. You want to use cover which fills whole space.
contain
Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat.
cover
Scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
source: MDN - background-size
div {
height: 100vh;
width: 100vw;
background-image: url(https://picsum.photos/200/200);
background-repeat: no-repeat;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
Cover:
<div class="cover"></div>
Contain:
<div class="contain"></div>
So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!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>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
</head>
<body style="width: 100%; height: 100%">
<table cellspacing="1" style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<h1>Hello World</h1>
</td>
</tr>
</table>
</body>
</html>
The result of that html snippet is the word Hello World is on top of the screen. I did everything to make it in the middle. What can I do?
I tried another way using vertical align style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How to get Sexier Avatar in IMVU 2</title>
</head>
<body style="width: 100%; height: 100%">
<div style="height: 100%;width: 100%;vertical-align: middle">
<h1>Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
I clearly said that the vertical align for the div should be middle. It doesn't work.
It seems that the size of the body is not fullscreen. How do I make it full screen?
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="centerInScreen">
<h1>Hello World!</h1>
</div>
</body>
</html>
Use this to center in screen.
Use CSS
<div class="center">Hello World</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
I'm trying to have a roll over image effect but also make it responsive to small media types, hard to explain but here is a link to video to what Im trying to do... https://www.youtube.com/watch?v=PWoOpJtkyjI&t=118s
any help will be great
jsfiddle
https://jsfiddle.net/0b5sz9zo/
Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<nav>
HOME
ABOUT
WRITINGS
EXTRA
CONTACT
</nav>
<div class="sect sectOne"></div>
<div class="subSection1">subSection1 test </div>
<div class="sect sectTwo"></div>
<div class="subSection2">subSection2 test </div>
<div class="sect sectThree"></div>
</body>
</html>
*{margin:0;}
html, body {height:100%;}
h1,h2,h3,h4,h5,h6, p
{margin-bottom:20px;}
nav{
position:fixed;
width:100%;
height:50px;
background-color:rgba(0,0,0,.5);
z-index:99;
text-align:center;
}
nav a{
text-decoration:none;
color:white;
margin-left:30px;
line-height:50px;
}
.sect{
height:100%;
background-size:cover;
background-attachment:fixed;
}
.subSection1{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.subSection2{
height:50%;
background-color:white;
color:black;
font-size:50px;
}
.sectOne{
background-image: url("img/bk1.jpg");
}
.sectTwo{
background-image: url("img/image2.jpg");
}
.sectThree{
background-image: url("img/image3.jpg");
}
I have added to a blogspot blog a page with a gallery of images: here.
in chrome some of the images are distorted(vertical format images) - in firefox everything looks fine:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.2" />
<meta name="author" content="" />
<meta name="date" content="2013-01-20T10:35:50+0100" />
<meta name="copyright" content=""/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires" content="0"/>
<meta />
</head>
<style type="text/css">
table {
text-align: center;
}
td {
margin-top: 4;
margin-bottom: 4;
margin-left: 4;
margin-right: 4;
}
img {
height: 85%;
width: 85%;
}
</style>
<body>
<div id='galleryWinter'>
<table vertical-align:middle; horizontal-align:middle>
<tr>
<td>
<a href="http://www.istockphoto.com/stock-photo-19712275-virginia-creeper-in-fall.php?st=ee2d438" target="_parent" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19712275/2/stock-photo-19712275-virginia-creeper-in-fall.jpg" alt="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
<td>
<a href="http://www.istockphoto.com/stock-photo-19792446-virginia-creeper-in-fall.php?st=ee2d438" target="_blank" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19792446/2/stock-photo-19792446-virginia-creeper-in-fall.jpg" alt="Wilder Wein" longdesc="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
</tr>
.
.
.(the code for the other images and links)
As you can see I have put the images into a table. What do I need to do, that the vertical format images are not distorted in chrome (expanded to the width of the table cell).
Looking forward to your answers,
Force the image heights to be auto instead of the 85% that you've set globally to every image on the page:
Css:
#galleryWinter img{
height: auto !important;
}