I created an imagemap inside a div, but the div doesn't fit the image. Considering the div is inside a template I can't edit, how do I fix this so the image fits inside the div and not outside it?
Raja dance links
add
overflow:auto;
to #templatemo_welcome_area for the div to "overflow" the image.
Looks good in chrome and FFox now for me.
Supposing you are talking about #templatemo_welcome_area, you could start by adding display:inline-block to it.
Since your image is floating, it's normal that your div doesn't fit.
If you want to keep your float:right, you should add this to your CSS :
#templatemo_welcome_area:after {
content: '';
clear:both;
}
Related
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I have problem with the CSS. I'm changing dynamically one div's content. The problem is, it protrudes outside the main frame, as below:
This's the result I expect. How to achieve that ?
Edit
jsFiddle's code
Give maxwidth to your div:
div
{
max-width: 100px;//The width of your div
}
use word-wrap:break-word for the container element
I have a DIV on my page. Within the DIV I have other DIVs which I customize to look like buttons. Here's an example:
fiddle
Because I have so many buttons I need to have some means of scrolling so that the user can scroll down to the correct button (DIV). In the fiddle this is done using an iframe but I think I read that this can give problems with search engine optimization.
Is there some way that I can add a scroll bar to my DIV? I have never seen this done but I hope someone has some ideas.
Thanks,
You could do something like this:
Add
padding-right:30px; overflow:auto; height:500px;
to the main div
http://jsfiddle.net/jasongennaro/AQ7Ev/7/
You will need to set a height to make it work.
Also, you will need padding so the scroll bar does not overlap the content.
If you're willing to use some JQuery, JScroll Pane plugin is exactly what you're looking for
set the height for the containing div + overflow:auto or : scroll
<div style="width: 200px; height:240px;overflow:auto">
<div class = "abc" >.....
You need to set a height on the div and add overflow:auto;. I forked your fiddle, here's the code: http://jsfiddle.net/vxTqT/.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.
When I try to move the div #planet up (I change margin-top from -76px to -86px) my whole site "lifts up".
You can view the page here (and see the problem) http://rssreaderbg.net/pubsubbub/example/cssexam/index.php
It's because a div is a block element, so it stretches from one end to the other. So when you change the top of that particular div, you're changing the tops of all the following divs.
See the trick (an oldie but a goodie) at the bottom of this page http://css-tricks.com/the-css-box-model/ (as a for instance) to see how this works and to find out how to duplicate it for yourself.
try to add height parameter to "icons" div... when you change that margin now, size of parent div(icons) is affected and whole site moves up because that div changed height
just apply padding-top:10px; for the #container
Remove all margin of the class .iconss
Use position:absolute on #icons and set the position:relative in the class .iconss
Now, use top and left css property to set the icon position.
Cleber.
id=icons are above the id=nav. When you edit the top margin of an element in id=icons it effect id=icons. When id=icons goes up the others goes up too. I suggest you to use position css for icons and nav too.