...

View Full Version : how to bring pictures in line



ketanco
01-10-2013, 12:05 AM
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
01-10-2013, 01:54 AM
Hello ketanco,
Your logo, http://autonomouscars.com/css/white_red/logo-kullanilanboy.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
01-10-2013, 02:43 PM
Hello ketanco,
Your logo, http://autonomouscars.com/css/white_red/logo-kullanilanboy.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
01-10-2013, 06:46 PM
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 (http://www.w3schools.com/css3/css3_backgrounds.asp) 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum