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>
Related
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
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>
I have a logo in the header of my website and I want the logo to direct you to the home page when it is clicked. In the code, the anchor is just surrounding the <img> tag, but on the website the entire div is clickable. How can I make it so that just when I hover on the image it is clickable, not the entire div.
<div class="row">
<div class="col-sm-12">
<a href="#Url.Action("index", "home")">
<img class="img-responsive" src="~/Content/img/stars.jpg" alt="Stars" />
</a>
</div>
</div>
I just found the answer. I needed to add the style display: inline-block to the <img> tag.
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 am using bootstrap v2.3.1, and I am trying to understand how to fix one of my images.
In the example image link below, the top image is what I want all the images to look like when the screen is resized to it's smallest size (cellphone size), and the bottom image is what's giving me an issue:
http://i.imgur.com/BH02ONQ.jpg
For some reason it has more space on the sides of the 2nd image than it should have.
(NOTE: My screenshot is altered to show both the correct image and the wrong image. The code below is what I am actually using)
My code is this:
<section>
<ul class="thumbnails">
<li>
<a class="thumbnail" rel="group" href="images/r1.jpg">
<img src="images/thumbnails/r1s.jpg" alt="" />
</a>
</li>
<li>
<a class="thumbnail" rel="group" href="images/r2.jpg">
<img src="images/thumbnails/r2s.jpg" alt="" />
</a>
</li>
</ul>
</section>
So I don't know if it's an issue with one of the settings in the CSS file, but since I am using the .thumbnail class, I'm guessing it has to do with that?
Does anyone know how to make it so that I don't get all that extra space around my images when using the .thumbnail class?
My solution is set the CSS to the <ul class="thumbnails"> with style="max-width: 100px" where 100px is smallest width size of image in list.