html - Why these objects aren't in right order? -
my problem html , css. feel topic confusing , thinking disappointing me creating idea in web. want create; draw in paint now.
this html code own project first page:
<?php include("includes/classes/mysession.php"); mysession::start(); ?> <!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>untitled document</title> <link rel="stylesheet" type="text/css" href="includes/css/style_mainpage.css" /> </head> <body> <div id="container"> <div id="header"> <div id="loginpart"> <form action="pages/userspage/checkuser.php" method="post" name="form_login" id="form_login"> <input name="txf_id" type="text" id="textfield_id"/> <input name="txf_pw" type="password" id="textfield_pw"/> <input name="button_login" type="submit" value="login" id="button_login" /> </form> <a href="pages/signuppage/signup.php">sign up</a> </div> </div> <hr /> <div id="content"> <div id="logopart"> <img src="../../includes/images/logo.jpg" alt="anadilim" name="logoimg" id="logoimg" /> </div> <div id="mainpart"> <div id="searchbox"> <form id="form_search "action="../../mainpage/index.php" method="get"> <input id="textfield_search" name="textfield_search" type="text" maxlength="100" /> <input id="button_search" name="button_search" type="submit" value="search" /> </form> </div> <div id="resultpart">this result part</div> <div id="numberpart">words:256000</div> </div> </div> <hr /> <div id="footer">all rights reserved !!</div> </body> </html> this css:
/* css document */ #container{ width: 100%; background-color: #666; /********************** *********************** header part css *********************** **********************/ } #header { width: 100%; min-height: 50px; background-color: #0ff; } #form_login { float: left; margin-left: 50px; vertical-align: middle; background-color: #f30; margin-top: 15px; min-width: 30%; } #txf_username { float: left; margin-left: 10px; } #txf_password { float: left; margin-left: 10px; } #button_login { float: left; margin-left: 20px; min-width: 100px; } /********************* ********************** end of header part ********************** **********************/ #content{ width: 100%; background-color: #ff0; } #logopart { width: 100%; background-color: #0f0; display: inline-block; } #logoimg{ margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; display: block; } #mainpart { width: 100%; background-color: #39f; display: inline-block; } #searchbox { margin-top: 10px; display: block; background-color: #f00; margin-right: auto; margin-left: auto; width: 50%; } #textfield_search { vertical-align: middle; width: 60%; font-size: 24px; } #button_search { vertical-align: middle; width: 30%; margin-left: 4%; } #resultpart { background-color: #0ff; width: 70%; display: block; margin-right: auto; margin-left: auto; margin-top: 20px; } #numberpart { background-color: #c6f; display: block; margin-top: 80px; margin-right: auto; margin-left: auto; width: 25%; margin-bottom: 60px; text-align: center; clear: both; } #footer { width: 100%; background-color: #0cc; text-align: center; clear: both; } and disappointing result:
in page paint dives different colors see how works! please how can design web sites easier without using html?
well, it's incredibly easy this:
#loginpart input{float:left} but it's strange since have each element floated left, , in picture they're floated right, try this:
1) kill floats 2) see happens , if needed, add (you won't need it, see fiddle future reference):
#loginpart{display:block} #loginpart input{display:inline-block} then may want add specific css each element (which have correctly identified). if doesn't work, have else causing this
Comments
Post a Comment