Jump to content
Sign in to follow this  
PHPDevil

keeping divs on same line

Recommended Posts

Im having problems with keeping two divs on the same line.

i tried to use all this float stuff but i hadn't had any luck.

 

<?php
print <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='SQL DEVIL" content='ZONE WARS' />
<meta name='Keywords' content='cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations'/>
<meta name='Description' content='CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS' />
<title>Zone Wars</title>
<style type='text/css'>
body
{
  background: #000000 url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
  margin:0 auto;
  text-align:center;
  overflow: hidden;
}
div.centered
{	
  text-align: left; 
  margin: 0 auto; 
  width: 800px; 
  border: 0px solid white; 
}
div.logintext
{
position: relative;
left: 500px;
background-color: black;
width:300px;
color: #fff;
}
#nav 
{
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #000000; 
}
#nav li 
{
  float: left; 
}
#nav li a 
{
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #333; 
}
#nav li a:hover 
{
  color: #c00;
  background-color: #000; 
}
div.logintop
{
  padding-top: 5px;
}
div.logintop2
{
  padding-top: 5px;
  float: left;
}
.clear { clear: both;}
input{
font:normal 14px Tahoma;
color:#ffffff;
height: 20px;
background-color: #1c1b1b;
border-color: #242424;
}
</style>

</head>

<body>
<div class='centered'>
  <!-- Navigation Bar start -->
  <ul id="nav">
     <li><a href="#">Home </a></li>
     <li><a href="#">Register</a></li>
     <li><a href="#">Forgot Password</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Terms and Conditions</a></li>
  </ul>
  <!-- Navigation Bar End -->

<img src='bannertest.jpg' />
<br />
<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
EOF;

?>

Share this post


Link to post
Share on other sites
Im having problems with keeping two divs on the same line.

i tried to use all this float stuff but i hadn't had any luck.

 

<?php
print <<<EOF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='SQL DEVIL" content='ZONE WARS' />
<meta name='Keywords' content='cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations'/>
<meta name='Description' content='CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS' />
<title>Zone Wars</title>
<style type='text/css'>
body
{
  background: #000000 url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left;
  margin:0 auto;
  text-align:center;
  overflow: hidden;
}
div.centered
{    
  text-align: left; 
  margin: 0 auto; 
  width: 800px; 
  border: 0px solid white; 
}
div.logintext
{
position: relative;
left: 500px;
background-color: black;
width:300px;
color: #fff;
}
#nav 
{
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  background-color: #000000; 
}
#nav li 
{
  float: left; 
}
#nav li a 
{
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #333; 
}
#nav li a:hover 
{
  color: #c00;
  background-color: #000; 
}
div.logintop
{
  padding-top: 5px;
}
div.logintop2
{
  padding-top: 5px;
  float: left;
}
.clear { clear: both;}
input{
font:normal 14px Tahoma;
color:#ffffff;
height: 20px;
background-color: #1c1b1b;
border-color: #242424;
}
</style>

</head>

<body>
<div class='centered'>
  <!-- Navigation Bar start -->
  <ul id="nav">
     <li><a href="#">Home </a></li>
     <li><a href="#">Register</a></li>
     <li><a href="#">Forgot Password</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Terms and Conditions</a></li>
  </ul>
  <!-- Navigation Bar End -->

<img src='bannertest.jpg' />
<br />
<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>
</body>
</html>
EOF;

?>

 

------------------------

Edited by mixmaster

Share this post


Link to post
Share on other sites

Sorry forgot to mention that.

This one:

 

<div class='logintop'>
<div align='right'>
<img src='toppart.png' />
</div>
</div>

<div class='logintext'>
<input type="text" name="username" id="username" size='35px' value="Enter your Username" onfocus="if(this.value==this.defaultValue)this.val  ue='';" onblur="if(this.value=='')this.value=this.defaultV  alue;"/>
<input type="password" name="password" id="password" size='35px' value="Enter your password" onfocus="if(this.value==this.defaultValue)this.val  ue='';" onblur="if(this.value=='')this.value=this.defaultV  alue;"/>
<div class='logintop'>
<input type='submit' name='submit' /><input type="button" value="Forgot Password" />
</div>
</div>
<div align='right'>
<img src='topbot.png' />
</div>

 

with this one:

 

<div class='logintop2'>
<div align='left'>
<img src='topabout.png' />
</div>
</div>
<div class='clear'></div>
</div>

 

The example with a url is http://www.makeapc.co.uk/test.php

Trying to keep the about banner on the same line as Login

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...