I'm trying to create a custom textbox for a search function. However, the browser is ignoring the width setting in the css. I even took the code out completely and placed it in its own html file in case it was being restricted by something else. I've used both Google Chrome v38 and IE11
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
with the css
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
yet in the browser, the textbox is rendered with a width of about 300px, regardless of what I set it to in css.
If I change the code to
<body>
<input type="text" style="width: 700px" class="bigsearch">
</body
I get the same result. However, if I take all the css and put it in the html page, removing the link to the stylesheet file as such,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
</style>
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
it works properly. So, what gives?
EDIT:
I should add that the rest of the styles are being applied to the textbox - shadow, rounded corners etc.
It's not working because your style sheet is not properly linked
If your file is index.html and is in:
C:/User/Documents/index.html
and your style sheet is in
C:/User/Documents/Content/style.css
Then the following works fine
<link href="Content/style.css" rel="stylesheet" />
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Hey guys so I'm just creating a simple webpage for class but for some reason my html file won't connect to my css file, it is in the same folder and everything. Any help would be appreciated.
This is my HTML:
<!DOCTYPE html>
<html>
<!--<style>
body {
background-image: url('gold.jpg');
background-repeat: repeat;
}
</style>-->
<head>
<meta charset="utf-8">
<title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</title>
</head>
<body class="loggedin">
<div class = "tab-content">
<h1>Role: Admin</h1>
<li>Manage User Accounts</li>
<li>Assign Roles</li>
<li>Help Desk</li>
<li>Logout</li>
</div>
</body>
</html>
This is my CSS
body {
background:
url(gold.jpg) center repeat;
}
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
There may be multiple reasons:
Your "link" tag shouldn't go inside the "title" tag
Make sure your css file is in the same directory as the html one, and check if the file name is the same.
Check your css file
Edit: Just checked and you have no elements with such Id, make sure you can see the changes made by the css file.
Also check the developer console, it helps a lot in debugging.
There are some problems with it:
The link tag should not go in the title tag. Keep them seperate, but within the head.
Type attribute in the link tAG is not neccesary. Try to keep things simple.
Check your CSS file name. It may be different.
Here is your corrected code:
<head>
<meta charset="utf-8">
<title> Your Title </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
First, you should structure your HTML correctly. Starting by removing your CSS file from the Title since it won't work there.
Second, Check your folder structure and make sure you are following the right path to your CSS file.
Then if you are using VS code. You could just click ! (exclamation mark) and you get to pick a prebuilt HTML page that will get you started with the right structure.
Here is an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<div class="testing">Hello world</div>
</body>
</html>
Everything is fine in your code. There is just a little mistake to do some change and enjoy.
1)Remove the link(CSS) from the title.
2) Your class name is tab-content but you write it this tablist in CSS file.
3) class is represented by a dot(.) and id is represented by hash(#)
I'm not sure if you put hashes on purpose to make your css code not generating the desired output so i did clean up a bit of your code.
As others already said <title></title> expects and accepts only plain text so your link becomes invalid and shows up as such in your browser tab.
Hashes are for Ids and . for classes so i did delete these since there are no Ids configured in your HTML file. When your .css file already sets a background-image you dont need to code it twice in HTML. The code looks cleaner this way and might prevent future errors.
Have a nice day :)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>plain text</title>
<link rel="stylesheet" type="text/css" href="so1.css"/>
</head>
<body class="loggedin">
<div class="tab-content">
<h1>Role: Admin</h1>
<li>Manage User Accounts</li>
<li>Assign Role</li>
<li>Help Desk</li>
<li>Logout</li>
</div>
</body>
</html>
CSS:
body {
background: url(gold.jpg) center repeat;
}
div {
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
}
li{
list-style: none;
display: inline;
margin: 0;
}
li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
I am trying to display some text in traditional Chinese on my site ie
HTML:
<div id = "shareText">好</div>
CSS:
#shareText
{
position: absolute;
right: 125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
However the output character I'm getting is: 好. I tired changing the font like this:
#shareText
{
position: absolute;
right: 125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
font-family: "微軟正黑體", "Microsoft JhengHei", Tahoma , Verdana , Arial , sans-serif;
}
However the character remains the same. What am I doing wrong? Is it something to do with the coding of the html file? I tried changing from unicode 8 to 16, the character appears but I lose all formatting, all my divs are in the wrong place..
This displays correctly for me. Note the <meta charset="utf-8" /> tag in the head.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Chinese</title>
<style>
#shareText{
position: absolute;
right:125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
</style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>
For traditional chinese,
You have to use, <html lang="zh-Hant">
Full code:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<title>Chinese</title>
<style>
#shareText{
position: absolute;
right:125px;
padding: 20px 0 0 0;
color: #a9a4a4;
font-size: 25px;
}
</style>
</head>
<body>
<div id = "shareText">好</div>
</body>
</html>
Note: I ran above code, it works fine.
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.