How to make several elements overlap using display flex - html

First, my code:
<main class="main">
<h1 class="title">A title here</h1>
<h2>Another Element Here <span id="subtitle"></span></h2>
<h3 id="thirdtitle">h3 el here</h3>
<div class="overlay" id="one">An alert message here!</div>
<div class="overlay" id="two">
Another alert message here
</div>
<div class="overlay" id="three">A third alert message here, relaunch? <span id="startappagain">Click me </span></div>
<div id="gridelement" class="grid"></div>
</main>
1st question:
I'm using display flex, flex-direction column and justify-content: center and align-items: center on main, I made some interactions on gridelement using JS and "one", "two" and "three" are just alerts so their visibility is set on hidden, and sometimes, they become visible for 1 second when there's an error during the interaction with the JS in the gridelement element.
But when using visibility, unlike display: none, they still take up normal space so there's blank space between h3 and gridelement most of the time, so I would like to have the three elements overlap to minimize the blank space. I've tried playing around with positions which is tricky with display flex. Any idea for something clean? Thanks!
Additional question:
I was also thinking of having the messages just overlap the grid, but since I'm using flex on the grid elements as well, it would just mess up the whole design of the gridelement elements if I had them in the grid (especially that there's nothing in gridelement initially, everything is created in my JS), any idea how I could just make the messages appear in the middle of the screen? They stay there for a second anyway.
Thanks!

I would suggest you to use max-height property along with visibility like this:
.overlay {
max-height: 1000px;
}
.overlay.hidden {
max-height: 0;
visibility: hidden;
}

Related

Unexpected distortion in flex-box

I have a three even columns using flexbox. In CodePen it looks more clear: https://codepen.io/pixy-dixy/pen/KKVwvoQ
Here is the code:
.rowIdeas {
text-align: center;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.columnIdeas {
flex-basis: 25%;
}
.maxSize {
max-height: 300px;
}
<!-- about ideas section start -->
<div class="rowIdeas">
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/philosophy.svg">
<h2>Item one</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
<div class="idea columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/idea.svg">
<h2>item two</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).
</div>
</div>
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/results.svg">
<h2>item three</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
</div>
<!-- about ideas section ends -->
The code works fine here and in CodePen, but when I put the same code in my landing page, I see this:
As you see the first one goes a bit upper than others.
Any idea what the problem is?
The problem is that the svg images are differnt proportions. So the one on the left is actually shorter, so the title doesn't drop as low as the others. You'll have to either give them a specific height, remake it so they're all the same height, or otherwise account for the varying sizes.

Button doesn't work with .pull-left (Bootstrap)

My buttons don't work when I put .pull-left. I tried using the W3C validator on the document, but no problem detected.
Here's the code.
Because you've made .secondline display as block and are positioning it, it's "covering up" the button.
You can keep it block level, but instead of positioning along an axis, try positioning with line-height.
.secondline {
width: 100%;
z-index: 1;
display: block;
line-height: 24px;
}
However, I think it's a better end result to use the grid system for this. Below is an example of what you could do using the content from your first result. (Of course, you would need to add your code and content)
<div class="row">
<div class="col-xs-12">
V ➜ GARE CORNAVIN (21:44)
</div>
</div>
<div class="row">
<div class="col-xs-6">
Button
</div>
<div class="col-xs-6 text-right">
19 minutes
</div>
</div>
You're dealing with HTML structure issue rather than a Bootstrap issue. One of your HTML elements appears to be covering the button. It appears as though it's your "time" span. I would recommend trying to restructure your HTML with your button in a div class and the minutes in another div class. You have a lot of span elements there that could probably be eliminated to simplify your markup.
Another solution is to increase the z-index of the covered element, your code is no longer linked but try adding style="z-index:2147483647" to the parent of the element with .pull-left

Aligning responsive divs

I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>

Twitter Bootstrap - Hide Column then Center Column

Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.

Need help creating a layout with DIVs

This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.