How to deal with <ul>

Asked

Viewed 83 times

0

Hello, I would like to put the "Exit" and the "Login | Register" up.

The input file would like to leave only a large button like this without that part that shows what was selected.

index php.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LuppBox</title>
<link rel="stylesheet" type="text/css" href="estilo_index.css"/>
</head>
<body bgcolor="#0099FF">
    <ul id="cabecario">
        <li id="logo"><img src="fotos_site/logo.png" width="auto" height="60" /></li>  
        <li id="login_cadastro_css"><a href="sair.php">Sair</a></li>
        <li id="login_cadastro_css"><a href="login_cadastro.php">Login | Cadastro</a></li>         
    </ul>  
    <?
    session_start();

    if(isset($_SESSION['login_usuario']) && isset($_SESSION['senha_usuario']))
    {   
        echo "Olá ".$_SESSION['login_usuario'];
        echo "<p><input id=\"upload\" type=\"file\" value=\"UPLOAD\">";
    }
    ?>
</body>
</html>

style_index.css

@charset "utf-8";

#cabecario
{
    height:60px;
    width:900px;
    background:#0F3;
    border-radius:3px;
    margin:0 auto;
}

#logo
{
    list-style:none;
    margin-left:70px;
}

#login_cadastro_css
{
    list-style:none;
    display:inline-block;
    alignment-adjust:auto;
    margin-left:750px;
}

#cabecario a
{
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFF;
    text-decoration: none;
}

#upload
{
    border-radius:10px;
    background:#006;

    width:400px;
}
html css

  • It is not a good idea to leave user password stored in session ($_SESSION['senha_usuario'])...

  • Where should I leave ??

  • Keep it in an encrypted database. When authenticating the user, just search and compare. Don’t leave it in the session because it can be hacked. Read more in http://phpsec.org/projects/guide/4.html

  • Vlw for the help, I’ll fix it, but you know how to solve the problem I mentioned above ??

  • I am analyzing here.

2 answers

0

This is very messy! Why use a ul logo and menu? First understand what the ul to know if it is necessary to use in this context!!!!

The upload image:

#upload{
  background:#006;
  width:500px;
  height:100px;
}
#upload input{
  width:500px;
  height:100px;
  opacity:0;
  display:block;
  margin-top:-100px;
}
#upload img{
  display:block;
}
<div id="upload">
<img src="http://i.stack.imgur.com/j4CQt.png">
<input type="file" value="UPLOAD">
</div>

0


There are some semantic errors in your code and duplicate id’s. I advise to give a studied in HTML and CSS. But here’s a way to get closer to what you expect:

HTML - change the part of the button to be displayed with PHP:

<body>
     <div id="cabecalho">
         <div id="logo"><img src="fotos_site/logo.png" width="auto" height="60" /></div>  
         <div class="links">
             <div><a href="sair.php">Sair</a></div>
             <div><a href="login_cadastro.php">Login | Cadastro</a></div>         
         </div>
     </div>

     <!-- altere para exibir com o PHP -->
     <div id="upload-container" class="fileUpload">
         <span>Upload</span>
         <input id="upload" class="upload" type="file" />
     </div>
 </body>

And the CSS:

 body  {
     background-color: #0099FF;
 }

 #cabecalho
 {
     height:60px;
     width:900px;
     background:#0F3;
     border-radius:3px;
     margin:0 auto;
 }
 #cabecalho .links {
     float: right;
     margin-right: 15px;
 }

 #logo
 {
     list-style:none;
     margin-left:70px;
     float: left;
 }

 #login_cadastro_css
 {
 }

 #cabecalho a
 {
     font-family: "Times New Roman", Times, serif;
     font-size: 18px;
     color: #FFF;
     text-decoration: none;
 }

 #upload-container {
     border-radius:10px;
     background:#0F3;
     line-height: 40px;
     letter-spacing: 5px;
     font-size: 25px;
     font-weight: bold;
     text-align: center;
     width:400px;
 }

 .fileUpload {
     position: relative;
     overflow: hidden;
     margin: 10px;
 }
 .fileUpload input.upload {
     position: absolute;
     top: 0;
     right: 0;
     margin: 0;
     padding: 0;
     font-size: 20px;
     cursor: pointer;
     opacity: 0;
     filter: alpha(opacity=0);
 }

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.