I have the following simple html+css code.
For some reason the second LI item is displayed kind of centered.
I appreciare if you may test and let me know.
(my post is mostly code, because it is a very simple html page which already shows the issue)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>Float</title>
<style>
.el_edit {
background-image: url(http://www.w3schools.com/images/compatible_safari.gif);
background-repeat: no-repeat;
background-color: transparent;
border: none;
height: 50px;
width: 50px;
vertical-align:top;
}
.el_delete {
background-image: url(http://www.w3schools.com/images/compatible_firefox.gif);
background-repeat: no-repeat;
background-color: transparent;
border: none;
height: 50px;
width: 50px;
vertical-align:top;
}
</style></head>
<body>
<ul><li>
<div style="float:left;">
<form>
<button class="el_a">A</button>
</form> </div>
<div style="float:right;">
<div style="float:left;">
<form>
<button class="el_edit">B</button>
</form> </div>
<div style="float:right;">
<form>
<button class="el_delete">C</button>
</form></div>
</div><br>
</li>
<li>
<div style="float:left;">
<form>
<button class="el_a">A1</button>
</form>
</div>
<div style="float:right;">
<div style="float:left;">
<form>
<button class="el_edit">B1</button>
</form> </div>
<div style="float:right;">
<form>
<button class="el_delete">C1</button>
</form></div>
</div>
</li>
</ul>
</body>
</html>
I hope that this CSS may Solve your issue
li{display:block}
just try following fiddle to check what you want ....
<form name="el">
<button class="el_a">A</button>
</form>
http://jsfiddle.net/WdeAF/
Related
I've been trying to figure out how to make this filter work in my code, where if the user clicks a category button, only the boxes associated with that word would display.
It would work if there's no tags surrounding the block where the buttons are at in the html file, but once I put div tags around those block of button tags to style it, the filter stops working.
I need to be able to style the buttons and put it those div tags. Is there a way to make this filter work in the non-working html code while keeping the form and filters/product div tags around the block of buttons?
Also, I'm only allowed to use CSS and HTML, (NO JAVASCRIPT)
So here's the block of code in question:
<div class="contains">
<div class="filters">
<div class="product">
<form action="" class="forms">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
</form>
</div>
</div>
<!-- (other div classes representing categories) -->
</div>
How can I make this filter work while still being in the div tags?
Below are two versions of the full running code as reference if needed.
Code of the html file that works, with no div tags around the block of category buttons:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.contains {
display: flex;
flex-wrap: wrap;
align-items: center;
}
button[data-filter="warm"]:focus~div:not([class*="warm"]) {
display: none;
}
button[data-filter="cold"]:focus~div:not([class*="cold"]) {
display: none;
}
button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
display: none;
}
.contains .filters {
flex-basis: 100%;
}
.product {
padding: 15px 35px;
}
.forms {
position: relative;
height: 100%;
width: 100%;
max-width: 300px;
padding: 30px 20px;
background: blue;
color: #fff;
}
.filter-btn {
display: block;
margin-left: auto;
margin-bottom: 1rem;
background: white;
font-size: 1rem;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="helpstyle.css">
<title>Animal types</title>
</head>
<body>
<div class="contains">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
<div class="warm">
<div class="product">
<form action="" class="forms">
warm
</form>
</div>
</div>
<div class="warm cold">
<div class="product">
<form action="" class="forms">
warm cold
</form>
</div>
</div>
<div class="warm toxic">
<div class="product">
<form action="" class="forms">
warm toxic
</form>
</div>
</div>
<div class="toxic">
<div class="product">
<form action="" class="forms">
toxic
</form>
</div>
</div>
<div class="toxic cold">
<div class="product">
<form action="" class="forms">
toxic cold
</form>
</div>
</div>
<div class="cold">
<div class="product">
<form action="" class="forms">
cold
</form>
</div>
</div>
</div>
</body>
</html>
code of the non-working html file with div tags around the block of buttons that I need to have working:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.contains {
display: flex;
flex-wrap: wrap;
align-items: center;
}
button[data-filter="warm"]:focus~div:not([class*="warm"]) {
display: none;
}
button[data-filter="cold"]:focus~div:not([class*="cold"]) {
display: none;
}
button[data-filter="toxic"]:focus~div:not([class*="toxic"]) {
display: none;
}
.contains .filters {
flex-basis: 100%;
}
.product {
padding: 15px 35px;
}
.forms {
position: relative;
height: 100%;
width: 100%;
max-width: 300px;
padding: 30px 20px;
background: blue;
color: #fff;
}
.filter-btn {
display: block;
margin-left: auto;
margin-bottom: 1rem;
background: white;
font-size: 1rem;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="helpstyle.css">
<title>Animal types</title>
</head>
<body>
<div class="contains">
<div class="filters">
<div class="product">
<form action="" class="forms">
<h3>Filters</h3>
<button class="filter-btn" data-filter="warm" tabindex="-1">Warm Blooded</button>
<button class="filter-btn" data-filter="cold" tabindex="-1">Cold Blooded</button>
<button class="filter-btn" data-filter="toxic" tabindex="-1">Toxic</button>
<button class="filter-btn" data-filter="*" tabindex="-1">All</button>
</form>
</div>
</div>
<div class="warm">
<div class="product">
<form action="" class="forms">
warm
</form>
</div>
</div>
<div class="warm cold">
<div class="product">
<form action="" class="forms">
warm cold
</form>
</div>
</div>
<div class="warm toxic">
<div class="product">
<form action="" class="forms">
warm toxic
</form>
</div>
</div>
<div class="toxic">
<div class="product">
<form action="" class="forms">
toxic
</form>
</div>
</div>
<div class="toxic cold">
<div class="product">
<form action="" class="forms">
toxic cold
</form>
</div>
</div>
<div class="cold">
<div class="product">
<form action="" class="forms">
cold
</form>
</div>
</div>
</div>
</body>
</html>
Thanks, help is greatly appreciated.
The reason it's not working in your second block is that your CSS is relying on the ~ 'general sibling' selector, which requires the two elements in question to have the same parent. To my knowledge, there is no CSS selector which lets you say "apply a style to this element if this unrelated element has focus".
I would use Javascript to accomplish this kind of dynamic behaviour.
I recently create a little project to create a simple calculator. however, I can't connect my HTML into the CSS file. I have check the location of the file and the name of the css everything is correct. anyone know why it can't link up?
I named my html file as index.html and I named my css file as stylsheet.css
here is my file location:
[screenshot of my file location][1]
here are the codes I use in this project
the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kalkulator</title>
<link rel="stylesheet" type="css" href="stylesheet.css">
</head>
<body>
<div class="calculator">
<input type="text" name="calculator-screen" value="0" disabled>
<div class="calculator-keys">
<div class="row">
<button class="all-clear">AC</button>
<button class="precentage">%</button>
<button class="operator" value="/">÷</button>
</div>
<div class="row">
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="operator" value="*">&time;</button>
</div>
<div class="row">
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="operator" value="-">-</button>
</div>
<div class="row">
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="operator" value="+">+</button>
</div>
<div class="row">
<button class="number zero-btn" value="0">0</button>
<button class="decimal" value="0">.</button>
<button class="equal-sign">=</button>
</div>
</div>
</div>
<script type="javascript" src="script.js"></script>
</body>
</html>
The CSS code:
.calculator {
text-align: center;
margin: 0 auto;
padding-top: 200px;
width: 400px;
}
.calculator-screen {
width: 100%;
height: 100px;
background-color: #252525;
color: #fff;
text-align: right;
font-size: 36px;
border: none;
padding: 0 20px;
box-sizing: border-box;
}
.calculator-keys {
width: 100%;
}
.row {
display: flex;
}
button{
height: 80px;
background-color: gray;
border: 1px solid black;
font-size: 32px;
color: #fff;
width: 25%;
outline: none;
}
all-clear, .zero-btn {
width: 50%
}
.operator, .equalsign {
background-color: orange;
}
button:hover {
background-color: darkgrey;
}
.operator:hover, .equalsign:hover {
background-color: darkorange;
}
any help is a welcome, thank you~
Solved! it looks like I use the incorrect code
the incorrect code:
<link rel="stylesheet" type="css" href="stylesheet.css">
it should be:
<link href="stylesheet.css" rel="stylesheet">
still not sure why, but it might be caused due to different type of html version I use (assumption)
EDIT:
For some of you that said it makes no different.
this is the web view if I use the supposedly the "wrong" line of html:
<link rel="stylesheet" type="css" href="stylesheet.css">
This is the web view if I use the correct line of html :
<link href="stylesheet.css" rel="stylesheet">
As I said, I don't know why but it shows a plain html if i'm using the code line based on the picture 2. but it shows the css file if I'm using the code line based on the picture 3.
In the below HTML code I am trying to achieve color change on current active anchor means once any tab is clicked it should show color(#ffd96b) as its background, it is working fine for Chrome but not working for IE and Mozilla. Not getting why it is happening may be I have missed something, Any help is much appreciated.
.tileMargin {
margin: 5%;
}
.deviceName {
width: 60%;
float: left;
padding: 5px;
border-radius: 5px 0px 0px 5px;
border: 1px solid #ccc;
background-color: #f2f2f2;
font-size: 0.75em;
}
.deviceCount {
width: 40%;
float: left;
background-color: #f2f2f2;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
margin-left: -3px;
}
.deviceCount >div {
width: 33.33%;
float: left;
border-left: 1px solid #ccc;
}
.deviceCount input,
button {
width: 100%;
float: left;
padding: 3px 0px;
background-color: #f2f2f2;
border: none;
text-align: center;
appearance: button;
border-radius: 5px;
}
.devicesSmall a:hover div,
.devicesSmall a:hover input,
.devicesSmall a:hover button,
.devicesSmall a:active div,
.devicesSmall a:active input,
.devicesSmall a:active button,
.devicesSmall a:focus div,
.devicesSmall a:focus input,
.devicesSmall a:focus button {
background-color: #ffd96b !important;
}
<!Doctype HTML>
<html lang="en">
<head>
<Title>asd sada asfa</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="tileMargin">
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<a href="#">
<div class="deviceName"><span>Mobile</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('mobile');">+</button>
</div>
<div>
<input id="mobile" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('mobile');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Landline</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('landline');">+</button>
</div>
<div>
<input id="landline" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('landline');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Internet</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('internet');">+</button>
</div>
<div>
<input id="internet" type="text" value="0" disabled>
</div>
<div>
<button onclick="removeProduct('internet');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>IPTV</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('Iptv');">+</button>
</div>
<div>
<input id="Iptv" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('Iptv');">-</button>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</body>
</html>
It is not that it isnt working in FF or IE, :active is applied at the moment when you click the element and DOES NOT preserve it. The styling is removed once you release the click.
Also after you click the link Chrome keeps the focus on the link whereas FF and IE does not. That is why the :focus styling is removed after you click it.
To make a link active, add a class active in CSS and add/remove the classes according to which link was clicked using JS.
First of all, Thanks to you all for looking into this issue...
I have found the issue in my code that was creating problem and causing :active and :focus not work as expected. Actually I had placed the form element like input and button under anchor tag, which is not correct implementation according to w3c standards.
Now I have removed all the button and input from inside that "a" tag and its working fine now.
This question already has answers here:
How to make this Header/Content/Footer layout using CSS?
(7 answers)
Closed 6 years ago.
I want to set header fixed at the top and footer at the botom of the page.
Image:
index page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body class="bodyy">
<div class="container-fluid form">
<div class="row">
<div class="col-md-12 llg">
<img src="image/my-site-planner-logo.png" class="logo" />
</div>
</div>
</div> <!--container ends-->
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form method="post" action="" class="formt">
<div class="form-group">
<input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/>
<br />
<input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/>
<br />
<button class="btn btn-primary bbt" name="submit-" type="submit">
Sign Me In
</button>
<p class="text-center ttr">
Want to Register a New User ?
</p>
<button class="btn btn-primary bbt" name="submit-" type="submit">
<a href="sign-up.html" class="tbb">
Create Account
</a>
</button>
</div>
</form>
</div>
<div class="col-md-3">
</div>
</div> <!--row ends-->
</div> <!--container ends-->
<div class="footer form">
<h4>
© 2016 My Site Planner | All Rights Reserve
</h4>
</div>
</div>
</div> <!--container ends-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<body oncontextmenu="return false">
</body>
</html>
css code:
body{
margin: 0 auto;
background-image: url("white-background-1.jpg");
background-size: 100px 100px,
background-repeat: no-repeat;
}
.ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.container{
width: 400px;
height: 400px;
text-align: center;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 4px;
margin: 0 auto;
margin-top: 150px;
}
.footer .form {
margin-top: 100px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
I tried to change the code by .footer .form as position absolute and header is scrolling. Please can someone help me?
As I can see you are using Bootstrap you could use one of its templates.
Take a look at this one:
http://getbootstrap.com/examples/sticky-footer-navbar/
Another point about your code, its not suposed to be a good practice modify directly the container class since its a Bootstrap basics.
Hope this helps,
Regards
.footer .form {
margin-top: 100px;
position:fixed;
bottom:0px;
}
replace this code to fix your footer
I'm not an expert but you could try using:
Position: fixed;
Or
Position: bottom;
Hope this helps!
I have a little problem with the css file. I create a hmtl file and css file style and my idea is put in the background of the button form an image. When I use the css file doesn't work but I use the style parameter of the button is working fine, I do not understand.
My html/css code is this:
#charset "UTF-8";
/* CSS Document */
body {
text-align: center;
}
.btn-image {
width: 300px;
background-image: url('/images/ok/login-login-on.png');
background-repeat: no-repeat;
background-position: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test - Log in</title>
<!-- Bootstrap -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<img src="images/ok/Logo.png" width="200" height="200" alt="" />
<br></br>
<div class="box-center">
<form action="connectdb.php" method="post">
<input type="text" class="txtbox-login-image" placeholder="Usuario" name="username" required autofocus>
<input type="password" class="txtbox-password-image" placeholder="Password" name="password" required>
<!-- This option is not works -->
<button class="btn-image" type="submit">Submit</button>
<!-- This option is works -->
<button style="background-image: url('images/ok/login-login-on.png'); width: 100px; border: 1px solid #fff; margin: 0 auto; display: block;">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Help me, please ;)
If the CSS file is in a directory at the same level as the image directory, your filepath has to be
background-image: url('../images/ok/login-login-on.png');
button[type="submit"] {
background: url('path/to/file');
...
}