I am attempting to nest some divs. Each div is a unit which contains a right div and a left div. The left div can contain more units or single non-child units. Basic tree structure. However, I can't seem to get the css to work for what I'm going for.
I've created a js fiddle for it, listed below. The code is also below. I've also included a picture of what I'm going for. Any help is appreciated. I am open to jquery/javascript solutions.
JSFiddle
http://jsfiddle.net/atsFA/
HTML
<div id="main">
<div class="inmain">
<div class="inleft">
<div class="inthing">
Thing THing Thing X
</div>
<div class="inmain">
<div class="inleft">
<div class="inthing">
thing2 thing2 thing2 X
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
2
</div>
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
1
</div>
</div>
</div>
CSS
#main{
width:600px;
height:600px;
background-color:grey;
position:relative;
}
.inmain{
width:100%;
border:2px solid black;
position:relative;
height:100%;
}
.inleft{
background-color:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
}
.inright{
background-color:green;
position:absolute;
width:20px;
right:0px;
top:0px;
}
Image for Reference
I have used nested classes and nth-child or nth-of-type basing on your html structure.
Bear in mind I have used padding-bottom: 22px to take into account of your 2px border.
You can try:
#main{
width:600px;
height:600px;
position:relative;
}
.inmain{
width:100%;
position:relative;
height:100%;
}
.inmain:nth-of-type(2){
border:2px solid black;
position:relative;
height:100%;
width:96%;
}
.inmain:nth-child(1) .inleft{
background:white;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
background:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:0;
}
.inmain .inleft .inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:0;
}
.inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:22px;
}
Check this DEMO: http://jsfiddle.net/atsFA/12/
Using the below JQuery method with the css worked. The 22px less on the width is to account for a scroll bar, if one is used.
function setConstructSizes(element) {
//Set split group heights
element.find(".inthing").each(function () {
var hR = $(this).parent().parent().children(".inright").first().height();
if (hR > $(this).height()) {
$(this).height(hR);
}
});
//Set width of all inner lefts
element.find(".inleft").each(function () {
var p = $(this).parent();
var w = p.width();
$(this).width(w - 22);
});
//Set height of all inner rights
element.find(".inright").each(function () {
$(this).height($(this).parent().height());
});
}
.inmain
{
position:relative;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.inleft
{
position:relative;
}
.inright
{
text-align:center;
border-left:1px solid black;
border-right:1px solid black;
width:20px;
position:absolute;
right:0px;
top:0px;
}
Related
I want to make this image( [1]: https://i.stack.imgur.com/avuBI.png) with css but my problem is middle part help me with that part
This is my code:
body{
background:#09042A;
}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
right:75px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
}
#middle{
top:95px;
left:175px;
height:110px;
width:50px;
border-radius:50%;
background:#09042A;
z-index:2;
}
<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>
My current situation is like this picture:https://i.stack.imgur.com/uXo1j.png
I appreciate your help
You can add middle div and right-circle and set proper css for it, like below example:
body{
background:#09042A;
}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
left:175px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
overflow: hidden;
}
#middle{
top:0;
left:-99px;
height:150px;
width:150px;
border-radius:50%;
background:#09042A;
z-index:2;
}
<div id="left-circle"></div>
<div id="right-circle">
<div id="middle"></div>
</div>
for this challenge, you can insert a separate oval for the middle part.
<html>
<head>
<style>
body{
background-color:#09042A;
display:flex;
justify-content:center;
align-items:center;
}
.l-circle{
width:150px;
height:150px;
background-color:#7B3F61;
border-radius:100%;
position:relative;
left:25px;
}
.r-circle{
width:150px;
height:150px;
background-color:#E78481;
border-radius:100%;
position:relative;
right:25px;
}
.m-circle{
width:85px;
height:80px;
background-color:#09042A;
border-radius:0 100px 0 100px;
position:absolute;
transform:rotate(48deg);
left:223px;
}
</style>
</head>
<body>
<div class="l-circle">
</div>
<div class="r-circle">
</div>
<div class="m-circle">
</div>
</body>
</html>
you can make a separate oval for the middle
You have draw that in the middle with two elements like two cutted circles wich are put together. Its not possible with one element but maybe
mix-blend-mode
will help you?
<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>
<style>body{background:#09042A;}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
left: 150px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
mix-blend-mode: screen;
}
</style>
Hi everyone i have one question about jquery textcomplete.
I think this is easy but i don't know how can i do that.
I created this DEMO without jquery
So what is my question. I want when i write in textarea open parenthesis ( then .textBox div automatically open.
How can i do that anyone can tell me?
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
CSS
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
You can do something like this.
UPDATED
$(document).ready(function(){$('#textarea').keyup(function(){
if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
});
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
See the Working Fiddle Using regex instead of several conditions :
JS :
$(function(){
$('#textarea').keyup(function(){
if($(this).val().match(/([(]$)/g)){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
})
Is there any way to find out how much someone has scrolled when the content is in a container div with position:relative. I can only seem to get scroll position using JavaScript or JQuery when position is set to absolute, but this disrupts the site layout. Is there any solution to this?
doesn't seem to have any problem in fiddle: http://jsfiddle.net/dQ69u/
#container{
position:relative;
overflow-y:scroll;
width:400px;
height:400px;
background-color:#CCC;
}
#scrollable{
position:relative;
width:80%;
margin-left:10%;
height:1000px;
background-color:#000;
}
or even in this one: http://jsfiddle.net/dQ69u/1/
#container{
position:relative;
overflow:hidden;
width:400px;
height:400px;
background-color:#CCC;
}
#scrollable{
position:relative;
width:80%;
margin-left:10%;
height:1000px;
background-color:#000;
}
#scrollBox{
position:relative;
overflow-y:scroll;
width:80%;
margin-left:10%;
height:400px;
}
The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.
The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}
The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck