Member Avatar for davy_yg

style.css

/* Intro */
#intro{
		background:transparent url(img/intro-bg.jpg);
		height:295px;margin:35px auto 25px;
		padding:0; position:relative;width:940px;
}
#intro img{left:50px;position:relative;top:-36px;}
#intro article{
		color:#29363f;font:16px arial;
		float:right; padding:20px 10px;
		text-shadow:1px 0 1px #a8cbe4;
		width:450px;
}
#intro h2{color:#fff;font:bold 36px arial,sans-serif;margin-bottom:20px;
		text-shadow:1px 0 1px #85a4b9;}
#intro p{line-height:1.15}

I attached web picture. I would like the text to overlap the intro background as the cussor shows.

index.html

<body>
<div id="header">

	<div id="header-container">
    	<header>
        	<h1><a href="#">Organiz-r</a></h1>
        </header>
        <nav>
        	<a class="current" href="#">Home</a>
            <a href="#">Tentang Kami</a>
            <a href="#">Kontak</a>
        </nav>
     </div>
</div><!--Akhir Header -->
<div id="container">
    <div id="intro">
    
    <img alt="intro image" src="img/intro.jpg">
    <article>
    	<h2>Kami Membantu Mengatur Keuangan Bisnis Anda</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque turpis ac nisl gravida porta. Suspendisse et vestibulum purus. Nullam sem ligula, interdum sed venenatis sit amet, pellentesque quis arcu. Curabitur tempor diam nec augue convallis sed tempor felis pellentesque. Nam nec lacus eu urna viverra molestie. Proin neque magna, porttitor at vestibulum et, molestie sed mi. Sed quis ipsum id massa suscipit euismod.</p>
    </article>

How to do so ?

websampel.jpg 30.46 KB
  • 3 Contributors
  • 6 Replies
  • 128 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Dandello
Member Avatar for Dandello

There are a couple different things you can try - set img/intro.jpg as the background in the containing element.

OR: set the z-index for img/intro.jpg to 0, the z-index of the h2 to something higher, then use a negative margin to position the h2 over the image.

Member Avatar for simplypixie

Float the image left and put a 1px border around the image and the intro text (remove after testing) to check where they are positioning on the page (i.e. if they are overlapping which would push the text down).

Member Avatar for davy_yg

There are a couple different things you can try - set img/intro.jpg as the background in the containing element.

OR: set the z-index for img/intro.jpg to 0, the z-index of the h2 to something higher, then use a negative margin to position the h2 over the image.

I revise the css :

#intro article{
		color:#29363f;font:16px arial;
		float:right; padding:20px 10px;
		text-shadow:1px 0 1px #a8cbe4;
		width:450px; margin: -290px; 
}

I add a negative margin to article (h2 + p). Vertically correct, but harizontally, it's still way to the right until I must scroll it to the right to see the whole text. how to move it to the left so that it's proportionally correct ?

websampel.jpg 27.11 KB
Edited by davy_yg because: n/a
Member Avatar for Dandello

You've set ALL the margins on that section to -290px. You can set them individually,. Start with margin-top and work around. Do the same with your h2+p.

Another way to position everything - You can also anchor the inner divs to the outer containing div by putting a

position:relative

in the container then

position:absolute

with positioning in the inner ones.

This is a case where there really are a lot of different ways to do it.

Member Avatar for simplypixie

I still suggest putting a temporary border around your image )(in the CSS) as it may be that the width is more than you thought which is pushing the text down.

Member Avatar for Dandello

Temporary borders on elements is always a good diagnostic tool. Sometimes what you get isn't what you expected at all.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.