CSS vertical-align and line-height

6 replies [Last post]

Wed, 2010-09-08 01:27

galileo79

Offline

newbie

Timezone: GMT-3

Joined: 2010-09-08

Posts: 3

Points: 4

Hello, I want to ask you about a problem i been having with Vertical-align.

I understand almost all funcionality in vertical-align and line-height but now i need to include a
piece of code (PHP Login box). With a piece of code i mean not only one line but several and i need to put it in the bottom of mi tag (an unorder list - see code below).

Code here: Login.php

echo "<form action='index.php' method='POST'>";		     
echo "<DT><label class='lgLetra'>usuario:</label><input class='tbUser lgLetra' name='idUsuario' type='text' value=''/><br>";
echo "<label class='lgLetra'>contraseña:<label><input class='tbPass lgLetra' name='password' type='password' value=''/><br>";                       
echo "<input class='tbButton lgLetra' name='validar' value='validar' type='submit'><br>";
echo "<a href = 'forgetpass.php' class='lgLetra'>Olvide mi contraseña</a>";
echo "<label class='lgLetra'> | </label>";                      
echo "<a href = 'register.php' class='lgLetra'>Registrarme ahora</a>";
echo "</DT>";    
echo "</form>";

and the main HTML File

echo "<body>";
echo "<div id='contenido' style='width=400'>";
echo "<ul>";          
echo "<li class='header logo'><img src='img/argenCODE.png'><br><div class='titulo'>argencode.net</div></li>";
echo "<li class='header adsense'>Código de Google AdSense</li>";
echo "<li class='header loginphp'>";
include("login.php"); 
echo "</li>";              
echo "</ul>";
echo "</div>";
echo "</body>";

Please if anybody nows about what may be happening to me help me.

Thanks

Tags:

CSS Layouts

Wed, 2010-09-08 02:48

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Sorry, I don't really

Sorry, I don't really understand what you're trying to do. Also can you post ALL your HTML (as its sent to the browser, not PHP server side code) and CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-09-08 03:27

galileo79

Offline

newbie

Timezone: GMT-3

Joined: 2010-09-08

Posts: 3

Points: 4

Ahi va: index.php <!DOCTYPE

Ahi va:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>  
<title> Bienvenido a argenCODE.net </title>  
<link rel="stylesheet" type="text/css" href="styles/mainWPage.css"/>
<link rel="stylesheet" type="text/css" href="styles/header.css"/>
<link rel="stylesheet" type="text/css" href="styles/mainMenu.css"/>
</head>
<body>
<div id='contenido'>
<ul>          
<li class='header logo'><img src='img/argenCODE.png'><br><div class='titulo'>argencode.net</div></li>
<li class='header adsense'>Código de Google AdSense</li>
<li class='header loginphp'>
<?php
session_start();
if($_SESSION)
{
if($_SESSION["Autenticado"]="si")    
{echo "<a href='destroy.php'>Cerrar sesión</a>";}
Elseif ($_SESSION["Autenticado"]="no")
{include("login.php");}
}
Else
{include("login.php");}
?>
</li>              
</ul>
<br>&nbsp;</br>
<br>&nbsp;</br>
<br>&nbsp;</br>
<br>&nbsp;</br>
<div id="menu" style='background-image:url(img/header.bmp);'>
	<span>
		<ul>
			<li class="mainmenu mainmenuitem">Test 1</li>
			<li class="mainmenu mainmenuitem">Test 2</li>
			<li class="mainmenu mainmenuitem">Test 3</li>		
		</ul>
	</span>
</div>
</div>
</body>
</html>

<?php
function Login($usuario, $contrasena)
{   
   $_SESSION["Autenticado"] = "si";   
}
 
if(isset($_POST['idUsuario']) && isset($_POST['password']))
{     
   if(!($_POST['idUsuario'] == ""))
   {
	Login($_POST['idUsuario'], $_POST['password']);
   }
   else 
   {        
		$_SESSION["Autenticado"] = "no"; 
   }
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>  
<title> Bienvenido a argenCODE.net </title>  
<link rel="stylesheet" type="text/css" href="styles/login.css"/>
</head>
<body> 
<?php
echo "<form action='index.php' method='POST'>";		     
echo "<label class='lgLetra'>usuario:</label><input class='tbUser lgLetra' name='idUsuario' type='text' value=''/><br>";
echo "<label class='lgLetra'>contraseña:<label><input class='tbPass lgLetra' name='password' type='password' value=''/><br>";                       
echo "<input class='tbButton lgLetra' name='validar' value='validar' type='submit'><br>";
echo "<a href = 'forgetpass.php' class='lgLetra'>Olvide mi contraseña</a>";
echo "<label class='lgLetra'> | </label>";                      
echo "<a href = 'register.php' class='lgLetra'>Registrarme ahora</a>";
echo "</form>";
?>
</body>
</html>

header.css

.header
{    
    height: 100px; 
    list-style:none;
    float: left;	
}
 
.logo
{   width: 200px;   }
 
.titulo
{
    padding-left: 5px;
    font-family: Trebuchet MS;
    font-size: 18px;    
} 
 
.adsense
{
    width: 430px;
    text-align: center;
    line-height:100px;
    vertical-align:middle;
    color:#CCCCCC;      
}
 
.loginphp
{ 
    width: 300px;
    display:compact;
	text-align:right;    
	vertical-align:bottom;   
}
.closeSession
{
    width: 300px;
    text-align:right;    
    vertical-align:bottom; 
}

mainMenu.css

#menu
{
    width: 981px;
    height: 114px;
}
 
.mainmenu
{    
    height: 100px; 
    list-style:none;
    float: left;	
}
 
.mainmenuitem
{
    width: 50px;
    text-align: center;
    line-height:120px;
    vertical-align:middle;
    color:#CCCCCC;      
}

.lgLetra
{
  font-family: Verdana;
  font-size: 10px;      
}
 
.tbUser
{ height: 10px; }
 
.tbPass
{ height: 10px; }
 
.tbButton
{ height: 20px; }
 
 
.lgUser
{
  height: 35px;
  position: absolute;
  bottom: 0;  
} 
 
.lgPass
{
   height: 10px;
   position: absolute;
   bottom: 0;  
}
 
.lgOption
{   
   height: 10px;
   position: absolute;
   bottom: 0;
}
 
.lgButton
{
   height: 36px;
   padding-left: 300px;
   position: absolute;
   bottom: 0;
}
 
.lgWindow
{   
   width: 250px;
   height: 100px;      
   position: relative;
}
 
.textBox
{
   width: 30px;
   height: 10px;
   font-family: Verdana;
   font-size: 8px;
}

Thanks a lot for your help.

Wed, 2010-09-08 03:58

Ed Seedhouse

Offline

Guru

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3544

Points: 643

Did you not even read what

Did you not even read what Tyssen said? He said "as its sent to the browser, not PHP server side code".

Do you not understand what that means?

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Wed, 2010-09-08 05:15

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

It's possible that as the

It's possible that as the code contains words in Spanish that maybe he/she didn't understand (which also may have meant that they would be unlikely to pick up the 'tone' in your writing). But please go back and read my previous response as you haven't provided everything that I asked for. A link to the page would be better.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-09-08 13:41

galileo79

Offline

newbie

Timezone: GMT-3

Joined: 2010-09-08

Posts: 3

Points: 4

What i need to do is ...

The problem is:

<li style='line-height:100px; vertical-align:bottom;>

Only one line <li>

(I know this works fine, because line-height affect only one line).

Now ...

I need to do this:

<li style='line-height:100px; vertical-align:bottom;> 
<form action=login.php method=POST>
<input type = text ......
....
....
</form>
</li>

And i need the entire form to be align to the bottom of de <li>, can you help with this issue.

... and don't understand what is that you ask to me above ...
is that you need all the code of every file a have regarding this issue?
or some other thing

Thanks

Wed, 2010-09-08 22:03

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Can you just post a link to

Can you just post a link to the page?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CSS vertical-align and line-height

Sorry, I don't really

Ahi va: index.php <!DOCTYPE

Did you not even read what

It's possible that as the

What i need to do is ...

Can you just post a link to

New forum topics

User login

Navigation