Rectangle 27 7

Here is a diagram, fom the w3c, showing what happens when a float overlaps borders of elements in the normal flow.

This behavior of floating elements causes its parent element's height to do things most developers consider unintuitive.

But given that it is documented on the w3c, this is intentional: it is not a bug.

So here's the interesting rule in your CSS:

This rule is targeting the <header> element, but it's also using the :after pseudo-element. The result is that it's like there was an imaginary element after <header> which you are targeting with this CSS rule:

<!DOCTYPE html>
<html>
<head>
    <!-- uncomment the line below to enable the fix -->
    <!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
    <link rel="stylesheet" href="css/template.css" type="text/css" >
    <title>Teaching myself CSS, HTML. I want help understanding this bug.</title>
</head>
<body>
    <section class="content">
        <header id="contact">
            <div id="name">Name</div>

            <div id="address">
                <div>Home Address</div>
            </div>

            <div id="contact-details">
                <div><strong>Phone Number:</strong>5555 </div>
            </div>
        </header><!-- imaginary header:after element -->
        This text should be under everything else.
    </section>
</body>
</html>

This imaginary header:after "element" which is added after the <header> has a clear:both CSS property:

/* our Global CSS file */
header:after {
    clear:both; /* This property clears floating elements! */
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

So what does clear do? According to the w3c...

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

The less reliable but sometimes clearer w3schools describes clear as...

The clear property specifies which sides of an element where other floating elements are not allowed.

Since the header:after "element" has a clear:both CSS property, is will appear at the bottom of (after) any floating elements on either its left or right sides, such as your red and green boxes.

Now, that resettemp.css file seems to target almost every element imaginable with the same trick - kind of a carpet-bomb approach to solving the float-overflow problem. A better idea is to learn CSS :P

header { overflow:hidden; }

html - Why don’t my box borders surround the floats inside them withou...

html css css-float
Rectangle 27 618

Proper uses of IMG

  • Use IMG if you intend to have people print your page and you want the image to be included by default. JayTee
  • Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
  • Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). sanchothefat
  • Use IMG if you rely on browser scaling to render an image in proportion to text size.
IMG
z-index
  • Using img instead of background-image can dramatically improve performance of animations over a background.
  • Use CSS background images when doing image-replacement of text eg. paragraphs/headers. sanchothefat
  • Use background-image if you intend to have people print your page and you do not want the image to be included by default. JayTee
  • Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
  • Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

I'm still iffy on the background images for text replacement part. I see people using background-images then using text-indent: -9999px for the text. However I know having text indents like this used to be bad for SEO and I'd imagine it still must be for some search engines. But most important, if you turn images off but leave css on the image dissapears but the text is still off the screen. As far as I am concerned the alt text on an image is for if images are not displays so img tags are better.

Pragmatic Use of backbround image: When you don't want to loose hair about vertical centering problems (of images of varying vertical size) ;)

Yes, vertical centering problems - bring on Flexbox!

@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div> That way you can style it in your CSS stylesheet but if the background image is more a question of content than style then you're still editing it from the HTML side of things.

There seems to be a clickbait in point 5 of pragmatic uses of IMG - pointing to a japanese blog post about cosmetics. the link is www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [DO NOT CLICK THIS]

html - When to use IMG vs. CSS background-image? - Stack Overflow

html css image background-image
Rectangle 27 613

Proper uses of IMG

  • Use IMG if you intend to have people print your page and you want the image to be included by default. JayTee
  • Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
  • Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). sanchothefat
  • Use IMG if you rely on browser scaling to render an image in proportion to text size.
IMG
z-index
  • Using img instead of background-image can dramatically improve performance of animations over a background.
  • Use CSS background images when doing image-replacement of text eg. paragraphs/headers. sanchothefat
  • Use background-image if you intend to have people print your page and you do not want the image to be included by default. JayTee
  • Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
  • Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

I'm still iffy on the background images for text replacement part. I see people using background-images then using text-indent: -9999px for the text. However I know having text indents like this used to be bad for SEO and I'd imagine it still must be for some search engines. But most important, if you turn images off but leave css on the image dissapears but the text is still off the screen. As far as I am concerned the alt text on an image is for if images are not displays so img tags are better.

Pragmatic Use of backbround image: When you don't want to loose hair about vertical centering problems (of images of varying vertical size) ;)

Yes, vertical centering problems - bring on Flexbox!

@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div> That way you can style it in your CSS stylesheet but if the background image is more a question of content than style then you're still editing it from the HTML side of things.

There seems to be a clickbait in point 5 of pragmatic uses of IMG - pointing to a japanese blog post about cosmetics. the link is www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [DO NOT CLICK THIS]

html - When to use IMG vs. CSS background-image? - Stack Overflow

html css image background-image
Rectangle 27 24

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Your diagram shows a block level element also (which a div usually is), not an inline one.

Of the top of my head, min-width is supported in FF2+/Safari3+/IE7+. Can be done for IE6 using hackety CSS, or a simple bit of JS.

Thanks for clarifying about the "inline" terminology. I was trying to say that I didn't want it to float over any text.

html - How do you easily horizontally center a
using CSS? - Stac...

css html
Rectangle 27 24

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Your diagram shows a block level element also (which a div usually is), not an inline one.

Of the top of my head, min-width is supported in FF2+/Safari3+/IE7+. Can be done for IE6 using hackety CSS, or a simple bit of JS.

Thanks for clarifying about the "inline" terminology. I was trying to say that I didn't want it to float over any text.

html - How do you easily horizontally center a
using CSS? - Stac...

css html
Rectangle 27 5

This happens because inline elements wrapping around block level elements are split into block level by the child block. Here's a quote from the w3 spec:

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes.

If you have a look at that link, you'll see their diagram of the "anonymous box" that wraps inline text within a block that is followed by a block-level element (in their case, a <p>). So to try to further explain, in that quote above, basically they're saying that the inline box parent is getting split into block level boxes by the child with the display: block on it.

display:inline-block
#nav {
  list-style-type-none
}
#nav li {
  display: inline-block;
}
/* make the LI's stack horizontally */

#nav li a {
  display: block;
  padding: 5px;
}
/* display as block to add padding */
<ul id="nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About us</a>
  </li>
</ul>

Thank you, it's clear to me now that this is indeed what the creators of HTML intended. But the reason I chose for display: inline; was browser compatability. I just googled display: inline-block and found out it works even back until IE8. I'm less reluctant to use inline-block now

html - block inside inline
  • behaviour - Stack Overflow
  • html css block inline
    Rectangle 27 13

    So how does a browser use these three

    It helps to think of the HTML page you see in the browser made up of three components:

    • JavaScript (Programming language that browser understands. Can manipulate #1 and #2, also do bunch of other dynamic things)

    As for your question #1 of why mixing is possible, you are correct, it is because all three are eventually rendered in browser to make a what you called 'page'.

    HTML and CSS are NOT programming languages. So you are not combining anything.

    All three of them are used along with each other to get the desired behavior on the page that user sees.

    When a URL is entered/clicked in the browser, the browser requests the "content" form the server. Servers responds by sending back a initial HTML page which usually includes the DOM, CSS (as link tags) and JavaScript as (script) tags.

    Here's a diagram that describes this process for WebKit browsers (source)

    This Article describes this process in great details if you are interested in further reading.

    About your question #2 on why .html extension. Technically speaking the .html extension is just a carry over from filesystems of operating systems, and browser does not care! What browsers do care about is what is called a mime-type and is typically returned by the Web-servers. Browsers are "taught" to behave a certain way when they see a specific mime-type. Some common ones are text/html or image/png etc..

    Interestingly, technically the latest revision of CSS is turing complete, so it could be argued it's a programming language. Just not a very effective one ;)

    Agreed! it just helps to explain the beginners this way. I learned many lessons the hard way, so just trying simplify it for the OP. :)

    haha I wish :). Thank you, hopefully the answer helps others that face similar questions when they are starting out with web technologies.

    Relationship between HTML and javascript. The basics of frontend devel...

    javascript html css
    Rectangle 27 1

    That won't be possible in pure HTML. You will have to use javascript to some extent, possibly CSS as well. There are many javacript charting libraries out there to help (some free, some paid) - depending on the task you need. Here is one free one: flowchart.js

    javascript - I want to draw a flow chart using HTML, what are the best...

    javascript java html css
    Rectangle 27 1

    That won't be possible in pure HTML. You will have to use javascript to some extent, possibly CSS as well. There are many javacript charting libraries out there to help (some free, some paid) - depending on the task you need. Here is one free one: flowchart.js

    javascript - I want to draw a flow chart using HTML, what are the best...

    javascript java html css
    Rectangle 27 0

    Please find the CSS code:
    
    #navigation{ 
    width:100%;
    height:35px;
    }
    
    #menu {
    width:580px;
    height:35px;
    }
    
    #menu li{
    list-style-type:none;
    float:left;
    }
    
    #menu a {
    height:35px;
    color:#FFFFFF;
    }
    
    #menu a:hover{
    color: #FFFFFF;
    text-decoration:none;
    }
    
    .active {
    color:#000000;
    text-decoration:none;
    font-family: Calibri;
    font-size: 14px;
    }
    
    HTML code:
    
    When rapport/index.php page open make sure your li should be active something like following
    
    <div id="navigation">
    <li class="active"><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
    <li><a href="../diagram/index.php" class="diagram">Diagram</a></li>
    </div>
    
    And when diagram/index.php open then use following
    
    <div id="navigation">
    <li><a href="../rapport/index.php" class="rapport active">Rapport</a></li>
    <li class="active"><a href="../diagram/index.php" class="diagram">Diagram</a></li>
    </div>

    html - Navigation active with css - Stack Overflow

    html css twitter-bootstrap active
    Rectangle 27 0

    Making the shapes really concaves in CSS is really hard, in this case your best bet would be SVG.

    But, if you want a pure CSS solution, may be you don't need really those shapes. If you set your z-index ok, then you can get your topmost div to hide the others, and then you don't care about the concave side ...

    In this demo, the hover works ok. It would be the same for other events.

    A more complex layout, bug-free in Chrome and IE

    div {
      width: 240px;
      height: 240px;
      border-radius: 50%;
      pointer-events: none;
      position: absolute;
    }
    
    .innerw {
      left: 0px;
      top: 0px;
      overflow: hidden;
      position: absolute;
      /* border: solid; */
      z-index: 20;
      /* transform: translateZ(10px); */
      pointer-events: none;
    }
    
    .innerw2 {
      margin-left: 0px;
      top: 0px;
      overflow: hidden;
      position: static;
      /* border: solid; */
      /* z-index: 20; */
      pointer-events: none;
    }
    
    .innerw3 {
      margin-left: 170px;
      top: 0px;
      overflow: hidden;
      position: static;
      /* border: solid; */
      /* z-index: 20; */
      pointer-events: none;
    }
    
    .inner {
      margin-left: -85px;
      margin-top: 130px;
      background-color: palegreen;
      z-index: 20;
      position: static;
      pointer-events: auto;
    }
    
    .inner:hover {
      background-color: green;
    }
    
    .mwrap {
      position: absolute;
      overflow: hidden;
      pointer-events: none;
      z-index: 10;
    }
    .mwrap2 {
      position: static;
      margin-left: 0px;
      margin-top: 0px;
      overflow: hidden;
      pointer-events: none;
    }
    .mid {
      position: static;
      pointer-events: auto;
    }
    #midaw1 {
      left: 0px;
      top: 0px;
    }
    #mida {
      margin-left: 170px;
      margin-top: 0px;
    }
    #midbw1 {
      left: 170px;
      top: 0px;
    }
    #midb {
      margin-left: -85px;
      margin-top: 130px;
    }
    #midcw1 {
      left: 85px;
      top: 130px;
    }
    #midc {
      margin-left: -85px;
      margin-top: -130px;
    }
    .mid {
      background-color: lightblue;
      z-index: 15;
    }
    .mid:hover {
      background-color: blue;
    }
    
    
    #outer1 {
      left: 0px;
      top: 0px;
    }
    
    #outer2 {
      left: 170px;
      top: 0px;
    }
    #outer3 {
      left: 85px;
      top: 130px;
    }
    .outer {
      background-color: lightcoral;
      z-index: 1;
      pointer-events: auto;
    }
    .outer:hover {
      background-color: red;
    }
    <div id="outer1" class="outer">
    </div>
    <div id="outer2" class="outer">
    </div>
    <div id="outer3" class="outer">
    </div>
    <div id="midaw1" class="mwrap">
    <div id="midaw2" class="mwrap2">
    <div id="mida" class="content mid"></div>
    </div>
    </div>
    <div id="midbw1" class="mwrap">
    <div id="midbw2" class="mwrap2">
    <div id="midb" class="content mid"></div>
    </div>
    </div>
    <div id="midcw1" class="mwrap">
    <div id="midcw2" class="mwrap2">
    <div id="midc" class="content mid"></div>
    </div>
    </div>
    <div class="innerw">
    <div class="innerw2">
    <div class="innerw3">
    <div class="inner">
    </div>
    </div>
    </div>
    </div>

    upvote! your solution works perfect in FF. But in GC, there are hover issues on center shape

    @TimKrul you are right, looks like there is a bug in the overflow handling of Chrome and IE. Will try to get a hack around this ...

    This is awesome. Have you been able to figure out the center issue on hover? I'm assuming this could be easily responsive too then. Love it.

    javascript - Creating a 3 circle Venn diagram with pure css/html - Sta...

    javascript html css3 svg css-shapes
    Rectangle 27 0

    I would suggest using PNG files with a transparent alpha layer (for overlaps), and positioning them absolutely with CSS. I haven't seen your overall layout, so I can't say that this is the best approach for your particular situation though.

    <a class="circle" id="myCircle" href="foo">Foo</a>
    a.circle {
      display:block;
      height:100px;
      width:100px;
      background-image:url(/path/to/circle.png);
      background-repeat:no-repeat;
      position:absolute;
      line-height:100px;
      text-align:center;
      }
    a#myCircle {
      top:234px;
      left:357px;
    }

    The class definition creates a set of attributes for all anchor elements that share the class "circle". The anchor with the ID of "myCircle" would then be positioned with the coordinates of 234,357 in pixels from the top left corner of the parent element with position:relative; set.

    +1 this is way better of a solution than the snarky one i had planned.

    Or the extremely simple method: make the entire flowchart an image... :-). But I am going to guess that you need to assemble the flowchart on the fly, and perhaps also move elements around within the browser.

    Sorry - I didn't say why I skipped the images completely. In the future elements on the diagram should be clickable / sortable / ... Right now I'm ok with :hover only, but I still want to be able to copy the text.

    In that case, you can still use HTML and PNG files. There are a variety of ways to do it, but, if you want the flowchart elements to be clickable, and have the text be selectable, you just need to use an anchor element - <a> - and use a background image for your decorative flowcharty elements, such as circles, triangles, arrows, clouds, etc.

    Flow diagram in html/css - Stack Overflow

    html css diagram
    Rectangle 27 0

    Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.

    Ok, can I ask to the awesome person who says this was not useful? can (s)he please told us why (s)he thinks this was not useful? I have delivered a small project using this and was so much fun to work with this one. I agree it is not super flexible but can be changed to suit your need.

    How to make a flowchart/diagram using only HTML and CSS - Stack Overfl...

    html css flowchart
    Rectangle 27 0

    ie7 not support media queries. If you want use media queries for old version ie you must use that or check this site media queries ie 7 -8

    the printout in IE10 produces exactly the same output as in IE7. I don't think, that here comes about some media queries, because in that case, in IE10 printout should work. And it doesn't work in 10.

    @MateuszMoroz - You're right, IE10 should work -- as long as it's in standards mode. It might not work if IE10 is in compatibility mode or quirks mode. You should check and make sure it's in standards mode.

    Guys, you were right. After disabling compatibility mode, the diagram is being printed. Although again it looks different, than in FF or Chrome (simply said: looks ugly) - it is being printed in proper page position and with all data. @mcmac, I'll check the links, that you attached. At least I know the reason now. Thanks for help!

    Hi Folks, The solution for me was adding mark media="print" to the include css formula: <link rel="stylesheet" type="text/css" media="print" href="css/styles.print.media.css"> Then the css for printing only are being included only in printing mode, as it is desired. The diagram is being printed (almost) correctly. Regards, Mateusz

    css - Printout of a html diagram in IE - Stack Overflow

    html css internet-explorer printing
    Rectangle 27 0

    display: inline-block;
    div.images img {
        display: inline-block;
    }

    Use HTML5 <figure> and <figcaption> Tags for get the names below:

    <!-- Figure with figcaption -->
    <figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
        <figcaption><b>NAME:</b> Caption for the awesome picture</figcaption>
    </figure>
    <figure>
    <div class="images">
    <figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
        <figcaption><b>NAME:</b> Caption picture</figcaption>
    </figure>
        <figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
        <figcaption><b>NAME:</b> Caption picture</figcaption>
    </figure>
            <figure>
        <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">    
        <figcaption><b>NAME:</b> Caption picture</figcaption>
    </figure>
    </div>
    .images figure {
        display: inline-block;
    }

    @user3478941 I'm glad I was able to help and don't forget to - TRY DEMO :)

    This is a well explained answer. However you should not be using floats for basic layout in 2014. Just make the image display: block.

    Im additionally a little disappointed that you didnt correct OPs spelling. imgages? Seriously?

    @Zaqx Thanks! I'll keep that in mind. :)

    html - Pictures Css diagram - Stack Overflow

    html css html5 css3
    Rectangle 27 0

    Technique without the use of float. Use display:inline-block to align the innnerdivs containing the image in a single line and add the image and text into the inner divs.

    html - Pictures Css diagram - Stack Overflow

    html css html5 css3
    Rectangle 27 0

    I believe the final mix is depends of the color and transparence of the circles, like:

    background-color: rgba(0, 0, 255, 0.4);

    @CodeMonkey: I proposed much elegant svg solution, based on d3 library.

    javascript - Creating a 3 circle Venn diagram with pure css/html - Sta...

    javascript html css3 svg css-shapes
    Rectangle 27 0

    Try canvas or canvas-based js libraries. You can combine any amount of elements with any type of effects.

    I currently have it built in canvas, but looking for something that's faster. Canvas doesn't work everywhere and it's limiting as I build upon it.

    javascript - Creating a 3 circle Venn diagram with pure css/html - Sta...

    javascript html css3 svg css-shapes
    Rectangle 27 0

    Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.

    How can I reverse engineer my JavaScript files with js/uml? - Stack Ov...

    javascript uml reverse-engineering