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>
Related
.text{
width: 50px;
font-size: 27px;
float: left;
font-weight: bold;
}
.image{
width: 30%;
height: 100%;
clear: left;
float: right;
}
.parent{
background-color: pink;
height: 350px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
My wish would be to move the text next to the image. I have put these two inside a div and floatet the image right, but now i cant move the text down with margin-op?why and what could i improve?
Here is an example to point you in the right direction: https://jsfiddle.net/h5o607e1/1/
The biggest thing for you to look at here is the position and display settings for both the text and image: position: relative; and display: inline-block;
What about using a flexbox (display: flex):
.text{
width: 49%;
word-wrap: break-word;
margin: 0;
align-self: center; /*Vertically align text*/
}
.image{
width: 49%;
height: 100%;
background-color: red; /*for illustration*/
}
.parent{
background-color: pink;
height: 350px;
display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="schrott.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="parent">
<p class="text">ihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnihnii</p>
<img src="Pictures\—Pngtree—triangle neon color glowing border_4072770.png" class="image">
</div>
</body>
</html>
This is CSS, level 1 people: just use float. The value for float is left, right or none (float on Mozilla Developer Network). The order of the elements should have an effect too.
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<img alt="Placeholder" src="4072770.png" style="float: left;" />
<p>Placeholder...</p>
<img alt="Placeholder" src="4072770.png" style="float: right;" />
<p>Placeholder...</p>
Also don't put spaces or uppercase letters in URLs until you get more advanced or you'll create more headaches than it's worth.
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>
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>
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}