This is my code. I have done the CSS and the HTML code so that this logo image that I have moves to the right.
However, the image remains still. What am I doing wrong?
HTML CODE:
#logo {
width: 200px;
height: 200px;
position: absolute;
top: 0px;
right: 200 px;
border: 25px black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
Change right: 200 px; to right: 200px;
The space before px is invalid, so it doesn't recognize it as being 200px from the right.
add:
body {
position:relative;
}
Use float:right instead of what you have tried to do in your css....
#logo {
width: 200px;
height: 200px;
border: 25px black;
float:right;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
Related
It does show background color and top div tag but background image is not visible up. I'm pretty new at html and css so kindly explain a little too.
here is my html and css code
body {
background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top{
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
You can try using
background-size: cover;
which will stretch the image to cover the page, but since the resolution of the gif is rather different than the screens, it will look kinda weird.
Also, the no-repeat is the reason, it doesnt show at all. Without it, it will show, but several times next to each other.
I'm trying to display an html webpage that has an image that covers the entire page. Text that is centered at the top of image, but obviously in front so it can be seen.
Example : https://gyazo.com/8f7015a61a296f71c02e2b4030710074
This is what I'm getting :https://gyazo.com/0a2f9ad37eaf05cd1cb5a623f75d6bca
My text is displaying at the bottom, nor is it over the image.
Here is my CSS:
body {
background-color:brown;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 50%;
left: 50%;
text-align:top;
}
Here is my HTML:
<!doctype HTML>
<html>
<body>
<div class="container">
<img src="images/image.jpg" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
Can someone show me what I'm doing wrong?
Check this. You have given the style for .title instead of .Title. Please check that. Everything else works as expected.
body {
margin: 0;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 10px;
left: 0;
right: 0;
}
<html>
<body>
<div class="container">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
I am trying to figure out how to test how my code works but I cant seem to figure out why they wont link. They are in the same folder. I am also trying to add a facebook pixel and analytics to this page. Would I embed that code into my HTML file?
Thanks in Advance
Here is my code
Html
<!DOCTYPE html>
<head>
<title>Full Screen Landing Page</title>
<link href rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
</html>
#import url('https//fonts.googleapis.com/css?family=Raleway');
#import url('https//fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
it not <link href rel="stylesheet" href="style.css">
its
<link rel="stylesheet" href="style.css">
it read the initial href value as it is empty its not reading any css file
You shouldn't need to have href before rel when you link your stylesheet. Also, you have a closing html tag but no opening html tag.
Either put your custom css classes into the style.css file, or use style tag to include them, also you have duplicate href attribute inside link tag
<head>
<title>Full Screen Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
</style>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
I have this html code sample. When I write an internal css as follows it works fine. But when I implement it with a ID selector it won't.
The problem is picture size is more than it should be.
Here's the code without ID selector
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
</head>
<body>
<div>
<img src="Header.png" alt="Header not Found" style="width:100%;min-width:10px;height:auto;position:relative;top:50px;">
</div>
</body>
</html>
and here's the code with ID selector and here's its preview
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
<style>
#headerImage{
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="headerImage">
<img src="Header.png" alt="Header not Found">
</div>
</body>
</html>
Can anyone tell me what am I doing wrong?
Your div with id="headerImage" is the #headerImage element. In the first example, you applied styles to the img. So in the second example, you're applying styles to the div. To apply styles to the img inside of #headerImage use #headerImage img as your selector.
<!DOCTYPE html>
<html>
<head>
<title>Omicron.com</title>
<style>
#headerImage img {
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="headerImage">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Header not Found">
</div>
</body>
</html>
You need to target the image, not its parent div.
#headerImage img{
width: 100%;
min-width: 10px;
height: 50px;
position: relative;
top: 50px;
}
I want the logo of my page on the top left corner surrounded by a black background. However, the background color does not cover the area on the right of the image. I am using HTML and CSS.
This is my code:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>
Remove align="left" attribute. It acts similar as if you made image float: left, however you never clear the float after so the parent collapses and you simply can't see background:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" />
</a>
</div>
</body>
</html>
If you want to make logo left-aligned you should use text-align: left of the #title, it will work properly because img is inline-block by default.
You have to add a display rule to your title element so that it actually gets a placement in the flow:
#title {
display: inline-block;
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>