D4N005H Posted January 23, 2014 Share Posted January 23, 2014 Hello,Would you help me to do something like this in HTML for making a website theme? Any tutorials out there?Thanks in advance. Link to comment Share on other sites More sharing options...
thescientist Posted January 23, 2014 Share Posted January 23, 2014 what have you tried? It's essentially just a two column layout. With a left column made up of three rows, and a right column made up of two rows. Link to comment Share on other sites More sharing options...
D4N005H Posted January 24, 2014 Author Share Posted January 24, 2014 (edited) Well.... I'm noob. would tell me what to do so in HTML? Edited January 24, 2014 by D4N005H Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2014 Share Posted January 24, 2014 You'll need to learn HTML and CSS for this, it's not something we can show in 5 lines of code. Have you tried anything yet? Link to comment Share on other sites More sharing options...
D4N005H Posted January 25, 2014 Author Share Posted January 25, 2014 (edited) Yes I tried and found the solution. Here's the code:(Copyright: Coded by coothead) Edited by me. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>example page</title><link rel="stylesheet" href="/"><style>body { background-color:#f0f0f0; font-family:verdana,arial,helvetica,sans-serif; font-size:100%; color:#666; }#container { width:978px; padding:10px; margin:auto; border:1px solid #ccc; overflow:hidden; background-color:#fff; box-shadow:10px 10px 10px #777; }#left-col { float:left; width:348px; margin-right:10px; }#right-col { float:left; width:620px; }#about { padding:10px; height:50px; margin-bottom:10px; border:1px solid #ccc; overflow:auto; }.cat { height:120px; float:left; width:147px; padding:10px; margin-bottom:10px; border:1px solid #ccc; }.cat2 { width:326px; height:60px; float:left; padding:10px; margin-bottom:10px; border:1px solid #ccc; }.clear { clear:both; }.margin5 { margin-right:5px; }.margin10 { margin-right:10px; }.social { margin-top:5px; float:left; width:60px; height:60px; padding:10px; border:1px solid #ccc; font-size:75%; }#content { margin-left:7px; height:447px; padding:10px; margin-bottom:10px; border:1px solid #ccc; }.content-footer { margin-left:7px; margin-right:1px; float:left; width:125px; margin-top:5px; height:146px; padding:10px; border:1px solid #ccc; } </style></head><body><div id="container"><div id="left-col"><div id="about">About</div><div class="cat margin10">Cat 1</div><div class="cat">Cat 2</div><div class="cat margin10">Cat 3</div><div class="cat">Cat 4</div><div class="cat2 margin10">*Cat 5*</div><div class="social margin5 clear">Home</div><div class="social margin10">Facebook</div><div class="social margin5">Youtube</div><div class="social">Twitter</div><div class="social margin5 clear">Home</div><div class="social margin10">Facebook</div><div class="social margin5">Youtube</div><div class="social">Twitter</div></div><!-- end #left-col --><div id="right-col"><div id="content">Box 1</div><div class="content-footer margin10">Box 2</div><div class="content-footer">Box 3</div><div class="content-footer margin10">Box 4</div><div class="content-footer">Box 5</div></div><!-- end #right-col --></div><!-- end #container --></body></html> Edited January 26, 2014 by D4N005H Link to comment Share on other sites More sharing options...
w3b_m4st3r_w4nn4_b3 Posted January 26, 2014 Share Posted January 26, 2014 Do you want it to look exactly like the picture? Link to comment Share on other sites More sharing options...
pritesh Posted January 27, 2014 Share Posted January 27, 2014 Try This Code...!!!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>example page</title> <link rel="stylesheet" href="/"> <style> body { background-color:#f0f0f0; font-family:verdana,arial,helvetica,sans-serif; font-size:100%; color:#666; } #container { width:978px; padding:10px; margin:auto; border:1px solid #ccc; overflow:hidden; background-color:#fff; box-shadow:10px 10px 10px #777; } #left-col { float:left; width:348px; margin-right:10px; } #right-col { float:left; width:620px; } #about { padding:10px; height:50px; margin-bottom:10px; border:1px solid #ccc; overflow:auto; } .cat { height:120px; float:left; width:147px; padding:10px; margin-bottom:10px; border:1px solid #ccc; } .cat2 { width:326px; height:60px; float:left; padding:10px; margin-bottom:10px; border:1px solid #ccc; } .clear { clear:both; } .margin5 { margin-right:5px; } .margin10 { margin-right:10px; } .social { margin-top:5px; float:left; width:60px; height:60px; padding:10px; border:1px solid #ccc; font-size:75%; } #content { margin-left:7px; height:447px; padding:10px; margin-bottom:10px; border:1px solid #ccc; } .content-footer { margin-left:7px; margin-right:1px; float:left; width:125px; margin-top:5px; height:146px; padding:10px; border:1px solid #ccc; } .content-box { margin-left:7px; margin-top:5px; float:left; padding:10px; width:280px; height:50px; margin-bottom:10px; border:1px solid #ccc; } </style> </head> <body> <div id="container"> <div id="left-col"> <div id="about">About</div> <div class="cat margin10">Cat 1</div> <div class="cat">Cat 2</div> <div class="social margin5 clear">Home</div> <div class="social margin10">Facebook</div> <div class="social margin5">Youtube</div> <div class="social">Twitter</div> </div><!-- end #left-col --> <div id="right-col"> <div id="content">Box 1</div> <div class="content-box">Box 2</div> <div class="content-box">Box 3</div> </div><!-- end #right-col --> </div><!-- end #container --> </body> </html> [*]Reply[*]Report[*] [*] Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now