Display inline block with fluid Design not aligning same line [duplicate] - javascript

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I am using Fluid web design taking widths in "Percentages". I also reset all Margins and Paddings to default 0px. There is no border in any div. Still, why be default these are not aligned in same line???
Example:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div>
<div class="divTwo">Two</div>
<div class="divThree">Three</div>
</body>
</html>
Please, someone help me out. How in world is this not aligned in same line. But if I reduce % of any of these to go below 100% (like 98% or less), then these get aligned. But, if there is no margin, no padding. Why is this gap of width required?

You need to add HTML comments between your divs to cancel the whitespace interpreted by the browser :
*{margin:0px;padding:0px;}
div{display:inline-block;}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
<div class="divOne">One</div><!--
--><div class="divTwo">Two</div><!--
--><div class="divThree">Three</div>

Weird space that inline-blocks give.
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
You can have those three divs in one row to avoid any hacks/tricks.
https://jsfiddle.net/dghkcg04/
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>

The browser interprete de div like a white space so doing this to get it:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
div{
display:inline-block;
margin:0;
padding:0;
}
.divOne{background:yellow;width:20%;}
.divTwo{background:green;width:60%;}
.divThree{background:red;width:20%;}
</style>
</head>
<body>
<div class="divOne">One</div><div class="divTwo">Two</div><div class="divThree">Three</div>
</body>
</html>

Related

Setting min-height automatically with jQuery or Javascript

I would like to use a script to add min-height or max-height to an element based on the height of the actual element.
So I'm getting the .height() (?) of a div and then using that value to set a min/max-height. Is this possible? It has to be dynamical, so that the div can change height but still have the right min-height or max-height.
I haven't tried anything, only searched for how to do it - I'm really not an expert on jQuery og Javascript. The thing I'm doing now is using console.log to give me the height of an element (a hero section for example) so that I don't need to manually check it in developer. And then I write the value as a min-height in CSS. The reason I'm doing it is because of the new Lighthouse Core Web Vitals (Cumulative Layout Shift (CLS)).
EDIT: So I think I found a solution, and (like I said) I'm not an expert here, but any feedback is very much appreciated.
jQuery(".hero").css("min-height", function(){
return jQuery(".hero").height();
});
this is an example of what you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set a DIV height</title>
<style>
.box{
background: #f2f2f2;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var newHeight = $(".input-height").val();
$(".box").height(newHeight);
});
</script>
</head>
<body>
<form>
<input type="text" class="input-height">
<button type="button" class="set-height-btn">Set Height</button>
<p>Enter the value in input box either as number (e.g. 100, 200) or combination of number and unit (e.g. 100%, 200px, 50em, auto) and click the "Set Height" button.</p>
</form>
<br>
<div class="box">This is simple DIV box</div>
</body>
</html>

how to left align the first inline element put in body element in google apps script

I am developing a web app by google apps script. I put inline element(span) at very first on body element. However, there is a gap between the very left edge of the screen and the left edge of the span element. And this gap is not slight.
I tried the same thing on js fiddle, but there is no as long gap as implementation by google apps script.
image
the element in blue is span. the body is in red.
html
<body>
<span>test</span>
</body>
styles can be seen on Chrome developer tool.
for span:
for body:
I want to left align the span element on body. Please let me know the solution. Thanks in advance.
I found the cause of the problem. That is, there are full-width spaces above the span element. I had full-width spaces in . I removed all the spaces from head. The gap on the left of the span disappeared.
I couldn't tell if there were spaces or not because the spaces can't be seen. I thought that all the spaces were put with half-width spaces which don't make any spaces on the html.
before:
<!DOCTYPE html>
<html>
<head>
 <base target="_top">
<?!= include('css'); ?>
</head>
<body>
<span>test</span>
</body>
</html>
There is one full-width space just before the <base target="_top">.
after:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body>
<span>test</span>
</body>
</html>
You can globally set margin and padding to 0 to removes all default margin and padding for every object on the page
* {
margin: 0;
padding:0;
}

Dynamic vertical stripes in DIV using css and/or SASS

I'm trying to figure out how to create up to 4 vertical stripes on the background of a DIV. Each stripe is 4 pixels wide and is the same h=height as the div. Also I need to have the stripes be dynamic. There could be any number of the 4 stripes visible at runtime based on some data in an object.
Here's an image of the general idea.
I've been trying to implement this with css and sass as well as javascript but not making progress. Any help would be greatly appreciated.
Thanks
If I am correctly understanding your question, box-shadow might help you solve this problem. Here is what I have tried,
Initialize a div with some height and width
Now we have psuedo elements :before and :after use it to create strips, i.e 2 strips will appear.
Now, box-shadow comes into picture for every strip you can n number of strips using box-shadow .
Here is my attempt.
.progress{
width:140px;
height:40px;
background-color:white;
border:2px solid black;
}
.progress::after{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:red;
box-shadow:4px 0 lightgreen
}
.progress::before{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:blue;
left:18px;
box-shadow:4px 0 pink
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Hope it helps you.

Create wall for post made of blocks

i need a way to create a wall made of blocks.
The idea was: i get the informations via php, then i echo them in a div.
Stylesheet
.block{
min-height:100px;
min-width:190px;
background-color:#999;
float:left;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
.holder{
width:800px;
height:100%;
margin: 0 auto;
}
Here the html:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='holder'>
<? *connect to the db*
my_query=mysql_query("SELECT * FROM news");
while($array=mysql_fetch_array(my_query)){
echo "<div class='block' id='block_".$array['id']."'>".$array['text']."<div>";
}
?>
</div>
</body>
</html>
Now, the problem is that obviously the blocks have not the same height nor the same width, and so the float left create horrible margin between the blocks and the right side of the holder.
How they should be
http://img17.imageshack.us/img17/1813/cy44.png
How they display
http://img716.imageshack.us/img716/9703/lnyr.png
Ideas: For the width I could use jquery maybe creating id by echo.
if($('#block_'+id).css('width')>590){$('#block_'+id).css('width','790')}
if($('#block_'+id).css('width')>390){$('#block_'+id).css('width','590')}
if($('#block_'+id).css('width')>190){$('#block_'+id).css('width','390')}
This should do the trick for the width, but what about the height? Should i try to create a function set the absolute position of all the element based on the height of the element that are before?
I not clearly understand your requirement. But you can do one thing set comman class for all elements say '.elements' and once rendered you can get all elements you can all elements like this below commands.
$(document).ready(function(){
$('.elements') // and you do want you want to do.
})
Hungerstar pointed out that already exist Masonry. It did the trick.

Why I can't get these css properties on loading the page? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Get a CSS value with JavaScript
could you tell me why I cant get these css properties when I load the page?
code at jsFiddle
javascript:
function aviso(){
alert("top: "+document.getElementById("divRojo").style.top);
alert("position: "+document.getElementById("divRojo").style.position);
}
HTML:
<html>
<head>
<style type="text/css">
#divRojo {
width:100px;
height:100px;
background:red;
left:200px;
top:200px;
position:static;
}
</style>
</head>
<body onload="aviso()">
<div id="divRojo">
Div Rojo
</div>
</body>
</html>
Thanks in advance
It's because the DOMElement.style property contains inline styles -- it does not contain style rules applied via CSS.
Use getComputedStyle to get the applied styles:
var el = document.getElementById("divRojo");
alert(window.getComputedStyle(el).top);
alert(window.getComputedStyle(el).position);
JSFiddle

Categories