Help with webpage

1

Ok, so I’m almost done with my portfolio project but there are a few things a want to do. The first is I need a way to shorten a image address so that it don’t add so much space to my html file. Second, is my navbar, I need it to stay fixed but every time a fix it to the top of the page using nav-bar-fixed or whatever, it overlaps with other parts of my webpage and z-index doesn’t help for some reason. Third, my message textarea placeholder text isn’t showing up. Lastly, my facebook icon isn’t showing up as well. Can someone shed some light on some or all of these problems for me.

P.S. Anything else you see wrong on my webpage or something I could do better, please don’t hesitate to tell me about it.

2

Can you please verify your codepen email address. I am trying to look at the whole thing and it wont let me. Thanks

3

As far as your image is concerned try this.

 src=https://pbs.twimg.com/media/CaKUT34UMAADx-s.jpg.

Just resize it. When you click an image on google. Click view image and when the image is opened on a new window copy the url.

4

As for your fascebook icon. Are you using font -awesome. I think you still have to hose the CDN in order for it to work.

5

I figured out some stuffs you asked for


go ahead, you have some comments there.

1 Like
6

Others have already pointed out some of the issues while I was writing this but I’ll go ahead and post the whole thing anyway:

  1. Simple way to get an image from anywhere else is right-clicking on it and then do “Search Google for image”. In your case, this is another link for your image:
    https://pbs.twimg.com/media/CaKUT34UMAADx-s.jpg
  2. Since you’re using Bootstrap 3, your navbar should be like this, look here. An example:
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">myPortfilio</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#about">About</a></li>
        <li><a href="#portfilio">Portfilio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

You don’t really need to wrap it in a container. Also, the Bootstrap 3 javascript file should be included AFTER jQuery in your pen settings.

To avoid it covering your content, give some padding to the body

body {
  background-color: black;
  padding-top: 50px;
}

And, to avoid it covering your sections when you click on the links in the navbar, give some padding and negative margin to each of your sections (even if in your case, it would only cover your about section):

#about, #portfilio, #contact {
  margin-top: -50px;
  padding-top: 50px;
}
  1. Your textarea’s placeholder isn’t showing 'cause you have a lot of spaces between the opening and closing tag. That space in between the two is the value of the textarea and, as you may know, the placeholder hides itself if any value is there. So, this:
    <textarea rows = "5" cols = "30" name="message"
              placeholder="Message">
            
         </textarea>

Should be:

<textarea rows="5" cols="30" name="message" placeholder="Message"></textarea>
  1. Your facebook icon isn’t showing 'cause you haven’t linked font-awesome in your settings. You also didn’t close the <i> tag correctly and you can’t use the attribute style like that. It should be style="font-size:10px" but you should always style your elements in CSS, just to make it easier for you to change them whenever you’ll need to.

As for other suggestions, I would revisit the whole color scheme on your page; it’s kinda hard to see things.

2 Likes
7

Thanks guys, with your help, I have fixed all of the things wrong with my webpage with your help. Thanks, thanks, thanks.