I have this problem with an aligning issue. I am building this responsive site using twitter bootstrap and my client wants me to align bottom some content from two different spans lik this:
He wants the grey box on the right in the right span4 to align bottom with the flexSlider on the left in the other span4. How can this be achieved? i cant use margin on the right side since the upper content is dynamic and can be much longer. i have tried using a relative positioned wrapper and absolutely positioned it but thet width of the grey box and everything gets all messed up when trying to resize the browser window to a smaller size..Any other way to go besides absolute positioning?
Here is the markup:
<div class="span8">
<div class="row section professionIntro">
<div class="span4">
<div class="flexslider section">
<ul class="slides">
<li>
<img src="img/slide1.png" alt="slide 1" />
</li>
<li>
<img src="img/slide2.png" alt="slide 2" />
</li>
<li>
<img src="img/slide3.png" alt="slide 3" />
</li>
</ul>
</div>
</div>
<div class="span4">
<p class="intro">Som dataingeniør jobber du med systemutvikling og drift av maskiner eller systemer.</p>
<ul class="infoExpand">
<li class="expandVideo">
<h2 class="videoSign">Video dataingeniøren hverdag</h2>
</li>
</ul>
</div>
</div>
Appreciate any help..
Add css responsive:
http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css
If is button position:absolute is converting position:static;
.videoSign {
position : static;
bottom:auto;
top:auto;
left:auto;
right:auto;
}
Example: http://jsfiddle.net/sEryj/
Related
I am using wt-rotator carousel plugin with bootstrap. I have to place a menu on top of the carousel on the top left, in a fixed position. The menu should stay there even as the images fade in and fade out. Is there a way to do it using CSS?
Edit: added the code below.
So far just this code below. it is a bootstrap jumbotron, which has a wt-rotator carousel inside. On top of this carousel, I have to put a menu.
<div class="jumbotron">
<div class="container">
<div id="banner-container">
<div class="wt-rotator">
<div class="c-panel">
<div class="thumbnails">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="buttons">
<div class="prev-btn"></div>
<div class="play-btn"></div>
<div class="next-btn"></div>
</div>
</div>
</div>
</div>
</div>
You can use a outside div with position absolute and z-index superior to the slider, and put that div on front of the slider.
I'm trying to create a layout with bootstrap 3 and am finding an odd property:
here is the code:
<div class="jumbotron">
<div class="container center-form panel admin">
<div class="col-md-12">
<ul class="list-unstyled" ng-repeat="app in apps | filter:query ">
<li>
<h4> <a ui-sref="/api/admin/{{app._id}}">{{app.name}}</a></h4>
<div style="width:100%">
<p class="pull-right"><small> Job ID: {{app._id}}</small></p>
<p>Appointment Date: {{app.appointment_date | date:'fullDate'}}</p>
</div>
<br>
<address class="text-left">
{{app.address_1}}</br>
{{app.city}}</br>
{{app.postcode}}</br>
</address>
</hr>
</li>
</ul>
</div>
</div>
</div>
The issue I'm having is that these are both within a Jumbotron container, and for some reason, the <ul> tag spans across the whole of the col-md-12 div, but the <li> and all the elements within it wont, and only takes up about half of it. So even thought I've added style="width: 100%" to div, it only fills half the screen.
How can I make the li element span the same width as the ul element ?
I am trying to put 3 images into 3 boxes.Here I have used bootstrap v3.1.1, here the problem is image is not centering correctly.My medium device output like bellow image
Here no any problem for medium device but the problem is in small device this is looking like bellow image
Here image is not cantering.
I have add bellow html code and a css code
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!--------------------------->
<div class="main-box">
<div class="box" >
<div class="box1 box sides-hz-2">
<img src="images/sss.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Select</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1" style="background:#8C7E63;">
<li class="header1"><Strong>Online</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Import</Strong>
</li>
</div>
</div>
</div>
<!--------------------------->
</div>
</div> <!--end of grid -->
</div> <!----end of row ------->
</div> <!----end of continer ------->
Here my own css for image
div.box1 img
{
display:block;
margin-left:25%;
}
May anybody help me for fix this problem ?
You must make the image responsive by adding these properties to img class
.responsive-image{
height:auto;
width:100%;
}
Auto height makes sure of resizing image without losing the aspect ratio
If you are using bootstrap, it has class img-responsive which will take care of responsiveness of the image.
Tip : On resize the image tend to resize and shrink. To make it look nice you can add class center-block to keep the image in center of outer div :-)
Update:
JSFiddle:
http://jsfiddle.net/pcRKv/1/
I have read through a ton of posts and articles discussing z-indexing in IE7, but I just can't seem to come up with a solution for my problem.
I have a rotating banner that uses jQuery and CSS to fade to the next banner image in the list. I use z-index to make the last banner fade into the next banner. I created the HTML structure to easily break down without CSS. I'd like to have the .banner_thumb's sit on top of all the elements in the banner and float next to each other. It turns out that it works in all other browsers but IE7- ...in IE7 the thumbs sit on top of each other instead of floating next to one another. Any idea on how to fix this?
Here is my css:
http://pastebin.com/32GxamMg
HTML:
<div class="span-25 last" id="banner">
<h2>University Features</h2>
<ul>
<li class="selected">
<div class="banner_description">
<h3>xxxx</h3>
<p>body</p>
</div>
<img class="banner_img" src="" />
<img class="banner_thumb" src="" />
</li>
<li>
...
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
I'm trying to create the following.
The problem is that the stuff in row1 has a different gradient background than the stuff in row2.
Also row1 is dynamically filled with stuff from the database, so it could have 2 items or 6.
So I want the gradient from row2 to keep repeating it's to match the width from it's sibling.
I can't set the gradient on the container since each has a diferent background image gradient.
The problem lies in with IE8 and 7 since they only repeat the gradient for row2 width, so if row 1 is shorter or wider there will be a white space gap.
<div id="content">
<ul class="product-list">
<li class="product-thumb">
<img src="" />
<h3> prod1</h3>
</li>
<li class="product-thumb">
<img src="" />
<h3> prod2</h3>
</li>
</ul>
<ul class="footer-menu">
<div class="footer-container">
<li>Link1 </li>
<li><a href="#" >link2</a></li>
<li>info</li>
<div class="footer-middle-background"></div>
</div>
</ul>
</div>
You cannot use a div like that in a ul.
If you move the div out of the ul it will automatically be 100% wide (unless you specified something else somewhere else...).
<div class="footer-container">
<div class="footer-middle-background">
<ul class="footer-menu">
<li>Link1 </li>
<li><a href="#" >link2</a></li>
<li>info</li>
</ul>
</div>
</div>