I use bootstrap 3.3.6, ui-bootstrap 1.2.2 and I try to use collapse.
The header has to be an image. This is my code
<div id="isOpen" >
<img data-toggle="collapse" data-target="#readThis" src="./images/hello.jpg" />
<div id="readThis" > Get more info</div>
</div>
The readThis div appears opened and when I click the image to close it, it starts to close, and then re-opens.
After that works fine.
How do I fix this? Is there another bootstarp module that will work with images? I try to fix this all day, please help.
Thanks
try by putting data-toggle="collapse" data-target="#readThis" on <a> tag and put image inside it
<a href="#readThis" data-toggle="collapse">
<img src="./images/hello.jpg" />
</a>
Related
Fairly new to coding html and css and want to make sure I'm keeping my code clean and closing tags correctly.
I'm working with an html template and trying to correctly create links from my buttons.
The way I've wrapped them in Brackets is working properly on the page and the links are working correctly, but Brackets is showing some red tags meaning I've not wrapped something properly.
Could someone show me where I'm doing this incorrectly, as I'd like to follow good code form moving forwards.
Thanks so much.
Current code for the button below:
<span class="button--inner">Contact Us</span></button>
You need to close your link tag:
<a href="contact_us.html">
<button class="button button-blue button-bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
BUT I wouldn't wrap a button with a link and instead style the link as a button.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
Contact Us
Also look at this answer as Our_Benefactors stated in the comments: How to create an HTML button that acts like a link?
You are missing a > bracket for the HREF.
<a href="contact_us.html"> <!-- THIS ONE HERE -->
<button class="button -blue -bordered">
<span class="button--inner">
Contact Us
</span>
</button>
</a>
There is a small mistake actually.
You forget > for <a> tag.
Try this.
<a href="contact_us.html">
<button class="button -blue -bordered">
<span class="button--inner">Contact Us</span>
</button>
</a>
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
I have a problem with this code:
<div class="box_c rounded">
<a class="box_int rounded" href="http://www.google.com">
<div class="careers">
<span class="ico_boton">
<img src="img/spacer.gif" width="28" alt="Spacer"/>
</span>
<h5>Text</h5>
<p>Text</p>
</div>
</a>
</div>
In IE9, Firefox and Chrome all the area is clickable, but in IE8 the img area appears as clickable and the url appears too, but the hyperlink don't do nothing. What Can I do? I tried with z-index but it don't do nothing.
Thanks for your help.
Have you tried validating your code in IE8's Developer Tools? If you're unfamiliar with the process, have a look at this quick tutorial on how to do it.
Also, are you using z-index in your CSS code by any chance? If so, have a look at this other question on StackOverflow and also this detailed article regarding this issue - they both refer to IE8 having a bug when handling z-index.
Guys I am about to get a massive headache here. First of all, I am working on a website and everything seems to be runng. So, I had difficulties with making them links etc. so I tried to add the addthis.com plugin which would do all of that automatically. But, when I add that everything seemed to crash so I have made a quick jsFiddle to show you what I want. Here: http://jsfiddle.net/cSP9Q/1/ the problem is that I want to change those icons to mine which you can see on the first link and I just can't seem to change the spacings in between the icons. Furthermore, is there anyway of deleting the bubble with the counter because that just looks ridiculous.
HTML
<div id="social"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_2"><img src="your_image_url" /></a>
<a class="addthis_button_preferred_4"><img src="your_image_url" /></a>
<a class="addthis_button_google_plusone"><img src="your_image_url" /></a>
<a class="addthis_button_compact"><img src="your_image_url" /></a>
</div>
<!--javascript goes here-->
</div>
Example and Reference.
NOTE: your link http://www.aasingercom.ipage.com/php/ doesn't work, anyway.
I need to move all bookmarks inside the html page bit down. Is that doable?
something like that
<div class="anchordown" style="position:relative; top:-80px;">
<a name="learn">Learn bookmark</a>
</div>
but it doesn't work for me. The actual bookmark doesn't move at all
EDIT
I want to have the inside bookmark #learn to be displayed bit down not at the top of the page if I click so http://address/page.html#learn
Here is another alternative
<div class="anchordown">
<a name="learn" style="padding-top:80px;" >Learn bookmark</a>
</div>
You could try a margin or padding, like this:
<div class="anchordown" style="margin-top:80px;">
<a name="learn">Learn bookmark</a>
</div>