I'm having some trouble aligning buttons and small images from a jscript source... Here's a link to the photo slider on the right, where the pink buttons need lining up with the preview images: http://www.inside-guides.co.uk/brentwood/local-tradesmen/roofers-and-roofing-services/ace-roofing-co-ltd.html
Here's the code:
<div id="photos-preview">
<input class="photos-btn" type="button" onclick="slidePrev();" value="<<" />
<% for i = 0 to ubound(images)
%><img src="/includes/tn.asp?src=<%=server.URLEncode(images(i))%>&w=30" style="margin:3px;cursor:pointer" onclick="$('.MainImage').fadeOut(500).hide(0,function(){$('#MainImage<%=images(i)%>').fadeIn(500)});" /><%
next %>
<input class="photos-btn" type="button" onclick="slideNext();" value=">>" />
</div>
And the CSS:
#photo-slider {float:right;width:275px;margin:5px;border:1px
solid #B2B2D4;}
#main-photos {text-align:center;height:200px;padding:8px 0;}
#photos-preview {text-align:center;}
.photos-btn {background-color:#b21589;cursor:pointer;color:#fff;font-size:9px;font-weight:bold;padding:4px;}
Any ideas much appreciated.
Try this css:
#photos-preview img, #photos-preview input {
vertical-align: middle;
}
Here is a preview:
http://jsfiddle.net/k6sWJ/
Change the .photos-btn css class to:
.photos-btn {
background-color: #B21589;
cursor: pointer;
color: white;
font-size: 9px;
font-weight: bold;
padding: 4px;
margin-top: 2px;
vertical-align: top;
}
try to add vertical-align: top; for .photos-btn
make 2 css for next and previous button
and add following to your css
photo-btn-prev {
float :left;
}
photo-btn-next { float : right;}
Related
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
please visit link
here you can see as in below image :
I want to hide the empty spaces present between "Text1", "Textfield" & "check" button.
also empty spaces present between 2 horizontal lines.
I want to display "check" button right next to Text field".
i tried using "position : relative ; right: 200px; "
but it affected on other parts of the page.
.block-check-delivery .block-title strong {background-image:none; font-size: 11px;}
.block-check-delivery .block-content {padding:0 10px; }
.block-check-delivery .button {float: right;}
.block-check-delivery input{width: 107px;}
i want to display like this :
enter image description here
The button has a CSS rule:
.block-check-delivery .button {
float: right;
}
That's the one causing the trouble. Remove the float: right rule and it will be alright.
The space is generated by a <br> element you can hide using CSS with the following rule:
.block-check-delivery .block-content > br:first-child {
display: none;
}
Then
.block-check-delivery .block-title {
float: left;
margin-right: 10px;
border: 0;
}
Also the button should have
.block-check-delivery .button {
float: left;
}
And I would suggest you to try out also this rule to fix the design:
.block-check-delivery .block-content > br:last-child {
display: none;
}
Generally speaking using <br> elements to create space between elements is a bad design pattern. I would like you to rely on padding and margin rules and remove those <br> elements from your HTML markup.
You need to remove Div class="block-title" and place strong tag in the Div class="block-content".
also remove br tag
With these two styles the result appears to be correct ... then you can play with the margins on the "block-title" or on the "check" button.
.block-title {
position: relative;
padding: 10px 0 0;
margin-bottom: 5px;
// border-top: 1px solid #cccccc; // remove this...
border: none !important; // Add this
display: inline-block; // <----- ADD THIS
}
.block-content {
margin-top: 5px;
display: inline-block; // <----- ADD THIS
}
This is the image result...
<div class="block-title" style="
display: inline-block;
">
<strong><span>Check Availability at</span></strong>
</div>
<div class="block-content" style="
display: inline-block;
vertical-align: middle;
">
<br>
<input name="zipcode" size="17" type="text" id="zipcode" value="" maxlength="10" class="input-text" placeholder="Enter ZIP Code">
<button type="button" name="zip-check" title="Check" class="button" id="zip-check"><span>Check</span></button>
<div id="delivery-message"></div>
<div id="delivery-html"></div>
<br>
</div>
Does your requirement
I have html something like this http://jsfiddle.net/nLt9unxa/5/ and I want to place 3 block .number__label, .text__label, and .from__input in one line. .form__input must be align to the right side of form and all 3 elements must be vertical align in one line. How to do this? And I don't want use display: table-cell
And also if you know very good tutorial or book about alignment, where described all possible alignment and receipts how to do it, like cheatsheet, please share link.
you forgot to put : after max-width and min-width in .number__label
DEMO
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width:20%;
min-width:20%;
}
Use vertical-align: middle (or top, or bottom). Here is the fiddle: http://jsfiddle.net/1ddewjxd/
.class
{
vertical-align: middle;
}
to align elements to right set the parent element to text-align: right, and the child elements to text-align: left. You could also float: right, but that can complicate things.
.item__label {
text-align: right;
}
.number__label, text__label, form__input {
text-align: left;
}
Run this code snippet to check whether all your requirements are done or not? also check fiddle
Check CSS Layout or learn from W3School
form {
width:70%;
background-color: #dddddd;
font-size: 20px;
}
.itme__label {
display: block;
}
.form__item {
display: block;
padding: 3px 5px;
}
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width 20%;
min-width 20%;
}
.text__label {
display: inline-block;
background-color: #888888;
max-width: 50%;
}
.form__input {
display: block;
min-width: 20%;
max-width: 20%;
font-size: 1em;
margin-left:120px;
}
<form>
<div class="form__item">
<p>
<label class="item__label">
<span class="number__label">
01 12 31 23 123 2452 34534 5345
</span>
<span class="text__label">
text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
</span>
<input type="text" class="form__input" value="input text">
</input>
</label>
</p>
<div class="errors">
<p class="error">
some error
</p>
</div>
</div>
</form>
I'm brushing up my HTML/CSS skills for a new job. The last time I wrote some HTML was in 1999... So, no need to say that I fell behind.
So, as a fan of "Space Trader" game on Palm OS, I have decided to rewrite in HTML all the screens of the game. And I'm struggling with a CSS issue.
Here is the screen I'm trying to rewrite :
And here is my markup :
<div class="screenTitle">
<h1 class="leftTitle">Bank</h1>
<span class="titleButtons">
<input type="button" id="btB" value="B" />
<input type="button" id="btS" value="S" />
<input type="button" id="btY" value="Y" />
<input type="button" id="btW" value="W" />
</span>
</div>
And the CSS :
.screenTitle {
height: 0.7em;
border-bottom-style: solid;
border-color: rgb(49,0,156);
font-size: 40px;
}
.leftTitle {
margin-top: 0;
font-size: 0.5em;
text-align: center;
color: white;
padding-left: 0.1em;
padding-right: 0.1em;
background-color: rgb(49,0,156);
float: left;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
line-height: 1.5em;
font-weight: bold;
}
.titleButtons {
float: right;
}
And here is the result
So, you can see that I'm struggling with the positionning of the 4 shortcuts buttons.
Do you have any clue for me to sort this out ? And do you have any critic to formulate ?
Thanks a lot
You need to change the vertical alignment of your buttons. Have this in your CSS:
.titleButtons input{
vertical-align:top;
}
Demo
.titleButtons input {
float: right;
vertical-align:top;
margin:7px 0px 0px 0px;
}
If you add some top margin and remove som left/right margins, the buttons will also position themselves nicer on the bar.
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