I am developing an HTML based ui, as i am new to css so please suggest.
I want to format my UI so that spacing between the top & bottom line & button decreases.
Also the text to be moved little up so that it comes in center of alligned with button.
Please see the attached image, i have edited it and added arrow to it.
Also is it possible to replace multiple with some single TAB ?
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#292B3B;
}
h1 {color:white;}
p {color:#DDDFED; font-size:150%; text-indent:5px; align="middle"}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<hr>
<p>
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" />
Button One
</p>
<hr>
<p>
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" value="Submit" alt="Bulb pop up" width="48" height="48" />
Button Two
</p>
<hr>
</body>
</html>
The issue is that you are not resetting the default margin and padding applied by the browser, so use the snippet below..
* {
margin: 0;
padding: 0;
}
Demo
Or to have max consistent cross browser experience, you can use CSS Reset Stylesheet.
You will require the snippet below for aligning your image vertically centered..
input[type=image] {
vertical-align: middle;
}
Also, align="middle" is incorrect, you should use text-align: center; instead.
Rounding up the entire thing...
Final Demo
* {
margin: 0;
padding: 0;
}
body {
background-color:#292B3B;
}
h1 {
color:white;
padding: 10px;
}
p {
color:#DDDFED;
font-size:150%;
text-indent:5px;
padding: 10px;
}
input[type=image] {
vertical-align: middle;
}
Updated your css. Working Fiddle
input[type=image]{
display:inline-block;
vertical-align:middle;
}
Related
Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be.
This is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">
<input type="text" placeholder="Insert Keyword Here">
</body>
</html>
And here is the CSS behind it:
.custom1 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(-210px);
width: 23%;
}
.custom2 {
display: block;
margin-left: auto;
margin-right: auto;
transform: translateY(+25px);
width: 25%;
}
input[type=text]{
width:20%;
border:2px solid #000000 ;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
font-size: 20px;
text-align: center;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
input[type=text]::placeholder{
font-family: Calibri;
font-size: 20px;
font-style: italic;
text-align: center;
}
It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels
EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif
Instead you can just use the form tag
<form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>
Change the source of the images and the width according to your need.
You can also use the table tag if you want
And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.
Example:
top:25%;
left:25%;
I was looking for a way to display the value of an
<input type="submit">
on 2 lines, so potentially add a line break in it, but i tried multiple stuff such as :
<br>
\r\n
\n
The result should be like this (On the right side of the picture) :
Nothing works. Anyone got a clue on this ?
Add this to your css:
A white-space property will allow to have input in multiple lines
input[type="submit"] {
white-space: normal;
width: 150px;
float:right;
text-align: right;
}
<input type="submit" value="J'essaie gratuitement 30 jours" />
Two other methods are
<button type="submit">Multiple line<br/>input</button>
and
using
carriage return in between the input value as:
<input type="button" value="Multiple line
input" style="text-align:center;">
The last method however doesn't work in IE10
Use button instead of input:
.right-aligned {
text-align: right;
}
<button type="submit" class="right-aligned">Text <br /> broken </button>
Buttons can accept a variety of other tags inside, such as <br />, <span>.
Then, you can style it with CSS however you wish (see the CSS class and rules in the code snippet).
I think you try this in HTML:
Just as example help for you:
<input type="button" value="Really
Tall
Button">
This is working for me:
div.full {
width:500px;
background-color:grey;
}
div.left {
float:left;
width:60%
}
button {
width:40%;
text-align:right;
cursor:pointer;
}
div.underline {
width:100%;
}
<div class='full'>
<div class='left'>
there is a part of text
</div>
<button>J'essaie gratuitement
<div class='underline'>30 jours</div>
</button>
</div>
I just added some CSS to keep the size of the button. and line breaks are not a very good practice. You'd better do it with css.
Alternatively, use a standard <a> or <span> tag.
var submits = document.getElementsByClassName('submit');
for (var i = 0; i < submits.length; i++) {
submits[i].addEventListener('click', function() {
alert('submit!');
document.getElementById('form_to_submit').submit();
});
}
.submit {
text-decoration: inherit;
color: inherit;
display: inline-block;
border: 1px solid #222;
border-radius: 2px;
padding: 2px 4px;
background: #eee;
cursor:pointer;
text-align:right;
}
<p>J'essaie gratuitement<br>30 jours</p>
<p><span class="submit">J'essaie gratuitement<br>30 jours</span></p>
What has been done:
Have created the required Html tags as shown in the code below:
<html>
<head>
....
....
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.3.2.min.js"></script>
<style style="text/css">
html, body {
padding: 0;
margin: 0;
position:relative;
width: auto;
height: auto;
}
.container {
width: 150px;
align-content: center;
margin-top: 980px;
clear: both;
}
.container input {
width: 82%;
clear: both;
}
</style>
</head>
<body>
...
...
<div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">
<form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
Name: <input type="text" name="name" size="15px" required><br><br>
Email: <input type="text" name="email" size="15px" required><br><br>
</form>
<input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
</div>
<script>
function Page5() {
$("#page4").hide();
$("#page5").show();
}
</script>
<div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
</div>
</body>
</html>
Functionality:
User is supposed to be able to view page 5 and the background image "Page 5" is being displayed, after the user has submitted the form in page 4. Hence, when user navigate from page 4 to page 5, user is suppose to the see the content of page 5 which is just the background image.
Issue
When user navigates from page 4 to 5, page 5's content is not displayed, the entire background image is not displaying. Hence, I would like to ask for help,
1.) why is this happening
2.) what is the best rectification process
NOTE
I have to input the following attribute:
display:none
Reason: I have created the following stack in the form of block, hence the individual <div> block will only appear when the <script> is implemented. Hence, please do not suggest that I need to remove the display:none as doing so will
cause the to merge and furthermore, it does nothing as well.
Thanks
first of all there is no "width" and "height" attribute to div's so move the width and height declarations to CSS. Also add height 100% to html and body otherwise the div has no basis to calculate the height upon
html, body {
padding: 0;
margin: 0;
position:relative;
width: 100%;
height: 100%;
}
#page5{
background-color: red;
width: 100%;
height:100%
}
http://jsfiddle.net/arrhyppz/
P.S. use the inspect function of your browser to see the applied css, you will find where your mistakes are
I've looked at similar questions relating to this but I can't seem to find anyone having the same problem.
I'm attempting to us CSS in order to make a sumbit button an image. Here's the code
HTML
<input type="submit" class="search" alt="search" >
CSS
input.search {
background-image:url(../search-icon2.png);
width:35px;
height:35px;
}
This returns a broken image in the web page even though the image "search-icon2.png" is exactly 35px x 35px and is in the correct place on the server.
If anyone could suggest what might the problem be, it would be greatly appreciated.
Thanks in advance. J
You could add the image into the same location as the css file with the css having the url('search-icon2.png'). This would verify your path is truly correct and it's not another issue. If you still have an issue could maybe check the spelling of the image??
HTML
<a class="buttonImage">
<span class="left_img"> Hello this is coding
</span>
<span class="right_img"></span>
</a>
CSS
.buttonImage {
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left;
line-height: 15px;
padding: 7px 0 5px 8px;
color: #1b1d60;
cursor: pointer;
}
.right_img {
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left;
height: 27px;
width:7px;
cursor: pointer;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img {
background-position:0 -26px;
color:#fff;
}
Fiddle Demo
It will work fine just follow the following steps:
Search button image size must not be greater than whatever you initialize width and height in your css rule.
That means if you give width:100px and height:30px so images must be the same size.Just re-size your image with the help of Image editor software my personal preference is Adobe Photoshop.If your image size is greater than css rule so images may not come or image will be broken.I have edited your html as well as css.
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
Hope the answer!
I have some HTML that displays a text input and 2 checkboxes side by side. The HTML is generated by a tool and so I cannot alter the way the HTML is built, I can only apply styling to it using CSS. My simplified HTML and CSS is:
<html>
<head>
<style type="text/css">
td {
padding: 0;
}
fieldset {
display: inline;
padding: 0;
margin: 0
}
input[type="text"] {
margin: 0;
padding: 0;
}
table.checkboxs {
border-collapse:collapse;
}
table.checkboxs td {
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="text" id="item1" value="" />
<fieldset>
<table summary="" class="checkboxs" border-collapse="">
<tr>
<td><input type="checkbox" id="chkbox_0" name="chkbox" value="1" /><label for="chkbox_0">One</label></td>
<td><input type="checkbox" id="chkbox_1" name="chkbox" value="2" /><label for="chkbox_1">Two</label></td>
</tr>
</table>
</fieldset>
</body>
</html>
This ends up with the checkboxes displayed higher up than the text item like this:
What I would like is them aligned together like this:
That seems simple enough, but I cannot figure out how to achieve it. If you remove either the text input or the fieldset then the remaining element takes up the minimum vertical space, it is only when they are together that the text input gets pushed down the page.
By all means point out any shortcomings in the HTML, but as I said that is really not under my control, I can only influence the layout using CSS.
There are two quick solutions I can think of. The first is to get the table to behave and align more like regular text by setting:
table.checkboxs {
display:inline-block;
vertical-align:middle;
}
JSFiddle example
Or by aligning the textbox to behave more like the table:
input[type="text"] {
vertical-align:top;
}
JSFiddle example
Try to give float:left to both of them, input and fieldset and then use margin-top if needed to achieve what you want.
try
input {
display: inline-block;
}
fieldset {
display: inline;
padding: 0;
margin: 0
}