I have finished my webpage but it does not look the way I designed it when I download it what should I do? I tried the cache and debugging but to no avail. Am I missing something? I look forward to anyone’s response on this issue thank you.
Hi there and welcome to our community!
If you’d like some help, we’ll need to see some code… we can’t offer advice/assistance if we can’t see what the problem might be.
Do you have a GitHub repo (or similar) that you could share?
Alternatively, you can post your full code here, enclosing it within two sets of triple backticks, so that it displays correctly on the forum.
You can do this manually or use the Preformatted Text Tool (</> icon or CTRL+e) to create these automatically.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/EBB&FLOW.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Ebb & Flow Tattoo Studio</title>
</head>
<body>
<h1 class="logo">logo here</h1>
<marquee behavior="alternate">
<img src="img/tattoo 5.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo1.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo10.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo12.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo13.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo2.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo3.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo4.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo6.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo7.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo8.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
<img src="img/tattoo9.jpg" alt="tattoo" title="tattoo pic" width="200" height="200">
</marquee>
<h2>Custom tattoos. Independent merch and Handmade crafts. Using 100% UK renewable energy & Vegan inks.</h2>
<div id="text">
<section>Ebb & Flow Tattoo Studio is all about the art, the team, and giving the best experience possible to our customers.Whether you have highly specific tattoo design ideas, or are seeking to be inspired by one of our skilled tattoo artists, at the Ebb & Flow Tattoo Studio, we will transform basic ideas into the highest quality custom pieces.</section>
</div>
<div>
<section id="white">
<img src="img/tattoo14.jpg" alt="flesh" title="tattoos at flesh" width="300" height="250">
<h3>TATTOOS AT FLESH</h3>
<p>We understand that most people looking to get tattooed want something original and striking. The artists at Ebb & Flow Tattoo Studio endeavour to create beautiful custom pieces encompassing all of the elements that the customer wishes to incorporate.</p>
</section>
<section id="black">
<img src="img/tattoo17.jpg" alt="flesh" title="piercing at flesh" width="300" height="250">
<h4>PIERCING AT FLESH</h4>
<p>Whether it's a plain lobe you want doing or a fantastical micro-dermal placement, we are here to talk you through it. Bring us your ideas, or give yourself over to our expert piercer and his discerning eye and walk away feeling more you than ever</p>
</section>
<section id="white-white">
<img src="img/tattoo18.jpg" alt="flesh" title="tattoo removal" width="300" height="250">
<h5>TATTOO REMOVAL</h5>
<p>Our newest Picofocus laser tattoo removal system is one of the only lasers of its type in and around Southport town centre. How do we know this? We have been and tested the local competition, thats how. We guarantee that you wont find a safer and faster system with the same level of customer service in the local area.</p>
</section>
</div>
<form method="POST" action="https://formspree.io/f/xdorejve" id="users">
<h1 class="h1">CONTACT US</h1>
<label for="your name"><input id="your-name" type="text" name="Name" placeholder="Your Name" required/></label>
<label for="email-address"><input id="email-address" type="text" name="Email Address" placeholder="Email Address" required/></label>
<label for="contact-tel"><input id="contact-tel" type="text" name="Contact Tel" placeholder="Contact Tel" required/></label>
<label id="select-artist" for="select-artist">Select Artist:</label>
<select id="artist" title="artist" name="Artist" required>
<option value="">--Select Artist--</option>
<option value="Dan">Dan</option>
<option value="Poppy">Poppy</option>
<option value="Chris">Chris</option>
<option value="Krzysztof">Krzysztof</option>
<option value="Alan">Alan</option>
<option value="Julia">Julia</option>
<option value="Ross">Ross</option>
</select>
<label for="message"><textarea id="message" name="Message" rows="6" cols="19" placeholder="Your Message..." required></textarea></label>
<button id="send" type="submit" value="send">GET IN TOUCH</button>
</form>
<footer>
<address>
Studio Name: EBB&FLOW TATTOO STUDIO<br>
Web Site:
<a href= "">EBB&FLOW TATTOO STUDIO</a><br>
Visit Us:EBB&FLOW TATTOO STUDIO<br>
18 Cambridge Walks,<br>
Southport PR8 1EN
</address>
<a href="tel:01704535888">CLICK TO CALL</a>
<a href="https://www.facebook.com/ebbandflowtattoo" aria-label="find us on facebook" title="facebook" class="fa fa-facebook"></a>
<a href="https://www.instagram.com/ebbandflowtattoo/" aria-label="find us on instagram" title="instagram" class="fa fa-instagram"></a>
<a href="https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&emr=1&followup=https%3A%2F%2Fmail.google.com%2Fmail%2Fu%2F0%2F&ifkv=AXo7B7UNy3cTP_wBAzPDim8dOtmRboxHdI-6jnM5iWBiJMDhZ0HUfx_nf59ZYuWfWNsVxs0Yw8g8UA&osid=1&passive=1209600&service=mail&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S252164910%3A1692273212686752" aria-label="email us" title="email" class="fa fa-envelope"></a>
<table>
<th><h3 class="h3">Opening Times</h3></th>
<tr><th>Monday</th><td>Closed</td></tr>
<tr><th>Tuesday</th><td>10am - 5pm</td></tr>
<tr><th>Wednesday</th><td>10am - 5pm</td></tr>
<tr><th>Thursday</th><td>Closed</td></tr>
<tr><th>Friday</th><td>10am - 5pm</td></tr>
<tr><th>Saturday</th><td>10am - 5pm</td></tr>
<tr><th>Sunday</th><td>Closed</td></tr>
</table>
<P class="bottom">Design and build by <a href="https://www.facebook.com/profile.php?id=61550227742256" aria-label="contact TechBuster on facebook" title="contact TechBuster on facebook">TechBuster</a></P>
<script src="/JS/ebb&flow.js"></script>
</body>
</html>```
```body{
background:rgb(27, 66, 27);
background-repeat: no-repeat;
}
.logo{
text-indent: -999999px;
background: url('/JS/logo.PNG');
width:1280px;
height:709px;
display: block;
margin-left: auto;
margin-right: auto;
}
marquee{
position: relative;
top:-660px;
background:#ffffff;
}
h2{
position: relative;
top:-920px;
text-align: center;
color:white;
font-style: inherit;
}
div{
display: flex;
align-items: center;
justify-content: center;
position:relative;
top:-480px;
text-align: center;
color:white;
font-size: medium;
font-weight: bold;
font-style: inherit;
border-radius: 5px;
}
#text{
position: relative;
top:-585px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color:white;
font-size: x-large;
font-weight:bolder;
font-style: inherit;
}
#white{
background:white;
color:black;
}
#black{
background:black;
color:white;
}
#white-white{
background:white;
color:black;
}
h3{
font-style:italic;
}
h4{
font-style:italic;
}
h5{
font-style:italic;
font-weight: bolder;
font-size: normal;
}
input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
.h1{
margin-top: 10px;
position: absolute;
top: 1040px;
right: 650px;
margin-left: 20px;
color: #fff;
}
#your-name{
position: absolute;
top:73rem;
right: 47rem;
margin-top: -64px;
width:15%;
min-height: 3em;
border-radius: 4px;
}
#email-address{
position: absolute;
top:69rem;
left: 48rem;
margin-top: -5;
width:15%;
min-height:3em;
border-radius: 4px;
}
#contact-tel{
margin-top: -350px;
position: absolute;
right:47rem;
width:15%;
min-height: 3em;
border-radius: 4px;
}
#artist{
margin-top: -350px;
position: absolute;
right: 503px;
width: 230px;
min-height: 45px;
border-radius: 4px;
}
#message{
margin-top: 200px;
position: relative;
top:-485px;
left:423px;
width: 475px;
min-height: 20px;
border-radius: 4px;
}
#send{
margin-top: 200px;
position: relative;
left:105px;
top:-460px;
width: 10%;
height: 20%;
border-radius: 4px;
}
button:hover{
background-color: grey;
border-radius: 4px;
font-size: medium;
font-weight:bold;
}
button:hover{
color:white;
}
footer{
position: absolute;
top:1102px;
left:100px;
font-size: large;
font-weight: bolder;
color: #fff;
}
a{
color: #fff;
}
table{
position: absolute;
top:-25px;
right:-800px;
text-align: center;
font-style: oblique;
}
.h3{
position: relative;
right:-55px;
}
.bottom{
position: relative;
top:300px;
right:-450px;
font-size: xx-large;
font-weight: bold;
font-style: oblique;
}
#select-artist{
position: relative;
top:-655px;
left:760px;
color: #fff;
}
Hi thank you for your response I have replied you with the code. I look forward to your feedback.
I can’t see much of the page content as the images (for instance) are not available. Do you have this hosted on GitHub or anywhere online?
What do you mean specifically by " it does not look the way I designed it when I download it"? Is it the page layout or content or styling or something else which isn’t working for you?
1 Like
Hi I have it hosted on microsoft edge via vs code how do I show you? The styling is coming out different when I download the website some things are out of place and missing what do I do?
You have your website stored locally then. That means that we do not have access to much of the content (such as images). To share your full webpage with us, you would either need to host all of the files (including images, logos etc) on GitHub or on a hosting site such as Netlify.
1 Like
Hi this is my webpage on GitHub mondoakim.github.io
My logo is not displaying and my contact form looks out of place but locally the webpage looks perfect what am I missing? Thank you for your patience and looking forward to your response.
-
you dont have any font. why? go to
fonts.bunny.netand choose some font to give to your page -
you dont have HEADER area. would be nice to divide page into sections. header is one of sections. so you can give it height. maybe then you’d see - LOGO TEXT in h1
you dont have logo image.
your logo image location is background: url(‘/img/logo.png’);
in folder img - which you didnt put online at all.
this al looks strange. is your css file even applying?
pls have one word css file which is called stylesheet.css or sheet.css or whatever.css
and call that in HTML . don’t have some weird letters such as & inside of it. keep it as normal as possible.
btw.
this
margin-left: auto; margin-right: auto;
is same as this:
margin: 0 auto
div{
display: flex;
align-items: center;
justify-content: center;
position:relative;
top:-480px;
text-align: center;
color:white;
font-size: medium;
font-weight: bold;
font-style: inherit;
border-radius: 5px;
don’t ever do that
always use class to style a div.
this is because div is most often used element on web page.
and if you style all divs the same that’s not good, is it?
it’s like trying to build something out of lego blocks and all you have are same lego blocks. bunch of blue ones. not fun.
Hi thank you for the corrections how do I fix my contact form? As the label inputs are all over the place and yes my CSS file is applying and the social media icons are not displaying as well.
<h1 class="h1">CONTACT US</h1>
h1 is element.
it does not need class.
you just write
h1 {....style here}
in css
Thank you putting that to practice.
Hi there how are you sorry to be a bother I have corrected everything else except my font awesome icons. How do I get my font awesome icons to display? They are failing to load on the browser.
I dont see any changes you made. you didnt change font.
can you tell me what this is for?
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
I also advised you to rename your stylesheet to style or styles.css
which you didnt do.
As far as font-awesome goes, you’re using OOOOLD version.
Current one is 6
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
you can then use facebook icon by giving it
<i class="fa-brands fa-facebook"></i>
1 Like
Give me time to upload the updated code am new to github you see. Am still getting around on how things work lol. That is code automatically added by the editor when you save your work I did not write that.
I have done that you will see once I have had the files up on github am working from visiual studio code.
Thank you very much for the font-awesome am changing it now. Wow am very behind on technology lol, this is embarrassing thank you again.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.