I consider myself a beginner at HTML, so sorry if this is a no-brainer.
In the following example I'd like the 'LEFT' DIV to collapse when it is empty. However with BOTH the 'width' AND the 'margin' present it will not collapse. If I remove either one from the style it collapses fine.
<html>
<head/>
<body>
<div>
<div style="float:left; width:25%; margin:40px 0 40px 0" >
LEFT
</div>
<div style="float:left; margin:40px 0 40px 0">
RIGHT
</div>
</div>
</body>
</html>
Any idea how I can make the "LEFT" DIV collapse if I remove the word "LEFT"?
Thanks
-John
You could use the :empty pseudo class. but it will mean really empty, even white-space DEMO
empty like this :
<div></div>
or
<div<!-- whatever --></div>
You can use the empty selector
div:empty {
display: none;
}
this needs to be put either on an external css or in an <style> tag
Also margin:40px 0 40px 0; and margin:40px 0; are the same
Css : checking if a div is empty :
#left:empty {
display: none;
}
JSFIDDLE DEMO
or You can use jquery to handle this checking with more flexiblity :
for example more usable if you want to check even the div is empty or have LEFT or some other specific content
$(document).ready(function() {
var leftcol = $("#left").html();
alert (leftcol);
if (leftcol == "LEFT" || leftcol == "") {
$('#left').html('');
$('#left').animate({ width: '0px'},'1000');
alert(' Left Div is empty !');
} else {
alert("Left Div is not empty");
}
});
JSFIDDLE DEMO
Related
I have a simple image that has a size attribute added using CSS.
I decided to make the image clickable by adding a <a> tag hoping nothing will change. But the whole image has been reset and i cant change the size without removing the <a> tag.
HTML
<header><img src="images/logo.png" alt=""></header>
CSS
header img {
width: 100%;
height: 50%;
}
Additionally, another React project is having the same issue:
// the css for "catImg"
const useStyles = makeStyles(theme => ({
catImg: {
"&:hover": {
boxShadow: "10px 5px 5px black;",
backgroundColor: "blue",
}
}
}))
.
.
.
<ImageListItem className={classes.catImg}>
{/* <a> */}
<img
src={url}
key={cat.token_id} />
{/* </a> */}
</ImageListItem>
EDIT:
Putting the a tag outside the ImageListItem makes it work correctly.
// the css for "catImg"
const useStyles = makeStyles(theme => ({
catImg: {
"&:hover": {
boxShadow: "10px 5px 5px black;",
backgroundColor: "blue",
}
}
}))
.
.
.
<a href="something">
<ImageListItem className={classes.catImg}>
<img
src={url}
key={cat.token_id} />
</ImageListItem>
<a/>
The quick response is because yow styles said that them images inside yow header are going to have this styles
header img {
width: 100%;
height: 50%;
}
The problem is in your html. Html has rules AND one of them rules is that block tags should not be in side of inline tags
header tag is a block tag a is inline
If you want to override that rule in your css you need to specify that a tags are block tags as well with
a {
display: block;
}
You have to reference the a tag instead of the img
header a {
width: 100%;
height: 50%;
padding: 0;
margin: 0;
}
header a img {
width: 100%;
height: 100%;
}
Your img is being set to 100% width of its parent, and 50% width of its parent. It's possible, that if you add the a tag, and the a element's width and height are not what you expect, that you'd see a change in behavior. But out of the box, without other styles applied, it shouldn't change anything.
For instance, this vanilla code, shows no difference in img sizing with or without the a element.
header img {
width: 100%;
height: 50%;
}
<header><img src="https://placekitten.com/150/150" alt=""></header>
<a href="#">
<header><img src="https://placekitten.com/150/150" alt=""></header>
</a>
It's hard to say why your problem arises without knowing the styling of the other elements. So I am guessing that the display property is at fault here. The default display property of an <a> tag is display:inline while the header has the default display property of display:block. display:inline will not fill the parent horizontally but display:block does. I will show you in a code snippet example:
.wrapper
{
width:400px;
height:200px;
background:green;
}
.case1
{
background:red;
}
.case2
{
background:yellow;
}
.case3
{
display:block;
background:orange;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header class="case1" ><header> display:block (default)</header>
<a class="case2" ><a> display:inline (default)</a>
<a class="case3" ><a> display:block</a>
</div>
</body>
</html>
So as you can see the parent of your image differs when you changed tags. The yellow area (case 2) is the same as you have now, in your case the <header> inside will be the same width as the <a> since it will not grow outside its parent. What you could try is to give your <a> tag the same display property as the header would have. Shown in case 3 with the orange background.
CSS property behaviour
You cannot change an element's height unless the parent's height is defined. Since you didn't share all the relevant code, I'm assuming you didn't set any rules for the header.
In this case, all you need to do is specify a height property on header and you're good to go.
If you already did, then you should share all the relevant code, because I wasn't able to reproduce your problem.
Note: If you don't I'll have to flag this question for the lack of information, because it cannot be answered in it's current state!
I checked the problem you mentioned but I did not encounter any bug, please tell me more about your problem if my code does not solve your problem.
<html>
<head>
<title></title>
</head>
<style>
a header img {
width: 100%;
height: 50%;
}
</style>
<body>
<a href="#">
<header>
<img src="img1.jpg" alt="">
</header>
</a>
</body>
</html>
Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<div id="as_profile" class="div_clearboth"></div>
<div id="as_notice" class="div_clearboth"></div>
In the HTML code, #as_profile and #as_notice are
both have class="div_clearboth" attribute.
.div_clearboth { clear : both ;
margin-bottom : 10px ; }
In the CSS code,
I give clear:both style and margin-bottom : 10px style to div_clearboth attribute.
It works well in other div tags,
but It doesn't work well in #as_profile.
Check the jsfiddle. Then you can see that there is no space between #as_profile and #as_notice.
They must be 10px away. How can I fix it?
Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<s_somethig> tag and [##something##] are going to replace by server automatically.
You can correct it by giving #as_profile an overflow value besides visible:
#profile_control {
overflow: hidden;
}
Or changing display to inline block:
#profile_control {
display: inline-block;
}
Or giving it padding/border:
#profile_control {
padding: 1px 0 0 0;
}
As #sevenseacat pointed out, the culprit is the floated li's within #as_profile
CSS :
#as_profile {
padding-bottom:20px;
}
Can you use Padding for divide? It works for me.
Jsfiddle
Consider the following markup and styles:
<div>
Some text Some text Some text
</div>
div{
width: 100px;
}
How can I do that the text-content of div have a font-size's property value such that there is maximum font-size value in which text-content of div lie on one line entirely? jsFiddle
Try this:
HTML:
<div id="container">
<span id="text_container">whatever text you want</span>
</div>
CSS:
#container {
background:cyan;
width:200px;
}
#text_container {
white-space:nowrap;
}
JS:
var container = $("#container"),
text_container = $("#text_container"),
start_size = 100,
container_width = container.width();
text_container.css('font-size', start_size + 'px');
while (text_container.width() > container_width) {
text_container.css('font-size', start_size--+'px');
}
DEMO
Do this instead:
div{
min-width: 200px;
}
By setting a minimum width you ensure that the div never gets small enough to collapse the text to multiple lines.
Demo: http://jsfiddle.net/96daR/4/
Give a id to the div, say id="myDiv"
Get height using one of this
javascript:
var myDiv = document.getElementById("myDiv");
h=myDiv.clientHeight;
h=myDiv.scrollHeight;
h=myDiv.offsetHeight;
or in jquery:
h=$("#myDiv").height();
h=$("#myDiv").innerHeight();
h=$("#myDiv").outerHeight();
Next set the font-size using this:
document.getElementById("myDiv").style.font-size=h+"px";
I have two selectors to play with to achieve this design:
I have tried almost everything but I just cant seem to get the text to float right next to the big letters
Here is the code:
Jsbin
html:
<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
<div class="processlinks-section-item-title">
Haftonbladet.se
</div>
<div class="processlinks-section-item-title">
Hteabagz.com
</div>
</div>
<div class="processlinks-section-item" data-letter="C">
<div class="processlinks-section-item-title">
Cftonbladet.se
</div>
<div class="processlinks-section-item-title">
Cteabagz.com
</div>
</div>
</div>
CSS:
[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
width: 270px;
height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}
Any kind of help is appreciated
Note: I have a javascript that appends stuff so I rather just stay with these two selectors.
If there is one item it seems to ruin the design and I think thats the problem.
Take a look: jsbin.com/UHiZUJU/9/edit
Float both the letter and link to left and add clearfix with it.
Updated jsfiddle
Add float: left to the :before psuedo-element that contains the letter, and clear: left to the section container:
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
display:inline-block;
}
.processlinks-section-item {
clear:left;
}
Updated JSBin
Currently your :before psuedo-element is display: block by default in the absence of another display declaration, which means it automatically fills 100% the width of its parent and functions like it has a line break after it (as compared to inline elements).
Floating a block element means it only fills the width it needs rather than its usual behavior of filling the full width and also removes the implicit presence of a line break. The clear: left on the container just ensures the float is reset for each section.
To make it like in your image change your margin:auto 7px;
Is it possible to specify a position (left or right hand side) for the placement of a vertical scrollbar on a div?
For example look at this page which explains how to use the overflow attribute. Is there some way of placing that scrollbar on the left hand side of the scrollable area?
You could try direction:rtl; in your css. Then reset the text direction in the inner div
#scroll{
direction:rtl;
overflow:auto;
height:50px;
width:50px;}
#scroll div{
direction:ltr;
}
Untested.
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
Working Example: JSFiddle
or
Cut and paste solution that works for all major browsers (Even Safari)
Any height or width will work
<style>
.list_container {
direction: rtl;
overflow:auto;
height: 50px;
width: 50px;
}
.item_direction {
direction:ltr;
}
</style>
<div class="list_container">
<div class="item_direction">1</div>
<div class="item_direction">2</div>
<div class="item_direction">3</div>
<div class="item_direction">4</div>
<div class="item_direction">5</div>
<div class="item_direction">6</div>
<div class="item_direction">7</div>
<div class="item_direction">8</div>
<div class="item_direction">9</div>
<div class="item_direction">10</div>
<div class="item_direction">11</div>
<div class="item_direction">12</div>
</div>
Optionally add class="item_direction to each item to change the direction of the text flow back, while preserving the container direction.
Kind of an old question, but I thought I should throw in a method which wasn't widely available when this question was asked.
You can reverse the side of the scrollbar in modern browsers using transform: scaleX(-1) on a parent <div>, then apply the same transform to reverse a child, "sleeve" element.
HTML
<div class="parent">
<div class="sleeve">
<!-- content -->
</div>
</div>
CSS
.parent {
overflow: auto;
transform: scaleX(-1); //Reflects the parent horizontally
}
.sleeve {
transform: scaleX(-1); //Flips the child back to normal
}
Note: You may need to use an -ms-transform or -webkit-transform prefix for browsers as old as IE 9. Check CanIUse and click "show all" to see older browser requirements.
I have the same problem. but when i add direction: rtl; in tabs and accordion combo but it crashes my structure.
The way to do it is add div with direction: rtl; as parent element, and for child div set direction: ltr;.
I use this first https://api.jquery.com/wrap/
$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );
then just simply work with css :)
In children div add to css
.your_class {
direction: ltr;
}
And to parent div added by jQuery with class .scroll
.scroll {
unicode-bidi:bidi-override;
direction: rtl;
overflow: scroll;
overflow-x: hidden!important;
}
Works prefect for me
http://jsfiddle.net/jw3jsz08/1/
No, you can't change scrollbars placement without any additional issues.
You can change text-direction to right-to-left ( rtl ), but it also change text position inside block.
This code can helps you, but I not sure it works in all browsers and OS.
<element style="direction: rtl; text-align: left;" />
Here is what I have done to make the right scroll bar work. The only thing needed to be considered is when using 'direction: rtl' and whole table also need to be changed. Hopefully this gives you an idea how to do it.
Example:
<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>
Check this: JSFiddle
There is a dedicated npm package for it. css-scrollbar-side