So I have a button group with four buttons, third one has a drop-down menu, but I can't seem to align it center. The buttons are centered, but the drop-down menu aligns left. I have tried all sorts of css, but nothing has worked. Maybe somebody can help. :)
HTML:
<div class="btn-group">
Home
Link
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Linkk1</li>
<li>Linkk2</li>
<li>Linkk3</li>
</ul>
Link
</div>
Here's how I align button group center:
.btn-group {
margin: 0 auto;
text-align: center;
font-size:0 !important;
}
.btn-group a {
display:inline-block;
}
I have tried using the same method for drop-down menu, but with no luck. Please help.
Try wrapping the button group in a centered btn-toolbar container.
<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</div>
.btn-toolbar {
text-align:center;
}
Working Example: http://jsfiddle.net/r26Zz/
Related
I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.
How can I make it vertically centered again ?
I also would like to align the text to the left
http://www.bootply.com/r8x7g5Bw5R
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>tes2</li>
<li>test3</li>
</ul>
</div>
and the CSS
.cust-dropdown {
width: 200px;}
.caret {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #fff;
left: 90%;
top: 45%;
position: absolute;
}
Using position absolute and a percentage top and left I was able to right align my caret within the dropdown. Works in Chrome, IE, and FF.
EDIT
Previous code will work but changes the style of the caret. If you just want to reposition it maintaining its style, just extend Bootstrap's .caret class:
.caret {
position: absolute;
left: 90%;
top: 45%;
}
A much simpler solution exists for this problem. This style should look the most natural and be the most responsive to all usages as it does not depend on any predetermined layout (other than default bootstrap styles).
.dropdown > .btn > .caret {
float: right;
margin: 6px 0;
// if you are using Less, the you can reuse the actual vertical padding
// margin: #padding-base-vertical 0;
}
Just interchange the caret and span blocks in HTML:
HTML
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
CSS
.cust-dropdown {
width: 200px;
}
#titl {
padding-right: 10px;
}
You can align the text more to the left by adding more padding-right.
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.
Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.
<div id="navigation">
<ul>
<li>
main menu
<ul>
<li>section 1</li>
<li>section 2</li>
<li>section 3</li>
</ul>
</li>
</ul>
</div>
that's my code for one part of the menu, here's the scrollbox with images:
<div class="scroll" style="float:left;border: 1px solid black; width: 40em;
height: 30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden;
text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff;
color: #ffffff;">
<img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%;
padding: 3%; padding-right: 3%; display: block" alt="image1">
<a name="section1"><img src="http://websiteurl.com/image2.jpg"
style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>
So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.
How would that be possible? or: where's the error in the anchoring? Thank you all for answers!
It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.
Have you tested without the images or without the scroll box?
An anchor tag is normally just
Click Here
or if using images instead of links
<img scr="imageLocation"/>
and then the anchor part is
<a name="myAnchorName"></a>
I want to vertical align the logo image to the bottom of the my navigation menu. I've tried vertical-align:text-bottom, but the vertical-align doesn't seem to work for me, because the ul not works like the normal p tag.
Anybody who can help me?
<a href="index.php">
<img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50">
</a>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Pellentesque</li>
<li>Aliquam</li>
<li>Morbi</li>
</ul>
The css:
header img {
float:left;
position:absolute;
}
ul {
height:50px;
position:relative;
}
ul li {
display:inline-block;
bottom:0;
}
Check this fiddle:
http://jsfiddle.net/Nh6NZ/
The key is you need to use display:inline-block instead of floating if you want to vertical-align those elements.and Also float and position absolute can't be used together.
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt