Image link area extends outside image - html

I am designing a simple HTML website. The problem I have is with my images that I am using as links. I had them positioned where I wanted them but then I noticed that the link area extended to the left of the image. I was using relative positioning and thought that might have something to do with it, but I removed all CSS from my website and it still happens. I have a strictly HTML page and the link area still extends outside the size of the image.
Any idea what's causing this?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Zach's Website</title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
<div id="header">
<div class="container clearfix">
<img id="headbanner" class="span-24" src="img/headerbanner.png">
<a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a>
<ul class="navigation">
<li>Experience</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="social">
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
<li><img src="img/tumblr.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/github.png"></li>
</ul>
<img id="bodyPattern" src="img/body.png">
</div>
</div>
</head>
<body>
<div id="project1" class="container clearfix">
<img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" />
<img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" />
</div>
</body>
<footer>
<div class="container clearfix">
<img id="footerLogo" src="img/ZBLogoFooter.png">
<img id="footerBanner" src="img/footerbanner.png">
</div>
</footer>
</html>

Are you setting a height/width to the 'a' tag? Ideally you should be setting height, width and display:block, so that the 'a' tag has its exact size.
a{
display:block;
height:100px;
width:100px;
}

This worked for me.
<!-- HTML -->
<img src="#" alt="logo image">
/* CSS */
a {display: block; width: 50%;}
img {width: 100%;}
You set the width of the link then you set the width of the image to 100% of the link width. Then you adjust the width of the link until the image is the size you need. Link won't go past the width of the image this way.

So...I stumbled on this because I was having the same issue. Then, when I didn't see the answer here, I tried one last-ditch effort. I set all of my images wrapped in A tags to display: block; in the CSS. Before that, the A tag was allowing users to click far outside the image to the right where there was just white space caused by the display: block; default. Try display: inline-block because it caused the link to force itself down only to the edges of the image. Hope that works for you!

Related

HTML5:Parallax effect and navigation bar. Problem with headers

I'm trying to make a website with a navigation bar and parallax effect,but i have a problem. Navigation bar and parallax effect use the same header in body and i wish to know how i can use multiple headers on a page. Can you add please a code example with multiple headers that can be edited separated in CSS?
I will atach down my code
<!DOCTYPE html>
<html>
<head>
<title>Ce inseamna o cariera in it si tech?</title>
<link rel="stylesheet" href="Main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header class="navigation-bar">
<div class="container">
<div class="logo">
<img src = "IT & TECH.png" width = 200px height = 99px >
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Cum sa incepi o cariera?</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
PS I tried with header1 and header2 but i can't edit them in CSS file.
Use section instead of nav or header and assign id/class for it may be it will help

How can I align text to the left of my image that is centered?

This is what I have so far for the code...
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheets -->
<link href="style.css" rel="stylesheet" type="text/css">
<title>name of website</title>
</head>
<body>
</div>
<div class="topnav">
<img src="../images/website logo-01.png" width="80" height="80" alt="logo" class="logo">
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li> Resume
</ul>
</nav>
<header id="portrait">
<img src="../images/portrait.jpg" width="2000" height="2000" alt="portrait" class="portrait"
style="float: left; margin-right: -8000px; margin-bottom:">
<p>this is where the text wold be going</p>
</header>
<main>
<main>
<aside>
<div>
</main>
enter image description here
I would like the text to be aligned where the yellow bordered box is, and would appreciate some help.
You can use the css flex property like, put the image and text inside a div and add use display:flex property to the div and then you can use can use the order property if you want image and text in different order.
You can do that by putting your <img> and your <p> tag together inside one div and by using display:flex on that div element.
Place the p tag before the img and do as follows:
HTML
<header id="portrait">
<p>this is where the text wold be going</p>
<img src="../images/portrait.jpg" alt="portrait" class="portrait">
</header>
CSS
#portraid {
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}

960.gs li tags will not spread out across the whole page

Im not a pro at this by any means. I tried following a few youtubes on this and was able to get the columns to work fine with paragraph tags. Though when I go with a ul > li tag. The image wants to take the whole space.
Im not really sure what the cause is here.
Whats most perplexing is that it looks like the li / image has a right margin of the whole space. Even when I set it to zero.
When I inspect the element - that margin says 0 0 0 0 but mousing over I see it takes the whole page...
Code below ...
<html>
<head>
<meta charset="utf-8">
<title>Layout Test</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/960.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<body>
<div class="header">
<h1>This is a test</h1>
</div>
<div class="container_12">
<div class="grid_4">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
</div>
</div>
</body>
</head>
</html>
li are block level elements and they should take the whole right space, unless you make it inline by
display: inline;
in css property.
then if you want the li to float to right or left you could do
float: right/left;
all in the li css property

Fit to page issue

My name is Will and I'm coding a website for some folks. I've ran into a bit of an error. No matter what sort of code I use, the website will not adjust it's self correctly to the page. For example, this is what it looks like on a large screen:
http://i.stack.imgur.com/B5KLX.jpg
Generally, looks alright. However, the massive space in between the two elements on the sides are awful and create an enviroment of poor contrast and spacing in my opinion.
Here is how it looks on a small screen:
http://i.stack.imgur.com/y0HFI.jpg
Also generally looks alright. Accept for the missing scroll bar that should be to the right. The picture taken from the smaller computer is how I'd like the site to look on all computers, though I need a scroll bar for it.
Here is the code for that page:
<HTML>
<HEAD>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<link rel="stylesheet" type="text/css" href="css.css">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</body>
<title>HLT - Home</title>
</HTML>
<html>
<head>
<title>HLT - Home</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--All of your content in here-->
</body>
</html>
I would appreciate if you put the stylesheet too, also, don't copy and paste your whole document. Just the parts you are having trouble with
I would recommend a few HTML and CSS tutorials. You have the wrong idea. a body element is where ALL the content goes besides imports and stuff. The head element is where imports and titles and stuff go, NOT CONTENT YOU WANT TO DISPLAY.
And lastly, I'm confused on why you're even using a stylesheet. It seems you're using all these old methods for styling in HTML. Such as: center and font and you're apply most of your styles directly into the element.
To center it like you want on your smaller picture. I would add a max-width: 1280px; to your styles, or make a container DIV with a specified width around all of your content in your body section.
Hope this helped
Try creating a wrapper and putting your div's in the BODY like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>HLT - Home</title>
</head>
<body>
<h1><font color="#000000" size="+1"><marquee direction="right" bgcolor="green" scrollamount="3">Website BETA: Version 1.0</marquee></font></h1>
<div id="wrapper">
<div class="fadeIn">
<center>
<div style="display: inline-block;" id="red">
<h1>Hinte's </h1>
</div>
<div style="display: inline-block;" id="white">
<h1>Liberty </h1>
</div>
<div style="display: inline-block;" id="blue">
<h1>Theatre</h1>
</div>
</center>
</div>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='art.html'><span>Art</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li class='last'><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>
<link rel="shortcut icon" href="favicon.ico">
</HEAD>
<br>
<br>
<br>
<body background="grayscale.jpg">
<div style="position:fixed;top:20em;left0em;right:4em;" id="text60">
<p>Gary Edward Hinte</p>
</div>
<div style="position:fixed;top:26em;left0em;right:7em;" id="text30">
<p>American Political Artist</p>
</div>
<div style="position:fixed;top:22em;left:1em;right:40em;">
<img class="grayBox" style="border: 0px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;" width="600px" height="500px" src="JulianA.jpg">
</div>
</div> <!--closing wrapper-->
</body>
</html>
And add this to your css file
#wrapper {
width:1200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Im sorry but your website is setup all wrong. try this.
<html>
<title>Page Name</title>
<meta tags />
<styles that you need to link to />
<body>
anything you want people to see goes here!!!
<scripts go here />
</body>
</html>
Also it is impossible to help you with out your css and for your elements to be properly displayed they must be put like I showed you.
If you want your site to look the same or somewhat the same you need to use %%%% to style your elements so they are responsive to the window size.
To align your elements look into useing: position, margin, padding, left right top and bottom.

Can't see logo in Google Chrome but can in IE and Firefox

Title explains all, I can't see what the issue is personally, I suspected may an issue with the CSS but it looks just fine in IE and Firefox, I don't see why chrome is struggling?
I have tried adding
#logo img
{
width: 50%;
float:left;
}
To try to directly style the image, still no luck
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>
<body>
<div id="header">
<div id ="logo">
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
</div>
<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p>M015734a#student.staffs.ac.uk</p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
<nav>
<div id ="NavBG">
safsafnsakn
</div>
</nav>
</body>
</html>
#logo
{
width: 50%;
float:left;
}
#logo img
{
width: 50%;
float:left;
}
There seems to be a workaround to this issue. You can try to use <object> instead of <img>
<object height="100%" width="100%" data="Media/Images/logo.svg" type="image/svg+xml">
</object>
Please also refer to the following links for more details.
http://e.metaclarity.org/52/cross-browser-svg-issues/
http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers
You can't just append CSS to the end of the file. It has to either be inline, included as an external file, or placed inside style tags in the head.
Try moving the CSS into the head, like so:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
<style>
#logo
{
width: 50%;
float:left;
}
#logo img
{
width: 50%;
float:left;
}
</style>
</head>
If you cannot solve the issue of the logo not appearing in Chrome, please recreate your file in JSFiddle, complete with images and your external css.css file, and post a link here.
Please Use different type of image. Check The link
http://code.google.com/p/chromium/issues/detail?id=119693
Your issue is probably in the img tag:
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
You can't specify units using the "height" or "width" attributes - I would just remove them entirely and style the image using CSS.
Change your code from link rel="icon" type="image/x-icon" href="/favicon.ico"
to
link rel="icon" type="image/x-icon" href="/favicon.png"
Also rename image to .png. As Chrome doesn't pick the ico icons for sometimes.
It works for me.