In the following code snippet:
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
the named anchor (<a name="top"></a>) introduces a line break before the topbar div. Is there a way to prevent this? For a variety of reasons it is essential that the named anchor be located above the div containing the banner image.
I have tried using CSS to set the height of the anchor to 0px and display to none, but this renders he anchor non-functional (i.e. linking to #top from elsewhere in the page no longer works).
Is there a workaround for this?
Actually, using an anchor to link to a certain part on the page is obsolete. You can use the global id attribute instead. That also fixes your problem as you don't have to add extra dom elements:
<div class="topbar" id="top">...</div>
Somewhere else:
Go to top
Easy does it!
Make the div <div class="topbar"> inline,
.topbar{
display:inline-block;
}
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
Related
Can i put logo nested with anchor inside the <figure> ? Is it right?
Here is the code
<header>
<div class="row">
<figure class="col-sm-5"> <img src="images/logo.gif" class="img-responsive" height="60" width="330" alt="site-logo"> </figure>
<div class="col-sm-7">
<div class="well">
<div class="row">
<div class="col-xs-9"><nav></nav></div>
<figure class="col-xs-3"> <img src="images/helpline.gif" class="img-responsive" height="60" width="120" alt="helpline-image"> </figure>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
Yes you can.
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
Reference : MDN
I know this is old, but please do not place your logo in an <h2>; it is not the place for it and can mess up your accessibility, your dom heading structure, and your SEO performance. Doing something because you can, does not make it the right solution below are some links about how to use heading tags. If you want it to look like an <h2>, then style it in your CSS.
W3 Schools
MDN
SEO and Headers Article
For better SEO, put your logo inside H2 tag.
<h2>
<a href="#">
<img src="logo.gif" alt="stackoverflow-logo"/>
</a>
</h2>
Give proper name for alternate text tag alt, instead of site logo, give your companyname-logo
I had a front image on the page, inserted like this:
<h1>
<a href...>
<img .../>
</a>
</h1>
Now I want to add another image link, to overlay first one (it is smaller image so it would be Ok):
<h1>
<a href...>
<img .../>
</a>
<a href... style="position:relative;top:-150px;">
<img ... style="height:150px"/>
</a>
</h1>
It does what I want, but the height of the parent H1 is still enlarged by these 150px leaving silly empty space.
I made height of H1 predefined constant to solve this, however I'm interested in more proper / elegant solution.
First I need to mention if you are using inline styles remove it and add an external style sheet.
Below I am giving the answer with inline styles just because you have used them too in your question .Try the following:
<h1 style="position:relative;">
<a href...>
<img .../>
</a>
<a href... style="position:absolute;top:0;">
<img ... style="height:150px"/>
</a>
</h1>
I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;
I have a logo on my site. Just about the first thing there is. But it's pretty far down. I wanted to know how I can move it down. The website currently looks like this: http://i.gyazo.com/29b9116903051e82640f63b7a1a14464.png
As you can see the logo is pretty far down and not near the top. The current code I have for the header (which has logo in it) is this:
<div id="header">
<img src="images/Logo.png" alt="" height="150" style="left: 0px; top: 0px" width="150" />
<h1>Hey there! I'm Mario!</h1>
<p> <h2> AKA IridiumKills </h2> </p>
<p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
<br />
Now that you know a bit about me,why don't you scroll down to see some more?</p>
<p> <span class="logo fa fa-arrow-down"> </span> </p>
</div>
This seemed to fix my problem:
<!-- Header -->
<div id="header">
<img src="images/Logo.png" alt="" height="225" style="position:absolute;left:565px; top:40px;" width="225" />
<h1>Hey there! I'm Mario!</h1>
<p> <h2> AKA IridiumKills </h2> </p>
<p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
<br />
Now that you know a bit about me,why don't you scroll down to see some more?</p>
<p> <span class="logo fa fa-arrow-down"> </span> </p>
</div>
Strictly speaking, this is more of a css problem, not just an HTML problem.
Your inline css (the style= stuff) is not working because you must add this:
style="position:absolute;left:0px; top:0px;"
You might want to experiment with:
position:absolute;
vs
position:relative;
Important: As noted by Chris Coyer in the below referenced article, absolute positioning only works if your element is inside a div (any element) where the positioning has been set to position:relative; (or absolute or fixed -- it only cannot be the default position setting, which is position:static) So, add this:
<div id="header" style="position:relative;">
See the below reference for more info.
Sources:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Use css to make
position:relative,
top: -10px;
Play with the top value till your needs are met
Inline it like this
style="position:relative; top:-10px;"
Add this property to the css of your image:
style: "position:relative;"
And modify the "top" property of your image to the location you need:
top:-10px; //for example
I have the following HTML template :
<div class='item'>
<img href='...' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
I use Jquery to on mouse over of the div (and thus the image), and show the popup. The problem is, I can't seem to control+click to open in a new tab in chrome nor firefox; neither can I right click the image and open the link in a new tab. How can I do this?
Add target="_blank" to the link. It should look something like this:
<div class='item'>
<img src='....' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
The link that you want the image to open goes in a href='LINK' and the file path to the image goes in img src='PATH'
Check this example
Here's the code markup with an example of an image (ctrl+click on it and it will take you to google.com):
<div class="item">
<a href="http://www.google.com">
<img src="https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" attributes="#"\>
</a>
<div class="popup" attributes="#">
</div>
</div>
You just needed to wrap your <img> tag with an <a> tag.
Hope it helps!
Surround your image with <a> tags and link to a new page which has the image on it.
All you need is
<div class='item' >
<a href='...' attributes='...' target="_parent">
<img src="yoursource.jpg"/></a>
<div class='popup' attributes='...'>
</div>
</div>
Add target="_parent" or you could use _blank to your href (and remove the img for now), then close the href with > and make and new img field. wrap your href and img with Should work now