2015-12-15 2 views
1

ImageОтображение текста на пограничном CSS

Я хотел бы иметь бирку «Вход Логин» на линии границы в моем коде, но я понятия не имею, как вытащить его, я в принципе хочу что-то вроде этого

Image

Где бы «Выберите Пицца Size», я хочу, чтобы иметь возможность показывать мой текст, обернутый с границей, но я не знаю, как.

Мой код:

login.php

<html> 
<head> 
    <title>Hospital Login</title> 
    <link href="login.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <fieldset class="formDisplay"> 
     <form name="form1" method="post" action="process_login.php">    
      <legend><strong>Member Login </strong></legend></br> 
      <strong>Username</strong></br></br> <input name="myusername" type="text" id="myusername"> 
      </br></br> 
      <strong>Password</strong></br></br><input name="mypassword" type="password" id="mypassword"> 
      </br></br> 
      <input type="submit" name="Submit" value="Login"> 
     </form> 

     <?php 
      echo $message; 
     ?> 
    </fieldset> 
</body> 
</html> 

login.css

.formDisplay{ 
    position:relative; 
    top: 15%; 
    left: 30%; 
    border: 5px groove threedface; 
    padding: 50px; 
    border-radius:20px; 
    width:400px; 
    height:250px; 
    text-align: center; 
} 
.formDisplay legend { 
    display: block; 
word-wrap: initial; 
} 

Заранее спасибо за помощь

ответ

2

Вам нужно обернуть форма ele в fieldset и сделать «Логин пользователя» legend.

См основного примера здесь:
http://www.w3schools.com/tags/tag_fieldset.asp

Для более чтений в глубине, посетите:
fieldset element @ MDN


Update (на основе пересмотра на вопрос)

Проблема в вашем коде у вас есть fieldsetouts ideform элемент. Попробуйте вместо этого:

<form name="form1" method="post" action="process_login.php"> 
     <fieldset class="formDisplay"> 
      <legend><strong>Member Login </strong></legend></br> 
       ... 
       ... 
       ... 
     </fieldset> 
    </form> 
+0

Я сделал это, все еще не помог –

+0

должен ли я показывать свой код, если это поможет? –

+0

Да, пожалуйста, покажите свой код. Также попробуйте редактор кода на странице, на которую я ссылаюсь. –

-1

Попробуйте это:

#selection{ 
    height:300px; 
    width:400px; 
    border:1px solid #666; 
} 

h3{ 
    width:180px; 
    margin-top:-10px; 
    margin-left:10px; 
    background:#EEE; 
    padding-left:10px; 
    font-size:14px; 
    color:#000; 
} 
#spacer{ 
    height:100px; 
} 

Смотрите пример здесь: https://jsfiddle.net/aqx3kLqm/1/

Просто, чтобы вы знаете, это не является решением водонепроницаемым, потому что вам нужно отрегулируйте текст вашего текста в CSS, если текст имеет другую длину.

Смежные вопросы