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');
...
}
Related
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.
So for the life of me I don't know why the background image I designated seems to stretch in width. I looked up for many solutions and tried them but either the background will show only the upper right corner of the image or the upper left corner of the image.
This is the sample PSD I have:
PSD Sample
With my current settings the image is stretched in width for desktop browser.
Here how it looks for me:
Stretched Background Image
Below are part of my HTML markup and CSS settings, I designated the background image for html element. I tried background-size:cover but it didn't work.
[You can ignore the foreign language in the HTML snippet]
/*--------Global--------*/
* {
box-sizing: border-box;
}
html {
background: url('../img/background.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
margin: 0;
}
/*--------Layout--------*/
.main-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
/*----Flex----*/
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.content-center {
justify-content: center;
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RenTap</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="main-container flex align-center content-center">
<main>
<img class="logo" src="img/logo.png">
<h1>REN<span class="tap">TAP</span></h1>
<div class="user-info">
<input class="username" type="text" placeholder="שם משתמש">
<br>
<input class="pass" type="password" placeholder="סיסמא">
<br>
<button>התחבר</button>
</div>
<div class="help-and-terms">
<p>
שכחת סיסמא?   <a>לחץ כאן</a>
<br>
<label class="checkbox-label">
<input type="checkbox"> קראתי והסכמתי לתנאי ההשכרה של רנטאפ  <a>לתנאים</a>
<span class="checkmark"></span>
</label>
</p>
</div>
<div class="footer">
<button class="facebook">
<i class="fab fa-facebook-f"></i>
התחבר באמצעות פייסבוק
</button>
<br>
<button class="register">הרשמה</button>
</div>
</main>
</div>
</body>
</html>
You can try
html {
background-size:cover;
background-position:center center;
background-repeat: no-repeat;
}
Final answers seem to have been editing .row's styles to be margin-right: 0 !important; and editing the body element's styles to be overflow-x: hidden; Thank you to everyone!
In my site, I style the html element with a background-color in order to fill the entire page. However, when doing so, the page width increases and causes it to be scrollable, horizontally. Is there anyway to fix this? The only framework I'm using is Bootstrap, and I've been trying to fix this for about a week.
Edit: Removing the background-color styling gets rid of the issue, but that's not really an option.
Edit Two: Added all HTML in, as well as this screenshot:
HTML
<!DOCTYPE html>
<html>
<head>
<title>League Site</title>
<link rel="stylesheet" type="text/css" href="index.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="outer">
<div class="row">
<div class="col-lg-2"><h1>AnotherLOLSite</h1></div>
<div class="col-lg-10"></div>
</div>
<div id="menu">
<div class="row">
<div class="col-lg-2 menu-item"><h4>Home</h4></div>
<div class="col-lg-2 menu-item"><h4>Item DB</h4></div>
<div class="col-lg-2 menu-item"><h4>About</h4></div>
<div class="col-lg-6"></div>
</div>
</div>
<div id="body" align="center">
<form class="summoner-search" method="POST">
<input type="text" class="summoner-input" placeholder="Enter a summoner name...">
<button type="submit">GO!!!</button>
</form>
</div>
</div>
</body>
</html>
Relevant CSS
html {
background-color: #081f44;
}
#outer {
background-color: #081f44;
}
#menu {
background-color: #000000;
}
.menu-item {
color: gray;
}
.summoner-input {
border-radius: 3px;
width: 30em;
height: 2em;
}
You should be applying the color to body not html. It shouldn't be causing this issue, but still isn't best practice.
EDIT
The problem was in the class 'row' from the bootstrap framework. Just add the below into the stylesheet.
.row{
margin-right:0!important;
}
why use background-color in html instead the body tag?
body{
background-color:#081f44;
min-height: 100vh; //Fill all the screen
}
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 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/