First off - this is my first question ever (I'm still a beginner) and I can't say how much I appreciate this site and all the help I've found on here. Hopefully every question I ask can help someone else too :)
I realize not many people use imagemaps any more but I have one and twitter bootstrap (version 3.0.0) is screwing up my coordinates - putting the links in the wrong places. I can make it work with the following code but then it wont resize to fit the screen. Any tips?
<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
max-width:none;
width:auto;
display: inline;
}
</style>
Here is a snippet of the actual imagemap code
<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
<Map id="map_ID" name="map">
<AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
<AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
<AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
I'd recommend, rather than an image map, make 3 divs that are links with the following HTML and accompanying CSS.
<div id="box_a">
<a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
<a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
<a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>
Use percentages to define the coordinates. Given that your X1 and X2 coordinates are the same for the links in your image map, the following example (with different %s to actually cover your image correctly) should work.
#box_a, #box_b, #box_c {
margin-left: 10%;
margin-top: 5%;
height: 15%;
width: 25%;
}
.box_link {
display: block;
height: 100%;
width: 100%;
}
You should check out this page to learn more about making div links. I would also suggest using NewMatGuide.png as a background-image and define the size of #img_ID.
Related
I'm trying to design an informational and instructional welcome modal box with 3 "pages" using custombox.js
The modal appears in the middle of the screen, I then need to display content in the middle of the modal, with a previous button to the left, next to the right and a footer showing progress.
I did this successfully using CSS grid layout, but many of the users do not have browsers that support this. I can't figure out how to make this using plain CSS...
Here's my html
<div id="modal">
<div id="leftNnav">
<i id="leftNnavImage" class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div id="modalContent1" class="modalContent activeModalContent">
<img id="modalContentMedia" src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"/>
content text goes here, lots and lots and lots and lots and lots and lots more
</div>
<div id="modalContent2" class="modalContent">
Content2 = YT Video
</div>
<div id="modalContent3" class="modalContent">
Content3 = text
</div>
<div id="rightNnav">
<i id="rightNnavImage" class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
<div id="modalFooter">
<svg height="40" width="40">
<circle id="circle1" class="circle activeCircle" cx="20" cy="20" r="10"></circle>
</svg>
<svg height="40" width="40">
<circle id="circle2" class="circle" cx="20" cy="20" r="10"></circle>
</svg>
<svg height="40" width="40">
<circle id="circle3" class="circle" cx="20" cy="20" r="10"></circle>
</svg>
</div>
</div>
https://jsfiddle.net/oppt6v9j/15/
But this way just ends up really messy, the text overflows and it just doesn't feel like the correct way to do things, I feel like I'm missing something really obvious. I know I can resize the image using media queries, so that's fine, but I'm not sure how to manage the text.
Any help with how I can design this modal in CSS is very much appreciated!
If your problem with aligning the components, I would suggest the following
.right { float: right; }
.left { float: left; }
.modal { display: flex; }
.modalContent { margin: auto; }
I believe using ID's as CSS selectors is bad practice.
Hope it helps.
Right, this is a tough one since I don't know the exact dimensions of the box (and you use alot of position: absolutes).
I'd imagine it varies with screen size but your image has a height/width set (300px by 150px) so I focused on that size instead.
Note This is not an "end all be all" answer, it won't solve every usecase under the sun, rather it answers the original question:
But this way just ends up really messy, the text overflows and it just
doesn't feel like the correct way to do things, I feel like I'm
missing something really obvious.
It does this by providing a way of thought rather than a clear answer.
The solution
You're using a lot of absolute positions, this means you have to work with alot of magic numbers. Try converting them to relative positions instead.
The text is really easy, you should wrap it in a <p> tag like so:
<p>
Content text goes here, lots and lots and lots and lots and lots and lots more
</p>
And style it appropriately (box padding / corners etc):
p {
color: #001818;
padding-right: 40px;
}
The same holds true for the image:
#modalContentMedia{
width: 300px;
height: 150px;
margin-left: 15px;
}
And I'm not sure where you'd want the arrows positioned (they are in the center of the box right now) but I can imagine you'd want them in the center of the image. To do so use:
#leftNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-left: 10px;
left: 5px;
top: calc(50% - 40px);
}
#rightNnav{
position: absolute;
cursor: pointer;
z-index: 20;
padding-right: 10px;
right: 5px;
top: calc(50% - 40px);
}
This makes the entire thing look much neater:
By illustrating how I would start solving this issue I've demonstrated fixing the 3 major things (text, image position not centered, arrows) and trust you'll be able to learn and fix the rest of the issues yourself.
The following image demonstrates what I'm trying to accomplish.
The A) it's on webbrowser of computer, which displays cool. The B) it's on mobile devices or small screens. I would like to make the images appear on mobile devices like the A).
I'm attempting this on Wordpress in the header.php. I've been searching and I've got this:
<a href="http://url">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: 100%; height: auto;"/></a>
<a href="url" target="_blank">
<img src="http://urlIMAGE" width="100px" height="95px" style="max-width: auto; height: auto;"/></a>
But it's not working.
a img{width:100%; float:left;}
You could use some thing like:
float: left;
or
float: right;
inside your style attribute. See if that works.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}
I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
HTML5 permits surrounding the html in an anchor tag (I think). See below
<a href="goThere.html">
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
</a>
However, this seems wrong to me. How will software such as screen readers describe the link.
I also considered the following CSS trick. I altered the HTML to be
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
and then used CSS to style the link to cover the whole of the div. See below:
#clickableLink {
position: relative;
width: 100px;
height: 200px;
z-index: 0;
}
h3 {
z-index: 0;
}
img {
z-index: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
z-index: 1;
}
This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?
Your first approach is actually the best. To describe your link, you should use the a element's attributes such as title, alt and possibly any WAI-ARIA markup you wanted to employ. This is good industry practice anyway and allows you to wrap content in an a tag without worrying about accessibility.
The thing that will allow older browsers to render it properly (and to make sure it validates) is to use inherently inline elements inside an inline element. In other words, block level elements can not be placed inside inline ones (according to the HTML, not the values that CSS may give the element). You can then use CSS to make a span act like it is block level. So the markup could easily be:
<a href="goThere.html">
<span id="clickableLink">
<span class="headerthree">Link Heading</span>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</span>
</a>
If you declare that the A is block level, then you wouldn't even need the span. Problem here is that you lose the SEO of using Header elements. So...
The best thing is probably to leave it specced for HTML5 as you have it above, even though it seems wrong. To help SEO and screen readers, use a title tag to "describe" the anchor. The code will validate just fine. Then, make sure your A is display: block, and I think older browsers will render it ok, too.