Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've cut a big image into pieces that are more manageable and put them together so the big image is shown again. I've done this since I wanted each of the individual pieces to have a different hyper-link. Now I'm seeing that when I resize the images the display is broken into pieces. I've used a in order to put them all together but unfortunately this does not solves the problem. How can I resize the images dynamically without breaking the whole thing into pieces.
Ps: Is there any option to make the pieces act as one large image using div
You can just use the CSS mapping on an image, instead of cutting the image to pieces ?
http://www.w3schools.com/tags/tag_map.asp
http://www.neopets.com/~Kacizilla
Update:
For Responsive image maps there are a couple of options - JS / SVG and it still is possible with pure CSS:
JQuery Plugin - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
JavaScript: http://www.andensolutions.com/blog/responsiveImagePaths
SVG: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
Pure CSS: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Update 2:
Pure CSS method:
Its not really a map, but it follows nearly the same logic:
You have an image within a Relative positioned container:
<div class="imageMap">
<img src="yourimage.png" style="position: relative;">
</div>
Your links are actually Absolutely positioned tags, that have: top,left (or any other combination) + width, and height. Just make sure you use percentages, so it can stay responsive.
.yourLink {
position: absolute;
left: 11%;
top: 5%;
width: 25%;
height: 34%;
}
and there is also a JS based image map editor: http://www.maschek.hu/imagemap/index
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I designed a web page where few of the HTML elements aren't responsive. These elements are dynamically generated with jQuery and I believe, there should be a way I can make them to look responsive. Media Queries are an option but if it's possible to use BootStrap (Though I am using it but in few cases, unable to do the designs perfect) or custom CSS to force them to be responsive. Here is a scenario where HTML element is created on successful Ajax call:
//Dynamic checkboxes as Flag For Review
$('.cbFlag').each(function () {
$(this).hide().after('<div class="class_checkbox"></div>');
});
$('.class_checkbox').on('click', function () {
$(this).toggle lass('checked').prev().prop('checked', $(this).is('.checked'))
});
Somehow I tried to make it fixed but failed:
.class_checkbox {
width: 20px;
height: 18px;
position: fixed;
margin-top: -5%;
margin-left: 82%;
background: url(https://i.ibb.co/1GnSqmp/example.png);
}
.class_checkbox.checked {
width: 20px;
height: 18px;
background: url(https://i.ibb.co/jWxbHF5/example-02.png);
}
In the same way, the page with other elements are bit shattered like the number and details sharing screenshots below: In Image 2, two divs are created and tried to use float left/right positioning, but this doesn't make them aligned accordingly (These are screenshots of screen resolution - 1920 * 1080, but in few cases when the resolution is small, the designs are perfect. Again for mobile view, the number and flag are shattered)
Current View:
Image 1:
Image 2:
Expected View:
I've checked website, and you've overwrited Bootstrap, that's a worse solution for this. You should keep original Bootstrap, then make changes in another CSS file or inline style.
On the other hand, you have given margin-top: -4% to .headerSection1. That makes the part of text invisible.
Your page is not responsive. It extends the page's 100% width. This is because of giving negative values to containers.
I strongly recommend you to use Bootstrap's container-fluid, row and cols.
On about your question: Your 1 and 10 are in different div's. You can put them in same div and position that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
The Situation
On my website I have a page for people to listen to my music. The page has a grid element with 3 rows: #music-header, #playlist, and #player. The music-header (header) and player (footer) are 60px tall and the content height is determined dynamically with a 1fr value.
The Problem
When the playlist is loaded with songs, it overflows the page. I have overflow-y: scroll set on #playlist, but that has yielded no results.
The Code
I tried for a good 10 minutes to get the HTML snippet to process my website's code to no avail, so instead I'll provide a link to the broken page:
http://hbms.me/#/music
You'll note the list of songs overflows the page. That list is meant to be contained within the #content box.
NOTE: I am currently using Firefox to view the page.
In style.css line 31 check and apply this css, this will fix your problem.
#playlist {
overflow-y: scroll;
height: 544px;
}
Overflow property only will work when you set max-height. So you need to set height for playlist container either using media query or Js. Else, you have to restructure your code to bring the expected view.
A non-ideal solution would be to use javascript:
setInterval(() => {
// get height of #content
// subtract by 120 (the header and footer are both 60px)
// set #playlist height to resulting value
});
But alas, that is extremely inefficient.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?
Ella, your question is very vague. I would suggest as #paulsm4 suggested you study up on html, css and javascript.
Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.
Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.
I am going to assume we can use the flex layout so let's use a flexbox.
The css would look something like this.
.book {
display: flex;
}
.page {
flex: 1;
padding: 10px; //just because
border: solid; //so you can see the page
}
The html would be:
<div class="book">
<div id="page1" class="page"></div>
<div id="page1" class="page"></div>
</div>
You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.
The javascript would be something like this,
var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;
Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.
Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.
Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.
I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is the link to the page in question:
http://ollapodridawhatuneeda.com/video_viewer2.html
I want space above the video viewer screen, but so far adding margin or padding to the various containers has only resulted in pushing the entire content div down. I want to keep it blue above the video viewer, not white. thus far I have only accomplished pushing the container down while leaving a white band above it, which is not the effect I want.
Any ideas?
Barry Glick
One way to achieve your task is you can add:
padding-top: 100px;
for the <div id="content">, so your new CSS would look like:
#content {
width: 960px;
height: 1000px;
background: #9CC;
margin: 0 auto;
padding-top: 100px;
}
This will push the video container down.
There are two possible methods, depending where you want the distance (just try it):
1.) Add margin: 100px; (or whatever value) to #videoContainer (will add above the light-blue area)
2.) Or add padding-top: 100px; to #content (will add inside the light-blue area)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am developing a website where I have a top menu and a background image with some text on the home page. This covers the whole screen. BUT at the bottom of the screen there have to be 3 blocks who show up at the bottom of any screen or device. I am able to to this for Chrome but for Firefox for example the blocks are way far down at IE the same... What I want:
I am currently doing applying following code on the div containing the 3 blocks:
position: relative;
top: -150px;
But as mentioned above in another browser this div shows up to low so the user won't see it until he scrolls...
Any solutions here?
Simple change:
position: fixed;
bottom: 0;
Better idea to wrap it inside another <div class="bottom-stuff"> and give the rules to .bottom-stuff.