I practice css on zengarden.
I want something like this, but with no h3 column.
HTML
<div class="preamble" id="zen-preamble" role="article">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
<abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr>
support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the
<abbr title="World Wide Web Consortium">W3C</abbr>,
<abbr title="Web Standards Project">WaSP</abbr>
, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
I also try.
.preamble :not(h3){
display: flex;
}
I got this.
Maybe It's because of abbr inside p tag.
Is there a way to achieve what I want?
It seems CSS columns could fit here. If the heading should span the whole width, you can set the column-span property.
You may also need to style the paragraph to your liking (e.g. adjust margin).
See MDN Multiple-column layout for more information.
.preamble {
columns: 3;
}
h3 {
column-span: all;
}
<div class="preamble" id="zen-preamble" role="article">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
<abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the
<abbr title="World Wide Web Consortium">W3C</abbr>,
<abbr title="Web Standards Project">WaSP</abbr> , and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
You need remove h3 from that div for centered it
.preamble {
display: flex;
}
h3{
text-align: center;
}
<h3>The Road to Enlightenment</h3>
<div class="preamble" id="zen-preamble" role="article">
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
<abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the
<abbr title="World Wide Web Consortium">W3C</abbr>,
<abbr title="Web Standards Project">WaSP</abbr> , and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
Related
I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community.
I have an image I'm trying to center in bootstrap. It's in a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is .img-responsive. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.
The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that.
I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my src, that the image is a .jpg, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the <img...> from the container and row, and assigning ... class="centered-block" .... Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning.
PS - totally unrelated, but my <a ...></a> tags don't seem to be clickable. If anyone has any ideas there, that would be great too.
It turns out the basic issue is that CodePen relies on Bootstrap 4, not (as I had assumed) Bootstrap 3.
You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.
Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.
Working Example:
#media (max-width: 480px) {
h1 {
font-size: 5vmax;
}
h2 {
font-size: 3.5vmax;
}
h3 {
font-size: 2.5vmax;
}
li {
font-size: 2.5vmax;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<h1 class="text-primary">Dr. Clair Cameron Patterson</h1>
<h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
</div>
</div>
</div>
<h3>Academics</h3>
<ul>
<li>Undergraduate, Grinnell College</li>
<li>PhD, University of Chicago</li>
<li>Researcher, California Institute of Technology</li>
</ul>
<h3>Brief Timeline</h3>
<ul>
<li><strong>1956</strong>: found the earth to be 4.55 Billion years old using lead-lead dating and
a fragment of a metorite that fell in Arizona. This calculation has been largely undisturbed since.</li>
<li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
<li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
systems.
</li>
<li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
is likely he was a major antecedant of this change.</li>
</ul>
</div>
I jus got the following PSD design:
(sorry about the grid line in between , that blue line really is not needed.).
Now i was wondering with all there html5 tags , what would be a great and semantic markup to code the above design , iám usually a guy who goes old school and uses div and spans , but this time i used cite , when i read the MDN doc's there seems to still be no clarity weather a name/designation can be used in cite , basically the way look at cite is , it a tag to be used only when you have a definitive resource to be added to you markup. Even though neither name nor designation is a definitive resource, i came up with the following markup.
<div class="testimonia-details">
<img src="img/res/p1.png" alt="testimonial giver">
<p>
<span>Brian</span>-May 2015
<span>Managing Partner.<cite>Tammy Lenski LLC</cite></span>
</p>
</div>
can anybody tell me what would be a more semantic way to code the testimonial details ? Thank you , i would greatly appreciate any help or guidance, i have always wonder what would be a semantic markup especially for a scenario like above.
Using schema.org metadata
<div class="testimonia-details" itemscope itemtype="http://schema.org/Person">
<img src="img/res/p1.png" alt="testimonial giver" itemprop="image">
<p>
<span itemprop="name">Brian</span>-May 2015
<span itemprop="jobTitle">Managing Partner.<span itemprop="worksFor">Tammy Lenski LLC</span></span>
</p>
</div>
I'm currently building a WebApp with the following structure :
However, I'm not often developping for Web, and I would like to know what HTML tags I should use to enclose the different sections of the app.
Should I use <header> tags for the header bar, <nav> for the menu, <aside> for the notifications and <article> for the body, or something else? (I'd appreciate it too if you can give me some kind of skeleton for this)
I don't think anyone actually does it any standard way, but I really recommend looking into smacss -- scalable and modular architecture for css. https://smacss.com/book/type-layout It's a great philosophy on how to organize and name css/html.
Following smacss, you will divide your content based on header, footer, and article. whereas navigation is a child element of either header or article, so you can either choose to use the tag (if the navigation will remain constant throughout your entire web structure), or if it'll be flexible and changing, you should stick to labeling the navigation a class or id, and not use the tag itself (this is to ensure you can reuse as much css as possible... read the entire smacss article for more on reusing css and further reading on oocss -- object oriented css)
Yes, I believe you are on the right track.
Personally, I'd use
<header id="site-header">
<nav id="menu">
<section id="main">
<aside id="notifications">
While your use of article is not wrong for sectioning, I like to think of layout as the division of a page into sections. And then, within the main section, there may be many articles - possibly with their own headers, footers, sections etc.
I also like to use ids for each important part of the page - on top of making the content semantics even clearer, id also makes it much easier (and faster) to find and select them using JavaScript.
Just a minor note: I'd avoid calling the main content section "body" simply for the reason that it can be confused with the <body> tag.
Just use them like you have listed above. It's worth just referring to this handy guide to ensure your chosen tags work cross browser (See and for an example).
There is no wrong or right answer.
The use of the HTML5 tags such as header,nav,footer,aside,section can help you and other developers better understand your structure .Here is sample . you can go to the link to see how it is used !
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<header>
<h1>Here is <span>HTML5</span> Page</h1>
</header>
<nav>
<header>
Navigation menu
</header>
<ul>
<li><span>Blog</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<header>
<h1>Blog posts for April 2012</h1>
</header>
<article>
<header>
<h1>Information about this example</h1>
This example is a modified version of http://netstream.ru/htmlsamples/html5-blog/index.html
</header>
<p>Try to move the mouse on different elements. The structure will be highlighted and you will be able to see the different inclusions of elements one in each other. If you move the cursor to this sentence, it will be highlighted in dark grey, showing the presence of an <article> element, surrounded by a <section> element (light grey), etc. So we have some articles in a single section element. The page title at the top is a <header> element, while the tag cloud on the right is a <aside> element. The main menu on top (with Blog, About, Contact) is a <nav> element.</p>
<figure>
<img src="http://www.fredcavazza.net/files/2009/09/html5_structure.png" alt="Example of HTML5 structuring tags" />
<figcaption>
Fig. 1 : an example of how new structuring elements could be used. This page put a <nav> on top, and does not have headers and footer for each article, like in this figure, but it could... By the way, this is a <figcaption> inside a <figure> element...
</figcaption>
</figure>
</article>
<article>
<header>
<h1>History</h1>
</header>
<p>Work on HTML 5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML 4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.</p>
<p>In early 2004, some of the principles that underlie this effort, as well as an early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera at a workshop discussing the future of Web Applications on the Web. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution.</p>
<p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort. A public mailing list was created, and the drafts were moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specifications.</p>
<p>In 2006, the W3C expressed interest in the specification, and created a working group chartered to work with the WHATWG on the development of the HTML 5 specifications. The working group opened in 2007. Apple, Mozilla, and Opera allowed the W3C to publish the specifications under the W3C copyright, while keeping versions with the less restrictive license on the WHATWG site.</p>
<p>Since then, both groups have been working together.</p>
</article>
<article>
<header>
<h1>HTML vs XHTML</h1>
</header>
<p>This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.</p>
<p>The in-memory representation is known as DOM5 HTML , or the DOM for short.</p>
<p>There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.</p>
<p>The first such concrete syntax is HTML5 . This is the format recommended for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an HTML5 document by Web browsers.</p>
<p>The second concrete syntax uses XML, and is known as XHTML5 . When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an XHTML5 document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the HTML5 syntax.</p>
<p>The DOM5 HTML , HTML5 , and XHTML5 representations cannot all represent the same content. For example, namespaces cannot be represented using HTML5 , but they are supported in DOM5 HTML and XHTML5 . Similarly, documents that use the noscript feature can be represented using HTML5 , but cannot be represented with XHTML5 and DOM5 HTML . Comments that contain the string -> can be represented in DOM5 HTML but not in HTML5 and XHTML5 . And so forth.</p>
</article>
</section>
<aside>
<h1>Tag cloud</h1>
<ul class="tag-cloud">
<li>ajax</li>
<li>apple</li>
<li>css</li>
<li>firefox</li>
<li>google</li>
<li>html</li>
<li>internet explorer</li>
<li>iphone</li>
<li>css3</li>
<li>ipod</li>
<li>javascript</li>
<li>jquery</li>
<li>mac</li>
<li>opera</li>
<li>rss</li>
<li>html5</li>
<li>web</li>
<li>web 2.0</li>
<li>web-??????????</li>
<li>windows</li>
<li>yahoo</li>
<li>youtube</li>
</ul>
</aside>
<footer>
<p>© 2009 Some blog</p>
</footer>
</body>
</html>
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>
Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?
<div class="yui3-u-1-3" id="logo">
... content
</div>
or
<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>
Regards,
Castle
I consider best practice to use ID's on the purely layout specific HTML.
eg.
#outer-container
#wrapper
#sidebar
Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.
There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):
ID selectors are slightly faster in your CSS
ID selectors are more efficient as hooks using JS
Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout
I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..
<div class="yui3-u-1-3 logo">
content
</div>
or
<div class="yui3-u-1-3">
<h5 class="logo">logo goes here</h5>
</div>