why wont my write and check status buttons align horizontally with the two div's
I want the button with id writeMe to be on the direct right of the div with id test
and then i want the button statusCheck to be on the direct right of the div with id status 1 but for some reason even with display:inline it still sits directly below it
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-
densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/bluetoothSerial.js"></script>
<script type="text/javascript" src="ECMA.js"></script>
<title> My LCD code </title>
</head>
<body onload="app.initialize();">
<p>Welcome to the LCD software</p>
<select id="list" onchange= "app.prints(address,list.
options[list.selectedIndex].value);">
</select>
<button id="connect" onclick="app.connect();">
Connect
</button>
<div id="address">
macAddress
</div>
<div id="status1">
Not Connected
</div>
<button id="statusCheck"> Click to check status </button>
<div id="test" >
No Message Recieved
</div>
<button id="writeMe" onclick="app.bluetoothWrite();">
write
</button>
CSS
body
{
background-color:white;
}
select {
width:200px;
margin:30px;
margin-left:0px;
}
#connect {
display:inline;
margin-left:0px;
width:200px;
}
#status1 {
border:2px solid black;
width:200px;
height:20px;
margin:30px;
margin-top:0px;
margin-left:0px;
}
#address {
display:inline;
width:200px;
height:20px;
bordrr:2px solid black;
}
#statusCheck {
display:inline;
width:200px;
margin:30px;
margin-bottom:0px;
}
#test {
width:200px;
height:20px;
border:2px solid black;
}
#writeMe {
width: 200px;
display: inline;
}
Try this HTML
<p>Welcome to the LCD software</p>
<select id="list" onchange= "app.prints(address,list.
options[list.selectedIndex].value);">
</select>
<button id="connect" onclick="app.connect();">
Connect
</button>
<div id="address">
macAddress
</div>
<div>
<span id="status1">
Not Connected
</span>
<button id="statusCheck"> Click to check status </button>
</div>
<div>
<span id="test" >
No Message Recieved
</span>
<button id="writeMe" onclick="app.bluetoothWrite();">
write
</button>
</div>
Fiddle
http://jsfiddle.net/PFVxK/1323/
Related
I am new in HTML and CSS. There are two buttons named 'Click me' and 'reset' and I was trying to add a border around them but the result is not updating according to my style.css file.
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
It is working correctly. Make sure path of style.css is correct. Or simply add style in the html file itself. It will also reduce the number of files to be fetched from server.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<style>
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
</style>
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>
It is working correctly. Make sure path of style.css is correct Sometimes your path is not hitting the proper directory user (#) symbol at the start of the path
. Or simply add style in the html file itself like Akshay said. It will also reduce the number of files to be fetched from server.
It worked correctly. check the file location.
If you Add more class to override bootstrap. That is add style to .container-1 .flex-box-container-1
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
Using !important not good practice even when there are more ways.
It works for me in local file i tested compeletly.
Working Demo
.container-1 .flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="static/style/style.css" />
<title>Challenges</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary">Click me</button>
</div>
<div>
<button class="btn btn-danger">reset</button>
</div>
</div>
</div>
<script src="static/JS/script.js"></script>
</body>
</html>
I am very bad with css, so someone can help me:
I have following html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
</div>
<div class='clearfix'></div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>
My problem is that the new_div is not rendered correctly. The background color does not show, the height and width are not there etc.
If I comment the following line in the CSS, it works just fine:
float: left;
I read somewhere that adding a clearfix div will work but it does not work either. Can anyone help me,I have been stuck for hours now... :(
Put that div right after the floated square-thumbs and change from oveflow:auto to clear:both.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cluster Test</title>
<link rel="stylesheet" href="assets/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="assets/script.js"></script>
<style>
.square-thumb
{
float: left;
margin:5px !important;
padding:5px;
cursor: pointer;
}
.clearfix {
clear:both;
}
</style>
</head>
<body>
<div class='img-container'>
<div class=' square-thumb'><img src='images1/1919812643.jpg'></div>
<div class=' square-thumb'><img src='images1/1919814776.jpg'></div>
<div class=' square-thumb'><img src='images1/1919816424.jpg'></div>
<div class=' square-thumb'><img src='images1/1919817149.jpg'></div>
<div class='clearfix'></div>
</div>
<hr>
<div class='new_div' style='width:300px;height:300px;border:1px solid grey;'>
THIS IS MY NEW DIV
</div>
</body>
</html>
I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>
try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}
Hello every one I have wrote a simple code in html5 in which I am calling the click handler of image and display the alert but I don't know why it isn't working can any one please guide Where am I doing wrong
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function clickhandler(){
alert ("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
<body>
<div id="div1">
<img src="myimage.png" onClick="clickhandler" draggable="false" />
<img>
</div>
</body>
</html>
THANKS
It should look like this:
<img src="myimage.png" onClick="clickhandler()" draggable="false" />
The onClick attribute should be a function call or statement.
You should also move your style and script tags inside the head tag:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function clickhandler(){
alert("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Exponential_Function_(Abs_Imag_Part_at_Infinity)_Density.png" onclick="clickhandler()" draggable="false" />
</div>
</body>
</html>
I have a header that I need to fill the top of the screen. It successfully does this, but when I minimize the window and then scroll to the right, the div shrinks and no longer fills the whole top portion of the screen. I have tried setting div heights and using width:100%, but nothing seems to work. I was looking at other users who had the same problem, but I could get nothing to work.
Here is my code
<style>
A:hover {text-decoration: underline; color: white}
#top {
height:53px; width:100%; min-width: 800px;
background:#000000;
}
h400 {
color:white; border-bottom;
letter-spacing:-0.05em;
margin-top:0; padding-top:0;
font-size:1.2em;
font-family:Helvetica, Arial, sans-serif;
}
#headerimage{
margin-top:-20px;
margin-right:10px;
min-width:322px;
background:black;
}
a img {border: none; }
</style>
<?php
if ($username){
$headerdiv='<div class="box" style="width:516px; margin-top:-16px;"><div align="right">';
}
else
$headerdiv='<div class="box" style="width:220px; margin-top:-16px; margin-right:20px;"> <div align="left">';
?>
<head>
<div id="top" align='center'>
<h400><table><tr><td><div id='headerimage'><a href="http://www.pearlsquirrel.com" ><img src="pearlsquirrel.jpg"/></a></div></td><td><div style="margin-top:13px; margin- right:30px;"><form action='searchmusic.php' method='GET'>
<div style="margin-right:-5px;"><input type='text' size='45' name='search' value="Search..." style="color:#474747;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div style="visibility:hidden;" >
<input type='submit' name='submit' value='Search' />
</div></div>
</form></div></td><td><?php echo $headerdiv; ?><?php if (!$username) echo 'Register'; ?> <?php if ($username) echo 'Upload'; ?><h11> <?php echo $echovar?><?php if ($username) echo 'Page | Logout'; ?></h11></div></div></td></tr></table>
<link rel="icon" href=".pearlsquirrelthumbnail.jpg" type="image/x-icon" />
<link rel="shortcut icon" href="pearlsquirrelthumbnail.jpg" type="image/x-icon" />
</h400><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</div>
</head>
If anyone could help me with this issue it would be greatly appreciated. I feel like it is an easy fix, but I really have no clue what to do.