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;
}
Related
I want to change the font size and color of the a when I hover over p. It is not working. Probably there is a simple solution, but I am struggling with this for a few hours.
If anyone has not too complicated links related to this topic I also would be happy
<!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>
<style>
p:hover div nav a {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
Hi there i get the simple solution for you .
<!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>
<style>
p:hover + .hv {
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Hi there ok so if i might get you . you want to get
<!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>
<style>
.hv a:hover{
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
<div class="hv">
One
Two
Three
</div>
</nav>
</div>
</body>
</html>
Try something like:
p:hover, a:hover {color: blue;font-size: 22px;}
Your CSS selector p:hover div nav a is incorrect. This would refer to an <a/> within a <nav/> within a <div/> within a <p/> that is being hovered. You can fix this with the change I made below.
<!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>
<style>
nav p { /*selects all hovered <p/> within a <nav/>*/
color: blue;
font-size: 22px;
}
</style>
</head>
<body>
<div>
<nav>
<p>Ceramics</p>
One
Two
Three
</nav>
</div>
</body>
</html>
building an email with html css. i'm using tables which works fine on Gmail Outlook and Yahoo clients. on ios mail in mobile all tables are aligned left.
I need it to centered.
this is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
</style>
</head>
<body style="background-color: #F9FBFF; margin:auto;">
<table align="center" style="background-color:#FFFFFF; width:609px; height:55px; padding-left: 10px; border:1px solid #E7F7FF; display:block;">
<tbody>
<tr style="height:50px;">
<td style="vertical-align: middle; ">
<div style="font-size: 16px; font-family: 'Helvetica';font-weight: 500; ">Hate Speech</div>
</td>
<td>
<a href="https://www.kidas.net/post/toxicity-in-video-games">
<img style="height:auto !important; padding: 8px 0px 0px 5px;" title="Abusive language based on prejudice" width="15" src="http://cdn.mcauto-images-production.sendgrid.net/6e0d08eb67685199/9451cd9d-023e-4c4f-a679-84200923b3b6/15x15.png">
</a>
</td>
</tr>
</table>
</body>
</html>
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 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.