I have an HTML page and I am trying to fix the print layout issues on all of the browsers. Here is the code
<style type="text/css">
#media print {
* {
overflow: visible !important;
}
body {
height: auto;
color: #000;
background: #fff!important;
}
nav, aside {
display: none;
}
a-page {
float: left;
margin: 0;
box-shadow: 0;
page-break-inside: avoid;
widows: 3;
orphans: 3;
}
#header, #menu, #sidebar{ height:1px; display:none;}
#page {
size: A4 portrait;
}
ul.grid-container {
margin: 0;
padding: 0;
}
}
body {
background: rgb(204,204,204);
}
a-page {
width: 21cm;
height: 29.7cm;
background: white;
display: block;
margin: 1cm auto;
}
ul.grid-container {
border:0px dashed black;
width:100%;
vertical-align: middle;
text-align: center;
table-layout: fixed;
list-style-type: none;
padding-left: 0;
margin-top: 0
}
ul.grid-container .container {
border: 1px dashed black;
width: 49.7%;
height: 100%;
float: left;
position: relative
}
p.fcards {
padding-left:10px;
padding-right:10px;
text-align:center;
}
p.fc_sm {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1em;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
p.fc_md {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 1.5em;
}
p.fc_lg {
padding-left:10px;
padding-right:10px;
text-align:center;
font-size: 2em;
}
.size_4x2 .grid-container li{
height:7.4cm;
}
</style>
<body class="size_4x2">
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
<a-page>
<ul class="grid-container">
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
<li>
<div class="container"><p class="fc_sm"><span>test</span></p></div>
<div class="container"><p class="fc_sm"><span>test</span></p></div> </li>
</ul>
</a-page>
</body>
https://jsfiddle.net/lajin/myf8nfpk/
When I see print layout
On Chrome it add an extra page before each page
On FF the page loads fine but margins on top is different on first pages
IE there is Huge bottom margin as it shrinks to fit the screen
Any suggestions on how to fix the print page issues?
Thank you for you help in advance.
Most of your problems have been caused by inefficient usage of margins, padding and borders. I solved this problem by first stripping away the irrelevant code by removing class definitions that were never called upon and removing lines that I knew or suspected were not influential, test running the new code after each removal to ensure no difference was made to the performance of the page.
My next step was to add the following CSS code to the beginning of the CSS component...
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
By default borders are not included in the defined dimensions of an area and are instead added to the outside of the area. By using box-sizing : border-box; at the highest level you force each area's borders to be included within it's area.
The default behaviour of margins and padding can also be a cause of much hidden grief. By setting them to 0 at the highest level you can then afford to ignore them until such time as you know they are going to be needed for a specific class or id definition, at which point you would define them as per normal.
Next, I changed the line -
margin: 1cm auto;
to -
margin : auto;
As your file is currently coded this has the effect of making it appear as if large amounts of padding surround the A4 sheet which can look fine on-screen, but it is still included in the printed area which can cause poor layout when printing. There are a few ways of getting around this problem. I would suggest regarding a-page as the A4 area and adding within that div a second div such as a-page-text-area wherein would be placed the actual text. For now I am using margin : auto; to keep the page centred horizontally and using buffer regions to separate the pages vertically.
Finally, with the class definitions ul.grid-container .container and ul.grid-container you are relying on one definition to overwrite the properties of another. In more complex programs this can lead to errors occuring in some circumstances. As a matter of good practice I recommend placing all shared property definitions within a common class or classes and all peculiar property definitions in an id. Please note that when opening a div code such as class = "container-grid container-all" can be used to apply the attributes of more than one class to that div.
The complete code that I used to fix your problem follows...
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0"
>
<style type = "text/css">
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}
#media print
{
#page
{
size : A4 portrait;
}
.a-page
{
float : left;
page-break-inside : avoid;
}
body
{
background : #fff!important;
}
}
body
{
background : rgb( 204, 204, 204 );
}
.a-page
{
background : white;
display : block;
height : 29.7cm;
margin : auto;
width : 21cm;
}
.buffer-region
{
min-height : 20px;
}
.container
{
border : 1px dashed black;
width : 50%;
}
.fc_sm
{
font-size : 1em;
left : 50%;
margin : 0;
position : absolute;
top : 50%;
transform : translate(-50%, -50%);
}
.grid-container
{
list-style-type : none;
width : 100%;
}
.grid-container .container
{
float : left;
height : 100%;
position : relative;
}
.size_4x2 li
{
height : 7.4cm;
}
</style>
</head>
<body class = "size_4x2">
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
<div class = "buffer-region">
</div>
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
</body>
</html>
If you have any questions or comments, then please feel free to ask / make them.
Related
I'm redesigning the fixtures section of our football teams page at the moment and would like to add functionality for clicking on the fixutre (most likely the date) and it then 'expands' and shows details of the fixture.
The details to be shown include kickoff time, sponsors and scorers etc....
I will be modifying the previous code for the actual expanding but for the life of me I can't work out why the Div to display this is being confinded to the width of the first div within the li tag.
The div is after the closing of the li so I though that would have stopped that happening. Hopefully makes sense, code below:
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</li>
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
<!--Next Fixture-->
<li>....</li>
What I would like it to look like would be:
(No expanded)
July 7th Nairn County 1 Inverness 3 Friendly
July 14th Nairn County 1 Nairn St Ninian 2
(Expanded)
July 7th Nairn County 1 Inverness 3 Friendly
Kickoff: 1930
Match Sponsor: ......
....
July 14th Nairn County 1 Nairn St Ninan 2
July 15th ...............................
.......
How it currently looks.
July 7th Nairn ..........
Kickoff:1
930
Match Spo
nsor(s): M
adeup spon
sor
I would like the fixture info div to be the same width as the li not the first within.
Any help appreciated.
UPDATE
Have moved the div within the li tag. I am getting very different results from the suggested answers. I think this is because the previous div's are being display as table-cell to keep everything the same, inline-block knocks this out.
I've uploaded images of what is happening.
1st is inline-block styling.
2nd is the details moved inside the li tag.
3rd is how I would like it to be and how it is normally. I would like the
fixture info to the same with as the who fixture (date, fixture and type).
Simple solution:
use display: inline-block; to force those divs in the same line. Since div by default have display: block which will take the whole line.
.cell {
display: inline-block;
}
use toggleClass from jQuery:
$(document).ready(function() {
// Slide
$('ul > li').click(function() {
$(this).next('.fixture-info').toggleClass('collapsed').slideToggle('fast');
});
});
And hide all sub section first using css:
.fixture-info {
background-color: lightgray;
display: none;
}
$(document).ready(function() {
// Slide
$('ul > li').click(function() {
$(this).next('.fixture-info').toggleClass('collapsed').slideToggle('fast');
});
});
.fixture-info {
background-color: lightgray;
display: none;
}
.cell {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</li>
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">....</div>
111.........
</div>
<!--Next Fixture-->
<li>
<div class="cell"><span><a> 2222 July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>222 Friendly</span></div>
</li>
<div class="fixture-info">
<div class="kickoff">222 Kickoff: <span>1930</span></div>
<div class="match-sponsor">....</div>
2222.........
</div>
</ul>
Move the
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
inside the li
then use something like
var li = document.getElementsByTagName('li');
li.addEventListener('click', expandFunction);
function expandFunction() {
this.classList.add('expanded');
}
//SCSS
li {
height: auto;
.fixture-info {
height: 0;
transition: all 0.25s ease-out;
}
&.expanded {
.fixture-info {
height: 80px; //height value of expanded box
}
}
}
Here's a pure html+css solution if you're not too familiar with javascript. The only downside to using the show/hide checkbox maneuver is having to label each one of your label/inputs so they don't have to toggle one another ( see html, toggle1, toggle2, etc).
Outside of this I'd recommend the the 'toggleClass' jQuery solution from the other answer.
ul {
list-style: none;
margin: 0 0 20px;
}
ul li {
color: #2B91AF;
margin: 0 0 10px;
}
ul li span a,
ul li span[class*='-score'] {
color: red;
}
ul li .cell {
display: inline-block;
}
input[type=checkbox],
ul li .fixture-info {
display: none;
}
input[type=checkbox]:checked+.fixture-info {
display: block;
}
<ul>
<li>
<label for="toggle1">
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</label>
<input id="toggle1" type="checkbox">
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">Match Sponsor: ....</div>
</div>
<li>
<li>
<label for="toggle2">
<div class="cell"><span><a>July 7th</a></span></div>
<div class="cell">
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
</div>
<div class="cell"><span>Friendly</span></div>
</label>
<input id="toggle2" type="checkbox">
<div class="fixture-info">
<div class="kickoff">Kickoff: <span>1930</span></div>
<div class="match-sponsor">Match Sponsor: ....</div>
</div>
<li>
</ul>
Don't put any elements between the "li" tags
Here is a possible way of organizing the HTML
<ul>
<li>
<div class="cell"><span><a>July 7th</a></span>
<span>Nairn County</span>
<span class="h-score">0</span>
<span>Inverness Caledonian Thistle</span>
<span class="a-score">3</span>
<span>Friendly</span>
</div>
<ul>
<li>
<div class = "fixture-info">
<div class = "kickoff">Kickoff: <span>1930</span></div>
<div class = "match-sponsor">....</div>
.........
</div>
</li>
</ul>
</li>
<!--Next Fixture-->
<li>....</li>
<ul>
This is my Problem : I'm making a website and when I try to resize it the divs that I added (which are empty) stop scaling my whole website after a certain point. This is very basic but I'm not sure what's going wrong.
html-
<body>
<!-- navbar 01 starts here -->
<nav class = "navbar navbar-inverse col-lg-12">
<div class = "container">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class = "navbar-header">
<button class = "navbar-toggle collapsed"
data-target = "#defaultNavbar1"
data-toggle = "collapse"
type = "button">
<span class = "sr-only">
Toggle navigation
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
</button>
<a class = "navbar-brand" href = "#">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id = "defaultNavbar1"
class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li>
<a href = "#">
Home
</a>
</li>
<li>
<a href = "#">
Contact Us
</a>
</li>
</ul>
<form class = "navbar-form navbar-left"
role = "search">
<div class = "form-group">
</div>
</form>
<ul class = "nav navbar-nav navbar-right">
<li>
<a href = "#">
Support
</a>
</li>
<li>
<a href = "#">
Get Started
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<!-- empty div 1 -->
<div class = "index-section01">
</div>
<!--empty div 2-->
<div class = "index-section02">
</div>
<!--image-half-way-logo to home-->
<div class = "index-logo01">
<a href = "index.html">
<img class = "img-responsive"
alt = ""
src = "images/3logo_home.png"
width = "1360"
height = "138"/>
</a>
</div>
<!--empty div 3-->
<div class = "index-section03">
</div>
<script src = "js/jquery-1.11.2.min.js"
type = "text/javascript">
</script>
<script src = "js/bootstrap.js"
type = "text/javascript">
</script>
</body>
And the css code...
body
{
background-image : url(images/Final_Web_Home.jpg);
background-repeat : no-repeat;
background-size : cover;
}
.index-section01
{
min-width : 100%;
padding-bottom : 500px;
padding-right : 127px;
padding-top : 500px;
}
.index-section02
{
min-width : 100%;
padding-bottom : 770px;
padding-top : 600px;
}
.index-section03
{
min-width : 100%;
min-width : 0px;
padding-bottom : 578px;
padding-top : 833px;
}
.index-logo01
{
display : block;
padding-bottom : 85px;
padding-left : 132px;
padding-right : 0px;
padding-top : 224px;
}
.navbar-default
{
background-color : #FFE016;
padding-top : 17px;
}
.navbar-inverse
{
background-color : #FFE016;
}
This is done on the dreamweaver platform.
You are using bootstrap.
You put all the content inside <div class="container">
From the documentation:
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
So, yes, it stops getting wider when you hit the maximum width of your container. That's the point of that class.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I'm currently programming a view, that contains two list elements that can move information between each other. Here's a picture of how it currently looks:
I supposedly have in the page a lot of space to the right of the table "CodigoAGrupador" for the table "Catalogos" to fit in, and it used to do so, but when I added the scrollbars, suddenly, they can only be together vertically, never horizontally.
Here's the CSS code:
#products {
float: left;
width: 500px;
}
#cart {
width: 400px;
right: 0px;
top: 0px;
float: right;
max-height: 600px;
overflow-y:auto;
margin: 2px,2px,2px,2px;
overflow-x: auto;
}
#ListaCodigos{
max-height:600px;
width:500px;
overflow-y:auto;
margin: 2px,2px,2px,2px;
overflow-x: auto;
}
And here's the code that I use for the html view (it contains logic that I use to dynamically create the lists, that part shouldn't be the issue)
<div id="content">
<div id="ListaCodigos">
<h2 class="ui-widget-header">CodigoAgrupador</h2>
<div id="products">
<div id="catalog">
#foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
{
if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
{
<h3>#c.CodigoAgrupador - #c.NombreCuenta</h3>
<div>
<div class="subcatalog">
#foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
{
if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
{
<h4>#c2.CodigoAgrupador - #c2.NombreCuenta</h4>
<div>
<div class="SpecificCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
<div class="GeneralCatalog">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
}
}
</div>
</div>
</div>
<div id="cart">
<h2 class="ui-widget-header">Catalogos</h2>
<div class="ui-widget-content">
#foreach (LedgerChartOfAccounts c in Model.Catalogos)
{
if (c.CodigoAgrupador == null)
{
<ul>
<li class="draggable">#c.GLAccountNumber - #c.GLAccountName </li>
</ul>
}
}
</div>
</div>
<div>
<footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
</div>
</div>
It probably is a very simple issue, but I couldn't find any specific answer to my problem and I already have struggled for quite a while. Any help is welcome.
You can just float:left the menu and ListaCodigos to get it to pull up. Make sure that content is wide enough to hold them both on one line however.
However, then after menu div you will want to add a <div style="clear:both"></div>
Here is my code:
a) I have a row of buttons at the top formatted horizontally as such:
HTML:
<ul class="nav">
Work
Volunteer
Education
Skills
References
Images
</ul>
b) I have div blocks each displaying a paragraph:
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
c) I want the CSS to not display the jobs div yet:
.jobs {
display: none;
}
d) Now that I hover over the first button I want the jobs div to display:
.button1:hover+.jobs {
display: block
}
e) Repeat for all other div sections
.volunteer {
display: none;
}
.button2:hover+.volunteer {
display:block
}
You will need to markup HTML differently.
.jobs, .volunteer {
display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
display: block;
/* position the divs under the navigation links */
position: absolute;
top: 120px;
}
<ul class="nav">
<li>
Work
<div class="jobs">
<h2>h2 jobs</h2>
<h3>h3 jobs</h3>
<h4>h4 jobs</h4>
</div>
</li>
<li>
Volunteer
<div class="volunteer">
<h2>h2 volunteer</h2>
<h3>h3 volunteer</h3>
<h4>h4 volunteer</h4>
</div>
</li>
<li> Education</li>
<li> Skills</li>
<li> References</li>
<li> Images</li>
</ul>
This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<!-- and so on... -->
</div>
The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):
#details > div {
/* to hide the eleemnt(s) initially: */
display: none;
}
#details > div:target {
/* to show the relevant element once the relevant link is clicked: */
display: block;
}
#details > div[id]::after {
content: attr(id);
}
#details > div {
display: none;
}
#details > div:target {
display: block;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<li> Education
</li>
<li> Skills
</li>
<li> References
</li>
<li> Images
</li>
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<div id="education"></div>
<div id="skills"></div>
<div id="references"></div>
<div id="images"></div>
</div>
With plain JavaScript, on the other hand, it can be achieved with:
// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
// caching the 'this' element:
var self = this,
// finding the div element with a class equal to the href of the 'a' element
// (though we're stripping off the leading '#':
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
// if the event we're responding to is 'mouseover' we set the display of the
// found div to 'block', otherwise we set it to 'none':
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');
// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
// adding the same event-handler for both mouseover and mouseout:
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
function toggleRelevant(e) {
var self = this,
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
var links = document.querySelectorAll('li a');
[].forEach.call(links, function(linkElem) {
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
div[class] {
display: none;
}
div[class]::before {
content: attr(class);
color: #f00;
border: 1px solid #f00;
padding: 0.2em;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<div class="volunteer">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<!-- and so on... -->
I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :
$('.buttonX').hover(
function() {
// Styles to show the box
$('.boxX').css(...);
},
function () {
// Styles to hide the box
$('.boxX').css(...);
}
);
It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS
I am trying to recreate the Windows 8 application menu ( the new "start menu" )
My goal is to have square divs with a descriptive text next to it, the column splits itself up when it reaches a certain point ( something I have yet to determine but Iv'e come quite far with this )
In other words: I am trying to make a column that goes down and splits itself into 3 columns automatically and beginnen at the left side again after it has reached the end of the wrapper width.
as you can see in my JFIDDLE Iv'e made something that comes quite close.
http://jsfiddle.net/Qq98X/
Stil I can't seem to find the correct solution for this.
Mainly because i cannot use NTH-CHILD etc properties because it is meant to work on IE7
<html>
<head>
<style>
.mp-submenu {
margin-bottom: 1px;
position:relative;
}
.mp-submenu ul{
max-width:500px;
max-height:300px;
list-style:none;
}
.mp-submenu ul li{
float:left;
}
#triple li { width:30.333%; }
.mp-submenu-square-dg,
.mp-submenu-square {
float:left;
margin: 5px 0 5px 0;
padding:5px;
width:50px;
height:50px;
background-color: #8D8D8D;
}
.mp-submenu-square-dg:hover,
.mp-submenu-square:hover {
background-color: #F17B0A;
}
.mp-submenu-square-dg {
background-color: #696969;
}
.mp-submenu-headletter {
margin: 5px 0 5px 0;
font: normal 27px arial;
text-align: left;
vertical-align:bottom;
width:50px;
height:50px;
color: black;
display:inline-block;
background-color:none;
float:left;
}
.mp-submenu-headletter-desc {
padding-top:35px;
font: normal 12px arial;
}
</style>
</head>
<body>
<article class="mp-submenu">
<ul id="triple">
<li>
<div class="mp-submenu-headletter">A</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">4</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">5</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">B</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-headletter">C</div>
</li>
<li>
<div class="mp-submenu-square">1</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">2</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
<li>
<div class="mp-submenu-square-dg">3</div>
<div class="mp-submenu-headletter-desc">Beschrijving</div>
</li>
</ul>
</article>
</body>
Add this:
#triple li:nth-child(3n+1) {clear:both}
This will cause every third item beginning from the first to clear the float and start a new row.