It's my first time making site, what should I do to have my site logo above the navigation bar? And if someone could correct my code and tell my what I did wrong.
www.codepen.io/anon/pen/VaPKaK
You're missing a space between "home" and style in your image tag
It's a bit confusing what you're asking, would you like your logo image to literally appear above your navigation? if so the don't put the image tag in an a list tag
So instead of:
<li id="home"><a class="active" href="#home"><img src="home.png" alt="Home"style="width:20px;height:20px;"></a></li>
<li id="news">Blog</li>
TRY
<a class="active" href="#home"><img src="home.png" alt="Home" style="width:20px;height:20px;"></a>
<li id="news">Blog</li>
Also, try not to add styles to your html. Put them in your CSS. It makes it all much easier to read.
Here is the edited Codepen with all those edits and the logo is above the Navigation.
Hope that helps!!
Related
There is a slider at the top of the page.
Each slide has a layer of list and anchor tags with image tag inside.
https://www.rakuten.ne.jp/gold/yanosp-fineplay/
Here is the HTML code for the slider part.
<div class="slider">
<ul class="bxslider">
<li>
<img alt="ランデイズパック リュック" src="sliderimg/rundaysslider.jpg" />
</li>
<li>
<img alt="" src="sliderimg/porchn.jpg" />
</li>
<li>
<img alt="" src="sliderimg/slider13.jpg" />
</li>
</ul>
</div>
As you can see, each anochor tag has target="_blank" and it's supposed to open a new tab for a new page. However, clicking won't open the link, let alone a new tab. I was wondering if this has something to do with z-index or something, but what's weird is that, if you go ahead and hover each image in slider, the link still appears. I just can't figure out why this is happening, and any helps would be greatly appreciated.
Thank you so much.
PS - I do not think this has something to do with bxslider plugin, so please refrain from just commenting something like "Try other slider js"
I think this is how the bxslider.js plugin works,
When you click, the action is working on the bxslider.js plugin slidering instead of clicking the link.
but when you alread slider to other picture, the clicking anchor action is working. try it!
sorry for poor english.
Hi cant seem to get my Anchor links working in Safari...
<li class="nav-item"> <a class="nav-link" href="resources.html#copy" target="_top">Resources</a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html#copy" target="_top">Contact</a> </li>
I have a bunch of links that go to their respective pages and then should drop down to the "copy" anchor but this doesn't work in safari...
As you can see I've specified a target which i was told should help... I have tried changing my links to "page.html/#copy" but this doesn't work. i have also used ID as name is no longer used in html 5.
my anchor looks like this...
<h1 id="copy" class="-white">.</h1>
class just makes the text white so cant see the '.' on the page.
.-white{
color: #FFF;}
im assuming it's something simple and I've just been staring at this to long to see it...
Thank you
I've just created the bootstrap navbar on my website and I have the trouble with my url...
For example I have something like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#about">
About
</a>
</li>
</ul>
</div>
And my website url looks like this: "something.html#about"
I would like to remove the #about from the url. I read that I should remove? the href from this li item, and put the #about in data-target but it doesn't work for me. What is the easiest way to fix this? Thanks for any respond.
you can use data-target instead of href. It will help you to get rid of #about from the browser URL.
So instead of
href="#about"
use
data-target="#about"
I assume you are a beginner in HTML and how web pages work.
The href attribute of the HTML element a(nchor) defines the hyperlink. The "#something" points to an ID within a HTML web page. It is accessible by the JavaScript on the specific page.
In this case, your href points to the current page as no other page is referenced (the href has nothing like href="otherPage.html#about").
It might be needed by the bootstrap framework. There is nothing wrong with it. Embrace it, it is part of the internet and how browsers work.
I built a simple site as part of teaching myself HTML, CSS and JQuery. You can see it here: http://davideyre.co.uk
It was working fine for a while, but now in the 'contact' div several of the images have disappeared. The blue email image remains and the mouseover works to switch to the black email image, but the Twitter, LinkedIn and Google images are not displaying at all.
When I looked at them using the Inspect Element plugin on Firefox, it appears that an img class is being applied to these three icons. This code shows the first list item (the email icon) and the second list item (the Twitter icon) with the img class applied to it.
<div id="contact">
<ul>
<li class="menuimage">
<a target="_blank" href="mailto:david#davideyre.co.uk">
<img width="60" height="60" src="http://davideyre.co.uk/images/email_blue.png" data-other-src="http://davideyre.co.uk/images/emailblack.png">
</a>
</li>
<li class="menuimage">
<a target="_blank" href="http://twitter.com/davideyre">
<img class="qzsombkdzpaqphznltst" width="60" height="60" src="http://davideyre.co.uk/images/twitter_blue.png" data-other-src="http://davideyre.co.uk/images/twitterblack.png">
</a>
</li>
I have no idea how this img class is being applied to the images.
Many thanks to MarkB, IAteYourKitten and Bondye. It was the Adblocker in Firefox. :)
I wonder why you are using the class menuimage. You don't use it in your CSS.
I would try adding some styling to the menuimage class in CSS to see if you can affect the styling of the list tag. Or remove the menuimage class from the list tag and add it to the image tag item, and try to add styling.
So there's an issue.
If you view this .htm page you see that image.
http://icpy.webs.com/text/Mass.htm
The problem is originally there was a bullet decorator which was the list-style. The lightbox image was working. When I applied the List-style-type: none, my image wasn't working when I clicked on it. Did I do something wrong?
Your html is all messed up.
<div id="cas> <ul> <li><a class=" title="Mass Sale layouts" href="#inlineframe" fancybox"="">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png">
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
Close the id tag of div like : div id="cas"
Close the <li> tag
Close the <ul> tag
Close the main div correctly.
If you are not using a class for <a> tag, then remove it completely ( <a class=" )
Fixing the above things should solve your issue. Im surprised, it actually worked first time..
Cleaned up code should look something like this :
<div id="cas">
<ul>
<li>
<a class="" title="Mass Sale layouts" href="#inlineframe" fancybox"=">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png">
<div id="inlineframe" style="width:1040px;height:785px;display: none;">Whatever that needs to go here.
</div>
</a>
</li>
</ul>
</div>
Yes, you have javascript errors on that page, which will prevent it from working.
"NetworkError: 404 Not Found - http://icpy.webs.com/text/.http://icpy.webs.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"