Jump to content
MakeWebGames

keeping divs on same line

PHPDevil

By PHPDevil
in HTML/XHTML/CSS

 Share

Recommended Posts

PHPDevil Newbie

PHPDevil

Posted
Posted

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;

?>
Link to comment
Share on other sites
mixmaster Newbie

mixmaster

Posted
Posted (edited)
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
Link to comment
Share on other sites
PHPDevil Newbie

PHPDevil

Posted
  • Author
Posted

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

Link to comment
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.

×
 Share
Go to topic listing
×
×
  • Create New...