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>
Related
I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
I'm using wordpress with a custom template and I want to display a div the width of the window. This is my html code:
<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
<div class="blacklayer"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Title Text</h2>
<p>Test Text</p>
</div>
<div class="col-md-12 text-center">
Download
</div>
</div>
</div>
</section>
This is my css code:
.calltoaction {
background-position: unset !important;
position: absolute;
left: 0;
right: 0;
background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
background-size: cover;
padding: 80px 0 90px 0;
}
The problem is, everything I create gets placed within this div class:
.row {
margin-right: -15px;
margin-left: -15px;
}
So i'm trying to write custom css to create a div that displays over the top of this class as I don't have access to the template's code directly.
At the moment the result is this. I want that image to fit the width of the page.
Any help would be greatly appreciated.
See attached code-snippet for how to stack divs ontop of each other, assuming one div has setting: position: absolute; . I moved the lowest div slightly so it is visible.
.div-1 {
position: absolute;
z-index: 1;
background-color: red;
height: 100px;
width: 100px;
margin: 10px 0px 0px 10px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: green;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>
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>
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>
I created a print style sheet which links to my html page. Changes to the font, colors etc. work in the print version, but I can not change the size of my divs in the print version. For example, if I have a content div that is 300px X 300px on my page, it won't change it if I change the dimensions in the print version.
To figure out the root of the problem, I used inspect element to see if an css was overriding that in my print page. I found that the content div width is controlled by the body width. So I tried changing the content height and the body div in the print stylesheet. That did not work. I also tried creating a separate style sheet for both the main css and the print css. That did not work. Is there another way I can troubleshoot this issue...something similar to breakpoints maybe, but for html?
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--- TITLE - FROM SPECIFIC TO GENERAL --->
<title>Page</title>
<cfinclude template="/assets2011/webfonts/comment.htm" />
<link rel="stylesheet" type="text/css" href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" />
<link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" />
<link href="print.css" type="text/css" rel="stylesheet" media="print"/>
<style>
body{
width: 8700px;
height:2000px;
overflow: hidden;
}
#section{
width: 8000px;
float: left;
height: 1000;
z-index: 1;
}
#content{
width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto;
}
.navbarLeft{
height: 700px;
width: 40px;
top:0;
z-index: 2;
position:absolute;
background-position: 50% 30%;
background-image: url(navL.png);
background-repeat: no-repeat;
opacity: 0.05;
}
.navbarLeft:hover{
opacity: 0.5;
}
.navbarRight{
height: 700px;
width: 40px;
top: 0;
z-index: 2;
position: absolute;
background-position: 50% 30%;
background-image: url(navR.png);
background-repeat: no-repeat;
opacity: 0.05;
left: 2013px;
}
.navbarRight:hover{
opacity: 0.5;
}
table,tr,td {
border:1px solid black;
}
</style>
</head>
<body>
<!--Factor 1-->
<div class="section" id="factor1">
<div id="content">
<!--Begin Content-->
<p>textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj</p>
</div>
<!--End Content-->
<!-- Navigation -->
<ul class="nav">
<div class= "navbarLeft" id="menu" style="left: 755px;"></div>
</ul>
</div>
<!--End Factor 1-->
<!--Factor 2-->
<div class="section" id="factor2">
<div id="content">
<p>text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp</p>
</div>
<ul class="nav">
<a href="#factor1"><div class= "navbarRight" id="menu" style="left: 2005px;"></div>
</a>
<div class= "navbarLeft" id="menu" style="left: 2755px;"></div>
</ul>
</div>
<!--End Factor 2-->
<!--JavaScript-->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>
CSS Print Style Sheet:
body{
width: 1000px;
}
#section, .navbarLeft, .navbarRight{
display:none;
}
#content{
font-size: 110px;
overflow:visible;
height: 1000px;
page-break-after: always;
margin-top:10px;
margin-left:50px;
}
p a:after {
content: " (" attr(href) ")";
font-size: 50%;
}
I have found that the Chrome browser developer tools are fantastic for debugging CSS issues.
Open the page in Chrome and hit F12
Look to the right on the elements tab and you'll see all the CSS that is being applied to the HTML element selected on the left.
You can edit the CSS in place in the toolbox and it will immediately update the browser window with your changes.
More information about the tools can be found here: https://developers.google.com/chrome-developer-tools/