How do I get an image between to sections in css - html

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.

Related

How do I make a text align under a logo using css?

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?

Avoid slider being resized when adding a picture

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>

Make header responsive

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?

image div getting displaced while resizing the browser

I have a bootstrap page, Which is completely resposnive .
But for some reason, when I resize the browser, one of the div's images are getting displaced.
My code structure is like
<body>
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</body>
Is there anything standard which should've been there which I am missing regarding these displacements or it is something with my written code?
Please suggest
Add "img-responsive" class to the image tag
<img src="..." class="img-responsive" alt="Responsive image">
http://getbootstrap.com/css/#images-responsive
Some of the elements in bootstrap don't work out within your layout if you're not wrapping the entire html content inside of your body tag with a div.container or div.container-fluid. It doesn't appear like you did that from your shared code. See below:
<body>
<div class="container"> <!--To wrap the doc, or conatiner-fluid for a wider container. -->
<div class="header-wrapper">
-----
</div>
<div class="content-wrapper">
----
</div>
<div class="content-wrapper">
----
</div>
</div> <!--add # end of doc -->
</body>
Above, would be my very first suggestion if you have not yet wrapped your document with a container.

How do I make my banner in tumblr link to another site?

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=""