Please have a look at this Image.
Here I was use the Bootstrap for aligning the divs. And created only one div. The Contents are added in this div dynamically from the admin side. then it will loop the div. That's Working fine.
But here you can see only 6 Contents are available. So 2 Divs are aligned in the left. I need these div should align in the middle of the Page. If the Contents are 7 or 5 the Second row Contents should be in the Middle. How to align these Divs Middle. Please Help me to Solve this Problem.
Here Is My Code..
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
Read More
</div>
</div>
Thank you in Advance.
Add display: inline to child div and text-align: center to the parent div. Don't use col-md of bootstrap because it have float: left propertive
.parent {
text-align: center;
}
.child {
display: inline-block;
width: 24%;
border: solid 1px #123;
height: 50px;
margin: 0 auto !important;
}
<div class="parent" id="parent">
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
You can use bootstrap to set an offset for each div dynamically depending on your div's desired position or set the margin of the divs to auto. See this post for a detailed explanation.
Related
first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>
Is it possible to modify the gutter and add a custom div inside the gutter lines div?
Example :
<div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 730px; width: 33px;">
<div class="ace_gutter-cell " style="height: 14px;">
<div class="customDIV"> </div>
</div>
</div>
no, normally you html inside gutter div will be overwritten by gutter.
I'm looking for a help with a small things to do on my CMS website.
I would like to know, if it's possible, how to to remove or hide styles from one div one a website while another div is active and only when this 2nd div is inside the first one.
I'm using easytabs jQuery plugin and easytabs html code is inserted in tinymce WYSIWYG HTML source editor, while <div class="block"></div> is generated from CMS, because it's a wrapper of content module.
Let me show you my code so maybe you can understand more what I want to do:
<div class="block">
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div id="tabs1-html">
<h2>HTML Markup for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-js">
<h2>JS for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-css">
<h2>CSS Styles for these tabs</h2>
<!-- content -->
</div>
</div>
</div>
<div class="block">
<div class="test">
</div>
</div>
Okay, so CMS is adding <div class="block"></div> with a styles
(thats are the styles):
#main .block {
border: 2px solid #e0e0e0;
padding: 24px 28px 24px 26px;
margin: 0 0 8px;
background: #ffffff;
text-align: justify;
overflow: auto;
}
And here comes the problem. I would like to remove or hide styles from this <div class="block"></div> element only while I have <div id="tab-container" class="tab-container"></div> inside this div <div class="block"></div>.
And I need to keep all the styles for <div class="block"></div> when I have other divs inside it.
Is it doable with some jQuery or JS ? Or it's not possible ?
Thanks in advance.
You can do this with the has() function within jQuery. You're going to have to reset or change each of the CSS values
$(document).ready(function() {
$('.block').has('#tab-container.tab-container').css('border', '0');
});
.block {
border: 2px solid red;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="some_tag">
Text
</div>
</div>
<div class="block">
<div id="tab-container" class="tab-container">Some more text</div>
</div>
You can do an array of CSS values as well if there is more than one that needs to be changed like so:
.css({ "border": "0", "background": "blue"})
Insteed of resetting or overwritte all block classes maybe it would be much easier to add:
$(document).ready(function () {
$('.block').has('div.tab-container').removeClass('block');
});
This way you will remove the block class so no styles.
JSFIDDLE
Was my title strong enough?
I want a DIV that goes a horizontal length of a page, then I want 6 divs inside of that that are grouped in 2 (info, pic) Where the group on the left is fastened to the wall, the group on the right is fastened to the wall, and the group in the center is exactly in the center.
Here's my code so far:
<div class="contactus.container">
<div class="contactus.left">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block" >
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.center">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block">
<img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div class="contactus.right">
<div><b>asdf</b></div>
<div><b>sadf</b></div>
<div>asdf</div>
<div>sadf</div>
<div>asdf</div>
<div>asdf</div>
<div>af</div>
</div>
<div class="content" style="display:inline-block;">
<img align="right" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 125px; height: 125px;" vspace="0" />
</div>
<div style="clear:both;"></div>
</div>
And here's the CSS:
.contactus.container {
width:100%;
text-align:center;
}
.contactus.left {
float:left;
width:100px;
}
.contactus.center {
display: inline-block;
margin:0 auto;
width:100px;
}
.contactus.right {
float:right;
width:100px;
}
.content {
display: inline-block;
vertical-align: top;
Getting al ittle frustrated now. All it does is have a line down the left side. All 6 divs.
First thing's first, you cannot use . inside your class name, as mentioned by #grammar in the comments (props to #Scot for copying it to an answer). When you make a reference to .contactus.left in your css, it will look for an element with two classes, like class="contactus left". For the divs you have with class names like contactus.left, you could either give them two separate classes, like <div class="contactus left"> or use a separator like an underscore or a hyphen, such as <div class="contactus-left">.
However, correcting that will not solve your problem. As for what you are trying to accomplish, I believe you mean to say that you want 2 groups of 3 (left, center, and right). To accomplish this, you will want each sub-div to have the display: inline-block style instead of just the center div, and to make sure the center div is actually centered on the page, you will want to divide up the width of the container amongst the three inner divs, and assign the appropriate text-align value to each.
See this fiddle.
You can manage the div sizing yourself, just assigning a percentage for the width of each div. Alternatively, there are css frameworks like foundation and bootstrap that help you manage your page layout with a grid system that basically uses percentages and inline-block elements, and provide you with intuitive class names to easily put your content where you want it.
I think you have named and formatted your classes incorrectly.
Try renaming the css classes like this:
.contactus_center {
display: inline-block;
margin:0 auto;
width:100px;
}
and your HTML like this:
<div class="contactus_center">
i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).