<header class="header header-home main-grid">
<div class="header-content">
<a class="logo-link" href="index.html">
<img src="logo.svg" alt="" class="logo">
</a>
<button aria-label="Open navigation" class="open-nav">☰</button>
<nav class="nav">
<button aria-label="Close navigation" class="close-nav">×</button>
<ul class="nav-list">
<li class="nav-item">
home
</li>
<li class="nav-item">
about us
</li>
<li class="nav-item">
contact
</li>
</ul>
</nav>
</div>
</header>
in this HTML - the main grid is on the header - than he creates another div header-content to hold the logo and navbar.
What I dont understand is how the children of header-content are still affected by the header parents main-grid.
Basically the way I'm reading this is that the div is a child to the header, and i thought that flexbox/grid only affected its direct children.
If the main-grid class is on the header - why is it still affecting the content of the div even though the content isnt a direct child to the main-grid?
Each parent will affect all of his children and all of his children's children, etc. In another word, if you know about inheritance, all of the nodes in HTML are inheriting the features of their parents by default.
You can overwrite a style or behavior of a child by specifying that in its own definition. For example, if the background of a parent is black, all of its children will have a black background unless you mention background-color:'white' in the definition of a child node.
Related
I am using grid for ul tag, but also want to make whole li clickable.
How is it possible?
<ul>
<li class="wedding-bouqette">
<a href="#">
<h3 class="bouqette-title">Свадебные букеты</h3>
<span class="bouqette-desc">Букеты для невест</span>
</a>
</li>
This is probably really dumb but my body is covering all my elements rendering everything unclickable...I fixed this before but I forgot how.
https://codepen.io/Tehan123/pen/VgdRBQ
`<body>
<section class="Body-Wrapper">
<div class="Page-Wrapper-First">
<img class="logo" src="https://image.flaticon.com/icons/png/512/776/776541.png"</img>
<nav>
<ul class="nav-menu">
<li>Features </li>
<li>How It Works </li>
<li>Pricing </li>
</ul>
<div class="dropdown">
<button class="menu" src="https://image.flaticon.com/icons/svg/149/149176.svg"> </button>
<div class="dropdown-content">
Features
How It Works
Pricing
</nav>
<section class="hero">
<div class="hero-text">
<h1> Creates 'a place beyond time' for its guests.</h1>
</div>
<img class="hero-image" src="https://images.pexels.com/photos/1320686/pexels-photo-1320686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"</img>
</section>
</div>
</section>
</body
>
`
You have a negative z-index on your body. Whenever elements have a negative z-index they're not clickable and everything as a child of body will be the same. You need to set a value greater than 0.
This is the last 3 lines of your CSS
body {
z-index: -3;
}
UPDATE
Also it seems like you have a z-index: -2 on .Body-Wrapper. You should use a value greater than 0.
When you remove/change these two values it might look like your page is broken, it's because you have a bunch of negative z-index value in other places. You need to change those to positive as well.
Tab Index for Absolute-Position Elements
For the time being, lets assume I wrote the code below:
<header class="header hap" [ngClass]="authority">
<div class="header-inner">
<div class="header-identity">
<a id="theLogo" class="logo" [routerLink]="[links.home]" title="Navigate to Home">
<img src="assets/logo-white.svg" alt="Logo">
</a>
<span class="client-logo" *ngIf="user.brandingImage && !user.isTheAdmin()">
<img class="brandingImage" [src]="user.brandingImage" [alt]="user.brandingName" onerror="this.style.display='none'">
</span>
[ more links ]
</div>
<nav class="main-nav for authenticated" [ngClass]="{'active':showMenu, 'app-only':!isCurrPageAdminApp()}">
<button class="menu" (click)="toggleMenu()">Menu</button>
<div class="main-nav-flyout" *ngIf="showMenu">
<div class="nav-header">
<ul>
<li>
<a id="main-nav-profile" [routerLink]="['/profile']"><span class="icon icon-user2"></span> My Profile</a>
</li>
[ more dropdown items ]
</ul>
<a id="main-nav-close" class="close"(click)="onClickMenuClose()"><span class="icon-cross"></span></a>
</div>
<div class="nav-body">
<ul *ngIf="isCurrPageAdminApp()" class="main-nav-list">
<li class="current-app">Administrative Tools</li>
<li><a id="main-nav-xAdmin" *ngIf="user.isTheAdmin()" [routerLink]="['admin/x']">X Admin</a></li>
[ more links ]
<li>
<span>Reports</span>
<ul>
<li class="user-status"><a id="main-nav-userStatusReport" [routerLink]="['admin/reports/userStatus']">User Status</a></li>
[ more links ]
</ul>
</li>
</ul>
<ul class="app-list" *ngIf="user.userApplications">
<li *ngIf="showTheLink()">
<a id="app-list-type" [routerLink]="['/']">
...
</a>
</li>
[ more links ]
<li *ngFor="let application of user?.userApplications">
<a id="app-list-{{application.abbreviation}}" *ngIf="!isAdminApp(application)" (click)="onClickMenuItem(application)">
{{ application.title }}
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="user-nav for authenticated" role="menu">
<span *ngIf="user.brandingName" class="user-location">{{user.brandingName}}</span>
<span *ngIf="user.brandingName" class="pipe">|</span>
<a id="user-nav-profile" class="user-name" [routerLink]="['/profile']">
<span class="name">{{user?.firstName}} {{user?.lastName}}</span>
</a>
<a id="user-nav-logout" class="logout" [routerLink]="['/', 'logout']">Log out</a>
</nav>
</div>
</header>
Issue
Various elements -- probably .header-inner > * -- are styled using position: absolute;, so the tabindex-order is skewed for elements which are declared later in the markup but positioned geometrically earlier in the layout.
Question
Is there a way to force the tabindex to be, say, all natural indices (0) except for 2 items that need to be switched -- in a scalable way while not having to implement tabindex for every new item in the layout?
The short answer is no, it's not possible to switch only two elements without at least adding tabindex to every element in the flow that has to be focused before those two elements.
All elements with positive tabindex will be focused first in an incremental way, or in their source order if they have the same value, and all elements with default value or zero will be focused last.
So if you have 6 focusable elements and you want to have elements 5 and 6 to be focused after elements 1 and 2, you need something like this:
<input type="text" tabindex="1">1</input>
<input type="text" tabindex="1">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>
In general having the source order match the flow is the easiest way to make it work.
There is one particular case that is simpler. If the elements you want to move happen to be the first elements that need focus on your page, then in that particular case you can put the tabindex only on those elements.
For instance, if we wanted elements 5 and 6 be the first elements on the page, and everything else after them, all you need to do is this:
<input type="text">1</input>
<input type="text">2</input>
<input type="text">3</input>
<input type="text">4</input>
<input type="text" tabindex="1">5</input>
<input type="text" tabindex="1">6</input>
So in general, if the elements you want to change order are in the header, and they are the first things that should be focusable on your page, it should be easy to rearrange them and let the rest of the page flow naturally.
If the elements had to be last you are out of luck, you should either:
Put them last in the markup so they flow naturally
Remove them from the flow with tabindex=-1 and let the user focus manually
I am facing a big css problem
I made a MDI system in html/jquery.
Inside the window clientzone I add html code with an ajax request and the use of the append method.
All is working fine.
My problem is about the code Inside the client zone.
You can see it here : http://jsfiddle.net/2P4Mb/1/
<div id="windowClientZone" style="height:300px; background-color:red; overflow:hidden;">
<div id="ajaxHtmlAppendedCode">
<h1>Title</h1>
<div id="ContentToBescrolled" style="overflow:scroll; background:yellow;">
<ul id="MediaExplorer" class="gallery">
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
<!-- ... -->
<li class="DraggableItem">
<div/>
</li>
<li class="DraggableItem">
<div/>
</li>
</ul>
</div>
</div>
I have a content made with two parts : a title, and a wrap panel based upon an UL with floating.
I want the ul control to be scrollable and the title stay always visible.
i tried a lot of things with overflow/position asbolute but i not able to find a solution.
the ul zone is always greater than the window client zone.
Is there a way of making that easily ?
Thanks for your help
I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!