I'm trying to align text on top of an image in such a way that it remains aligned even if the underlying image is increased/decreased in size. I'm using px values that were taken from Photoshop measurements.
Please take a look at http://jsfiddle.net/dXNgx/. The word "For" is being overlaid on the image. It measures 20px in height, but when placed on the image, font-size: 20px; results in a "For" that is smaller than the underlying image. What gives?
You need to place the div.layer outside of the #page1 as otherwise -moz-transform:scale(.5); is applied to it.
Zoom In + | Zoom Out -
<div style="position:relative;">
<div style="-moz-transform:scale(.5); -moz-transform-origin:left top;position:absolute;" class="page" id="page1">
<div class="layer" style="z-index:1;">
<img src="http://cobalt.xtracta.com/images/image.jpg" style="width:2480px; height:3508px">
</div>
</div>
<div class="layer" style="z-index:2;">
<div style="font-size: 20px; position:absolute; color:#F00; top: 1550px; left: 306px;">For</div>
</div>
</div>
http://jsfiddle.net/dXNgx/2/
Related
Lately, I've run into a problem when trying to get my web aps to work with small devices. Even then, this doesn't seem to always be an issue, it will depend upon the orientation of the phone. What I'm seeing is say I have a Bootstrap 4 ROW with a col-3 col-6 col-3 setup. The center col has more height and includes images where fade in and out of opacity, so the height is constant. When BS does its thing for smaller displays, the first col-3 breaks properly, leaving space for the col-6. The problem is the col-6 seems to break at the col-3 height and I get over lapping. When using the dev tools, I can see this is the case but I dont want to set a hard height because that makes the spacing go weird and defeats the whole BS purpose. Here are some examples:
<div class="row" style="margin: 0vh 5vw;">
<div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
<div>
<i class="fa fa-eye features-icon"></i>
<h2 style="color: white; font-size: 3vmin">Something</h2>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center wow" style="height: 53vh;">
<img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh;
display:block; position:absolute; opacity: 1;">
<img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top:
3vh; display:block;position:absolute; opacity: 0;">
</div>
<div class="col-md-3 col-sm-12 text-center wow fadeInRight">
<div>
<i class="fa fa-database features-icon"></i>
<h2 style="color: white; font-size: 3vmin">More blah blah</h2>
</div>
</div>
</div>
This image shows where col is over lapping (blue icon)
BTW, I've set the center col height because without it, I get no height to that col. I've tried manipulating it, but it seems that whatever I do, it will fix it for one layout orientation and mess up the others. I must be missing something simple in BS. Thanks in advance for your help.
That row has an inline style defining a margin, maybe the view units are causing the problem. Try changing that around to % or px to see how it behaves or remove that margin all together and use bootstrap's margin utilities. Other thing I can think of would be to try and wrap the overlapping elements in two different .container-fluid
So, I ended up doing what I consider a cheat using jQuery. I gave the col div an id of #mcsCol and put this in my $(document).ready(function)
$("#mcsCol").css({ "height": $("#img1").css("height") });
So essentially, it will check the height of the image and set the col to the same height. If you have a more native solution, I'd love to see it.
When the browser size is changed/on different sized devices, I need a set of html elements that are all semantically related to remain together and move in a block. That is, if one of the elements move to the next "row" due to their not being enough width to contain the whole grouping, ALL of it should move down.
IOW, this is sort of like the "keep together" attribute that some groupings of items in a word processing document have.
To be a little more specific, say that I have collections of the following elements:
1) an anchor tag, filling out a first "column"
2) a collection of tags, to the right of the anchor tag, consisting of:
(a) a div, followed by a <br/>
(b) a cite, followed by a <br/>
(c) another div, followed by a <br/>
(d) two or three anchor tags that are aligned side-by-side at the bottom of the second "column"
So to sum up, if there is not enough room for the second "column" in a "row," rather than keep the in the first "column" and moving the elements in the second column down to the next "row," the in the first column should adhere to its siblings and always remain on the same "row" with them (I'm putting "row" and "column" in quotes because I'm not using an html table, and those exist only in a virtual sense).
If you're finding this a little hard to visualize (I don't blame you), check out the fiddle: http://jsfiddle.net/W7CYC/8/
Note: wrapping the groupings into html5 s did not help.
Here's the code:
HTML:
<div class="yearBanner">2013</div>
<section>
<a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>
<div id="prizeCategory" class="category">BIOGRAPHY</div>
<br/>
<cite id="prizeTitle" class="title">Son of the Wilderness: The Life of John Muir</cite>
<br/>
<div id="prizeArtist" class="author">Linnie Marsh Wolfe</div>
<br/>
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>
<section>
<a class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>
<div class="category">BIOGRAPHY</div>
<br/>
<cite class="title">Son of the Wilderness: The Life of John Muir</cite>
<br/>
<div class="author">Linnie Marsh Wolfe</div>
<br/>
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
<img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>
CSS:
body {
background-color: black;
}
.floatLeft {
float: left;
padding-right: 20px;
padding-left: 5px;
}
.yearBanner {
font-size: 3em;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
padding-top: 64px;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
width: 160px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
jQuery:
$('#prizeCategory').text("Changed Category");
$('#prizeTitle').text("Changed Title that spans two rows");
$('#prizeArtist').text("Changed Author and co-author");
$('#mainImage img').attr("src", "http://ecx.images-amazon.com/images/I/61l0rZz6mdL._SY300_.jpg");
$('#mainImage img').attr("height", "200");
You group items simply with div (or if you want to use section, it is okay too). With a little hint of CSS you can group item inside wrapper. Unfortunately, there is no such attribute than keep together but you can do following:
section.wrapper {
min-width: 400px; /* Minimum width of your wrapper element */
overflow: hidden;
display: inline-block;
}
min-width helps you to keep elements inside wrapper in order. Select a value that best suits your situation.
overflow with value hidden lets your wrapper to understand and add width and height values of floated elements inside.
display with value inline-block let all of wrappers to order next to each other as long as there is enough space, if not, wrapper jumps to other row.
http://www.w3schools.com/ serves great sources to understand and learn CSS, HTML and web technologies in generally. Very useful.
EDIT
As I edited, min-width or width suits better in that situation than max-width
This is not an HTML issue, learn about using CSS absolute position inside of relative positioning:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Bootstrap grids
Bootstrap includes a powerful mobile-first flexbox grid system for
building layouts of all shapes and sizes. It’s based on a 12 column
layout and has multiple tiers, one for each media query range. You can
use it with Sass mixins or our predefined classes.
code example :
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<div class="row">
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
<div class="col-xl-4">.col-xl-4</div>
</div>
Output:
This is default output:
and when size of my browser reduce to less than 1200px
Here we have four row and the first row coumns will always at the same tow.
the second row will remain when max width is >=768px
the third row will remain when max width is >=992px and so on.I have inserted this details in G rids options
Here is a gif demo of output
you can mix this classes together.for example
<div class="row">
<div class="col-sm-4 col-xs-6">first-col</div>
<div class="col-sm-4 col-xs-3">second-col</div>
<div class="col-sm-4 col-xs-3">third-col</div>
</div>
mean if small devices I want three column with same with but in very small device I want to first-col be half of space and every two other column be 25% of with.
Now as you can see in every size you can set what behavior every row and every column should do and if you want to always move together you can use col-* classes without any prefix.
Grids Options
(<768px) (≥768px) (≥992px) (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Here is more detail if you need
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
I'm wondering how to make two child divs share a parent div.
I want the left column to contain text from a database (one word). This could be 1-10 letters long. Since I want the left columns width to fit the word perfectly, I don't give it a set width.
Then, I was trying to have the right column fill the remaining space.
Is there an easy way to do this?
I'm not sure what to set the right column's css to make this happen.
<div id="parent_div" style="width: 100px; height: 100px;">
<div style="background-color:blue; float:left;" id="left_column">
blue
</div>
<div style="background-color:red; float: left;" id="right_column">
red
</div>
</div>
I read you shouldn't have something floated without giving it a set width, but then it seems like what I want would be impossible.
Thanks
I think you'll get the effect you want if you just don't float the second div.
<body>
<div id="parent_div" style="width: 100px; height: 100px;">
<div id="left_column" style="background-color: blue; float: left;"> blue </div>
<div id="right_column" style="background-color: red;"> red </div>
</div>
</body>
In firefox, this does exactly what you want. The red column takes up any remaining space not taken by the blue column.
Well, for a start, I would suggest that you make the right column float to the right - that should put it next to the left column. Not sure about the width of the left column though.