i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.
Related
I have two Div's, the left one is a sidebar of sorts (but it does not extend the full height of the screen), and the right one is the content Div that should occupy as much of the screen as possible and collapse/move underneath the sidebar as the screen shrinks. Right now I have the sidebar set up how I expect it to be, but the Content Div begins to overlap the Sidebar as the page shrinks and does not move below.
I have tried different position: parameters (fixed,absolute,relative) different width/min-width values, as well as different values for float. I have everything in html styling right now for simplicity. The css files that were being used seemed to be interfering with functionality so I attempted to override them via styling directly within the HTML.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green;position:absolute;left:0; top:80; bottom: 400;width: 20vw;min-width: 200px;max-width: 300px;padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div></div>
<div class="ContentContainer" style="background-color: gold;position: relative;float: left;left:20vw; top: 25;width:80%;min-width: 400px;margin-right: 3px;padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div></div><body>
Content div should shrink, and at a certain point, move below the Sidebar div.
<body style="padding-top: 5px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; min-height: 80%; min-height: 50vh;">
<h3 class="text-center"> Title </h3>
<div style="display: flex; flex-flow: row wrap;">
<div class="SideContainer" style="background-color: green;left:0; top:80; bottom: 400;width: 20vw;flex-grow: 1;padding: 3px;min-width: 200px;max-width: 300px">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold;float: left;left:20vw; flex-grow: 4;top: 25;margin-right: 3px;padding: 8px;min-width: 200px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</div>
<body>
I got your code working using Display:flex, it's a good idea to also separate your code into html and css and use classes references in the HTML. There is a lot of benefits to this including easier to maintain, cleaner, and also makes it easy to follow etc.
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
I want to create a row at the very top of a page, and another row hovering the previous one. The idea is to create two columns in the first row - col-md-3 and col-md-9, and the second row is to apply an image between those two, so the row has col-md-2, col-md-2 (image between), col-md-8. It should look like this:
I managed to create it, but the box between is still not fixed:
<div class="container-fluid">
<div style="position: absolute; width: 100%;">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2" style="text-align: center; z-index: 9999;">
<div style="background-color: red;"> # Adding position: fixed here works but breaks box width
<img src="/assets/image/logo.jpg">
<br>
Something
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
<div class="row" style="height: 100%;">
<div class="col-md-3" style="position: relative;">
<div>
<img src="/assets/image/leftImage.jpg">
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-8">
Lorem ipsum...
</div>
</div>
</div>
How can I do that?
You dont have to use bootstrap, You can use css:
div.container
{
width:100%;
position:fixed;
background-color:red;
height:100px;
}
div.img
{
margin:auto;
width:80%;
padding:5px;
text-align:center;
}
If you check the fiddle you can understand it better.
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my site to see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b>ts.clustermc.net</b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b>www.clustermc.net/forums
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)
This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>
It looks like your three 'well' divs are sitting in the middle of the page already?
As every thing is sitting in <div class="container"> that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
Note: It looks like you're missing a final ending </div> for the container class
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?