So I have a problem with my hiding/showing of DIVs without the use of JavaScript.
So basically, the moment you click on a link within the div that has been selected, the div will close and you won't be taken to that link.
The code is below. I am not using JavaScript for this so please don't give me that as a solution/suggestion. I am using Chrome, however I have tested with other browsers and it is a problem within them as well.
I've just filled it with some test data, but it functions exactly the same as with the live data. Just click on the heading, and try to click on the 'Google' link and you'll understand my problem.
If anyone can fix it, that would be great because I can't seem to do it. :/
<html>
<head>
<style>
.collapse > * + *{
display:none;
}
.collapse > *{
cursor:pointer;
}
.collapse:focus{
outline:none;
}
.collapse:focus > * + *{
display:block;
}
.collapse h1 {
background-color:#BF3131;
}
</style>
</head>
<body>
<div class="collapse" tabindex="1">
<h1 id="test">LOREM IPSUM</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
<div class="collapse" tabindex="1">
<h1 id="lol">Test</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
</body>
</html>
This was originally from : Show hide divs on click in HTML and CSS without jQuery
Unfortunately CSS3 doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.
CSS Selectors Level 4 support parent selectors but it wouldn't work on every browsers right now.
You can test it :
http://css4-selectors.com/browser-selector-test/
As you already figured out, this is some kind of timing problem. When you are clicking on the Link your div loses focus and the content collapses before the actual click action is triggered ...
I would use the checkbox hack for that kind of thing. Something like that maybe:
div {
outline: none;
cursor: pointer;
}
input {
display: none;
}
input:checked ~ p {
display: block;
}
label ~ p {
display:none;
}
h1 {
cursor: pointer;
background-color:#BF3131;
}
<div tabindex="1">
<input id="header-1" type="radio" name="headers">
<label for="header-1">
<h1 id="test">LOREM IPSUM</h1>
</label>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
<div tabindex="1">
<input id="header-2" type="radio" name="headers">
<label for="header-2">
<h1 id="lol">Test</h1>
</label>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
Related
This is my Vue code and I am using bootstrap-vue, I am using the sidebar inside the card body Ideally it should only appear inside the card-body but it's not working. How can I make it fit either inside the outer div or b-card body?
<template>
<div class="">
<div>
<b-card title="Card Title" body-class="text-center" header-tag="nav">
<template v-slot:header>
<b-nav card-header tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Inactive</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</template>
<b-card-text>
With supporting text below as a natural lead-in to additional content.
</b-card-text>
<b-card-body>
<b-sidebar visible="true" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img
src="https://picsum.photos/500/500/?image=54"
fluid
thumbnail
></b-img>
</div>
</b-sidebar>
</b-card-body>
<b-button variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
</template>
The sidebar wasn't really designed to be inside a container. but instead be used as an off-canvas menu for the entire page.
However, you can hack it a bit to fit your needs with a little CSS.
The sidebar is position: fixed by default, so that it is fixed to the viewport.
You need to change this to position: absolute, so that it will be positioned based on the closest parent that is position: relative. In this case that's the card.
In the snippet the sidebar goes over the title. If you want it only inside the body, all you need to be is wrap it in another element with position: relative
new Vue({
el: "#app"
});
body {
padding: 1rem;
}
.my-sidebar.b-sidebar-outer {
position: absolute !important;
height: 100% !important;
}
.my-sidebar .b-sidebar {
position: absolute !important;
height: 100% !important;
}
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<!-- The height is only here for the example -->
<b-card style="min-height: 300px;" class="overflow-hidden" no-body>
<b-card-header>
<b-card-title>Title</b-card-title>
</b-card-header>
<b-sidebar id="sidebar-1" title="Sidebar" shadow class="my-sidebar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
</p>
</div>
</b-sidebar>
</b-card>
</div>
I solved by modifying the style of the element by using JQuery where top': '60px' is going to be the hight of the navbar.
mounted() {
$('#sidebar-1').css(
{'top': '60px',
'opacity': '80%'
}
);
},
I have a (WordPress) page on which there are a list of different programs. On the left-hand side is a text description of the program and on the right is an image. Back in the day I would have used a table to make this happen:
<table>
<tr>
<td>Text goes here.</td>
<td><img src="myimage.jpg"></td>
<tr>
</table>
Now I am trying to align it w/out tables:
<p style="text-align: left">Text goes here.</p>
<img class="alignright size-medium wp-image-119" src="imageurl.jpg" width="300" height="199" />
<hr>
Problem is that if there isn't enough text, the image begins to take up space in the next program's section. Here is a screenshot:
You can see that the placeholder image is not remaining above the HR and beginning to slide into the next program's segment. How can I prevent this?
You can still use the table display model:
p {
display:table;
width:80%;
margin:auto;
}
p span {
display:table-cell;
vertical-align:top;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
<span><img src="http://lorempixel.com/300/199"/></span></p>
<hr/>
Personally, I would use ul and li to get the job done.
<ul id="program_list">
<li id="program_item" class="item01">
// HTML for program item goes here
</li>
<li id="program_item" class="item02">
// HTML for program item goes here
</li>
</ul>
Then you would use some CSS to set the width of the ul and make sure that each li is the full width, and does not float the next item, with this you could also so a border-bottom: to separate each program.
#program_list {
width: 600px;
}
#program_item {
width: 100%;
overflow: hidden;
float: none;
padding: 10px 0;
border-bottom: 1px solid #666;
}
Assuming you have already cleared your CSS initially; if not, you may have to add more CSS to style correctly.
Ok, I am new with CSS and this is just causing me trouble. How do I add a background color to multiple columns but not all columns.
I want one background color on span2 and a different color on span10. The problem I run into is issues with padding. When I apply the background to certain columns it won't have a nice even padding around the content. Does this make sense? How do I add a background to certain columns with nested columns and still maintain nice even padding?
HTML
<div class="row bg">
<div class="span10">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="sidebar">
<div class="hero-unit">
<h1>Join</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span5">
<div class="bot-pad">
<h2>We are Fun!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="span5">
<div class="right-pad bot-pad">
<h2>Learn more about yourself</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
CSS
.bg
{
background: url('/assets/img/grid.png');
.border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
padding-right: 20px;
}
.bot-pad
{
padding-bottom: 20px;
}
Explanation
So the bg class is applying the background. Then my nested columns have weird padding, so I went through and added classes like right-pad to the columns that need right padding and bot-pad to columns that need padding on the bottom. I know how incredibly wrong this is semantically, I just don't know how else to get my needed results. Thanks.
Here is another example of what I am trying to do... however they do not provide a solution either
https://github.com/twitter/bootstrap/issues/1446
It's not a good idea setting the background-color on the span# level. Why? Because span# is a positioning helper and if you change paddings or margins the entire grid will break.
So, what's the native Twitter Bootstrap element for rendering a coloured background wrapper? It's well.
How to use it?
First, insert the well element inside the span#:
<div class="span5">
<div class="well well-red">
<!-- Your content -->
</div>
</div>
And second, assign properties through an extension of the .well class (I've used .well-red):
.well-red {
background-color: #ff0000;
}
This way you have always available the parent class .well but you can apply different properties at will.
Whats' the best way to position? Float, Relative, Absolute?
Lets say I want to position something like this:
How do I position something like this and what's the best way to do it?
Float, Relative, Absolute?
If you want a fluid layout, use floats.
Positioning elements relative/absolute causes them to display as inline therefore a height/width is required and they then become non-fluid.
You would have to create a div that acts as a container
Then create three more divs one for the right side and two for the left side.
I have created a jSfiddle file for you to reference. Something quick I created
http://jsfiddle.net/wSp7F/
It all depends on which type of layout you are going for. Responsive, Fluid or Fixed.
HTML
<div id="container">
<div id="rightside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
CSS
#container {width:500px;position:relative;overflow:Hidden;outline:1px solid red}
.leftside {float:left;width:225px;margin:0 0 5px 0}
#rightside {float:right;width:200px}
.leftside,#rightside {outline:1px solid black;padding:5px}
There isn't a single best way, but here's how I'd do it.
http://jsfiddle.net/Wuj35/
HTML
<div id="wrapper">
<div id="div3">div 3</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</div>
CSS
#wrapper{
width:450px;
}
#div1,
#div2,
#div3{
float:left;
margin:1em;
padding:1em;
border:5px solid #000;
border-radius:8px;
}
#div1,
#div2{
width:150px;
height:75px;
}
#div2{
clear:left;
}
#div3{
float:right;
width:150px;
height:225px;
}
I have been trying to make a DIV box appear in front of the text/tables that I have on a webpage.
The DIV is made visible via a button press; but when visible it automatically moves the text/table downward and includes the DIV content above it.
Can anyone help?
You can use the stacking index of the div to make it appear on top of anything else. Make it a larger value that other elements and it well be on top of others.
use z-index property. See Specifying the stack level: the 'z-index' property and
Elaborate description of Stacking Contexts
Something like
#divOnTop { z-index: 1000; }
<div id="divOnTop">I am on top</div>
What you have to look out for will be IE6. In IE 6 some elements like <select> will be placed on top of an element with z-index value higher than the <select>. You can have a workaround for this by placing an <iframe> behind the div.
See this Internet Explorer z-index bug?
z-index only works on absolute or relatively positioned elements. I would use an outer div set to position relative. Set the div on top to position absolute to remove it from the flow of the document.
.wrapper {position:relative;width:500px;}
.front {
border:3px solid #c00;
background-color:#fff;
width:300px;
position:absolute;
z-index:10;
top:30px;
left:50px;
}
.behind {background-color:#ccc;}
<div class="wrapper">
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="behind">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<table>
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
It moves table down because there is no much space, try to decrease/increase width of certain elements so that it finds some space and does not push the table down. Also you may want to use absolute positioning to position the div at exactly the place you want, for example:
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
If you want to appear it over something, you also need to give it z-index, so it might look like this:
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
You may add a div with position:absolute within a table/div with position:relative. For example, if you want your overlay div to be shown at the bottom right of the main text div (width and height can be removed):
<div style="position:relative;width:300px;height:300px;background-color:#eef">
<div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
I'm over you!
</div>
Your main text
</div>
See it here: http://jsfiddle.net/bptvt5kb/
make these changes in your div's style
z-index:100; some higher value makes sure that this element is above all
position:fixed; this makes sure that even if scrolling is done,
div lies on top and always visible
Use the display property in CSS:
<body>
<div id="invisible" style="display:none;">Invisible DIV</div>
<div>Another DIV
<button onclick="document.getElementById('invisible').style.display='block'">
Button
</button>
</div>
</body>
When the the display of the first div is set back to block it will appear and shift the second div down.