I'm trying to make the banner in my tumblr blog link to another site. I can't figure out how to do it. The following is the code I found in the custom html tab but I can't seem to make my banner clickable. Where exactly should I add the website address for the link? Any help will be appreciated.
<div id="page" class="{block:IfLeftSidebar}left-sidebar{/block:IfLeftSidebar}{block:IfNotLeftSidebar}right-sidebar{/block:IfNotLeftSidebar}">
{block:IfBannerImage}
<div class="banner">
<img id="banner" src="{image:Banner}" alt="banner"/>
</div>
{block:IfBannerImage}
{block:IfNotBannerImage}
{block:IfBlogTitleInPageHeader}
<div class="banner textual">
<h1 class="blog-title">{Title}</h1>
{block:IfTagline}<p class="tagline">{text:Tagline}</p>{/block:IfTagline}
</div>
{/block:IfBlogTitleInPageHeader}
{/block:IfNotBannerImage}
<div id="content">
<div class="banner">
<img id="banner" src="{image:Banner}" alt="banner"/>
</div>
put your website in the
href=""
Related
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>
I have this responsive website. But I have a problem I have been trying to solve. The problem is that header loses style when small screens
This is part of the code
<div class="hgroup-wrap">
<div id="container-header" class="container clearfix">
<section id="site-logo" class="clearfix">
<h1 id="site-title">
<a href="http://conlami.org.mx/conlami/" title="CONLAMI" rel="home">
<img id="image-full" src="http://conlami.org.mx/conlami/wp-content/uploads/2016/09/LOGOTEXTO.png" alt="CONLAMI">
</a>
</h1>
</section>
</div>
</div>
This happens because header image is too large. Image is already responsive. But it doesn't work properly.
This wouldn't happen if for example I remove text from image and leave only logo.
I have tried text in another section but I couldn't make it work.
So. Do you have any suggestions about what can I try?
I'm working on creating a Jekyll site based on a fork of: https://github.com/barryclark/jekyll-now.
I am trying to replace the header with my own header image but the image shows up as a broken link.
Here is my code:
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<img src="https://goo.gl/photos/pnvSq1hjp4NX9PPq5">
<nav>
Blog
About
</nav>
</header>
</div>
</div>
That's simply because https://goo.gl/photos/pnvSq1hjp4NX9PPq5 doesn't redirect to an image file.
This is the image URL you want to use.
<img src="https://lh3.googleusercontent.com/HNy8Td1CVPcyGEyisc2DjAD0jQeF4gf8fR4ZFcM-5Z19OgFLwhujmmSd7Lw-s6CkKtWHGNJep2gGQ2P0973cB5xBpVhyw_2s1XAk2OQLVKIOFJjTky-OJ1sk9Rv_9rzHcpRBvmS7Y0BIB7a_pB34AB34oJl7NIBh9bBvMdhl36ogVCzjIfk9Tg0wS-crAOEoRfl5yvgUXwHnWeZzj_LZ0b0gFElUFvhYYvJ5LAxXLVjk_AuOcaR4WTuXOTdYHAU2311M26VVOJb7UD0nYDholpt0uioTvNDT3iqCVvMu1LijWqc9qWdyLfh5BzBOk17iSnofTnPNH9PKKRonKpRF_sf-OOagwpGu_BScMfhQns0qusCj3O2SyMbh2577a2Yj9sgNI5LTTyl3GIVMX_PnIPmGuVpe7k7gCZ3jnqwMCy-kz6xCH3XS3asiqCBGmjC4m6yziYMyzYE2xjB7C_LMf_NE7YUu96C8vIW1tbTccUlyTWLO_GKeeuWy3wCm0EceuVhJPNBSmqd4-D3wJ8A9ga2xJkfFSi2kDwxKuyMkPbDQiTrCP0Q6S6lAPpBM7Zh9nKI9=w678-h90-no">
I am working on a page and i got stuck. (Yes, I´m a beginner :-) .)
I have a Header followed by a section. I want to have pictures that is between the header and section. I have positioned the image but it keeps going "under" the header so that you don't see half of it. I been trying to use z-index but i want work? My goal is to have half of the picture in the header-section and half if the other section.
Any tips? The beginning of my code is below (I omitted html, head for convenience).
<div class="big_mama">
<header>
<nav class="main_nav">
<ul>
</ul>
</nav>
</header>
<section id="section">
<article class="article">
<div class="pictures">
<img src="#" />
</div>
</article>
<article class="article">
<div class="pictures">
<img src="#" />
</div>
</article>
</div>
First, you should place the image in header section. Set the header with the property position:relative, set position:absolute for the image you want to put and set bottom:-50% or bottom:0px; margin-bottom:-50%.
<header style="position:relative">
<img src="#" style="position:absolute; bottom:-50%">
This should do the trick.
Cheers.