How can I keep "intro" under the image?

I am a HTML,CSS newbie and I think I will alway be :sweat: I have a simple HTML page. I would like to keep the intro of the page under the image on the page. But right now the intro is pushed up behind the image ( see attached ).


Is it possible to keep the intro section under the image just with the natural flow of elements? Am I supposed to give “margin-top” to the intro section or “margin-bottom” for the image to keep these two elements separate? I am sorry if this is a very silly basic question…

My current HTML is

<!DOCTYPE >
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta name="author" content="by ." />
  <meta name="Copyright" content="Copyright &copy; 2014 " />
  <link type="image/x-icon" href="/root//favicon.ico" rel="icon" />
  <title>Home Page title</title>
  <meta name="keywords" content="Photographer Website" />
  <meta name="description" content="Home Page Description" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="/root/theme/site/js/jquery-1.2.6.min.js">
</script>
  <script type="text/javascript" src="/root/theme/site/js/jquery.touchwipe.1.1.1.js">
</script>
</head>

<body>
  <div class="container">
    <h1 id="header"><a href="/root/"></a></h1>

    <div class="sub-container">
      <ul class="nav">
        <li><a href="/root/">HOME</a></li>

        <li>|&nbsp;&nbsp;<a href="/root/photos">MY GALLERIES</a></li>

        <li>|&nbsp;&nbsp;<a href="/root/search">SEARCH</a></li>

        <li>|&nbsp;&nbsp;<a href="/root/about-me">ABOUT ME</a></li>

        <li>|<a href="/root/carts">&nbsp;&nbsp;CART(1)</a></li>

        <li>|&nbsp;&nbsp;<a href="#">Product</a>
          <ul class="submenu" id="submenu">
            <li><a href="/products">Products</a></li>
            <li><a href=
            "/special-type-product">Ebook</a></li>
            <li><a href="/4">Light</a></li>
          </ul>
        </li>
      </ul>
      <div id="slideshowContainer">
        <div id="slideshow"><img src="country.jpg" class="active" align=
        "middle" alt="Slider Title" /></div>
        <div class="intro">
          <p>Welcome to my gallery! This is a collection of images from my small trips to
          break clear away from daily routines of life. Some very special memories are
          captured and exhibited here to share with friends and family. To me, portraying
          nature often is not a matter of intellect but of feelings. Hope you walk away
          from these images with inspiration and love for nature.</p>
          <div class="underline"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div id="seeker">
      <form action="/root/photos/search" id="PhotoCmspageForm" method="get"
      accept-charset="utf-8" name="PhotoCmspageForm">
        <input name="search" id="search" value="" type="text" /><input type="submit" id=
        "find" value="Search" />
      </form>
    </div>
    <p class="footnote">Copyright &copy; 2014 raj.com</p>
  </div>
</body>
</html>

And my CSS is
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
font-size:100%;
/Color for all website fonts–@added By Rajesh Kumawat/
color:#8d643d;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}

ins {
text-decoration:none;
}

del {
text-decoration:line-through;
}

table {
border-collapse:collapse;
border-spacing:0;
}



body {
background:#FFF;
}

a {
text-decoration:none;

}

a:visited {

text-decoration:none;
}

a:hover,a:focus {
text-decoration:none;
color:#fff;
}

a,input {
outline-color:invert;
outline-style:none;
outline-width:medium;
}


.nav {
width:100%;
float:right;
text-align : right;
padding:0 1px;
list-style:none;
position:relative;
z-index:1;
margin-right : 96px;
}

.nav li {
position:relative;
display:inline-block;
padding : 1px;
border-radius : 4px;
}
.nav > li:hover > a{
    background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}

.submenu > li:hover > a{
    background-color : #5c331a;
}

.nav li a {
display:inline-block;
padding:2px 7px;
text-decoration:none;
color:#8d643d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}

#submenu.submenu {
    display: none;
    padding: 5px 0;
    position: absolute;
    z-index : 9999;
}
#submenu.submenu > li a{
    width : 100%;
    text-align : center;
    z-index : 9999;
}
#submenu.submenu > li {
    list-style: outside none none;
    width : 100%;
    z-index : 9999;
}
.nav > li:hover ul#submenu{
    display: block;
}


#slideshowContainer {
height:100%;

}
#slideshow {
width:100%;
position:relative;
margin-right:auto;
margin-left:auto;
right:0;
padding-bottom:3em;
}

#slideshow IMG {
position:absolute;
top:8px;
left:0;
z-index:8;
}

#slideshow IMG.active {
z-index:10;
}

#slideshow IMG.last-active {
z-index:9;
}

.intro {
font-family:“Lucida Grande”, sans-serif;
color:#DB814C;
font-size:19px;
text-align:center;
margin-right:auto;
margin-left:auto;
line-height:22px;
border-top:1px solid #8a3e1c;
}

.underline {
position:relative;
margin:0 auto;
z-index:1;
padding:35px 0 0;
background-image:url(../img/underline.png);
background-repeat:no-repeat;
background-position:center bottom;
text-align:right;
width:220px;
}

I think having the class “nav” floated to the right is causing this.

Hi,

It’s not the float that’s causing the problem its the fact that you have absolutely placed the image on the page.

#slideshow IMG {
	position:absolute;
	top:8px;
	left:0;
	z-index:8;
}

Absolute elements are removed from the flow and therefore the intro knows nothing about the image and starts under the last in-flow element.

If you need the image position:absolute for a slideshow or some effect then you will need to set a height on the container (#slideshow) to match the height of the images in your slideshow (assuming they are all the same height).

You may also want to make sure the slideshow clears the floated nav which can be done by applying clear:both to #slideshowContainer.

As an aside avoid using presentational deprecated html attributes (like align=middle) as they have no place in the html these days.:slight_smile:

Thank you Paul for you help. Setting a height there make sense and it really works!! And you are right it is a slideshow. I have a question , if this page is a responsive page. What I would like to do is to keep the intro under the image even when the viewport size is reduced. How can I still keep the intro below the image with the abolutely positioned IMG? Do I still set height to achieve that? Can I set a height of 100% to #slideshow ? ( I tried this but it didn’t work… )

Hi,

If you really want a slideshow then there are many responsive slideshow plugins that you can use that are responsive and you would be better looking at those.

e.g.

Regarding your original question then it all depends on how you are managing the images in the slideshow. If you are using absolutely placed images then you will need to match the height on the wrapper. Height:100% on the wrapper means nothing and as its content is absolute the height is zero anyway unless you explicitly set it.

There are many ways to make a responsive slider but I can’t really detail the methods in a post like this which is why I suggest you get one ‘off the peg’ :smile:

1 Like

Thank you Paul… it looks like I will get one off the peg indeed :grinning:

This is really helpful. Thank you for that tip. I didn’t know that. Do you recommend any CSS courses that I can learn things like these from? Thanks again!

SitePoint Premium has some very good css courses but they are not free.

Otherwise just keep practising and asking questions in forums like this and eventually it will all sink in :smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.