This question already has answers here:
Is there Unicode glyph Symbol to represent "Search" [closed]
(5 answers)
Closed 5 years ago.
I'm trying to put a search icon in the navigation bar of my webpage but I'm not willing to use image for the purpose. Is there a HTML entity for a search icon used in search engines or search bars in different websites. I know most of them use images but is there any HTML entity for it?
Thanks in advance.
EDIT: I am providing the code
<li> **SearchIconEntityToPutHere**
<ul>
<li><form id="searchbar">
<input type="text">
</form></li>
</ul>
</li>
HTML
Use 🔍 for 🔍 and 🔎 for 🔎
CSS (content string)
Use '\1F50D' for 🔍 and '\1F50E' for 🔎
As noted in comments, this depends on font and unicode support.
I suggest you stick with using an image or sprite sheet for this purpose to ensure that it's supported.
Update: Fonts
A new method for this is through the use of special font frameworks, which use a combination of web fonts and CSS helper classes. One example is Font Awesome (the example below uses the search icon):
<i class="fas fa-search" aria-hidden="true"></i>
Using this method has the benefit of having something that can be resized without a change in quality, as well as being subject to CSS rules like any other text, so rules like color and text-shadow can affect it.
How about using css and html only? This is what I did (can be improved):
<!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8">
<title> A css trick </title>
<style type="text/css">
body{
background-size: 100%;
background-color: #000;
color: orange;
font-size: 18px;
margin: 0 auto;
text-align: center;
}
#search_box{width: 60px; position: relative; margin: 0 auto; transform: rotate(26deg)}
#search{width:10px; height: 10px; border: 3px solid #f5f5f5; border-radius: 10px; float: left;}
#cabe{width: 8px;display: block; border: 2px solid #fff;color: #f6f6f6; font-weight: bold; text-shadow: 2px 0px #fff; position: absolute; top: 6px; left: 13px; font-size: 16px; border-radius: 10px;}
</style>
</head>
<body>
<h1>CSS TRICK</h1>
<div id="search_box"><div id="search"></div><span id="cabe"></span></div>
</body>
</html>
There is no HTML entity that could be reasonably regarded as denoting a “search icon”.
Depending on what you mean by “search icon”, there may or may not be a Unicode character that represents it. See Is there Unicode glyph Symbol to represent "Search". If there is, then it can be written as a character reference in HTML, though this is rather immaterial; the important thing is that most fonts would not contain it.
Related
So I plan to make my login page responsive using bootstrap. But when I add bootstrap link in my code, the display of my HTML is affected for some reason. I wanna know why is that, and can you give me a tip how can I make my login page responsive?
Here is the image if there is bootstrap link added:
Here is the image if there is no bootstrap link:
My code:
body {
width: auto;
margin:0;
padding:0;
}
#font-face {
font-family: "Gidole";
src: url(CODE Light.otf);
}
h2 {
text-align: center;
}
.container {
width: 960px;
height: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.row {
width: 320px;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
color: #191919;
background-color: green;
box-shadow: 0 1px 1px #ABBEB5;
font-family: "Gidole", sans-serif;
padding: 10px 55px 40px;
border: 1px solid black;
}
input[type=text],[type=password] {
width: 97%;
height: 22px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
color: #191919;
font-family: "Gidole", sans-serif;
margin-top:5px;
}
#login {
width: 100%;
margin-top: 5px;
padding: 10px;
font-weight: bold;
cursor: pointer;
/* display: block; use for centering */
display: block;
color: #000000;
}
#signup {
color: #191919;
margin-top: 5px;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
#forgotpass {
color: #191919;
cursor: pointer;
font-size: 12px;
text-align: center;
display: block
}
<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<h2> User Login </h1>
<div class="myForm1">
<form action="p1.php" method="POST">
<input type="text" name="username" placeholder="Username" /> <br/>
<input type="password" name="password" placeholder="Password" /> <br/>
<input type="submit" name="submit" id="login"/>
</form>
<form action="register.php" method="POST">
<p> Sign up </p>
<p> Forgot password? </p>
</form>
</div>
</div>
</div>
Twitter Bootstrap is a collection of css and js components ready to be used in your project.
You used some class names used by Bootstrap in your project. Without loading Bootstrap, the rules defined in the library for those classes do not apply, because you're not loading the library. When you load it, they apply.
Some of the classes used by you and which Bootstrap styles up are: container and row. You should take some time and look through their examples and also inspect the applied CSS rules to better understand what each does.
Also, when you decide to use Bootstrap, best practice (by far) is to start from their provided examples and try to keep modifications to a minimum, especially regarding layout.
Please note Bootstrap provides fixes and solutions for most common layout problems such as
browser rendering differences
responsiveness
But, again. Bootstrap is not a robot which analyzes and fixes your page. It's just a collection of CSS rules, #media queries (and sometimes small js snippets). If you plan on using it, you need to learn what each of those components does.
Pretending it works out of the box is like pretending a plane to fly itself. Some do, but it's still best you know how to steer, land and take-off, just in case the automatic systems fail.
To further elaborate what #Andrei Gheorghiu answered, Kindly open
up your console on your Google Chrome browser (right click then 'Inspect Element' or press Ctrl + Shift + I or F12)
You can see in the image that your class {container} from your [style.css]
{width} property was override by Twitter Bootstrap [bootstrap.min.css] class {container} property (check your console).
CSS properties will change depending on the importing order of your css files. In this case, I import the css files in this order:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css" />
This means that the css properties will start off by [bootstrap.min.css] follow by [style.css]
So if we reverse the order like this:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
This will happen:
And this one....
Now the Twitter Bootstrap [bootstrap.min.css] class {container} property overrides your [style.css] class {container} property.
You can also see that there's a prefix here '#media'. You can learn more about using #media queries
to make your login page responsive here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
But like #Andrei mention, you can start of your login page layout from Bootstrap's provided example and keep your styles to a minimum if possible. Hope this helps for you.
I did already find a post about using the <hr> tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
Thanks
You can still use <hr> as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
Simply use hr tag in HTML file and add below code in CSS file .
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
it works perfectly .
You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:
The HTML:
<h3>This is a header.</h3>
<div class="customHr">.</div>
<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>
The CSS:
.customHr {
width: 95%
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1px;
background-color: grey;
margin-top: -6px;
margin-bottom: 10px;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
Here is a sample code:
The HTML:
<div class="title_block">
<h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>
The CSS:
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code:
use ::before or ::after
See Align <hr> to the left in an HTML5-compliant way
There is supposed to be a way to create rounded corners in a table row or element using just a few lines of code. (This seems preferable to other more complicated ways using images.)
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
However, as a css/js noob, I don't know what to do with this. Can I put it in a style tag within the element to round? Do it put it in .css file? I don't want this to apply to all rows or table cells, just one. Many thanks for the correct syntax/usage.
You can do it in a style attribute on your container :
<div style="-moz-border-radius: 15px; border-radius: 15px;">....</div>
or in your css file:
.class1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
//and add it to your container:
<div class="class1">....</div>
As far as I am aware, this is not IE 8 or bellow friendly, although in Chrome, Safari and Firefox (etc) it works.
If you're only going to be using this once, put it directly in your container.
<div style="-moz-border-radius: 15px; border-radius: 15px;"> Content here </div>
If you are going to be using this more then once on the page, I suggest putting it at the top of your page in the head (or in a stylesheet file):
<style type="text/css">
.roundedcorners {
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
and in the container putting
<div class="roundedcorners"> Content here </div>
Here's a useful website to help you with using it in tables: http://www.red-team-design.com/practical-css3-tables-with-rounded-corners
I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.
Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.
I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.
The image of my website can be found here:
http://postimage.org/image/20dhjcdb8/
Thanks in advance.
I currently have the following code in my index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
</body>
</html>
and the following CSS code:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
width: 960px;
float: right;
background-color: white;
margin: 0;
}
.links {
float: left;
margin: 0px;
}
a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: grey;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover, a:active{
background-color: #333333;
}
The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.
In HTML images are by default inline level elements so they follow text rules (and will have blank space below to keep the correct alignment with letters like "p" and such). You can either assign display: block to the header image, or define the header container to have the same exact height as the image
Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.
Because floated elements pop out of their container, you have to clear the float to extend the container with something like
<div style="clear: both"></div>
or use some reset/clearfix css such as the one provided by html5boilerplate.
add to your css
#banner { display: block; }
If you remove the float property of #mainc then the border will surround all the content. By using float, you are taking the div out of the main page flow.
I have a crazy navigation menu that I have to code. It's kind of tough. Please see the screenshot of the design here:
navigation menu screenshot
As you can see, the background of the "Home" menu item is quite tough! I can't figure out how to make its background "see-through", meaning it cuts through the dark background and shows the patterned green background.
Do you know how to do this using css?
Thanks in advance.
You can use either:
background: transparent;
background: inherit;
But, you'll need to structure your HTML so that the Home, Journal, etc. links are embedded in the box with the background.
For rounded corners, check this out.
Or you can use images with shaped transparency as the background.
#Gary [comment]: inherit grabs the first settings it finds going up the hierarchy. So if you have a middle layer, it's gonna pick up on its settings instead.
Something you might try then is to use:
background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
In theory, it should look for the first background-image setting, then. But, I've never used this, so no guarantees.
One way you could do it is the opposite approach you'd normally take. Apply a black background to the other elements, leaving a gap where the highlighted tab is. Kind of a reverse sliding doors.
Create two very long black images: one for the right which has a rounded corner on its left, and one for the left with the corner on the right and position them on either side of the current element. Sadly, I don't think plain CSS will be able to do this, but it looks like you're already using JS.
I'm not sure how feasible this will be, it's just off the top of my head, but it could be an interesting approach.
Another interesting approach to transparent (or translucent) effects is to give two sections either
1) the same background image, or
2) similar background images, with one of them modified with color or blur or whatever
... and make sure that their background-position is the same.
This is demonstrated in Eric Meyer's "Complex Spiral" demo. (Here's another version he made.)
Clarification: this is in Meyer's "Edge" section for a reason - it's not compatible with IE6. (Thanks, Boris.)
You can emulate fixed background position unfortunately not supported by IE6 (see nerdposeur's answer) with careful "manual" positioning using background-position. Position the big image with 0,0 offset. Use the same image for selected tab, but offset it to the left and up by exactly the position of the top left corner of the tab. That will ensure exact matching of the two backgrounds you want.
You seem to have a fixed menu, so it means carefully writing background CSS for your four menu elements, one by one. Of course, if your menu is dynamic, this approach does not work. Here's a demo I quickly cooked up starting with this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 20px;
padding: 0px;
background: #CACCB4;
font: 16px arial, sans-serif;
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
}
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a.active {
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
background-position: -125px -18px;
border-bottom: 3px solid #ABAD85; }
#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ABAD85;
padding: 20px;
border: 2px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #898B5E; }
</style>
</head>
<body>
<ul id="tabmenu">
<li>Enormous</li>
<li><a class="active" href="tab2.html">Flared</a></li>
<li>Nostrils</li>
</ul>
<div id="content">
<p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
<p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
<br />
</div>
</body>
</html>
I suggest making a 30 x 1 (Height x Width) image, fill it black and set opacity on it to about 35%... Save as .png (not compatible with < IE7 browsers)
Add that image to your menu background CSS class as follows:
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
I know this works because it's what I did for my site. The site isn't complete, but you can check out a screenshot:
http://www.logansarchive.za.net/preview.jpg
HTH