I am trying to create a responsive box in twitter bootstrap exactly like this:
Now, I have created a coloumn:
<div class="col-lg-4" style="border-style: solid;">
<h2>Title</h2>
<p>Data</p>
</div>
Giving border to all of this doesn't work. What would be the best way fellas?
Something like this maybe? Demo
HTML
<div class="row">
<div class="col-lg-4">
<h2 class="title">Python Native Datatypes</h2>
<div class="box">
<ul>
<li>Data</li>
<li>Data</li>
<li>Data</li>
</ul>
</div>
</div>
CSS
.box {
border: solid 1px #000;
padding: 10px;
z-index:0;
position: relative;
width:90%;
margin: -20px auto 0 auto;
}
.box li {
list-style: none;
}
.title {
background:green;
z-index:1;
position: relative;
padding: 5px;
text-align:center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
font-weight: 200;
}
Related
I'm woring in this carousel, i'm using bootstram, and OWL Carousel : http://owlgraphic.com/owlcarousel
what i need to do is, make the clicked button taller, and in front of the image, like in the attached images.
HTML
<!-- owl carousol start -->
<div id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="sync1" class="owl-carousel">
<div class="item">
<h1>Atentos, despiertos, <br/> llenos de energía</h1>
<img src="images/slider.png"/>
</div>
<div class="item">
<h1>Atentos, despiertos, <br/> llenos de energía</h1>
<img src="images/slider.png"/></div>
<div class="item">
<h1>Atentos, despiertos, <br/> llenos de energía</h1>
<img src="images/slider.png"/></div>
<div class="item">
<h1>Atentos, despiertos, <br/> llenos de energía</h1>
<img src="images/slider.png"/></div>
<div class="item">
<h1>Atentos, despiertos, <br/> llenos de energía</h1>
<img src="images/slider.png"/></div>
</div>
<div id="sync2" class="owl-carousel">
<div class="item"><h1>Un nuevo amanecer</h1></div>
<div class="item"><h1>Conoce Expo Digital</h1></div>
<div class="item"><h1>Expo Priority</h1></div>
<div class="item"><h1>Expo Gold</h1></div>
<div class="item"><h1>Expo at work</h1></div>
</div>
</div>
</div>
</div>
</div>
And the CSS
#sync1 .item{
background: #0c83e7;
padding: 0px 0px;
margin: 0px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item{
background: #fff;
padding: 10px 0px;
margin: 0px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
border-radius:0px;
margin-left:-5px;
border-left:1px solid #91c04e;
border: 1px solid red;
}
#sync2 .item:nth-child(6){
border:0px;
}
#sync2 .item h1{
font-size: 18px;
font-family: HelveticaNeueLight;
color:#9ac55d ;
}
#sync2 .synced .item{
background: #9ac55d;
color: #fff;
}
#sync2 .synced .item h1{
color: #fff;
font-family: HelveticaNeueLight;
}
#sync1 .item h1{
font-family: HelveticaNeueLight;
font-style: italic;
position: absolute;
width: 98%;
text-align: right;
font-size: 48px;
}
#sync1 .item img{
width: 100%;
}
.owl-item .item img{
width:100%;
overflow:hidden;
}
.owl-theme .owl-controls .owl-buttons div{
display:none;
}
.owl-wrapper{
width:1000px;
}
.owl-theme .owl-controls{
margin:0px;
}
#sync2{
z-index:9999999999999;
margin-top:0px;
}
#sync2 .synced .item{
color:#1c6f42;
border-right:1px solid #91c04e;
height: 55px;
margin: -10px 0px 0px 0px;
z-index: 99999999;
}
#sync2 .item{
color:#91c04e;
height:45px;
}
#demo .full_width{
max-width:100%;
overflow:hidden;
}
#sync2 .item a:active{
color:red;
height:55px;
background-color: white;
margin: 10px 1px 1px 1px;
z-index: 9999999;
}
What i need is to get this button taller and in fron of the main image.
that's why i'm coming here, because i had not found a solution in other palce.
This is the way i'm doing it:
and this is the way i need it working.
So i'm trying a lot of cases, but i still don't found the way to do it.
thank you for your help!
In css3 you have the scale propertie :
.item:hover{
transform: scale(2);
}
will make the hovered item 2 times bigger.
.item a:active{
transform: scale(2);
}
Feel free to ask if needed
I have some divs.
I am using a Grid system and I cannot for the life of me figure out how to stop divs from pushing others down.
When I try to set the margin top to say 50px for the border div it pushes everything else down.
I do not want to use position absolute due to being responsive grid system.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
margin-top: 100px;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top:;
}
<div class="cover">
<div class="grid">
</div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
</div>
On the border div, you can remove the margin and add:
position: relative;
top: 50px;
Seems to me that the problematic margin is here:
ul {
margin-top: 100px;
}
Remove or shrink that and add your margin to .border as intended.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top: 50px;
;
}
<div class="cover">
<div class="grid"></div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
Try using:
position: relative;
top: 50px;
Here is a pen: http://codepen.io/anon/pen/GpyMKp
For your border div. This is a way to move an element from it's usual position without affecting the other divs.
Although I feel like you would be better off just reducing the margin-top on your ul element, and you could achieve the same layout without it being a sort of "hacky" solution.
I am trying to align multiple divs (buttonNav) to the bottom of a container div (lowerNav). I have read every question on here regarding this and tried the CSS and it does not seem to work. I tried this one: Stacking Divs from Bottom to Top amoung others, hoping someone can help.
Here is my html, I have 5 of the lowerNav containers each with multiple buttonNavs that I want to align to the bottom of the lowerNav here is the code from one, they are all set up the same way:
<div class="lowerNav">
<img src="image/contact-us.gif" width="126" height="27" alt=""/>
<p>Ready to get more information or contact us directly?</p>
<div class="buttonNav">
<p>Order Literature</p>
</div>
<div class="buttonNav">
<p>Downloads</p>
</div>
<div class="buttonNav">
<p>Email Sign-Up</p>
</div>
<div class="buttonNav">
<p>Meet Your Rep</p>
</div>
<div class="buttonNav">
<p>Ask a Question</p>
</div>
</div>
Here is my CSS:
.lowerNav {
width: 160px;
height: 325px;
background-color: #e3dfd7;
border: 3px solid #383431;
float: left;
margin: 15px 8px 0px 8px;
text-align: left;
display: table-cell;
vertical-align: bottom;
}
.lowerNav p {
padding: 5px 12px 12px 12px;
}
.lowerNav img {
padding-top: 12px;
}
.buttonNav {
background:url(image/button-lowerNav.jpg);
width: 160px;
height: 45px;
display: inline-block;
}
.buttonNav p {
text-align:center;
padding-top: 14px;
}
.buttonNav a {
color: #fff;
font-size: 13px;
text-decoration:none;
font-weight:700;
}
.buttonNav a:hover {
color: #fff;
font-size: 13px;
text-decoration:underline;
font-weight:700;
}
Since the container (.lowerNav) has a fixed height and you know the size of its content this is quite easy to do with absolute positioning.
HTML:
<div class="outer">
Hello up here!
<ul class="inner">
<li>Hello</li>
<li>down</li>
<li>there!</li>
</ul>
</div>
CSS:
.outer {
position: relative;
height: 200px;
}
.inner {
position: absolute;
bottom: 0;
}
Check this CodePen for a live example of this code: http://codepen.io/EvilOatmeal/pen/fCzIv
Im trying to display 4 pictures with a title, description and a delete link on it. I cannot get the link to float right in the box I have.
here's the html
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info alignright">Delete</span>
</div>
</div>
</div><!--end container -->
here's the css
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
The html of the picture box gets repeated 3 more times. How can I get the third span link float to the left? Any help would be great.
Adding margin-top: -29px; should achieve this.
DEMO http://jsfiddle.net/4RZJx/1
HTML:
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Delete</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete</span>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
clear: both;
float:left;
}
.alignright {
float:right;
margin-top: -29px;
}
First of all, where are you using .alignleft in your code provided?
Secondly, the .alignright span has two classes: img-info and alignright. For img-info you have display-block. This is redundant, as the float property will make an element display-block.
All you need to do is add overflow: hidden to your main div (image-container). The float applied to the link makes it act as though it's not in the same "layer". Adding overflow-hidden will fix this problem. Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/
Try this really quick fix, however, you may want to modify the widths and such:
DEMO: http://jsfiddle.net/4RZJx/
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<div class="info-container">
<div class="alignleft">
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright">Delete
</span>
</div>
</div>
</div>
</div><!--end container -->
CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.info-container{
overflow: hidden;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
Use text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
float is better used for when you want a image to go to the right, and want text to flow around it etc. As it also cause other layout problems, you might as well try text-align.
http://jsfiddle.net/4RZJx/3/
I'm trying to use twitter bootstrap to create Facebook like tooltip layout.
I would really appreciate if someone could let me know how can I use twitter bootstrap to create this layout, I don't need it as tooltip, I need it in regular div.
I've attached picture the represent what I'm looking for.
Here's my take on that box using the twitter bootstrap framework. Had to modify some span widths in order to conform to your image sizes but i used an id to target them so they won't bother other span* classes throughout your page design.
I put it up on a jsFiddle since its quite a bit of code so check it out: demo here, edit here.
CSS:
body {
margin:50px;
}
#box {
border: 1px solid #92959C;
width:290px;
padding-top: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 4px 0px #ccc;
-moz-box-shadow: 0px 0px 4px 0px #ccc;
box-shadow: 0px 0px 4px 0px #ccc;
}
#box .row {
margin-left: -10px;
}
#box [class*="span"] {
margin-left: 10px;
}
#box .span0 {
width:32px;
margin-left:1px;
}
#box li.span0:first-child {
margin-left: 0;
}
#box .span1 {
width: 96px;
}
#box .span2 {
width:165px;
margin-left:10px;
}
#box .span2 p, .span2 a {
font-size:12px;
margin:0;
}
#box .span2 h4 {
font-size:13px;
line-height:10px;
}
#box .span1 img {
width:96px;
height:96px;
}
#box .img-list {
margin:0;
padding:0;
list-style:none;
}
#box-footer {
margin-top:10px;
width:290px;
border-top:1px solid #aaa;
}
.gray {
background-color:#F2F2F2;
padding:10px 10px 20px;
min-height:20px;
}
HTML:
<div class="container">
<div class="row">
<div id="box" class="span4">
<div class="span1">
<img alt="" src="http://placehold.it/96x96">
</div>
<div class="span2">
<h4>Omer</h4>
<p class="muted">AI Lead at New brand analytics</p>
64 mutual friends
<ul class="img-list">
<li class="span0">
<img alt="" src="http://placehold.it/32x32">
</li>
<li class="span0">
<img alt="" src="http://placehold.it/32x32">
</li>
<li class="span0">
<img alt="" src="http://placehold.it/32x32">
</li>
<li class="span0">
<img alt="" src="http://placehold.it/32x32">
</li>
<li class="span0">
<img alt="" src="http://placehold.it/32x32">
</li>
</ul>
</div>
<div class="row">
<div id="box-footer" class="span4">
<div class="gray">
Friends
</div>
</div>
</div>
</div>
</div>
</div>