I am not very good at html and this may seem like an easy thing to do, but I need to add a scroll bar to a box of information.
The coding for the box looks like this:
<div id="box">
<div class="title">Doctor Who</a>
</div>
<div class="links">
<div class="text-container">
<IMG SRC="https://31.media.tumblr.com/dea38d2e07dc5ef0a30adbc213f4eda0/tumblr_inline_mxq54ba4yx1qhpvm6.gif" WIDTH=100 HEIGHT=100>
<br>
<br>
<IMG SRC="https://31.media.tumblr.com/f5d7e9e7d802697bb948811a79d0c0ba/tumblr_inline_mxq627yuKg1qhpvm6.gif" WIDTH=100 HEIGHT=100>
</div>
</div>
</div>
and on the website page it looks like icons in a box and there are multiple boxes on the page each including many different icons. The problem is, the icons take up too much room in the boxes so I wanted to add a scrollbar to each box so that all the icons and boxes will fit nicely on the screen.
Any help is appreciated and because I am a noob please don't make it to complicated for me. Thanks for any and all help.
You need to set address the overflow of your element
#box{
width:XXpx;
height:XXpx;
overflow:scroll;
}
That will place a scroll bar in your box
Related
I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.
I'm building a feature that has three circles inside of container that are next each other. Initially when I began building this feature I thought that I could just drop my circles into a flex container and they would all be good when I added media quires and resized the page.
Much to my despise that was not the case..The circles went inside of the container perfectly but when I started to resize page I noticed that they were squishing! I know this because border-radius:50% as circles need to be a percentage and when they are pressed they change there size bc they are fluid.
This issue prompted me to think of solution to prevent the circles from squishing. I had an idea of surrounding divs around the circles which would possibly stop them squishing so looked around to see if anyone had done this before.
Much to my liking I found a solution that someone had posted on STO. I modified the solution slightly to meet my own needs which works fine but there's a small issue here, I'm not sure I like the way it makes my markup look. Messy messy messy!
Solution
<!-- Projects -->
<div class="circles">
<div>
<div>
<div>
<div class="projects">
Projects
</div>
</div>
</div>
</div>
<!-- About -->
<div>
<div>
<div>
<div class="about">
About
</div>
</div>
</div>
</div>
<!-- Contact -->
<div>
<div>
<div>
<div class="contact">
Contact
</div>
</div>
</div>
</div>
Compared to my original markup there is a clear difference in the less amount of divs
Original
<div class="gridRow">
<div class="gridItem1">
Projects
</div>
<div class="gridItem2">
About
</div>
<div class="gridItem3">
Contact
</div>
</div>
I'm want to figure a way to clean up the solution markup a little more but I'm not really sure if there's a way to do that..I don't want to use svg as I just want a css solution. Any ideas?
Fiddles here
Squishing circles
https://jsfiddle.net/kapena/vmt54cd0/
Responsive Circles
https://jsfiddle.net/kapena/vmt54cd0/
Try adding these to the gridItem styles:
min-width:200px;
width:200px;
max-width:200px;
min-height:200px;
height:200px;
max-height:200px;
A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/
I want to achieve the following effect using HTML & CSS:
Printscreen
However, I'm not sure if I'm doing it correctly.
The current state is the following:
<div class="post"><!-- Posts are just divs with a white background -->
<div class="post-header">
<div class="left">Som Text</div>
<div class="center">
<img src="pseudo" class="center" />
</div>
<div class="right">Som Text</div>
</div>
<p class="title">Som Text</p>
</div>
Then, I'm simply doing a margin-top:-66px; on div.post div.post-header.
This is probably not what one should do.
Can you give me an idea on how to approach this?
You Can Try Position-relative thing also, for this make post class position:relative and other class as position:absolute and set them where u want
a print screen or just a margin-top property won't do any good, since the screenshot is not displayed here too.
can u give me the link to see the live preview of the page
I did something similar on my site. Feel free to visit http://robertfauver.com/
This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.
It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}
I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.
From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.
i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.