I have the following code.
<html>
<head>
<style>
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
</style>
</head>
<body>
<div id="info">
About Us |
Privacy Policy
<a id = "fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz"> <img src="../images/facebook.png" height = 16, width = 16 /> </a>
</div>
</body>
</html>
I want to move the fb link to the right corner. I guess my styling is not working. Or am I going wrong somewhere?
You have defined a class in your stylesheet
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
so while using it you should do
<div class="info">
...
</div>
<div class="fb">
...
</div>
OR if you want to use id then
#fb{
position: relative;
right:-1000px;
}
#info{
position:relative;
}
<div id="info">
...
</div>
<div id="fb">
...
</div>
first don't use spaces in attr="smth". Also you use id not class so css selector should be #fb , not .fb
Use this #fb{
float:right;
}
You are using class (.class) selectors instead of id (#id) selectors in your css
The styles are not reflecting because you are using . instead of #. . is used while dealing with class, for id use #.
Try this:
#fb{
position: fixed;
right:10px;
}
#info{
position:relative;
}
Jsfiddle
<div id="info">
About Us |
Privacy Policy
<a id ="fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz">
<img src="../images/facebook.png" height = 16, width = 16 alt="FB"/> </a>
</div>
CSS
#fb
{
float:right;
}
.info
{
position:relative;
}
There were no class named fb. DEMO
Related
body {
background-color:olive;
}
#container{
background-color:;
display:flex;
}
#container > a {
background-color:chocolate;
margin:5px;
padding:7px;
border-radius:10px;
}
#item-2 {
}
#item-4{
margin-left:auto;
}
#bonus {
background-color:red;
}
<body>
<nav>
<div id="container">
<a id="item-1 bonus" href="#">Information</a>
<a id="item-2 bonus" href="#">Contacts</a>
<a id="item-3 bonus" href="#">Media</a>
<a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>
Hello, could anyone tlel me why doesnt "bonus" class apply background-color:red ? Is there a rule where you can't put two id's or something? Some clarification would be really useful. Thanks.
What are valid values for the id attribute in HTML?
Read this regarding HTML attribute id.
You can instead use a class attribute for having multiple class names on a single element. id can't be used like that.
That is not a valid id. You can use class instead of id. Also, update your style for bonus to following for getting the right specificity. For details refer to CSS Specificity
body {
background-color:olive;
}
#container{
background-color:;
display:flex;
}
#container > a {
background-color:chocolate;
margin:5px;
padding:7px;
border-radius:10px;
}
#item-2 {
}
#item-4{
margin-left:auto;
}
#container > a.bonus {
background-color:red;
}
<body>
<nav>
<div id="container">
<a id="item-1" class="bonus" href="#">Information</a>
<a id="item-2" class="bonus" href="#">Contacts</a>
<a id="item-3" class="bonus" href="#">Media</a>
<a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>
body {
background-color:olive;
}
.container{
background-color:;
display:flex;
}
.container > a {
margin:5px;
padding:7px;
border-radius:10px;
}
.link {
background-color: chocolate;
}
.item-2 {
}
.item-4{
margin-left:auto;
}
.bonus {
background-color:red;
}
<body>
<nav>
<div class="container">
<a class="item-1 bonus link" href="#">Information</a>
<a class="item-2 bonus link" href="#">Contacts</a>
<a class="item-3 bonus link" href="#">Media</a>
<a class="item-4 bonus link" href="#">Logout</a>
</div>
</nav>
</body>
I advise you to always use class instead of id (read on this topic: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4).
Note that I removed the background-color: chocolate property, because the .container > a selector is stronger than the bonus.
How to provide filter to the photo sent for printing. I tried adding the following css.
#media print {
.photo {
img {
filter: brightness(2);
-webkit-filter: brightness(2);
}
}
}
Nothing happens. The brightness of the pictures is same. My application captures the pictures from webcam and sends the base64 image to the server. I am using webcam.js plugin to capture the image.
HTML Code
<a onclick="printpage()" class="btn btn-success" href="#">
<i class="fa fa-print"></i>Print Card
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div id="idCard_print" class="idcard">
<div class="cardinner">
<div class="cardheader">
<div class="image">
<img alt="header logo" width="40px" src="/assets/40xNxcardlogo-7e613bf7d05be0b9d2fe128f14519e11437beaa0d6b40fd2c332b6800059c783.gif.pagespeed.ic.-YOaR880p3.png" data-pagespeed-url-hash="348730017" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="afu-title">
Agriculture and Forestry University
<span>Rampur, Chitwan</span>
</div>
<div class="faculty">
Faculty of Animal Sci., Vet. Sci. & Fisheries
</div>
</div>
<div class="cardtype">
<span>Student ID Card</span>
</div>
<div class="photo">
<div class="student">
<img height="73px" src="data:image/jpeg;base64,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" data-pagespeed-url-hash="3345598353" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="sign">
<img src="data:image/png;base64,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" alt="Sardha" data-pagespeed-url-hash="2948073300" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
</div>
<div class="clearfix"></div>
<div class="details">
<ul>
<li><span>Name:</span> Roshan Gyawali</li>
<li><span>Address:</span> Rupandehi, Siyari - 7</li>
<li><span>Date of Birth:</span> 2017-11-07</li>
<li><span>Level:</span> B. V. Sc. & A.H.</li>
<li><span>Year:</span> 2013-2019</li>
</ul>
</div>
<div class="barcode">
<p>90432635</p>
<img class="img-responsive" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAABIAQAAAADzYAXTAAAABGdBTUEAALGP
C/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUw
AADqYAAAOpgAABdwnLpRPAAAAAJiS0dEAAHdihOkAAAACXBIWXMAAABIAAAA
SABGyWs+AAAAQklEQVRIx2P4jx8wtFX+Y59R+SDx4fPG9hlycuwzKiQfPmNv
Y5+XkCBRx5Y4Kj8qPyo/Kj8qPyo/Kj8qP+jkCbRvABzvCT9bo5chAAAAAElF
TkSuQmCC
" data-pagespeed-url-hash="3905847029" onload="!window.__cfRl||__cfRl.r(function(){pagespeed.CriticalImages.checkImageForCriticality(this);},this)" />
</div>
<div class="expiry">Expiry: Jan 01, 2019</div>
<div class="url">www.afu.edu.np</div>
</div>
</div>
<style>#media print{aside#sidebar,header[role="banner"],footer,#comments,#respond,header{display:none}#sidebar-wrapper,.header,table,.head,.container-fluid,#topNav,#idCard,.widget,.content-wrapper{display:none}.btn{display:none}.margin-top,.panel{display:none}body{content:asset-url("card-backgroundafu.png")}*{color:#000;// #include box-shadow(none);// #include text-shadow(none);-webkit-print-color-adjust:exact!important;color-adjust:exact!important}#page-wrapper.open{padding:0;height:0;margin:0}#page-wrapper .sidebar-footer{display:none}#page-wrapper ul.sidebar{display:none}#page-wrapper #sidebar-wrapper{display:none}#idCard_print{display:block;position:relative;background-color:#fff!important;margin:0;padding:0}#idCard_print .cardinner{padding:0}#idCard_print .cardinner .cardheader{font-size:11px;text-align:center;height:84px;line-height:11px;background-color:#deefe3!important;font-family:"Helvetica",sans-serif}#idCard_print .cardinner .cardheader .afu-title span{font-size:9px;line-height:9px;display:block}#idCard_print .cardinner .cardheader .faculty{font-size:10px;text-transform:uppercase;font-family:'',sans-serif;font-weight:700;line-height:11px;margin-top:2px}#idCard_print .cardinner .cardtype{font-family:'Helvetica',sans-serif;text-align:center;color:#fff!important;background:#8dc349!important;width:100%;margin:0 auto;font-size:11px}#idCard_print .cardinner .cardtype span{border-left:2px solid #fff!important;border-right:2px solid #fff!important;border-radius:10px;padding:2px 20px;color:#000!important}#idCard_print .cardinner .photo{height:77px;position:relative;margin-top:3px}#idCard_print .cardinner .photo .student{text-align:center}#icCard_print .cardinner .photo .student img{border:2px solid #ccc;border-radius:10px;filter:brightness(2);-webkit-filter:brightness(2)}#idCard_print .cardinner .photo .sign{margin:0 auto;top:50px;position:absolute;left:61px}#idCard_print .cardinner .photo .sign img{width:50px}#idCard_print .cardinner .photo .dean{text-align:center;font-size:10px;font-family:'Ubuntu',sans-serif;margin-top:5px;font-weight:800}#idCard_print .cardinner .details ul{list-style:none;text-align:center;margin:0;padding:0;font-size:10px;font-family:'Ubuntu',sans-serif;line-height:13px}#idCard_print .cardinner .details ul li span{font-weight:800}#idCard_print .cardinner .barcode img{width:50%;margin:0 auto}#idCard_print .cardinner .barcode p{font-family:'Ubuntu',sans-serif;font-size:9px;letter-spacing:3px;text-align:center;margin:10px 0 0 0}#idCard_print .cardinner .url{font-size:11px;text-align:center;font-family:'Ubuntu',sans-serif;background:#8dc540!important;color:#000!important}#idCard_print .cardinner .expiry{font-size:9px;font-weight:600;text-align:center;font-family:'Ubuntu',sans-serif;color:red!important}#idCard_print:before{content:"";background-image:asset-url("card-backgroundafu.png")!important;background-repeat:no-repeat;background-position:center center;content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;opacity:.1}#page { size: 53.98mm 85.60mm; margin: 0mm; }}</style>
</div>
From what I can see the only problem is that you seem to be using SASS like syntax for your CSS.
#media print {
.photo {
img {
filter: brightness(2);
-webkit-filter: brightness(2);
}
}
}
If this is raw CSS then you need to clean up the syntax to match this:
#media print {
.photo img {
-webkit-filter: brightness(2);
filter: brightness(2);
}
}
Remember to always put the vendor specific styles before the generic styles. So I moved the -webkit-filter before filter
I created a local page on my machine and emulated printing and the CSS does apply with the change above.
Also consider adding a specific class to each of the images to help improve your CSS rules.
Instead of this:
#icCard_print .cardinner .photo .student img{
border:2px solid #ccc;
border-radius:10px;
filter:brightness(2);
-webkit-filter:brightness(2)
}
You could simplify it to this:
.student-img{
border:2px solid #ccc;
border-radius:10px;
filter:brightness(2);
-webkit-filter:brightness(2)
}
with the html for that image tag being this:
<img class="student-img>
And then move the height:73px into the CSS instead of in the style attribute.
Consider using a BEM styled css and you can see a good simplification/reduction in all your CSS rules.
Also, I always use !important for everything I have in the #media print block. This is the only place I allow myself to use !important but I use it on everything just to make sure I have proper specificity of the CSS.
Look here for how to emulate print mode in Chrome
I'm trying to align an a tag to the top of my div in bootstrap. This is the current code I have:
<div class="authorAvatar">
<img src="<?php echo $author->avatar;?>" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?>
<?php echo $author->points;?>
</a>
</div>
What I am trying to achieve is the user's avatar being displayed, and then next to it, the username and the user's points directly below it. I have tried used the following CSS code:
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar a {
display:inline;
vertical-align: text-top;
}
But the a href is centered in the div. I have also tried adding a position:relative to the authorAvatar and a position:absolute; and top:0px; to the a tag, but then the image is underneath the a href tag.
Here is a plunkr:
http://plnkr.co/edit/9HVQ4U3UjjqaiHzlxqkO
How can I achieve something of this effect:
image username
image points
image
If you are using bootstrap, try using the boostrap's css classes instead of your own css.
<img class="img-responsive pull-left"src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="height:50px">
<a class="pull-right"href="#">blabla</a>
.authorAvatar {
display:inline-block;
float:right;
height:50px;
}
.authorAvatar img{
display: inline-block;
}
.authorAvatar a {
display: inline-block;
vertical-align: top;
}
<div class="authorAvatar">
<img src="http://lorempixel.com/100/100/nature/" style="width:auto;height:50px;">
<a href="profile.php?id=<?php echo $author->user_id;?>">
<?php echo $author->username;?><br>
<?php echo $author->points;?>
</a>
</div>
Check whether this effect fits what you need.
http://plnkr.co/edit/bdzuVhgAqaP6Bi6pLqOW?p=preview
html:
<link rel="stylesheet" href="style.css">
<div class="authorAvatar">
<img src="http://worldofdtcmarketing.com/wp-content/uploads/2014/05/Apple-logo.jpg" style="width:auto;height:50px;">
<a href="profile.php?id=1>">
<div>blahblahblah</div>
<div>blahblahblah</div>
</a>
</div>
css:
.authorAvatar {
height:50px;
}
.authorAvatar a {
display:inline-block;
vertical-align: top;
}
I'm trying to make a floated menu at the top of the page, but it wont center.
I used the code from here: http://codepen.io/anon/pen/rxgoj
and this is mine: http://codepen.io/anon/pen/BDpte
<body>
<div id="header">
</div>
<div id="content">
<div id="main">
</div>
</div>
<div class="navigation">
<div class="navigation.fixer">
<ul class="floating-elements">
<li class="floated">Home</li>
<li class="floated">Joeys</li>
<li class="floated">Cubs</li>
<li class="floated">Scouts</li>
<li class="floated">Venturers</li>
<li class="floated">Rovers</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
#charset "utf-8";
.navigation {
float:left;
position:relative;
left:50%;
/*overflow:hidden;*/
}
.navigation.fixer {
float:left;
position:relative;
left:-50%;
}
.floating-elements
{
list-style:none;
}
.floated
{
float:left; margin-right:10px;
}
Help would be much appreciated.. :)
.navigation {
position:relative;
text-align:center;
}
.floated {
display:inline-block;
margin-right:10px;
}
http://jsfiddle.net/otbmtf13/
I have solution here : http://codepen.io/anon/pen/tJaHy
For elements with class names containing a period '.' in them, you should escape the period while specifying the css handle like so
.navigation\.fixer{
.....
}
else the regular css handling means a string of type ".navigation.fixer" is an element having both distinct class names of "navigation" and "fixer" , which is not the case here as it is a single class name.
I have two questions:
When i run the code below, it shows me names of links in large form, after i reload, it is good, so what is problem?
I want to put spaces between names like this:
მთავარი ბაკურიანი გუდაური ზღვა კახეთი სვანეთი ვარძია ქართლი ძველი_თბილისი
How could i do this?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
margin: 0 auto;
width: 3000px;
font-size:70px;
clear: both;
display: block;
}
#test a {
float: right;
}
</style>
<body bgcolor="blue" >
<img src ='english.gif' style="float:right" width="88" height="88">
<a href="indexR.html"><img src ='russian.gif' alt="Russian flag" style="float:right" width="88" height="88"/>
<a href="index.html"> <img src="georgian.jpg" style="float:right" width="88" height="88"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
</div>
</body>
</html>
For question 2.): you could simply put a non breaking space in between:
კახეთი
სვანეთი
ვარძია
Which results in:
კახეთი
სვანეთი
ვარძია
Or you can add paddings/margins inside your style definitions so that anchors ("a tags") reserve some space to the left and/or right. The latte certainly is the preferred way to go.
You could use for space, it is a valid HTML string for space so it'll be validated by W3C too.
use between links to get spaces
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
indexR and index need closing </a> tags. Also for spaces use or css margins or padding.
For using space in your html application use
1) Entity name
 
;
Or
2) Entity Number
 
;
You can use %20 the HTML-ASCII syntax for the space character. I have found that sometimes doesn't work that well with links.
Add padding in anchor tag CSS file.
Directly applies to all anchor tag:
ul li a{ padding: 10px; }
Or if using any class then,
.classname ul li a{ padding: 10px; }
Though   is totally valid but do try this as this is a elegant way
<style>
.links
{
display:flex;
align-items:center;
justify-content:space-around;
}
.links a
{
flex:1;
text-align:center;
}
</style>
<div class="links“>
კახეთი
სვანეთი
ვარძია
</div>
How to make space between exemple: Home About Contact
.menu{
text-align: right; /*exemple*/
}
.menu1 {
list-style-type: none;
display: inline-flex;
}
.test{
color:red;
text-decoration: none ;
padding-inline-end: 55px; /*exemple */
}
<div class="menu">
<ul class="menu1">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>