Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

H

Hassine

macrumors newbie
Original poster
Jan 23, 2015
7
0
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 :)
 
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">)
 
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.
 
this is the layout desired
 

Attachments

  • layout.jpg
    layout.jpg
    45.7 KB · Views: 225
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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back