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