I am making a slider with this basis https://codepen.io/naomilea/pen/XjbXVE
I want to add other pictures and when I add a picture that has another size than the already added pictures the whole slider changes in size. Is there a way to avoid this to happen or resize the images to the already added images?
I am trying to resize the images in CSS.
I've adjusted the HTML to suite me better but not changed the CSS anything
Here is the HTML
<div id=slides>
<div id=overflow>
<div class=inner>
<article>
<img src="aboutuscoffee.jpg" />
</article>
<article>
<img src="#"/>
</article>
<article>
<img src=http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png />
</article>
<article>
<img src=http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png />
</article>
</div>
Related
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?
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 am sending a html built email body..
Is there a way to display an alternate text while the images are not yet loaded?
I tried overlapping two divs with img and text, it is working but the problem is that the broken-image icon is showing.
<div style="width:100%;min-height:50px!important;text-align:center;background-color:#eee;border-bottom:solid 2px #aaa">
<div style="min-height:10px"> </div>
<div style="min-height:30px">
<div style='width:200px;margin:0 auto;'>
<a href="http://google.com" target="_blank">
<div style='position:relative;'>
<div style='position:absolute; height:30px;width:200px;z-index:1000;'>
<img height="30" width="200" alt="View Presentation" src="http://www.clker.com/cliparts/X/1/Q/v/b/2/green-button.svg">
</div>
<div style='position:absolute;height:30px;width:200px;background-color:#EEE;'>
Click here to view
</div>
</div>
</a>
</div>
</div>
<div style="min-height:10px"> </div>
</div>
Kindly see my work here..
http://jsfiddle.net/msvillanueva/aYuAd/1/
This jQuery plugin can help you
http://www.appelsiini.net/projects/lazyload
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.