I'm trying to load an image from a url however whenever page is loaded it is always null any help will be appreciated
i also tried using src attribute and also did it from css as well but still it's not working
Here is what my header looks like:
Header Screenshot
here is my code:
html, body {
margin:0;
padding:0;
background-color: #181A1B;
height:100%;
width:100%;
}
.logo{
width: 50px;
height: 50px;
content:url("https://pasteboard.co/K18aDZ4.jpg");
}
.header{
margin:0;
padding:0;
position:relative;
background-color: #242627;
height: 50px;
}
.profilepic{
border-radius: 50%;
width: 30px;
height: 30px;
content:url("https://pasteboard.co/K18aDZ4.jpg");
}
.profile{
margin-top: 10px;
margin-right: 10px;
padding: 5px;
float: right;
}
#name{
font-size: 15px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="homepage.css">
</head>
<header class="header">
<img class="logo" />
<div class="profile">
<img class="profilepic" />
<label id="name">ABCD</label>
</div>
</header>
<body>
</body>
</html>
The problem is not with your code
The problem is the image link
You can put another image link and see that your code is completely correct
Example:
html, body {
margin:0;
padding:0;
background-color: #181A1B;
height:100%;
width:100%;
}
.logo{
width: 50px;
height: 50px;
content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
}
.header{
margin:0;
padding:0;
position:relative;
background-color: #242627;
height: 50px;
}
.profilepic{
border-radius: 50%;
width: 30px;
height: 30px;
content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
}
.profile{
margin-top: 10px;
margin-right: 10px;
padding: 5px;
float: right;
}
#name{
font-size: 15px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="homepage.css">
</head>
<header class="header">
<img class="logo" />
<div class="profile">
<img class="profilepic" />
<label id="name">ABCD</label>
</div>
</header>
<body>
</body>
</html>
Unable to recognize image
If you are careful, when you open the link, the image will be displayed a few seconds later
Also, the contents of the link are not just images
Use the link that contains the contents of the image to insert the image
pay attention:
Whatever the link is, there is no reason why its contents should be based on the same link
for example:
I think because the end of the link is .jpg
You think the contents of this link are definitely an image and should be displayed
but in reality it is not.
The link can be anything
I suggest you read more about urls , headers and htaccess
Use background instead of content. The css property is wrong.
Your code is perfect the problem is of pasteboard.
You can use photobucket.com instead, which will do the same but in more efficient manner!
Related
I'm new in CSS/HTML and I can't make the design that I want.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
CSS:
.logo {
width: 80px;
height: 80px;
background-image: url('../assets/images/logo.jpeg');
background-size: cover;
margin-right: 20px;
}
.search-bar {
width: 50%;
height: 50%;
border: 1px solid gray;
border-radius: 20px;
padding: 10px;
margin: 0 auto;
font-size: 1em;
}
Photo (I would like the logo to be centered, next to the search bar):
Thanks!
You can use display:flex and justify-content: center in your .header div to center the elements in the center; Add a margin-right to the logo to give a space between the logo and search bar
.header {
display: flex;
justify-content: center;
}
.logo {
width: 80px;
height: 80px;
background: url('https://via.placeholder.com/80') no-repeat;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
I'm kinda new to web dev too, but this should work:
.header{
text-align: center;
}
There are many ways to achieve your desired output. One of the ways using flex. You can also have a look at FLEX: A simple visual cheatsheet for flexbox.
display: flex;
align-items: center;
justify-content: center;
Click on this CodePen to see the full code.
Besides, you can also have a look at the link below to see the issue & solution visually: StackOverFlow QA - Header in css not as expected
Happy coding :)
The problem was in the
margin: 0 auto;
Hope it helps someone!
For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
this is the footer
#footer {
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
bottom: 0px;
top: 99%;
}
#copyright {
float: left;
font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin {
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
}
<div id="footer">
<div id="copyright">
© 2016 copmpany
</div>
<div id="linkedin">
Follow us on
<a href="https://www.linkedin.com/">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
This how it looks like. This how it should look like. I don't want to use position:absolute and I want to make it work on all screens, and all pages of the website. If i use absolute, then when I'm using the phone it will go down too much.
I have tried everything, including using .container{ max-height:140%;} and put the footer 99% that distance but didn't work, nothing worked. I can't use fixed position because on the services page that I linked to, the height goes to 130% on some screens.
This page will never work exactly the way you want it to because it isn't valid. You can only have one <!doctype html>, one <html>, one <head>, and one <body> on a page and in that particular order.
This is a waste of time until you fix that problem first. Run your page through this: VALIDATOR
<!doctype html>
<html>
<head>
<!--<link>, <script>, <style>, <title>, <meta> are typically here.-->
</head>
<body>
<!-- Your content <div>, <p>, <span>, etc. goes here.-->
</body>
</html>
Your page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Services</title>
</head>
<body>
<div class="index_wrapper">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<!------CONTENT------>
</body>
</html>
<div class="container">
<div class="service_title">
</div>
<table>
<!--CONTENT INSIDE A TABLE LAYOUT WITH INLINE STYLES---->
</table>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="footer">
<div id="copyright">
© 2016 Tycron Solutions
</div>
<div id="linkedin">
Follow us on <a href="https://www.linkedin.com/company/tycron-solutions">
<img alt="LinkedIn" src="http://i.imgur.com/DqA6suH.png">
</a>
</div>
</div>
</body>
</html></div>
</body>
</html>
You can change position:absolute; to position:fixed;
Check the code in this link: https://jsfiddle.net/4qyojap2/
#footer{
background: #F3F5F6;
position: fixed;
width: 100%;
height: 30px;
padding:20px;
bottom: 0px;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Your css says :
bottom: 0px;
top:99%;
This is not needed as your div already is at the bottom of your HTML.
The footer will position correctly if you suppress these two lines.
New CSS here :
#footer{
position: absolute;
width: 100%;
height: 10%;
margin-top: 1%;
}
#copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
margin-left: 15%;
}
#linkedin{
float: right;
margin-right: 15%;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
}
Have you tried this
#main-body{height:100vh;}
<header role="header">
<nav role="navigation">
Home
</nav>
</header>
<div id="main-body">
this is the main body
</div>
<footer role="footer">
this is the footer
</footer>
or you can use jQuery on it like,
//declare height of the "#main-body"
$("#main-body").css('height' : $(window).height()+'px');
Hope this help. Cheers!
I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/
You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.
I'm trying to center align my Logo of my screen but not able to accomplish. Please help.
HTML
<!-- Header Start -->
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft"><img alt="" title="" src="images/top_lft_arrow.png" /></div>
<div class="HeaderRgt"><div class="TopRedBox"><a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>Save</a></div></div>
<div class="HeaderLogo">LOGO</div>
</div>
<!-- Header Ends -->
CSS
.HeaderLogo
{
position: absolute;
margin:0 auto;
width: 100px;
top:10px;
}
2 Possibilities:
.HeaderLogo {
width: 100%;
text-align: center;
}
Or
html
<div class="HeaderLogoWrapper"><div class="HeaderLogo">LOGO</div></div>
css
.HeaderLogoWraper {
margin: 0 auto;
text-align: center;
width: 100%;
}
One method to do this is to put all your div tags into another div with the class wrapper.
You can then add the CSS text-align: center; on your wrapper class and that will center align your header.
This is shown in this Fiddle. Hope it helps.
Like this
demo
css
.HeaderLogo {
margin: 0 auto;
width: 100px;
text-align:center;
}
demo1
.MastHead {
border: 1px solid red;
}
.HeaderLogo {
margin: 0 auto;
width: 100px;
text-align:center;
float:left;
}
.TopRedBox{
float:right;
}
Try this
.HeaderLogo
{ position: absolute;
margin:0px; auto;
width: 100%;
text-align:center;
}
DEMO
If you want to center the image, you can do that with CSS property background-position:
.MastHead {
background-image: url('mylogo.png);
background-position: top;
}
Reference on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position?redirectlocale=en-US&redirectslug=CSS%2Fbackground-position
It will not work in IE6 (not sure with IE7) if someone is still using them...
I hope this will work for you
Can you use margin-left: property instead of margin.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<head>
<style type="text/css">
.HeaderLogo
{
position: absolute;
width: 100px;
top:10px;
margin-left:45%;
}
</style>
</head>
<body>
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft">
<a href="#dashboard" data-transition="slide" data-direction="reverse">
<img alt="logo" title="" src="images/top_lft_arrow.png" />
</a>
</div>
<div class="HeaderRgt">
<div class="TopRedBox">
<a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>
Save
</a>
</div>
</div>
<div class="HeaderLogo">LOGO
</div>
</body>
</html>
I hope this will work, and if it isn't working, then you can set position:relative
Follow instruction here. https://www.w3schools.com/css/css_align.asp
.className {
margin: auto;
}
This should work!