Anyone know of any tricks to get the main content to move left (in my example) so it is lined up with the right drawer. I'm sure it has something to do with getting the absolute drawer outside of the overflow:hidden wrapper.
Here's the html, the css is in the jsfiddle example:
<nav>
<div class="header">
Title
</div>
<div class="content">
<ul>
<li>pizza</li>
<li>tacos</li>
<li>nachos</li>
</ul>
</div>
</nav>
<main>
<header class="rightnav">
<span class="left-nav">
toggle
</span>
<span class="content">
<input/>
link1 link2 link3
</span>
<span class="right-nav">
icon
</span>
</header>
<article>
<div class="header">header</div>
<div class="content">content</div>
</article>
<article>
<div class="header">header2</div>
<div class="content">content2</div>
</article>
<article class="detail">
<div class="header">header3</div>
<div class="content">content3</div>
</article>
</main>
I know it can be done if I break the right drawer outside of the main wrapper, just wondering if there are any techniques to get it to work leaving the html as is.
Related
While everything is working fine in Chrome and Firefox, I am having issues in IE displaying correctly the outline focus around the content of some anchor elements.
As you can see in the picture the focus outline is outside the box, in a collapsed status (it looks like a dotted line) and not around it like in the other browsers.
That part of my HTML:
<section class='section'>
<div class='container'>
<div class='row mb-lg'>
<header class='col-md-8 col-md-offset-2 text-center'>
<h2 class='heading-with-bullet'>
Box Tests
</h2>
</header>
</div>
<div class='row'>
<div class='col-sm-4'>
<a href='/tests/test1'>
<div class='test-box'>
<div>
Test1
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test2'>
<div class='test-box'>
<div>
Test2
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test3'>
<div class='test-box'>
<div>
Test3
</div>
</div>
</a>
</div>
</div>
</div>
</section>
Any idea about on how I could have the focus outline work as expected?
I've only been able to find suggestions on how to remove the outline altogether, which is not ideal for accessibility reasons.
I have a site I designed and coded that seems to cut off top and bottom on very specific devices that have short screens AND WILL NOT SCROLL. Any ideas on that I can do to keep the picture centered in the browser without any overlapping
Here's a link to jsfiddle:
https://jsfiddle.net/SCATORY/mjyssu7y/
<body>
<div id="container">
<div class="container">
<div class="nav">
<div class="logo"></div>
</div>
</div>
<div class="container holder">
<div class="center">
<div class="height">
<h1>Practice yoga. <br>In hypo-microbial style.</h1>
</div>
<div class="bag">
</div>
<div class="height-2">
<h2>Introducing ThePureBag™.<br>
The germ-resistant way to carry your yoga gear in style.</h2>
<div class="margin">
<button class="contact">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
<div id="grey">
</div>
</body>
Take the position:fixed off of the #container and take the position:absolute off of the .holder. This should make it work.
Position:fixed means that the element won't scroll.
I have some troubles with my footer on a website. Footer is not displaying at the bottom of the page but it starts right below the header and covers elements that are under it. For better understanding I made fiddle for it and screenshot
But its like this:
<div class="mens">
<div class="main">
<div class="wrap">
<div class="section group">
<div class="cont span_2_of_3">
<h2 class="head">PRIPOROČAMO</h2>
<div class="top-box">
and then there are some products and then there are the end divs for this:
</div>
</div>
</div>
</div>
</div>
</div>
And then follows the footer:
<footer class="footer-2 bg-midnight-blue">
<div class="container">
<nav class="pull-left">
<ul>
<li class="active">
Home
</li>
<li>
Company
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="social-btns pull-right">
<div class="fui-vimeo"></div><div class="fui-vimeo"></div>
<div class="fui-facebook"></div><div class="fui-facebook"></div>
<div class="fui-twitter"></div><div class="fui-twitter"></div>
</div>
<div class="additional-links">
Be sure to take a look to our Terms of Use and Privacy Policy
</div>
</div>
</footer>
And I know its a lot of code but I would really appreciate if someone could look at it. Thanks.
use this to reset ur css
.clearfix:before,.clearfix:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;clear: both;}
.clearfix {overflow: auto;zoom: 1;}
and add clearfix class in parent div where in child u have used float like in
<div class="page-wrapper clearfix">
<div class="main clearfix">
<footer class="footer-2 bg-midnight-blue clearfix">
I am trying to do a drawer menu for in my Firefox OS app, based in the Bulding Blocks from Firefox team:
http://buildingfirefoxos.com/building-blocks/drawer.html
At the moment I have a menu button that show and hide the menu, but I can not change to other page when the user click in a different item in the menu.
With this code I can see the Page 1 when the app start, but the page2 is no loaded when I select the button "page 2" in the menu
<section id="index" data-position="current">
<section data-type="sidebar">
<header>
<menu type="toolbar" />
</menu>
<h1>My Menu</h1>
</header>
<nav>
<ul>
<li>
page 1
</li>
<li>
page 2
</li>
</ul>
</nav>
</section>
<!-- Page 1 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 1</h1>
</header>
<article class="content scrollable header">
<section id="page1_list" data-type="list"></section>
</article>
</section>
<!-- Page 2 -->
<section id="drawer" class="skin-dark" role="region">
<header class="fixed">
<span class="icon icon-menu">hide sidebar</span>
<span class="icon icon-menu">show sidebar</span>
<h1>Page 2</h1>
</header>
<article class="content scrollable header">
<section id="page2_list" data-type="list"></section>
</article>
</section>
I have an example using buildingblock (draw)
https://github.com/marti1125/Earthquake
Try to copy this: https://github.com/marti1125/Earthquake/blob/master/css/app.css
I'm just starting a new app. Below is a basic mockup of what I am tasked to do.
I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav> and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid unacessary Div.
Use the Time Tag instead of Div for Time Element.
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName
<time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
FAQ
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>
In addition to #Simon Arnold's fine answer, I might also suggest that the <nav> usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element