I want the container text-wrapper to have the same height like the actual height of the letter "R". Is this possible?
In my simple code snippet you can see that the blue background is higher than the letter. I could of course play around with line-height or height but is there some CSS attribute to fit the container height depending on the letter height?
.text-wrapper {
font-size: 30rem;
background-color: blue;
}
<div class="text-wrapper">R</div>
Related
First problem:
I have some text positioned over a responsive image using position: absolute, however, I haven't set any font-size so it uses the default 16px. When I scale down the screen, the image scales down but the text stays the same size which results in the text taking a big amount of space over the image
Second problem:
I also have a square 100x100px div positioned over a responsive image using position: absolute that contains the upvote/downvote buttons. Unfortunately once again when I scale down the image, the div stays the same and soon takes over the whole image if the image is scaled down a lot. I don't think I can use % for the div width and height here because the div parent is not a square, so if I say width: 10%;, height: 10%, the div will not be a square.
So my question is, should I try to completely replace pixels values with %, em, vh, vw, etc?
I guess the answer to your question is yes. Setting the position or font-size with pixels is not as flexible as % or the others you have listed, but % width is by far the most flexible.
Example:
.percent {
width: 50%;
}
.pixel {
width: 50px;
}
<div class="percent">
I have a 50% width ......................................................................................
</div>
<hr />
<div class="pixel">
I have a 30px width
</div>
As you can see the width of 50% changes when you click the full page link
Okay, I don't think I understand your question perfectly but if you are going really need a responsive image.
then you can set the div to a particular size, then allow the image to fill in the div, that way you will get a responsive image.
eg.
<style>
.div:width:700px;
.img:width:100%;
</style>
Another way to make it responsive is to use media queries to apply difference style rules at different screen sizes
A good place to start is here Media queries
First problem:
Theres no problem using font size. You can use font size to scale your elements according to html's font size
Example:
html {
font-size: 16px;
}
and style all your elements using rem
.element {
// this means your element will have 4 * your font size, 64px
width: 4rem;
}
on your breakpoint you can change html's font-size, making all rem sized elements to update its size
#media only screen and (max-width: 768px) {
html {
font-size: 14px;
}
}
Second problem:
why dont you use max-width with pixels and width with percentages? the element wont be too big and will be responsive
I'm trying to size a div according to the page and column size. The div must always be a square, regardless of its width. What I mean by that is:
When it's set in a row, it takes up the amount of space it's allocated. In this case, the text took 50% of the space. The remaining 50% must be taken up by the square div.
When it's set to a column (stacked on smaller screens), it takes up the amount of space it's allocated. In this case, the square div is the full width of the screen.
div.layout-1-img{
flex: 1;
background-color: gray;
width: 5em;
height:5em;
}
Jsfiddle
From what I understand:
you have a div that will contain the text you want, but this div width and height change.
You want the outerdiv to always be a SQUARE regardless of the page width, but still have the text div inside.
Possible Solution:
Create an outer div:
.outerDiv{
display: block;
position: absolute;
background-color: gray;
padding: 10px; // Specify the padding value if you want
}
Then using jquery:
$(document).ready(function(){
//Get the text div height and width
var height = $('#textdiv').height();
var width = $('#textdiv').width();
// increase the size of height or width by
// How much taller you want the back to be compared to text div.
//In this example I'm increasing the background by a factor of 2
height = height *2;
width = width *2;
//Compare to see which one is largest.
// Then change css of background to correspond to the correct size
if(height>width){
$('.outerDiv').height(height);
$('.outerDiv').width(height);
}else{
$('.outerDiv').height(width);
$('.outerDiv').width(width);
}
});
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.
1-What's the difference between simple(width and height) and max/min(width and height)? Explain in terms of what will happen if the content, width and height of the element, for which (width and height) or max/min(width and height) is already specified in an internal style, grows more than the specified ones?
2-Secondly, how do we know which one to use when?(simple or max/min)
3-In the following example:
<html>
<head>
<style type="text/css">
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<p>The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
The maximum height of this paragraph is set to 50px.
</p>
</body>
</html>
Here, the max-height seems to have no effect on the content of the element as it's height grows and shrinks with the content in it?. Iam currrently using IE8.
Answers:
1: Please see below for the difference between simple and max:
#element {
width: 100px;
height: 100px;
background-color: red;
}
<div id="element">
I'm a 100px wide, 100px high block!
</div>
The div above will be a 100px high and 100px wide red block on the page with the text 'I'm a 100px wide, 100px height block' inside it. If the text were to long for this block it would either leak out or if you put overflow: hidden in your css for the element, the excess content would be hidden.
If instead you did this:
#element {
max-width: 100px;
max-height: 100px;
background-color: red;
}
<div id="element">
I'm a flexible block!
</div>
The element would be as large as your content but if your content ever reached 100px high or over the element would stop and it would do the same thing as the above example (either cut the content off if you have overflow: hidden in your css or the content will leak into the page from the element).
2: If you want a big red block on the page or. use width/height, if you want a small red block on the page that needs to grow but only grow to a certain size use max.
3: There are two types of elements inline and block, setting height and width (max or simple) will do nothing on an inline element (which a p, in your example, is not). You can set it to block in your css by adding display: block to the p css or use a div instead (which is block by default).
See this page i'm currently working on.
http://lacrosselaundry.com/lacrosseLaundry/contact.php
If i change the font-size for 6 from 14px to 18px it moves the form to the right. Why is that?
I want the form to be all the way over to the right like when the h6 font is 18px, except i want the h6 font to be 14 px. How do I fix this and why is it happening?
How about setting element sizes? Works for me in firebug.
#main {
width: 100%;
}
.clearLeft {
width: 300px;
}
As for reasons, .rightDiv moves (despite having align: right) because parent container (#main) width increase. I.e., you increase font size and container stretches to accomodate changes. Normally divs take up all available width, but having float: left overrides that.
You can try to set the width of #main to 100%, so the #main .rigthDiv element would truly float to the right.