I cannot figure out what I am missing here. (Head included for bootstrap reference.)
<head>:
<!-- Bootstrap Complete CSS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></script>
<!-- Bootstrap Complete JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Complete JavaScript Bundle -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
Problematic code:
<!-- TopGrid -->
<section id="TopGrid">
<div class="row">
<div class="TopGrid-Box col-lg-4">
<img class="Mask" src="Images\Mask Icon.png" alt="Lineart Face Mask">
<h2>Masks</h2>
<p>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Hands" src="Images\Hand Cleaning Icon.png" alt="Lineart Hand Sanitizer">
<h2> Hands</h2>
<p>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
throughout the day.</p>
</div>
<div class="TopGrid-Box col-lg-4">
<img class="Surface" src="Images\Surface Cleaning Icon.png" alt="Lineart Cleaning Spray">
<h2> Surfaces</h2>
<p>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</p>
</div>
</div>
</section>
I am not getting columns at all. Removing the images doesn't affect it, adding a container doesn't affect it, adjusting screen size does not affect it. I'm sure I'm missing something simple, but I don't know what it is.
(There is no CSS currently written for this code, except for the inline bootstrap.)
Related
I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
I can't get glyphicons to show up. Currently, a small square shows up instead of the glyphicon. I've tried moving folders, etc. I didn't do custom bootstrap - I just downloaded the whole thing, so there shouldn't be any errors/anything missing. Here's my code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Welcome!</h2>
<p>
</p>
</div> <!-- heading div -->
</div> <!-- row -->
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="interests">
<span class="glyphicon glyphicon-camera">
</span>
<h4>People</h4>
</div> <!-- interests divs -->
</div> <!-- column divs -->
</div> <!-- row -->
</div> <!-- container -->
Am I missing something at the top that needs to be included to get the fonts to show up? In the head, I have a link to the bootstrap.min.css - should I be linking to anything else?
I'm guessing its's not showing for 2 possible reasons:
1. You have not installed the fonts
2. You have not added the font folder hence bootstrap cannot load the glyphicons.
fonts----a folder containing fonts
css------a folder containing bootstrap css files.
index.html-----this file should link to the href="css/bootstrap.css" which intern calls the fonts files
You may check the following images (2 images).
Or, you can check those fonts.
https://github.com/twbs/bootstrap/tree/master/dist/fonts
Hope it helps.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.