Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2009
    Posts
    193
    Thanks
    26
    Thanked 0 Times in 0 Posts

    how to bring pictures in line

    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?
    Last edited by ketanco; 01-09-2013 at 11:07 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Posts
    193
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ketanco View Post
    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
    Code:
    #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 -
    Code:
        </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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •