I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?
Related
Hi I'm trying to vertically and horizontally center a grid div by using flexbox inside a another div with a background image. It goes to the top left.
.flex_center {
display: flex;
align-items: center;
justify-content: center;
background-color: coral;
opacity: 0.7;
width: 1300px;
height: 485px;
z-index: 0;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-rows: 161px 161px 161px;
grid-template-columns: 360px 940px;
background-color: coral;
}
<section class="hero">
<div class="flex_center">
<div class="grid">
<div class="grid-item-1"><img src="images/logo_hero.png" class="logo_center"></div>
<div class="grid-item-2">
<p class="center">KIA'PALANO SEAFOODS</p>
</div>
<div class="grid-item-3">
<p class="squamish">A Squamish tribal-owned seafood company <br> located along the Squamish River, B.C</p>
</div>
<div class="grid-item-4">
<div class="button">COME ON IN</div>
</div>
</div>
</div>
</section>
While I am open to any solution, counting tables, Bootstrap and Flexbox, a purely CSS solution using just div elements is greatly appreciated.
HTML
<div class="sentence-summary">
<div class="stat bookmarked">
<i class="fas fa-bookmark"></i>
<span class="count">999</span>
</div>
<div class="stat upvotes">
<i class="fas fa-thumbs-up"></i>
<span class="count">999</span>
</div>
<div class="stat downvotes">
<i class="fas fa-thumbs-down"></i>
<span class="count">999</span>
</div>
<div class="main">
<p>{{ $sentence->body }}</p>
</div>
</div>
SCSS
.sentence-summary {
div {
display: inline-block;
}
.stat {
width: 40px;
text-align: center;
span {
display: block;
font-size: 10px;
}
&.bookmarked {
background-color: red;
}
&.upvotes {
background-color: blue;
}
&.stat.downvotes {
background-color: pink;
}
}
.main {
background-color: green;
}
}
Current Result
Desired Result
I would recommend using a grid layout for this. You can specify that the first three columns (stats) should be 40px wide. And then use '1fr' to say that the 'main' sections should take up the remaining space. Using a grid means that the heights will stay the same.
You can use 'grid-column-gap' to specify the amount of space you would like between each column. Something like this:
.sentence-summary {
display: grid;
grid-template-columns: 40px 40px 40px 1fr;
column-gap: 5px;
grid-auto-rows: 40px;
}
Make sure you use the appropriate browser prefixes as this syntax isn't supported by all browsers. I usually use this auto-prefixer.
Update: Adding grid-auto-rows: 40px; makes sure your 'stats' stay square!
I've got a complex SVG that is the floor plan of a building. I'd like to create modal windows or popups that provide a small description of the different rooms in the building.
The question: how do I add a boostrap modal (or other popup) on click of a or inside the SVG? I've tried adding the modal code within a tag but that doesn't seem to be working.
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h" x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3" style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);">
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div id="section-h-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</foreignobject>
You have used wrong tag to trigger the Modal Know more about
foreignObject
Click Here
and your solution is
here
<svg>
<g>
<a xlink:href="#" class="btn-cta" >
<rect data-toggle="modal" data-target="#section-h-modal" id="section-h"
x="112.6" y="31.4" class="mapsvg-region" width="35.2" height="69.3"
style="vector-effect: non-scaling-stroke; fill: rgb(0, 125, 186);" >
</rect>
</a>
</g>
</svg>
<div class="overlay">
<div class="modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close-btn">x</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS
.btn-cta {
width: 120px;
display: block;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
background: #ccc;
color: #555;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
margin-top: -10%;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all 0.5s cubic-bezier(0.59, -0.17, 0.3, 1.67);
}
.overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.modal {
transform: translate(0px, -50px);
transition: all 0.7s cubic-bezier(0.59, -0.17, 0.3, 1.67);
position: relative;
padding: 30px;
width: 400px;
background-color: #ddd;
color: #231D23;
text-align: center;
overflow: hidden;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);
}
.modal .close-btn {
position: absolute;
padding: 3px 9px;
font-size: 24px;
text-align: center;
background: #ccc;
color: #9c9c9c;
top: -1px;
right: 0;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
JQuery
$(function () {
$('.btn-cta').click(function () {
$('.overlay').addClass('is-open');
return false;
});
$('.close-btn').click(function () {
$('.overlay').removeClass('is-open');
});
});
In most libraries, e.g., bootstrap or materialize, you can open modal dialogs via JavaScript codes. For this reason, please read their examples to find out, how to open it.
To allow click events on your svg elements, you have to know, that each of the svg elements is an ordinary dom element. That means, you can access it like a p tag or something similar.
For example, you have a circle in your svg with id circle01. To add an on-click-event, you can use:
$("#circle01").click(function (e) { ... });
via jQuery or
document.getElementById("circle01").onclick = function (e) { ... };
via pure JavaScript.
To understand the magic of svg, you have to know, that it is pure html ;)
I am trying to make a nice layout of items in a grid using a bin packing algorithm like packery or masonry. I Already have isotope installed so will use the packery plugin for that.
If you look at the example here http://codepen.io/desandro/pen/vdwmb this is exactly the kind of thing I need, but the problem I think I'm going to face is the content of the items are via a CMS.
<h1>Isotope - packery layout mode</h1>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
$('.grid').isotope({
layoutMode: 'packery',
itemSelector: '.grid-item'
});
Possibly more of a maths question, but Im assuming for packery to work the items all have to be of a size in relation to each other, ie in the example above all the items are multiples of the smallest item.
Is this assumption correct, and is there anything else i need to consider?
Dear fellow stackoverflowers,
I'm having a peculiar problem I can't seem to find the solution for.
I'm trying to apply the width of the largest div to the smaller divs, so that they appear equal in width, through flexboxing. Unfortunately, all the solutions so far have been futile efforts. Do you have any idea why the different divs in the example I've linked to won't display the same width as the largest element? I know the boxes get their width from the content, but I just can't seem to make them behave the way I want.
HTML
<section id="contact" class="wrapper bgfixed">
<div>
<h1>Contact</h1>
<div id="contactholder">
<a href="#">
<div>
<h1 class="icon-mail"></h1>
<h2>EMAIL</h2>
<p>someonesprofessionalemail#gmail.com</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-old-phone"></h1>
<h2>TELEPHONE</h2>
<p>39 88 49 92 91</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-facebook2"></h1>
<h2>FACEBOOK</h2>
<p>www.facebooooooooooooooooooook.com/snowman</p>
</div>
</a>
<a href="#">
<div>
<h1 class="icon-soundcloud"></h1>
<h2>LOREM IPSUM</h2>
<p>www.loremipsumyesyesyesblahblabhlabh.com</p>
</div>
</a>
</div>
</div>
</section>
CSS
a{text-decoration: none;}
#contact
{
width: 100%;
height: 82vh;
color: whitesmoke;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background: #34495e;
}
#contactholder
{
display: flex;
justify-content: space-between;
font-size: 80%;
}
#contactholder div
{
flex: 1;
flex-grow: 1;
font-size: 0.5rem;
}
#contactholder div h1
{
padding: 3rem;
letter-spacing: 0;
display: inline-block;
background-image: linear-gradient(white, 1%, #3498db);
border-radius: 100rem;
box-shadow: 0 1px 1px grey;
transition: 0.3s;
margin-bottom: -0.5rem;
}
#contactholder a:hover h1
{
background-image: linear-gradient(white, 1%, #00A4EB);
text-shadow: 0 1px 1px;
}
Hoping for some brilliant minds!
Best wishes,
Lodott1