I'm trying to create a div that shows a scrollbar only when the elements don't fit within the default area.
<div style="overflow-y: auto; height: 36px;">
<img src="." width="36" height="36" />
</div>
Unfortunately there is some padding on the bottom of the div, so the scrollbar is always shown even though in theory the img and the div should be the same height. I'm able to reproduce in Firefox and Chrome, so it doesn't seem like a browser bug.
Why is this happening?
Try to add font-size: 0; to parent div:
<div style="overflow-y: auto; height: 36px; font-size: 0;">
<img src="." width="36" height="36" />
</div>
Try to get rid of padding in a parent div, or the page all together.
<html>
<body style="margin: 0; padding: 0;">
<div style="overflow-y: auto; height: 36px; margin: 0; padding: 0;">
<img src="." width="36" height="36" style="margin: 0; padding: 0;"/>
</div>
</body>
</html>
You just need to set float on <img>
<div style="overflow-y: auto; height: 36px;">
<img src="." width="36" height="36" style="float:left"/>
</div>
Related
I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
I have this code:
<div align="center"><img src="http://via.placeholder.com/350x44" width="100%" height="44">
<div align="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
<div align="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
</div>
</div>
</div>
Which looks like:
But in my achievement I like it to look like this image:
Please can any one give me simple css code for this?
First of all The align attribute is not supported in HTML5. Use CSS instead.
You can use position:absolute to right align your images. Just remember to set position:relative to your parent element.
Stack Snippet
.main {
position: relative;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.right img {
display: block;
border: 1px solid red;
}
<div class="main">
<img src="http://via.placeholder.com/350x44" width="100%" height="44">
<div class="right">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
<img src="http://via.placeholder.com/20x22" width="22" height="20">
</div>
</div>
I'm trying to center my image inside the div, but its seemingly glued to the right.
Here are my divs:
<div align="left" style="display:inline-block;">
<div style="width:210px;">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
This is what it looks like:
How can I fix this?
img tags are inline by default so all you have to do is call text-align: center on its parent:
<div style="display:inline-block;">
<div style="width:210px;text-align: center;">
<img src="res/img/TopAd.png" style="padding:10px 0;">
</div>
</div>
A few other notes:
You can remove align="left", that's not supported in HTML5.
You can also remove top: -100px because the top, left, right, and bottom properties don't work unless an element is set to fixed, absolute or relative.
This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.
UPDATE
if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:
<div style="width:210px;text-align: center; margin: auto;">
<img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>
FIDDLE
<div align="left" style="display:inline-block;">
<div style="width:210px; vertical-align:middle; text-align:center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
The following code will do the task.
<div align="left" style="display:inline-block;">
<div style="width:210px;" align="center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
<div align="left"
The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left".
padding:10 0 10 0;
10 of what? You are missing the units. You probably want 10px for pixels:
padding:10px 0 10px 0;
I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.
<div style="display:inline-block;">
<div style="width:210px; text-align: center; border: 1px solid #ccc;">
<img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
</div>
</div>
I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.
HTML:
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>
Make the #wrappers position be relative or absolute.
Then set the inner div positions to be absolute.
jsfiddle example: http://jsfiddle.net/kRHTj/
I would float them both left or right.
I'll preface this question by stating I have historically used tables for my HTML formatting and am fairly good at getting it to look the way I'd like... I am aware that tables are meant for "tabular data" and not formatting. I always get a bit frustrated when I try to do it the "right way", so today I am seeking some help.
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
<a href="a.html" style="margin: auto 0px auto 0px">
<img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right;">
B Link
</div>
</div>
As you can see from my attempts above, I'd like for the image link and the 2 text links to all line up along the same horizontal line (i.e. text links at the center of the image). Depending on how wide the parent div is I'd like the A img/link and B link a reasonable distance from one another. I'd also like for the divs with the "float: left" and "float: right" styles to not extend south beyond the border of the parent div (for some reason it is doing that to me in firefox with the above code).
Please help set me straight? Am I the only one who finds "the right way" of formatting things to be a big pain in the rear? I'm hoping I'm missing something big that if corrected will get me going down the right path.
===============
Update, thanks for the comments, I went to jsfiddle and fiddled a table-based solution:
<table style="width: 90%; margin: 0px auto 0px auto;">
<tr>
<td style="width: 50%;"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
<td style=""><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
</tr>
</table>
Yields the desired layout:
I think it must be my misunderstanding/usage of floats and positions that always stings me when I try div-based layouts.
Personally I'd do it like this - http://jsfiddle.net/spacebeers/nWNPm/7/
.magLink {
list-style: none;
height: 50px;
float: left;
margin: 0 50px 0 0;
}
.magLink li {
float: left;
height: 50px;
display: table;
}
.magLink li a {
height: 50px;
display: table-cell;
vertical-align: middle;
}
<ul class="magLink">
<li><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></li>
<li>Link A</li>
</ul>
You can just copy the <ul> to have more than one. Just adjust the right margin to space them out how ever you want. I've set up examples of single link, multiple links and links with extra styling for in in the JSFIddle.
EDIT:
JSFiddle's running pretty badly so here's an image of the output in case it's not working.
Vertical alignment can be a real pain in CSS but tables for layout have had their day man. Let them live out their days being used for tabular data in peace.
From what I can tell, your "floaters" are extending beyond the parent div because you have two 50% widths inside of a 90%. Try setting them both to 45%. Then set a class or an id on your two floater containers, set them to position:relative, set both your link and img within each floating div to position:absolute, and use left, right, top, and bottom to move them into place (the img and link will be confined to the relatively positioned parent div). Does this help?
Edit
<div style="width: 90%;">
<div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;">
<a href="a.html" style="margin: auto 0px auto 0px;">
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" />
</a>
A Link
</div>
<div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;">
B Link
<img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" />
</div>
</div>
That is the code equivalent to your table layout.
I would have used jsfiddle but I got a 504 error... probably didn't hold my mouth right. :)