MySQLテーブルのアイテムを検索するために使用されるHTML入力があります。そして、私はCSSに不慣れであると言わなければなりません。これはHTMPの部分です。
<div id="main">
<div class="icon"></div>
<h1 class="title">Especialidad Médica</h1>
<h5 class="title">(selecciona la especialidad médica del doctor)</h5>
<!-- Main Input -->
<input type="text" id="search" autocomplete="off">
<!-- Show Results -->
<h4 id="results-text">Mostrando resultados para: <b id="search-string">Array</b></h4>
<ul id="results"></ul>
</div>
そしてこれはCSSの部分です:
/******************************************************************
Main CSS
******************************************************************/
div#main {
width: 360px;
margin: 200px auto 20px auto;
}
.title {
line-height: 1.2em;
position: relative;
margin-left: 40px;
}
div.icon {
margin-top: 4px;
float: left;
width: 31px;
height: 30px;
background-image: url(../images/magnify.gif);
background-repeat: no-repeat;
-webkit-transition-property: background-position, color;
-webkit-transition-duration: .2s, .1s;
-webkit-transition-timing-function: linear, linear;
-moz-transition-property: background-position, color;
-moz-transition-duration: .2s, .1s;
-ms-transition-duration: .2s, .1s;
-ms-transition-timing-property: linear, linear;
-o-transition-property: background-position, color;
-o-transition-duration: .2s, .1s;
-o-transition-timing-property: linear, linear;
transition-property: background-position, color;
transition-duration: .2s, .1s;
transition-timing-property: linear, linear;
}
div.icon:hover {
background-position: 0px -30px;
cursor: pointer;
}
input#search {
width: 350px;
height: 25px;
padding: 5px;
margin-top: 15px;
margin-bottom: 15px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
outline: none;
border: 1px solid #ababab;
font-size: 20px;
line-height: 25px;
color: #ababab;
}
input#search:hover, input#search:focus {
color: #3b3b3b;
border: 1px solid #36a2d2;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
h4#results-text {
display: none;
}
ul#results {
display: none;
width: 360px;
margin-top: 4px;
border: 1px solid #ababab;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,.15) 0 1px 3px;
box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;
}
ul#results li {
padding: 8px;
cursor: pointer;
border-top: 1px solid #cdcdcd;
transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-webkit-transition: background-color .3s ease-in-out;
}
ul#results li:hover {
background-color: #F7F7F7;
}
ul#results li:first-child {
border-top: none;
}
ul#results li h3, ul#results li h4 {
transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-webkit-transition: color .3s ease-in-out;
color: #616161;
line-height: 1.2em;
}
ul#results li:hover h3, ul#results li:hover h4 {
color: #3b3b3b;
font-weight: bold;
}
PHPファイルから結果を取得するためにAJAXを使用しています。
そしてこれはPHPの部分です:
// Define Output HTML Formating
$html = '';
$html .= '<li class="result">';
$html .= '<img src="iconos_especialidades/logo" width="94" height="94" />';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '</a>';
$html .= '</li>';
// Get Search
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$query = 'SELECT * FROM tb_especialidades WHERE especialidad LIKE "%'.$search_string.'%" OR especialidad LIKE "%'.$search_string.'%"';
// Do Search
$result = $tutorial_db->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}
// Check If We Have Results
if (isset($result_array)) {
foreach ($result_array as $result) {
// Format Output Strings And Hightlight Matches
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['especialidad']);
$display_url = 'opinar_doc_local.php';
if ($result['icono'] == ""){
$display_logo = "nada.jpg";
}
else {
$display_logo = $result['icono'] ;
}
// Insert Name
$output = str_replace('nameString', $display_name, $html);
// Insert URL
$output = str_replace('urlString', $display_url, $output);
// Insert LOGO
$output = str_replace('logo', $display_logo, $output);
// Output
echo($output);
}
}else{
// Format No Results Output
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No se ha encontrado la especialidad buscada.</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
// Output
echo($output);
}
}
私の問題は、divの左側に画像を表示し、画像の右側にテキストを表示したいということです。テキストは画像の中央に垂直に配置する必要があります。
これが現在の出力です。
私はこれをCSSファイルに追加しようとしました:
img {
vertical-align: middle;
}
しかし、出力は同じです。
追加する場合は、これを試してみてくださいdisplay-inline-block; and vertical-align: middle;
イメージとの両方で<h3>
、両方の画像とは、<h3>
互いの途中であってもよいが、心の中で一つのことを続ける、あなたはこの仕事をするために、両方の上に幅を追加する必要があります。
ul#results li img{display: inline-block; vertical-align:middle;}
ul#results li h3{display: inline-block; vertical-align:middle;}
<ul id="results">
<li>
<img src="http://www.redsignal.net/staging/wp-content/uploads/2015/12/6_ui_ux_design_hov.png"/>
<h3> your txt her </h3>
</li>
</ul>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加