I am trying to create a certificate using HTML and CSS but it's not working. I want to design something like what is shown in the above image but I am facing difficulties in aligning the image and text. Can anyone help me please?
My code:
<!Doctype>
<html>
<head>
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.l1
{
position: absolute;
top: 100px;
left: 200px;
}
.l2
{
position: absolute;
top: 100px;
left: 200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="l3.jpg" height="600" class="l3"/>
<img src="l1.jpg" style = "align:left" width="100" height="100" class="l1"/>
<img src="l2.png" style = "align:right" width="100" height="100" class="l2"/>
<div class="centered" style= "color: lightblue" >This is to certify that the building described herein has been inspected and confirms substantially to the approved drawings & to the requirements of all the applicable codes, laws, rules and regulations that were in place at the time of the issue of this certificate.</div>
</div>
</body>
</html>
I am assuming you are looking for something like this ( You can, of course, change the order of the images)
If yes, then here is the code
<!Doctype>
<html>
<head>
<style>
<meta name="viewport"content="width=device-width, initial-scale=1"><style>.container {
position: relative;
text-align: center;
color: white;
}
.l1 {
position: absolute;
top: 100px;
left: 200px;
}
.l2 {
position: absolute;
top: 100px;
left: 700px;
}
.l3 {
position: absolute;
top: 100px;
left: 500px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="l3.jpg" height="600" class="l3" alt="img3" />
<img src="l1.jpg" style="align:left" width="100" height="100" class="l1" alt="img1" />
<img src="l2.png" style="align:right" width="100" height="100" class="l2" alt="img2" />
<div class="centered" style="color: lightblue">This is to certify that the building described herein has been inspected and confirms substantially to the approved drawings & to the requirements of all the applicable codes, laws, rules and regulations that were in place at the time of the issue of this certificate.</div>
</div>
</body>
</html>
Here you just needed to change the value of the left attribute of the absolute position or else they will be stacked over each other. Hope this answers your question.
.container {
position: relative;
text-align: center;
color: white;
display: flex;
}
.l3 {
width: 100%
}
.l1 {
position: absolute;
top: 100px;
left: 2;
}
.l2 {
position: absolute;
top: 100px;
right: 8px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://picsum.photos/id/237/200/300" height="600" class="l3"/>
<div class="centered" style= "color: lightblue" >This is to certify that the building described herein has been inspected and confirms substantially to the approved drawings & to the requirements of all the applicable codes, laws, rules and regulations that were in place at the time of the issue of this certificate.</div>
</div>
<img src="https://picsum.photos/id/237/200/300" style = width="100" height="100" class="l1"/>
<img src="https://picsum.photos/id/237/200/300" style = width="100" height="100" class="l2"/>
The first thing I noticed was that you have your meta element inside your style tag.
Also, you have written twice in the beginning.
Quick Tip: If you freshly create a HTML file, you can type '!' and hit Enter. This will generate you a good start. Helps a lot.
Related
I am a beginner in coding and I want to place the text in front of the picture.
I am using Komodo. Here is my Code:
Based on your tags, here is a CSS solution. Add this between your <head></head> tags.
<style>
#contenu::after {
content: "words";
}
</style>
This should be it, please leave a comment if you need more help.
This will position text over image and put it in center.
<div>
<img src="">
<h1>Text</h1> <!-- This will positon text over image -->
</div>
div {
position: relative;
text-align: center;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a solution for you here, but it can be implemented in many different ways.
.bandeau {
position: relative;
text-align: center;
}
h1 {
position: absolute;
top: 10%;
left: 20%;
color: red;
}
h2 {
position: absolute;
top: 25%;
left: 20%;
color: red;
}
h3 {
position: absolute;
top: 40%;
left: 20%;
color: red;
}
<div id="bandeau">
<div id="contenu">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
<h1>Pour ma nadette</h1>
<h2>Mon amoureuse</h2>
<h3>Je t'aime</h3>
</div>
</div>
I hope I could help you
I am trying to create simple slash-shape for the front page of a website and having some trouble.
I finally managed to get a reasonable result (still not happy with the responsiveness), but when running in IE 11 the slash shape extends to the bottom of the page and covers everything below it.
Here is the code:
JSFiddle
HTML
<title>title</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div id="main">
<div id="welcomediv">
<img src="img/mainlogo.png"/>
</div>
<div class="splash" id="p1">
</div>
<div class="splash">
<svg id="ting" width="100%" viewBox="0 10 200 10">
<polygon id="arrow" points="0,30 0,500 250,500 250,-80" >
</polygon>
</svg>
</div>
<div class="splash" id="p2">
</div>
<div class="splash" id="p3">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
#main {
position: absolute;
width:100%;
top: 0px;
left: 0px;
overflow: hidden;
}
.splash {
height: 100vh;
width: 100vw;
float: left;
}
#p1 {
position: absolute;
left: 0px;
top: 0px;
background: black;
background-image: url(img/bgic-fd.png);
background-size: cover;
}
#p2 {
background: black;
}
#p3 {
z-index: 500;
background: green;
}
#ting {
position: absolute;
top:25vh;
height: 150vh;
}
#arrow {
fill: #fec44a;
}
#welcomediv {
position: absolute;
left: 50vw;
top: 150px;
margin-left: -15vw;
z-index: 50;
width: 30vw;
}
#welcomediv img {
width: 100%;
}
This works as expected in every other browser I've tried (Chrome Opera Firefox), but in IE 11 the yellow "#arrow" shape covers p2 and p3.
If anyone knows what is going on here I would really appreciate some guidance, thanks!
I have been trying to develop my own website and have come across a problem; when I re-size my browser, my website doesn't look the same. Everything resizes and moves itself so that everything is overlapping each other. I want my website to operate like this website: http://teixido.co/
This is my website: http://www.coopertimewell.com/
This is all my source code for html and css:
#charset "utf-8";
body {
background-color: #DDDCDC;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#anime {
position: absolute;
width: 38.3%;
height: 100%;
left: .5%;
top: 1.25%;
}
#ct {
position: absolute;
width: 60%;
left: 36%;
top: 59%;
}
#official {
position: absolute;
width: 40%;
left: 55%;
top: 72%;
}
#home {
position: absolute;
left: 55.75%;
top: 3.5%;
width: 5.8%;
}
#home2 {
position: absolute;
left: 55.75%;
top: 3.5%;
width: 5.8%;
z-index: -1;
}
#thecoopertimes {
position: absolute;
left: 62%;
top: 3.5%;
width: 12.5%;
}
#thecoopertimes2 {
position: absolute;
left: 62%;
top: 3.5%;
width: 12.5%;
z-index: -1;
}
#aboutme {
position: absolute;
left: 75%;
top: 3.5%;
width: 8%;
}
#aboutme2 {
position: absolute;
left: 75%;
top: 3.5%;
width: 8%;
z-index: -1;
}
#contact {
position: absolute;
left: 83.5%;
top: 3.5%;
width: 6.8%;
}
#contact2 {
position: absolute;
left: 83.5%;
top: 3.5%;
width: 6.8%;
z-index: -1;
}
#games {
position: absolute;
left: 90.72%;
top: 3.5%;
width: 6.1%;
}
#games2 {
position: absolute;
left: 90.72%;
top: 3.5%;
width: 6.1%;
z-index: -1;
}
#home:hover {
z-index: -9999999;
}
#home2:hover {
z-index: 9999999;
}
#thecoopertimes:hover {
z-index: -9999999;
}
#thecoopertimes2:hover {
z-index: 9999999;
}
#aboutme:hover {
z-index: -9999999;
}
#aboutme2:hover {
z-index: 9999999;
}
#contact:hover {
z-index: -9999999;
}
#contact2:hover {
z-index: 9999999;
}
#games:hover {
z-index: -9999999;
}
#games2:hover {
z-index: 9999999;
}
#fb {
position: absolute;
top: 84%;
left: 78%;
width: 6%;
}
#insta {
position: absolute;
top: 84.25%;
left: 83.5%;
width: 6%;
}
#youtube {
position: absolute;
top: 84%;
left: 89%;
width: 6%;
}
#fb:hover {
width: 6.5%;
top: 83.5%;
left: 77.7%;
}
#insta:hover {
width: 6.5%;
top: 83.9%;
left: 83.2%;
}
#youtube:hover {
width: 6.5%;
top: 83.8%;
left: 88.7%;
}
#text {
position: absolute;
width: 30%;
left: 65%;
top: 76%;
}
#bs2 {
position: absolute;
top: 40%;
}
#pic {
position: absolute;
top: 300%;
width: 25%;
height: 55%;
}
#down {
position: absolute;
top: 88%;
left: 50%;
width: 5%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home - CooperTimewell.com</title>
<link href="coopertimewell/anime.ico" rel="icon" type="image/x-icon" />
<script type="text/javascript">
if (screen.width < 800) {
window.location = "mobile.html"
}
</script>
<meta name="description" content="This is just a website about me, and some stuff I'm interested in." />
</head>
<link href="indexstylesheet.css" rel="stylesheet" type="text/css" />
<body>
<img id="anime" src="coopertimewell/jumper1.png" />
<a href="http://www.coopertimewell.com">
<img id="ct" src="coopertimewell/ct2.png" />
</a>
<img id="official" src="coopertimewell/official.png" />
<div id="allbuttons">
<div id="firstlot">
<a href="http://www.coopertimewell.com/index">
<img id="home" src="coopertimewell/buttons/home1.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes" src="coopertimewell/buttons/coopertimes1.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme" src="coopertimewell/buttons/aboutme1.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact" src="coopertimewell/buttons/contact1.png" />
</a>
<a href="http://www.coopertimewell.com/games">
<img id="games" src="coopertimewell/buttons/games1.png" />
</a>
</div>
<div id="secondlot">
<a href="http://www.coopertimewell.com">
<img id="home2" src="coopertimewell/buttons/home22.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme2" src="coopertimewell/buttons/aboutme22.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact2" src="coopertimewell/buttons/contact22.png" />
</a>
<a href="http://www.coopertimewell.com/games">
<img id="games2" src="coopertimewell/buttons/games2.png" />
</a>
<a href="http://www.facebook.com/cooper.timewell">
<img id="fb" src="coopertimewell/fbicon.png" />
</a>
<a href="http://www.instagram.com/cooper_timewell">
<img id="insta" src="coopertimewell/instaicon.png" />
</a>
<a href="http://www.youtube.com/user/2667cooper">
<img id="youtube" src="coopertimewell/youtubeicon.png" />
</a>
</div>
</div>
<img id="text" src="coopertimewell/text1.png" />
<img id="pic" src="coopertimewell/duck.gif" />
<a href="http://www.coopertimewell.com/#pic">
<img id="down" src="coopertimewell/downie.png" />
</a>
</body>
</html>
How do I optimize this code to work so that it repositions itself so it fits the browser for both mobile and web? Thankyou.
What you want is responsive web design. You need to alter your CSS (and jS) so that they can change the layout of your website according to the media it is being viewed on. Here are a few tips about making a responsive design :
Set the viewport. This is done so that the CSS pixels match the number of device independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor. Like this :
<meta name="viewport" content="width=device-width, initial-scale=1">
Do not use absolute. Using absolute positioning can ruin the look of the page and make content flow out of the viewport when the available space is a little less than what you've been developing on. Try yo use relative positioning so that elements on the page reflow and adapt according to the changes in viewport size.
Use CSS3 Media Queries. You can use these queries to place conditions on the way the page lays out, depending on the type of media it is being viewed on. For example :
#media screen and (max-width: 300px) {
/*The CSS when the maximum width is 300px*/
}
Read more here.
Make the website degrade gracefully or enhance progressively. Both these design concepts stress that your website should not heavily depend on new technology or optional technology to lay out your page. You should not use jS to size your viewport. Instead, use CSS. The website should display acceptably well on platforms where new technology is not available or is disabled.
Go for cross platform consistency. Using normalize.css or mordernizr.js you can make the website display more consistently across platforms by making them display the native elements consistently and using feature detection.
Have a look at this article.
I am trying to add an image and a textbox inside a DIV that has a opacity of 60%. For some reason the two objects also inherits the opacity as well. How do I prevent it?
HTML:
<body>
<div id="sliderdiv">
<div id="slider">
<img src="i2.jpg" alt="" />
<img src="i3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="i4.jpg" alt="#htmlcaption" />
<img src="i5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to Google.
</div>
</div>
<div id="bg">
<img src="wmlogo.jpg" width="140" height="30" alt="Westmed Medical Group" title="Westmed Medical Group Homepage" id="logoimg" />
<input type=text size=25 id=insidebgtext />
</div>
</body>
CSS:
* {
background-color: #CC0000;
padding: 0px;
margin: 0px;
}
#bg {
position: absolute;
background-color: #000000;
height: 50px;
width: 100%;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
z-index: 1;
}
#insidebgtext {
position: absolute;
top: 25%;
right: 20%;
background-color: #FFFFFF;
z-index: 25;
}
#sliderdiv
{
position:absolute;
left:0px;
top:0px;
width: 100%;
height: 306px;
z-index:-1;
background-color: #FCFCFC;
}
#logoimg {
position: absolute;
top: 15%;
left: 25%;
z-index: 25;
}
How it appears:
The inheritance of the properties of parents in the child in very obvious. For your purpose you can use a proxy way of using a transparent png image for the background and avoid the use of opacity all together.
The webserver was case sensitive it seems, Thank you very much #David and everyone. Website is working perfectly. :D
So I have had to make a website for a bakery for an assignment but some images are not displaying and I have no idea why e.g. my cookies page is perfect by my cakes page is a disaster (this is my first website so the coding in general is terrible) When I view the website locally the images are displayed perfectly. Hosted by www.000webhost.com. Website was built using Dreamweaver.
Any help is greatly appreciated, thank you in advance.
http://beckasbakery.comlu.com/Cookies.html
http://beckasbakery.comlu.com/Cakes.html
COOKIES
#Smartiecookie img {
position: absolute;
left: 487px;
top: 310px;
width: 208px;
height: 149px;
}
#Orangecookie img {
position: absolute;
left: 486px;
top: 519px;
width: 206px;
height: 145px;
}
#Doublechoccookie img {
position: absolute;
width: 210px;
height: 147px;
left: 832px;
top: 314px;
}
#Chocolatecookie img {
position: absolute;
left: 838px;
top: 546px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<
<div id="Smartiecookie"><img src="Smartie Cookies.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Orangecookie"><img src="Orange cookie.jpg" width="354" height="242" /> </div>
<div id="Doublechoccookie"><img src="doublechoccookie.jpg" width="364" height="242" /> </div>
<div id="Chocolatecookie"><img src="Chocolate cookie.jpg" width="364" height="242" /> </div>
</body>
</html>
CAKES
#Cake1 img {
position: absolute;
left: 506px;
top: 315px;
width: 208px;
height: 149px;
}
#Cake2 img {
position: absolute;
left: 503px;
top: 554px;
width: 206px;
height: 145px;
}
#Cake3 img {
position: absolute;
width: 210px;
height: 147px;
left: 904px;
top: 339px;
}
#Cake4 img {
position: absolute;
left: 906px;
top: 567px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<div id="Cake1"><img src="Cake 1.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Cake2"><img src="Cake 2.jpg" width="354" height="242" /> </div>
<div id="Cake3"><img src="Cake 3.jpg" width="364" height="242" /> </div>
<div id="Cake4"><img src="Cake 4.jpg" width="364" height="242" /> </div>
you have to make sure that you have the image files in the same directory as the .html if you're gonna do it as src="Cake1.png", otherwise, you have to specify the location of the image such as src="img/Cake1.png" or something like that.
Hope that helps
Remove the spaces from the image filenames, "Cake 1.jpg", etc. These are requested as "Cake%201.jpg", where %20 is the space character, but this is likely to be interpreted as %201 (some other character).
Web addresses should not contain spaces, they cause too many problems.