how to bring pictures in line

[ketanco]

Hello,
On this site I am working on
autonomouscars.com
i want to bring the logo picture in line with the picture below. how can i do that?

also how can i make the logo picture transparent so that only the letters are visible but it doesnt close the background?

[Excavator]

Hello ketanco,
Your logo, http://autonomouscars.com/css/white_...lanilanboy.jpg , is contained in #top #logo ...
Your robotcar.jpg #hheader-wrapper #hheader.

Those are the two images you want to put side by side?

...
logo-kullanilanboy.jpg at 609px width
plus
robotcar.jpg at 630px width
plus
.hs-deac at 330px width

makes for a 1569px width... Is that what you're wanting to do?


...
To make your logo transparent so only the letters show, you would need to photoshop that into a transparent .png

[ketanco]

Originally Posted by Excavator

Hello ketanco,
Your logo, http://autonomouscars.com/css/white_...lanilanboy.jpg , is contained in #top #logo ...
Your robotcar.jpg #hheader-wrapper #hheader.

Those are the two images you want to put side by side?

...
logo-kullanilanboy.jpg at 609px width
plus
robotcar.jpg at 630px width
plus
.hs-deac at 330px width

makes for a 1569px width... Is that what you're wanting to do?


...
To make your logo transparent so only the letters show, you would need to photoshop that into a transparent .png

thanks
not side by side but you see the right edge of the images dont line up? i want to make them line up. either by making logo area longer or making picture area shorter. how can i do it?

[Excavator]

Originally Posted by ketanco

thanks
not side by side but you see the right edge of the images dont line up? i want to make them line up. either by making logo area longer or making picture area shorter. how can i do it?

That would best be done in photoshop as well.
...
You could make logo wider with this in your CSS

#logo a {/* this is the actual logo */
	background:url(logo-kullanilanboy.jpg) no-repeat;
  background-size: 630px 120px;
}

That uses the CSS3 background size property and may not have wide enough support for you.

...

Or you could make your robotcar.jpg narrower by editing this bit in your markup -

    </div>

</div>

<div id="hheader-wrapper">
	<div id="hheader">
        
        <ul class="home-slider"><!-- slider start -->
        	<li>
	            <!--<a href="#">--><img src="images/robotcar.jpg" alt="" class="slide-img" height="281" width="609"><!--</a>-->
                <div class="hs-desc">
                	<h1><cufon style="width: 290px; height: 26px;" alt="AUTONOMOUSCARS.COM" class="cufon cufon-canvas"><canvas style="width: 298px; height: 29px; top: -3px; left: -3px;" height="29" width="298"></canvas><cufontext>AUTONOMOUSCARS.COM</cufontext></cufon></h1>
                    <div class="slide-tagline">Your primary source for following robot cars</div>
                    
                    <p>
						Driverless Cars ar

But, like I said, you should make the photos the correct size in photoshop before you use them in your .hmtl document.