Difference between Indented HTML and Inlined HTML [duplicate] - html

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I am rewritting a client web page and I have some problems with HTML rendering.
Next code is the old HTML and all "a" and "img" tags are in one line like this (INLINE IMG):
<div id="inside-img">
<div class="img" style="width:8643px"><img src=""/><img src=""/>... ...</div>
</div>
When I rewrite this, with better indentation like this (INDENTED IMG):
<div id="inside-img">
<div class="img" style="">
<img src=""/>
<img src=""/>
...
</div>
</div>
The output of HTML breaks as you can see in the image that I have attached.
There are a lot of images and the last image, moves down instead of be at the end of timeline. I do not know why when I indent HTML, HTML style change.

It seems a problem related to elements set to display as inline-blocks, which accounts for whitespace.
While the OP does not provide any CSS associated to the markup, this should work:
<div id="inside-img">
<div class="img" style="font-size:0;">
<img src=""/>
<img src=""/>
...
</div>
</div>
or this (note the extra comments)
<div id="inside-img">
<div class="img" style="">
<img src=""/><!--
--><img src=""/><!--
-->...
</div>
</div>
For a full explanation see https://css-tricks.com/fighting-the-space-between-inline-block-elements/

This happen because of white space between inline items. White space between inline item in HTML gets visible on screen.As image is an inline item then your first code sample is not having any space between HTML tags. while in second sample code their is space between them ( new line) this will appear as a character (i.e. space) in HTML.
Possible solution for this is using Font-size: 0; on the parent div.

Related

Image not correctly pushing height of parent div [duplicate]

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
I want a parent div to be the height of the child image, like so:
<div class="container one">
<img src="http://placehold.it/250x250" />
</div>
The div should be exactly 250px tall. For Illustration, I created a JSFiddle here.
Now what is actually happening in FF and Chrome is that the div is just a bit taller, maybe 3 to 5 pixels.
I would like to avoid having to do nesting with unnecessary purely cosmetic markup like
<div class="container one">
<div class="inner">
<img src="http://placehold.it/250x250" />
</div>
</div>
or similar.
I feel like this is horribly obvious but I just can't make any sense of it.
<img> is an inline element and adds that extra space below due to that fact. Fix it with
img {
display: block
}

Background color being canceled by "float" [duplicate]

This question already has answers here:
Background color doesn't work after float
(3 answers)
Closed 9 years ago.
Explanation of code:
I'm creating a bar with three links. I made the bar, and tried to space out the links using the float, text-align, and width. (I'm trying to get the center link centered and the other two equidistant from it, and equidistant from the sides.) However, when I originally did it with 3 divs (the divs other than the "I" divs), the background color disappeared. So I messed with it and realized the float on the third link's div was causing the problem. So I added another div(the final div), and that worked with a little text. However, since I had to put text in it, it threw off my spacing. So I made a div on the other side(the first one) to balance it out. It still throws off my spacing without float however!
Question(s):
Why does having the floatproperty on the final div in a line cause the background color to disappear?
<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
You have to clear floating by adding for example another div below your final div:
<div style="clear:both;"></div>
Add overflow: auto to your outer <div>:
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
The problem is that because you are floating elements within another element that isn't floated causes the wrapping element to be rendered as if it is empty.
To fix this, you can add some widths and a float:left; on the wrapping div
Check out this jsbin example which seems to be what you are looking for.
Basically your first div should be like;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
Then you just need to change the widths, and remove any margins or padding.
p.s. You really should consider moving away from inline styles and use an external stylesheet with Id's and class names.

If the <div> Element Is Block Level Element How Could 2 divs Be Placed Next to Each Other [duplicate]

This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 9 years ago.
According to w3schools.com I learnt that the element is a block level element (that is, the browser will display a line break before and after it).
Then how could 2 divs be placed next to each other?
Some code from w3schools:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com
</div>
</div>
</body>
</html>
"By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not."
Two block level elements will generally start on new lines, but you can have them side by side by float property. In your code, you have this piece in the div style which is making them side by side.
float: left;
HTML:
<div class="sidebyside">I'm stuff!</div>
<div class="sidebyside">I'm other stuff!</div>
CSS:
.sidebyside {
float: left;
width: 50%;
}
Demo
A quick google for "side by side div" yielded this as the first result, and a bunch more too!
http://www.welovecss.com/showthread.php?t=465

How to make a box just large enough for a certain element inside?

Consider a document like this:
<DOCTYPE html>
<html><head><title>test</title></head>
<body>
<div>
<img src="..." alt="" style="clear:both" />
<p>Lorem ipsum...</p>
</body></html>
The image (in my case it's actually an embedded SVG generated ad-hoc) has a size that is not known beforehand. How is it possible that the enclosing div has a width that is just large enough to hold the image (i.e. such that the paragraph below breaks at the same width as the image above)?
This is a follow-up to this question. The code I am currently working on can be found here. The text above the board should have the same width as the board.
This can be accomplished using display:table and a set minimal width. I used width:1px in the sample below, but any minimal width would work.
HTML:
<div>
<img src="..." alt="" />
<p>Lorem ipsum...</p>
</div>
CSS:
div {
width: 1px;
display: table;
}
The result will look something like this:
JS Fiddle Example
you can use float to fit the container
<div style="float:left;background:yellow;">
<img ...>
<p>...</p>
</div>
or you can try (doesn't work with IE7... but you can probably fix it)
<div style="display:inline;display:inline-block;background:yellow;">
<img ...>
<p>...</p>
</div>
and newer mozilla and webkit browsers have
<div style="width:fit-content;margin:0 auto;background:yellow;">
<img ...>
<p>...</p>
</div>
I'm not sure what will happen with your SVG, but in the <svg> declaration you can specify the actual render size of the vectors AFAIK
hoping to be helpful..

How do I make entire div a link? [duplicate]

This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.
Thanks!!
You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.
<a style="display:block" href="http://justinbieber.com">
<div class="xyz">My div contents</div>
</a>
Using
<div class="xyz"></div>
works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.
When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.
It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like
.xyz:before { content: "Hello world"; }
The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?
Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.
<a href="http://www.example.com" style="display:block;">
<div>
content
</div>
</a>
<a href="http://www.example.com">
<div style="display:inline-block;">
content
</div>
</a>
<a href="http://www.example.com">
<span>
content
</span >
</a>
<a href="http://www.example.com">
content
</a>
But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.
the html:
<a class="xyz">your content</a>
the css:
.xyz{
display: block;
}
This will make the anchor be a block level element like a div.