Make fully visible one element from overflow:hidden element - html

Please check http://jsfiddle.net/mtN6R/9/
.tooltip{
color:red;
}
.wrapper {
overflow:hidden;
height:50px;
border:1px solid black;
width:50px;
position:relative;
}
<div class="wrapper">
<div class='tooltip'>A big tooltip which should be visible fully</div>
A lot of text<br>
A lot of text<br>
</div>
I need .tooltip make fully visible but I can't take it outside wrapper. Can we stylize that example so .tooltip will be shown above wrapper and the rest content will stay as is?

I think what you want is to have just your content itself have overflow: hidden on it:
CSS:
.tooltip{
color:red;
}
.wrapper {
position:relative;
}
.inner {
overflow:hidden;
height:50px;
border:1px solid black;
width:50px;
}
HTML:
<div class="wrapper">
<div class='tooltip'>A big tooltip which should be visible fully</div>
<div class="inner">
A lot of text<br>
A lot of text<br>
</div>
</div>

Sure, give tooltip an absolute position and then move things around as needed as in this jsFiddle example
.tooltip{
color:red;
position: absolute;
top:0;
}
.wrapper {
overflow:hidden;
height:50px;
border:1px solid black;
width:50px;
margin-top: 20px;
}​

Related

Having trouble placing 2 divs side by side in wrapper

I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>

Can I have a non-clickable section of a link?

Hopefully simple enough, in the below example I want the blue section of the link to be clickable (as a link) but the red section not to be. I am planning to subscribe to the red section's onclick event after with Javascript.
Spent an hour on this and getting nowhere! Does anybody know how to do this?
.outer{
width:300px;
height:50px;
background-color:blue;
position:relative;
display:block;
color:white;
z-index:1;
}
.inner{
width:150px;
height:25px;
background-color:red;
top:0;
right:0;
position:absolute;
pointer-events:none;
z-index:2;
}
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
I thought the inner div having a higher z-index and no pointer events would do it, but doesn't seem to work.
Anybody have any ideas?
Instead of hacking the html like that, which is a very bad practice. Why not:
.outer {
background-color: red;
display: inline-block;
}
.inner {
background-color: blue;
width: 300px;
display: inline-block;
}
span {
display: inline-block;
}
<div class="inner">
Clickable
<span>Not clickable</span>
</div>
use preventDefault method.
$('.inner').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>

Centre div in remaining line space

I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!

remove right margin from an inline-block

I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/

Why is only the text clickable in this div?

I am trying to create a div that is a button by putting an anchor inside a div.
HTML
<div class="div1" style="width:300px;">
hello
</div>
CSS
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important;
}
JSFiddle: http://jsfiddle.net/BzFyS/
I think it is not working because osomething simple I am missing with positioning. Any tips?
Thanks
The simplest way: add this css:
.div1 a {
display: block;
}
That's it.
If you want the whole div be clickable (including the padding area):
.div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:0px; /* set to 0 */
border-radius:5px;
text-align:center;
background: #494949 !important;
}
.div1 a {
display: block;
padding:10px;
}
Demo: http://jsfiddle.net/BzFyS/2/
If you want the whole div to be clickable, you may do this :
HTML
<div id="div1" style="width:300px;">
hello
</div>
CSS
#div1 {
background-color:red;
color:white;
margin:5px;
border-width:5px;
border-style:solid;
padding:10px;
border-radius:5px;
text-align:center;
background: #494949 !important; /* do you really need that ? */
cursor: pointer;
}
JavaScript
document.getElementById('div1').onclick=function(){
// do something
}
But then you don't really need the a element.
Demonstration
Try to add to your CSS:
.div1 a {
display: block;
}
You have to put the tags around the div like this:
<a href="#"><div class="div1" style="width:300px;">
<p>hello</p>
</div></a>
This will work.
I am assuming you want this div to be a "button" yes?
The simple solution is to define the size of the <a> by using padding and display: block;
you can still define the colors, margins, and position of the <div>... but the clickable area is in the <a>