Align <input type="search"/> to <p>

Discussion in 'Web Design and Development' started by Hassine, Jan 23, 2015.

  1. Hassine macrumors newbie

    Joined:
    Jan 23, 2015
    #1
    Hello everybody,

    I'm trying to Align <input type="search"/> to <p> but without modifiying the design already done. Here are the code portions of HTML and CSS:


    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<link rel="stylesheet" href="style1.css"/>
    		<title>Fonctionnalités évoluées</title>
    	</head>
    	<body>
    		<p class="un">
    			RECHERCHER
    		</p>
    		<p class="deux">
    			INSCRIPTION / IDENTIFICATION
    		</p>
    		<p class="trois">
    			Parmi plus de 20 000 articles et 3 000 vidéos !
    		</p>
    		<input type="search" class="quatre"/>
    	</body>
    </html>
    Code:
    .un
    {
    	border: 4px solid black;
    	width: 20%;
    	display: inline;
    }
    .deux
    {
    	display: inline-block;
    	width: 20%;
    	border: 4px solid black;
    	margin-left: 600px;
    	margin-top: -4px;
    }
    .trois
    {
    	border: 4px solid black;
    	width : 30%;
    	margin-top: -20px;
    }
    I tryed to apply the display property to the input with the values: inline, block and inline-block but in vain

    Help me please, thank you :)
     
  2. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #2
    To which <p>, and why can't you change the original HTML?
     
  3. Hassine thread starter macrumors newbie

    Joined:
    Jan 23, 2015
    #3
    Ok, i am sorry. If i must rectify the html file, then i do it.
    But I want to align <p class="trois"> to the input, meanwhile <p class="trois"> should keep the same position (just below <p class="un">)
     
  4. Flood123 macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #4
    Any way you can do a quick rough mockup of the layout you hope to achieve and post the image? a jpg (or whatever) would take away any guess work and allow us to help more effectively.
     
  5. Hassine thread starter macrumors newbie

    Joined:
    Jan 23, 2015
    #5
    this is the layout desired
     

    Attached Files:

  6. MacMulti macrumors regular

    Joined:
    Mar 20, 2013
  7. damir.hara macrumors newbie

    damir.hara

    Joined:
    May 14, 2007
    Location:
    SLC, UT
    #7
    Put your <p> and <input> that you want together into a <div> (or such) container and float them left with your CSS. Then put your other <p>'s into a another container and float them right with your CSS.

    Such as this:
    Code:
     
    <div id="nav-container1">
      <p class="un">
    	RECHERCHER
      </p>
      <p class="trois">
    	Parmi plus de 20 000 articles et 3 000 vidéos !
      </p>
      <input type="search" class="quatre"/>
    </div>
    
    <div id="nav-container2">
      <p class="deux">
    		INSCRIPTION / IDENTIFICATION
      </p>
      <p>whatever else..</p>
    </div>
    
     

Share This Page