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.
Related
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.
How would I embed a responsive playable youtube video into this tv? (Preferably not on autoplay).
I'm having a hard time with this and was wondering if anyone can help. Thank you.
.tv {
position: absolute;
left: calc(50% - 550px/2);
top: calc(50% - 380px/2);
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
background: black;
}
<div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<!-- broken video -->
<div class="video">
<video class="b" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay></video>
</div>
</div>
For responsiveness you need to add css for div heigh:auto and width in % not pixels, like:
style="max-width:100%;height:auto;"
Hope it works.
Thanks :)
My ribbon.png and logo.png both have a broken icon on my webpage while my fade.png is perfect. I have them with the correct path so I'm kind of stumped. I should say as well that the difference in the 3 is that those 2 up there I deleted the background so that only the ribbon and logo show and the back is transparent not sure if I need to add special code for that. I'm seriously out of html practice so anyone have a tip?
html
<img src="ribbon.PNG" alt="Ribbon Picture" width="270" height="573" class="ribbon" style="height:auto " >
<img class="logo" src="logo.PNG" alt="Logo" style="height:auto " />
css
div.fade{
position: relative;
z-index: 1;
height: 1400px;
width: auto;
top: 200px;
background-image: url("fade.png");
background-repeat: repeat-x;
}
img.ribbon{
position: absolute;
top: 600px;
left: 20px;
width: 229px;
}
img.facebook{
position:absolute;
top: 418px;
left: 940px;
}
img.logo{
position: absolute;
top:20px;
left: 250px;
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.
<div id ="group">
<img src= ' ' id = '1'>
<img src= ' ' id = '2'>
.......
</div>
I would like to reference all the img in the div id 'group' , how to mark it in css? Also, Which is better? Assign all to img / create a class eg. #img.groupItem and reference it everytime? Thanks
The source code:
<div id="book">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P002_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P003_medium.jpg">
</div>
After running the javascript:
<div id="page" style="display: block; width: 1180px; height: 767px; left: 50%; top: 50%; margin: -413.5px auto 0px -590px; cursor: default;">
<div id="book" style="position: relative; width: 1180px; height: 767px; transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper" page="1" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 0; display: none;">
<div id="cover" class="turn-page p1" style="width: 590px; height: 767px;">
</div>
</div>
<div class="turn-page-wrapper" page="2" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 7;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 968px; height: 968px;">
<div class="turn-page p2" style="width: 590px; height: 767px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
</div>
</div>
</div>
</div>
</div>
The html code is like that for a single img , I used the answer provided here but still not work. I believe this is the problem caused by generate html code?
CSS was meant to apply global styling with the help of selectors.
The descendant selector is what you are looking for:
#group img {
// code
}
You can create a selector to reference those, yes:
#group img { width: 32px; height: 32px }
However, if possible, it's better to just create a class for what you want to do:
.icon { width: 32px; height: 32px }
Basically you want to decide if this really is something you only want to apply at that location. Is that HTML structure how it always is going to be? What if you change the ID? What if you use a div with a background image instead of an img tag? Those are the sorts of questions you want to be asking yourself.