I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I'm having an functionality issue with a web page that I'm working on.
I'm using <section> tags to define sections that I can jump to from the navigation bar.
When I click the nav link 'HOTEL' it should take me to <section id="hotel">. For some reason, this isn't happening. I am taken to <section id="events".
There do not appear to be any issues with the other section tags, is there anything that jumps out as an obvious problem?
http://robertmegone.com/wedding/
Just add clear:both css to your section hotel
So I found this really nice bootstrap slider that I would like to use in my asp.net project's index html page.
For some reason if I am trying to put straight into index.html:
<!-- Half Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
... some data related to slider
</div>
it just simply won't display properly, however if I will cut this part and paste into _Layout.html right before:
// right before this div
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
it works perfectly fine. For some reason slider doesn't like to be inside another div, when it's on its own, it works great.
But obviously since _Layout.html is shared between pages I don't want have slider to be shown for every page, so I was wondering what would be the best way to solve it.
Not sure why you have problems with it being in a div (most likely you have a style on the container class, or body-content class that is interfering), however, you can create your own custom section in layout, that isn't required and only put that section in the page you want.
Put this in _layout.html where you want the slider to go:
#RenderSection("slider", required: false)
and put this in your page:
#section slider {
Your slider html here
}
not really sure why it wont work inside a div but what about using two _Layout.html ?
one for the site that needs the slider and the second for all other sites.
Is it possible to do this layout and how would you do it?
The container has a border, just not on top where the tabs are. Here only the selected tab has a top border. The text of the tabs should center, left align would be okay too. But the text of the first tab must not start before the image (there should be the same space on the left).
Currently the html looks like this but can be changed if needed:
<section class="grid-100 grid-parent tabs">
<header>
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</header>
<article class="tab visible">content</article>
<article class="tab">content</article>
<article class="tab">content</article>
</article>
</section>
This layout is possible, but as mentioned you'll need to post your CSS.
Have a look at Twitter Bootstrap which allows you to placed tabbed content within a responsive framework.
You'll need to add a bit of JS to get this running, you can either do this by adding "bootstrap.min.js" or just add the tab script by itself. Here's a direct link to the tab JS documentation http://getbootstrap.com/2.3.2/javascript.html#tabs
Your structure can be used for any tabbed interface or an accordion. Please provide your css for your tabs. You can use bootstrap tabs as mention in this post. There some other tabbed solution like foundation tabs and jQuery ui tabs. If your looking for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.
http://zozoui.com/tabs
cheers
FariDesign
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have stopped to insert "img" tags for the logo of the page. Because its not an image that is part of the content, its a design element but its still a information I want to have control over. So I just write the title in a "a" element as display: block, overflow: hidden and I push the text out with some padding. I think thats a good solution for SEO because you are keeping control of how important the logo should be on a page.
But now my dilemma is starting. How important is the logo of a page?
"A list apart" puts the logo in a h1 element. But is the logo really that important? On article pages you have two H1 elements (the logo and the title of the article) Most of the sites just use a img balbal /a, but I don't like this solution. Because I just want to use img for images that are part of the content...
Its kinda philosophical question, I hope you can give me some input or some articles to read about that...
Think about it this way: "How should a text-to-speach browser translates the page if a disabled person visit the site?".
Do you want the text-to-speach to mention the logo as an image? If yes: the logo should be an img with a caption providing a textual description. If no: use whatever alternative to no have image as content.
Do you want to emphasize the importance the page title, the article time, and the logo?
I guess I would
use an img for the logo (so that it's also printed, which is not always case if you use background image)
provide a nice caption (with "alt" attribute) that describes the logo and the company
have the page title be "company - page title"
have the main title be h1.
I feel like it should also gives decent SEO results.
For the homepage, the logo is a very important heading.
<h1><img src="/logo" alt="ACME inc."></h1>
…and it is an image that is part of the content, it isn't decorative or part of the background.
For other pages, it isn't.
<div><img src="/logo" alt="ACME inc."></div>
<h1>Products</h1>
Your logo represents your brand identity. It is the ONE thing you want your visitors to remember (if they like your site, that is).
I personally recommend always using a CSS image replacement technique for your logo in an <h1> tag because you want search engines to recognize this as your bread and butter. You want to ensure you rank on the top for your company name. This will help get you there.
h1#logo { height: LOGOHEIGHTpx; width: LOGOWIDTHpx; text-indent: -999em; overflow: hidden; background: transparent url('/path/to/logo.gif') 0 0 no-repeat; }
Q: -How important is the websitelogo on a page?
A: -Very important! :)
I prefer putting the logo in an H1 and hide the name of the website. The logo is a big part of the website's identity but it's also often the "home" link... so it's important enough!
edit: CODE SNIPPET TIME!!
<h1>my company</h1>
with a background image on the link (and displayed block with a set width and height etc.)
Speaking as an old search engine guy, the logo itself is not really what the page is about. I normally put it (img or text) in a styled div. The title of the specific purpose of the page is normally what you want to wrap in an H1. This is usually the same as the TITLE, although I normally tack on a " | SiteName.com" to the title so that the site name shows up clearly in the results listing.
I always do this:
HTML:
<h1 id="logo">Company Name (with tagline, if any)</h1>
CSS:
#logo a {
float:left;
width: ...px;
height: ...px;
text-indent:-1000em;
background: url(/path/to/image) no-repeat;
}
You can replace the H1 with H2, H3 etc.. on the inner pages, but I prefer keeping the header (and other sections) consistent as much as possible.
I believe it is good practice to have your <h1> tags match (or contain) similar text to the <title> of the page. For this reason, I think the following pattern is a good one:
<title>Your Site Name Here</title>
...
<h1 id="logo">Your Site Name Here</h1>
And on other pages:
<title> Article Title Here | Your Site Name Here</title>
...
<div id="logo">Your Site Name Here</div>
...
<h1>Article Title Here</h1>
Having the nested <a> tag in the div#logo allows you to have a different click area than logo display. For instance, if you have a wide drop shadow or other element that doesn't make sense to have clickable, the a could be smaller than the div#logo and help with that.
10 years back when i first visited a new search engine i only saw a textbox and a logo on top that said 'google'.The web page was ordinary didnot have any a lot of html elements infact only a textbox and a logo, but i always remembered the page due to the logo and the excellent search results.
Logo is important man, very important
Take a look at the top of this page. You can't go much of anywhere on this site without seeing the "stack overflow" logo up in the corner.
I'd say at least 90% (probably more!) of web sites I visit on a regular basis have a recurring logo. Marketing is a sick and twisted thing, but if so many web sites are doing it, it's probably not too far wrong.
From a visual standpoint, a logo is crucial -- it is part of the identity of the page, and users will associate it with the content. It's almost an imperceptible thing, but I know if I didn't see a logo at the top of a content page, it'd almost smack of unprofessional design to me! It's a subtle thing. Make sure the users know where they are and what they're looking at; form a psychological association.
Yes, search engine results are important, but that doesn't mean the logo is a throwaway.
I used to do the same image-replacement thing, but I finally realised it was a waste of time. As long as a meaningful alt attribute is present, you should just have the image.
As for the appropriate markup: on the home page I have the logo as h1 as it's the title of the page. On other pages I have it in a p and the actual title of the page is h1.
For example, home page is:
<div id="header">
<h1><img src="logo.jpg" alt="HyperGlobalMegaCorp"></h1>
</div>
<div id="content">
<h2>Welcome to the HyperGlobalMegaCorp website</h2>
</div>
whereas contact page is:
<div id="header">
<p><img src="logo.jpg" alt="HyperGlobalMegaCorp"></p>
</div>
<div id="content">
<h1>Contact HyperGlobalMegaCorp</h1>
</div>
...and that's HTML, not XHTML, before some zealot starts going on about closing the img elements ;-)
I use the both logo image and text for improving SEO on my site
<h1 id="pageheading"><a href="http://mysite.com" title="site description">
<span>Site name</span><img src="mylogo.gif" alt="my brand" />
</a></h1>
then I used css for formatting display so visitor can see only my logo but SE can see the both that make double search result for 2 type of search text and image. The image which use searched is the brand of your site, when visitor see your logo, they thought about your site, your products, services like as HP, IBM, DELL etc.... In other case you can make paragraph tag for more description about your site to focus some keywords in your site.
My language skill is not good but I still want to share to you some knowledge, dont laugh me when I got mistake about grammar please :)
Thank you for your inputs, it helped me a lot. This is my conclusion of all your answers and my thoughts:
It depends on your programming style and personal philosophy how you implement your logo technically. Some are using IMGs inside H tags, some are hiding the content of what ever tag they used and are placing the logo as background image.
But i think i have got my answers:
Consider the website as a book or magazine. On the front cover you want to have the title of the book as most important element and maybe some headlines. But inside the media you gonna implement your book/magazine title into the header and maybe the footer.
In order to make this understandable for a text navigator or a search engine. I would now choose a h1 tag to place my logo on the main/home page. But on the other pages a simple IMG, A or whatever tag but H.
Please share your thoughts about my conclusion.