I am using a table and a div to create a centered button group...but for some reason, my buttons are aligned weird? Here is a jsfiddle of the issue. Jsfiddle
Is there any way I can fix this to where I can add more buttons and have them straight?
If more code is required, please ask me and I will post it.
Here is my html:
<div align = "center" class="bdy">
<table class="wrapper">
<tr>
<td>
<button type="button">Services</button>
<br>
<button type="button">Live</button>
</td>
</tr>
</table>
</div>
My CSS is on the fiddle!
I fixed the alignment by removing the whitespace between buttons, but this is not the right way to do it.
Fixed version (reference only): http://jsfiddle.net/J7rYF/1/
Tables shouldn't be used to layout buttons. div align=center is deprecated. <br> shouldn't be used for this type of formatting purpose.
If you want an out of-the-box example/solution, Twitter Bootstrap has some very nice examples and templates.
Or, here's a simple template that you can start with for centering a list of buttons: http://jsfiddle.net/J7rYF/10/
HTML
<div class="button-set">
<ul>
<li><button type="button">Services</button></li>
<li><button type="button">Live</button></li>
</ul>
</div>
CSS
.button-set {
width: 300px;
margin: 0 auto; /* this centers the element */
}
.button-set UL {
list-style: none; /* removes bullets */
}
/* this controls spacing between adjacent buttons */
.button-set LI + LI {
margin-top: 4px;
}
/* width: 100% is needed...everything else is optional */
BUTTON {
width: 100%;
border: 1px solid #000;
padding: 4px;
border-radius: 4px;
color: #fff;
background-color: #006DCC;
}
Getting rid of the <br> between the buttons fixed it for me.
You give margin:0; at button css and .button-set ul li{margin:0}
you can add another table inside that td and inside new table you can put these two buttons
Related
So I am creating this website, With a top navigation menu, a left navigation menu and a main content container, all made with bootstrap. The problem is, I can't get the text in the top navigation menu and the left navigation menu to center vertically. I assume both have the same problem, so I will only show the code of the left menu:
HTML:
<div class="row">
<div class="col-md-3 z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One</span></li>
<li class="z-left-list-item z-selected">Two</li>
<li class="z-left-list-item">Three</li>
</ul>
</div>
<div class="col-md-9 z-overview-main-menu">
</div>
</div>
CSS:
.z-selected {
background-color: rgb(255, 216, 0);
}
.z-left-list {
vertical-align: middle;
padding-left: 0;
list-style: none;
}
.z-left-list-item {
display: block;
vertical-align: middle;
height: 7%;
font-size: 150%;
border-bottom: 1px solid black;
}
Simplified Jsfiddle: Jsfiddle
So what am I doing wrong? I already tried adding display: table to the z-left-list and display: table-cell to the z-left-list-item classes.
Try something like this:
<div class="z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One asdfasd fasd fasdf asdf asdf</span></li>
<li class="z-left-list-item z-selected"><span>Two</span></li>
<li class="z-left-list-item"><span>Three</span></li>
</ul>
</div>
.z-left-list {
padding-left: 0;
list-style: none;
}
.z-left-list-item {
width:100%;
display: table;
vertical-align: middle;
height: 60px;
font-size: 150%;
border-bottom: 1px solid black;
}
.z-left-list-item span {
display:table-cell;
vertical-align:middle;
}
https://jsfiddle.net/fekfrwoz/7/
I would strongly recommend that you use the navbar classes. See here. This will make your code easier to maintain, and will take advantage of a lot of jscript coding done by Bootstrap to make those navbars work. For example, on a mobile screen, navbars will collapse into the hamburger icon (the three stacked horizontal bars that give you a pulldown). In my latest web app, I have two navbars (although located different from what you describe), and it works great.
If you know your list items will only have one line of text, you could always just add line-height to the .z-left-list-item class definition.
https://jsfiddle.net/fekfrwoz/1/
You could remove the height of the .z-left-list-item and use padding on the top and the bottom of the li, like so:
padding: 35px 0;
Which would emulate them being in the center of the li?
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
I have a button inside of a dt element.
Everything looks fine, however I want to float the button to the right.
When I add the float on the button, now the dt is shorter causing it to look poor.
Adding overflow:auto fixes this, but now the text on the left is not vertically centered. vertical-align:center does not fix this nor does it help by hacking it with display:table-cell; Is there another way of accomplishing this that I am overlooking?
<dt style="overflow:auto">Title <button style="float:right">save</button></dt>
This is normally how I would do this.
My CSS:
dt {
display: block;
background: -webkit-linear-gradient(#bfbfbf 0%, #828282 100%);
background: linear-gradient(#bfbfbf 0%, #828282 100%);
padding: 10px 20px;
margin: 10px auto;
border-radius: 3px;
width: 400px;
}
dt:after {
content: "";
display: table;
float: none;
}
dt p {
display: inline-block;
}
dt button {
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
float: right;
}
My HTML:
<dt>
<p>My Title</p>
<button>Save</button>
</dt>
Just remember that your text block "My Title" needs to be an inline-block and not a block
I hope that helps or at least points you in the right direction.
There are better approaches than simply floating the elements around. I would suggest either wrapping them with div elements, or creating a table, assuming of course that you plan on repeating the title-button structure. A sample may be something like:
<div style="width:50%;">Title</div>
<div style="width:50%;">
<button style="float:right">Button</button>
</div>
EDIT---
Try the quick-and-dirty table approach:
<body>
<table style="width:100%">
<tr><td>Title</td>
<td><button style="float:right">save</button></td></tr>
</table>
</body>
Also, what's with the dt element?
I think you just need to clear your floated element instead of using overflow:auto;
Example: http://jsfiddle.net/ChrisMBarr/UGWuc/
EDIT
Try this now: http://jsfiddle.net/ChrisMBarr/6HXek/5/
The button had some padding that the title did not have. This makes them have matching vertical padding.
Please see this This Image for a picture of the problem.
I have a div that displays a list under a text field. It is a fake Combo-box, using a text element and JavaScript. The list that appears when someone types should cover the other form elements, but should also make the wrapper div bigger so it doesn't get cut off. I have only been able to do one or the other.
Here's The relevant HTML
<td id="EditorMainColumn">
<div id="EditorPanesWrapper">
<div style="display: block;"><!-- a Jquery Tools Tab, also the problem div -->
<div class="EditorFormFieldWrapper">
<label>My Field</label>
<input class="EditorInput" name="name">
</div>
<br class="ClearBoth"><!-- I don't know if this helps or not -->
<div class="ComboBoxListWrapper">
<div class="ComboBoxList">
<!-- <a> elements are inserted dynamically here -->
<br class="ClearBoth"><!-- I don't know if this helps or not -->
</div>
</div>
<div><!-- Cover me! -->
You can't see this when the combo box is open...
</div>
</div><!-- END display:block div -->
</div><!-- END EditorPanesWrapper -->
</td>
CSS:
#EditorMainColumn {
overflow:hidden!important;
background:#f9f9f4;
border-top:1px solid black;
padding:20px;
color:#432c01;
}
#EditorPanesWrapper {
width:auto;
margin-right:20px;
overflow:auto;
}
.ComboBoxListWrapper{
position:relative;
top:-10px;
}
.ComboBoxList{
border: 1px solid red;
width:288px;
position:absolute;
z-index:2;
margin-left:180px;
}
.ComboBoxList a {
display:block;
border: 1px solid #DDD7C6;
border-top:0px;
float: left;
padding: 8px;
padding-left:0px;
top:-11px;
color: #432C01;
width:279px;
font-weight: bold;
font-size: 10px;
background:white;
}
How do I get the div to expand for the combo-box's height while still keeping the options list over/above the other form elements?
as i notice using this
EditorPanesWrapper
inside the TD make the size fix,
Try to give an specific width and height in % if you want it to adjust to the content of your page.
Another question why do you need to put it into a table ? you can just use div
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg