I have several elements with already set fonts - like
<div style="font-size: 10px">
some text
</div>
<div style="font-size: 20p">
some text
</div>
I want to increment the font size proprtionally, eg
<div style="font-size: 15px">
..........................
<div style="font-size: 30px">
is that possible?
div {font-size: whatever} simply overwrites the values
Your question is unclear:
<div id="fred" style="font-size: 10px">hello</div>
<div id="walt" style="font-size: 20px">there</dev>
States absolute sizes which are absolute and there isn't anything that could alter those absolute measures except changing the literals. This is why many texts recommend establishing a body font and sizing relative to that:
<body style"font-size: 10px">
<div id="joan", style="font-size: 100%">hello</div>
<div id="mary", style="font-size: 200%">world</div>
</body>
Would make "joan" 10px and "mary" 20px. Changing the body size to 15px would make "joan" 15px and "mary" 30px.That forms an attribute "cascade". Of course all this should be done in a style block rather than in the div attributes, but it would make this answer less direct.
Using relative units in font sizes will scale them relative to the font size of the parent element, but the cascade doesn't provide a way to say "relative to the font size that this overrides" (and it would usually turn into a complete mess if there was a way).
Related
When you write this: (in chrome)
<div style="font-size: 32px">txt</div>
its height will be 37px.
but this one:
<div style="font-size: 16px">txt</div>
its height will be 18px.
So my question is: is there any formula to calculate how much will be a text's height when rendered (based on font-size)?
The height is not based on the font-size but the line-height and the default value is normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.ref
Basically, we don't know exactly the value of line-height but if we explicitely define it then we can know the exact height.
An example where I am setting the height to be 1.5 x font-size
$('div').each(function(){
console.log($(this).height());
})
div {
line-height:1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
Another one where the height is 35px for all of them:
$('div').each(function(){
console.log($(this).height());
})
div {
line-height:35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
Worth to note that the result is different if you consider an inline element:
$('div').each(function(){
console.log("div "+$(this).height());
})
$('span').each(function(){
console.log("span "+$(this).height());
})
div,span {
line-height:1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
<span style="font-size: 32px">txt</span>
<span style="font-size: 16px">txt</span>
Or if you have different font-size inside a div or different alignment:
$('div').each(function() {
console.log("div " + $(this).height());
})
div {
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span style="font-size: 32px">txt</span>
<span style="font-size: 16px">txt</span>
</div>
<div>
<span style="font-size: 32px;vertical-align:text-top">txt</span>
<span style="font-size: 32px">txt</span>
</div>
In the first case, the height will be defined only based on the font properties (line-height play no role here).
the height of the content area should be based on the font ref
On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.
In the second case, we have a more realistic example where the height is not only based on the line-height but also consider the alignment of the different elements to find the final height we need in order to place all of them.
More details here: https://www.w3.org/TR/CSS2/visudet.html#line-height
I have an image, single character in a span (equal sign), and then a div where child elements are added/replaced via js.
However, I can't for the life of me figure out how to get it all aligned properly (fear I'm over thinking and complicating it.)
I'm using bootstrap's grid (row/col) system as well.
Something akin to...
<div class="container">
<div class="row">
<div class="col-lg-2 col-offset-lg-1">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp1" class="opensans inline" style="width: 50px;">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="response-part">
<img src="foo" />
<span class="opensans">=</span>
<div id="rp2" class="opensans inline" style="width: 50px;">
<span class="opensans">X</span>
</div>
</div>
</div>
</div>
</div>
See jsfiddle
Wanting image centered middle along equal sign (vertical-align) as well as span within neighboring div (and the text in that span appearing just a few pixels off the bottom line.)
I saw this but none of the solutions are addressing the problem for me (I can only guess it is because of the third element and font, etc.)
UPDATE1: Edited sample html to correctly reflect the scenario in which the response-part.div is empty (initial state, possible transition state as user interacts with the page.) Updated fiddle
UPDATE2: I "fixed" the issue occurring with no child elements by adding an initial element in the initial html for the response-part, and then adding one back in when the user removes all other elements. A bit hackish, would appreciate a fix that didn't involve this workaround if possible. Updated fiddle
PS: I initially considered using bootstrap v4 (with flexbox support) but it is still alpha. Alternatively, I also looked into using FlexboxGrid, however I still need bootstrap for other features and FlexboxGrid uses similar classes ("row", etc) as bootstrap, which I assumed would cause name conflicts (if I included both in my project, eg: which "row" class would be used!)
Try using display: flex; on your response-part class. Something like this:
.response-part {
display: flex;
align-items: center;
}
I edited your fiddle. Take a look on it: https://jsfiddle.net/gusLnyyh/6/
In IE8
In IE7 and other browser
both page scaled in 100%.I found font-size in IE8 and only in IE8 was bigger than other browser.Is anyone can tell me the reasion and solution ?
here is the html and css:
<div class="a_ticket-box">
<a href="" class="a_ticket" id="a_ticket_en">
<img id="a_ticket_btag_en" src="../img/tag-en.png" alt="">
<h4 id="en-buy">PURCHASE TICKET</h4>
<p id="en-p">Newly added March 5-6 fifth floor ticket</p>
</a>
</div>
THX
I don't see your css code. As I see in html you don't have specified font size inside paragraph. Browsers can interpretate default font size in < p> different. You should set font size in css like:
#en-p {
font-size: 1em;
}
Or inline inside paragraph like:
<p id="en-p" style="font-size: 1em;">Newly added March 5-6 fifth floor ticket</p>
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'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/