Web Analytics Made Easy -
StatCounter I've made a stupid mistake... - CodingForum

Announcement

Collapse
No announcement yet.

I've made a stupid mistake...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I've made a stupid mistake...

    Hello ladies and gents.

    First time poster here, in a bit of a panic.

    I'm trying to write a website for my electrician business, only problem is, I have NO idea how to write html or css. I've basically been butchering chunks of script together through google, and have slowly and painfully manipulated things until they look acceptable.

    I had my front page SOOO close to finished, but I did something, and now I can't see the content. The worst thing is, I don't even remember what I was changing at the time that caused the issue...



    I'm hoping I might have just thrown out some syntax, or something simple. It has taken me weeks to get this far (Seriously! Sad, I know...), and now I'm at a loss of how to get my page working again.

    If there is a kind-hearted guru out there who would be willing to lend a hand, I'd be eternally grateful!

    You'll know if the page is working, as there should be a black background showing a light bulb, with my company logo next to it.

    I know the code will be filled with weird ways of doing things, but right now I'm just concerned about making the content visible again.

    Many thanks in advance to anyone who gives their time to help out.

    PS. Yes - I have learnt my lesson in creating backups before editing...!

    Cheers,

    Dan

    Code:
    <!DOCTYPE html>
    <html>
    <title>Novelec</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    
    <style>
    
    	body,h1,h2,h3,h4,h5,h6,main_heading_quote {font-family: "Lato", sans-serif;}
    
    	body, html {height: 100%; color: #777; line-height: 1.8;}
    
    	main_heading_quote {font-size: 4vw; color:rgb(255,255,255); opacity: 0.75;}
    
    	.bgimg-1 {opacity: 1.0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
    
    	.bgimg-1 {background-image: url('http://novelec.com.au/Website_Images/Background/Website%20Background.jpg'); min-height: 100%; }
    
    	website_title1 {position: relative; left: 37vw; top: 50vh; }
    
    </style>
    
    <body>
    
    <!-- Navbar -->
    
    <div class="w3-top">
    	<ul class="w3-navbar w3-light-grey">
    		<li><a href="#" class="w3-padding-large">Home</a></li>
    		<li><a href="services" class="w3-padding-large">Services</a></li>
    		<li><a href="company_values" class="w3-padding-large">Company Values</a></li>
    		<li><a href="contact" class="w3-padding-large">Contact</a></li>
    		<li class="w3-hide-small w3-right"><a href="#" class="w3-padding-large w3-hover-red"><i class="fa fa-search"></i></a></li>
    	</ul>
    </div>
    
    <!-- Content -->
    
    <website_title1>
      	<div class="w3-display-middle" style="white-space:nowrap;">
    		<img class="img-responsive" style="display: block" src="http://novelec.com.au/Website_Images/Logos/Novelec%20Logo.png" alt="Novelec" width="100%" height="100%" />
    		<div class="w3-container w3-padding-32">
      			<main_heading_quote><i>Every job is unique</i></main_heading_quote>
    		</div>
    	</div>
    </website_title1>
    
    </body>
    </html>

  • #2
    PSS. Sorry - Forgot to mention, web address is Novelec

    Site is live, and code posted above is currently running on the server.

    Cheers.

    Comment


    • #3
      Forgot to mention, web address is Novelec
      If you mean novelec.com; I think that is another site To see your text the part in red is what makes it white on white and therefore invisible.
      Code:
      main_heading_quote {font-size: 4vw; [COLOR="#FF0000"]color:rgb(255,255,255);[/COLOR] opacity: 0.75;}
      You may want to chage this:
      Code:
      <img class="img-responsive" style="display: block" [COLOR="#FF0000"]src="http://novelec.com.au/Website_Images/Logos/Novelec%20Logo.png"[/COLOR] alt="Novelec" width="100%" height="100%" />
      To this
      Code:
      src="http://novelec.com.au/Website_Images/Background/Website%20Background.jpg"
      Evolution - The non-random survival of random variants.
      Physics is actually atoms trying to understand themselves.

      Comment


      • #4
        Hi Sunfighter.

        Thanks very much for taking the time to look over things for me.

        I'll explain the things you've identified:

        Originally posted by sunfighter View Post
        If you mean novelec.com; I think that is another site
        My apologies - I could have sworn I typed:

        www . novelec . com . au

        Seems like the forum has automatically hyperlinked it for me? Not sure what happened there...

        Originally posted by sunfighter View Post
        To see your text the part in red is what makes it white on white and therefore invisible.
        Code:
        main_heading_quote {font-size: 4vw; [COLOR="#FF0000"]color:rgb(255,255,255);[/COLOR] opacity: 0.75;}
        The text is white, because there is (was) a black background behind it. For some reason, the background has disappeared. You've raised a good point though - Perhaps the text and logo are still there, I just can't see them...? (The logo is also white, for the same reason.)

        Originally posted by sunfighter View Post
        You may want to chage this:
        Code:
        <img class="img-responsive" style="display: block" [COLOR="#FF0000"]src="http://novelec.com.au/Website_Images/Logos/Novelec%20Logo.png"[/COLOR] alt="Novelec" width="100%" height="100%" />
        To this
        Code:
        src="http://novelec.com.au/Website_Images/Background/Website%20Background.jpg"
        This image is in fact supposed to be a logo. The background is specified further up in the style section of coding:

        Code:
        <style>
        
        	body,h1,h2,h3,h4,h5,h6,main_heading_quote {font-family: "Lato", sans-serif;}
        
        	body, html {height: 100%; color: #777; line-height: 1.8;}
        
        	main_heading_quote {font-size: 4vw; color:rgb(255,255,255); opacity: 0.75;}
        
        [COLOR="#FF0000"]	.bgimg-1 {opacity: 1.0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
        
        	.bgimg-1 {background-image: url('http://novelec.com.au/Website_Images/Background/Website%20Background.jpg'); min-height: 100%; }[/COLOR]
        
        	website_title1 {position: relative; left: 37vw; top: 50vh; }
        
        </style>
        How would I apply a plain black background, to see if the logo and text are still there? Perhaps then I can narrow down if the problem lies in the background, or the content...?

        On a side note, I feel like an idiot even asking this, but can someone suggest an editing program better than MS Wordpad...? Lol. Our friends at Microsoft have capped the undo function at a single iteration, which is one of the reasons I got into this mess! I'm not overly keen on MS Word, as the RTF makes things a bit hard to follow. Any other suggestions...?

        Comment


        • #5
          I should also mention that I have a little bit of VBA experience, so I'm not entirely new to coding - Just new to html - Which I've quickly learnt is a whole different ball game!

          Comment


          • #6
            .


            Update - Problem resolved

            @Sunfighter: Thanks very much for the tips my friend. Prompted me to investigate how the background image was being displayed, and after trying a different method, it resolved the problem.

            Thanks again for the support, I really appreciate it.

            Not sure that it will help anyone, but for reference, the working code is shown below:

            Code:
            <!DOCTYPE html>
            <html>
            <title>Novelec</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
            <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
            
            <style>
            
            	body,h1,h2,h3,h4,h5,h6,main_heading_quote {font-family: "Lato", sans-serif;}
            
            	body, html {height: 100%; color: #777; line-height: 1.8;}
            
            	main_heading_quote {font-size: 4vw; color:rgb(255,255,255); opacity: 0.75; }
            
            [COLOR="#00FF00"]	[B]body { background-image: url('http://novelec.com.au/Website_Images/Background/Website%20Background.jpg'); min-height: 100%; opacity: 1.0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }[/B][/COLOR]
            
            	website_title1 {position: relative; left: 37vw; top: 50vh; }
            
            </style>
            
            <body>
            
            <!-- Navbar -->
            
            <div class="w3-top">
            	<ul class="w3-navbar w3-light-grey">
            		<li><a href="#" class="w3-padding-large">Home</a></li>
            		<li><a href="services" class="w3-padding-large">Services</a></li>
            		<li><a href="company_values" class="w3-padding-large">Company Values</a></li>
            		<li><a href="contact" class="w3-padding-large">Contact</a></li>
            		<li class="w3-hide-small w3-right"><a href="#" class="w3-padding-large w3-hover-red"><i class="fa fa-search"></i></a></li>
            	</ul>
            </div>
            
            <!-- Content -->
            <div>
            <website_title1>
              	<div class="w3-display-middle" style="white-space:nowrap;">
            		<img class="img-responsive" style="display: block" src="http://novelec.com.au/Website_Images/Logos/Novelec%20Logo.png" alt="Novelec" width="100%" height="100%" />
            		<div class="w3-container w3-padding-32">
              			<main_heading_quote><i>Every job is unique</i></main_heading_quote>
            		</div>
            	</div>
            </website_title1>
            </div>
            </body>
            </html>

            Comment


            • #7
              It would probably help you more if you weren't randomly pulling made up tags out of your backside and calling it HTML. "website_title1", "main_heading_quote" -- there are no such tags in any flavor of HTML. Those are gibberish nonsense...

              Of course, it looks like you've been duped by the nube predating BS that is W3Schools, that's certainly not helping... particularly that w3.css rubbish that's just preventing you from learning how to use HTML or CSS properly.

              Which stands to reason since the jokers at W3Schools clearly have no clue what HTML or CSS are or how to use them!
              Walk the dark path, sleep with angels, call the past for help.
              https://cutcodedown.com
              https://medium.com/@deathshadow

              Comment


              • #8
                Originally posted by deathshadow View Post
                Which stands to reason since the jokers at W3Schools clearly have no clue what HTML or CSS are or how to use them!
                From what I found out there are only two of them and they are flat out trying to add updated pages to the site which is why it is only about 15 years out of date for most areas instead of 20. Had they picked only 3 or 4 topics instead of dozens then they might have been able to keep the site up to date and have time to actually learn the new stuff.

                Just about any other site on each topic is better than theirs but people somehow think they are official because they got a domain name with w3 on the front (as anyone of course can if their choice is available).
                Stephen
                Learn Modern JavaScript - http://javascriptexample.net/
                Helping others to solve their computer problem at http://www.felgall.com/

                Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                Comment

                Working...
                X