I am trying to make a subheading for a logo in my website. I am having trouble with aligning it under the logo. I have placed a p tag inside a div and tried to position the div but I am not sure how it works.
Here is a photo of what the website currently looks like.
below is the code for it.
HTML:
<!--logo goes here-->
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
</div>
<div class="textbox">
<p class="subtext"> We care about you </p>
</div>
Put the text in the same div where the logo is:
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
<p class="subtext"> We care about you </p>
</div>
Both and are block elements, by default those tags go to the new line.
So what was your intention, putting the subheading right under the logo?
Related
I am working on a jekyll page.
On the page in question I have a series of pictures that I would like to show.
I would like to show a subtitle of an image but only when clicking on the thumbnail i.e. when the enlarged image is shown. Ideally it would have a semi-opaque background and the font-color would be white.
<div class="row">
<div class="col-xl-6 Keyfeature-selection pt-10 pb-40">
<div class="s-details-img mb-30">
<a href="{{relative_url}}/assets/img/service/details/01.jpg">
<img src="{{relative_url}}/assets/img/service/details/01.jpg" alt="">
</a>
</div>
</div>
<div class="col-xl-6 col-lg-12 service-details">
<div class="s-details-img mb-30">
<h3> Intuitive QGIS Interface
</h3>
<p> The software can be used through the famous QGIS interface, making digitizing and layer creating easy and straight-forward
</p>
</div>
</div>
</div>
I looked at figcaption but was only able to put the subtitle directly below the thumbnail. However I do not want to see the subtitle under the thumbnail.
Any ideas how to do that?
Just been playing around with this it might help.
codepen
<a class="lightbox" href="#dog">
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
</a>
<div class="lightbox-target" id="dog">
<figure>
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
<figcaption>add text here</figcaption>
</figure>
<a class="lightbox-close" href="#"></a>
</div>
just playing with clickable images to enlarge on click and display text.
have a play and see if you can get the outcome you're after.
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?
Can i put logo nested with anchor inside the <figure> ? Is it right?
Here is the code
<header>
<div class="row">
<figure class="col-sm-5"> <img src="images/logo.gif" class="img-responsive" height="60" width="330" alt="site-logo"> </figure>
<div class="col-sm-7">
<div class="well">
<div class="row">
<div class="col-xs-9"><nav></nav></div>
<figure class="col-xs-3"> <img src="images/helpline.gif" class="img-responsive" height="60" width="120" alt="helpline-image"> </figure>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</header>
Yes you can.
The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
Reference : MDN
I know this is old, but please do not place your logo in an <h2>; it is not the place for it and can mess up your accessibility, your dom heading structure, and your SEO performance. Doing something because you can, does not make it the right solution below are some links about how to use heading tags. If you want it to look like an <h2>, then style it in your CSS.
W3 Schools
MDN
SEO and Headers Article
For better SEO, put your logo inside H2 tag.
<h2>
<a href="#">
<img src="logo.gif" alt="stackoverflow-logo"/>
</a>
</h2>
Give proper name for alternate text tag alt, instead of site logo, give your companyname-logo
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.
I want the logo below to align with the right of the page. I've tried adding float:right, but that causes the horizontal line to wrap around on the left. I don't want anything else occupying the vertical space.
Here is my HTML
<header >
<div>
<img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
<br>
<hr>
</div>
</header>
You can try adding text align to the containing div: (Working jsFiddle)
<header>
<div style="text-align:right;"> <!-- add this css, images are by default inline -->
<img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
<br>
<hr>
</div>
</header>