PHPKING22 Posted December 8, 2010 Share Posted December 8, 2010 How do you create a layout like this: DIV ---------------- ---------------------------------------------------------------------------- | IMAGE | | TEXT { INPUT HERE } {IMAGE HERE} | ---------------- ---------------------------------------------------------------------------- BTW, everything has the height and should be leveled. I can do it, but I want to know the best correct way to make it work. Correctly I use inline-blocks. I heard their bad practice, can someone explain why? Quote Link to comment Share on other sites More sharing options...
PHPKING22 Posted December 9, 2010 Author Share Posted December 9, 2010 On my last post I mean't has the same height*** and Currently*** -------------------- I feel like I totally failed at using good code practices... It looks 100% perfect but did I use good code practices? I'm trying to learn how to properly make css layouts. Please look over my code and if I didn't code my layout the best way possible, please point that out. index.php <? $BROWSER_INFO = get_browser(null, true); $BROWSER_INFO_BROWSER = $BROWSER_INFO["browser"]; ?> <!DOCTYPE HTML> <html> <head> <title>oddim</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <link rel="shortcut icon" href="graphics/favicon.ico"> <? if($BROWSER_INFO_BROWSER == "Firefox"){ ?> <link rel="stylesheet" type="text/css" href="styles/firefox.css"> <? }elseif($BROWSER_INFO_BROWSER == "Chrome"){ ?> <link rel="stylesheet" type="text/css" href="styles/chrome.css"> <? } ?> </head> <body> <div class="main"><img class="logo" src="graphics/logo.png"><div type="text" class="menu">E-Mail<input class="login_e_mail">Password<input type="password" class="login_password"><img class="login" src="graphics/login.png"></div></div> </body> </html> styles/firefox.css body { margin: 0px; padding: 0px; background-color: #DDDDEE; font-family: Arial; } div.main { margin: 10px auto 0px auto; width: 648px; height: 293px; } div.menu { float: left; position: relative; margin: 0px 0px 0px 6px; padding: 5px 0px 0px 13px; width: 551px; height: 25px; background-image: url('http://www.oddim.com/graphics/menu.png'); font-size: 16px; font-weight: bold; color: #FFFFFF; } input.login_e_mail { position: relative; top: -1px; margin: 0px 18px 0px 10px; border: 1px solid #000000; padding: 2px; width: 158px; height: 14px; } input.login_password { position: relative; top: -1px; margin: 0px 18px 0px 10px; border: 1px solid #000000; padding: 2px; width: 118px; height: 14px; } img.logo { display: block; float: left; } img.login { vertical-align: -4px; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.