bigjoe11a Posted December 7, 2012 Share Posted December 7, 2012 I have a div tag with an id of container. In this container I'm trying to do is setup some blocks. top blockleft blockcenter blockright blockbottom block. Can some one please show me how to do this in a html using css. I just need an html document with the css to show me how to this so I can line this up right. I never been all that good using CSS. Joe Link to comment Share on other sites More sharing options...
niche Posted December 7, 2012 Share Posted December 7, 2012 (edited) Use float. http://www.w3schools...s/css_float.asp Please post your relevant code and we'll help you further. Edited December 7, 2012 by niche Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 7, 2012 Author Share Posted December 7, 2012 Thanks and sense I don't have any thing that works or even comes close to what I want. I don't think I have any thing that can help you to help me. The idea is that in a div with an id of container. I need 5 parts. htmlheadtitle/title/headstyle.top_block { }.left_block { }/stylebody top_blockleft_block------------center_block-----------right_blockbottom_block. /body/html That should give you an idea on what I'm trying to do Link to comment Share on other sites More sharing options...
niche Posted December 8, 2012 Share Posted December 8, 2012 What you call a block is probably what css calls a box. http://www.w3schools.com/css/css_boxmodel.asp You'll be much better off when you do the tutorials Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 8, 2012 Author Share Posted December 8, 2012 Thanks. How ever that's not what I was looking for. I need to build more then one block or box. Like I had in the sample above. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2012 Share Posted December 8, 2012 Create div container elements that you require, place top div block at top, define width for left, and right blocks, define float: left; ,float: right for these blocks respectively and place below top div block. Place centre div block, below left and right blocks, define left/right margin about the same width of left and right div blocks, if not slightly wider to this centre block. create bottom div block place it under centre div block. Now give each of these a id ref like id="top" for top div block, id="left" for left div block, and so on... and then add styling used for the block elements to css ref for id i.e '#' #left {width:200px; float: left;} #right{width:200px; float: right;} and so on... that is all you are going to get. Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 8, 2012 Author Share Posted December 8, 2012 (edited) Well I did try that all ready and it still doesn't work. The problem is the bottom block. I have to use a margin-top: 500px to bring it down to the bottom of the page. and well I know I shouldn't have to do this. And for your info. That's fine. If you don't want to help. Then you shouldn't have posted. If you don't some one else will. Edited December 8, 2012 by Bigjoe Link to comment Share on other sites More sharing options...
dsonesuk Posted December 8, 2012 Share Posted December 8, 2012 Well you should have provided what you have already tried, exactly what was aked for from #2, instead a textual diagram of what you wanted, and we could have gone on from there, instead of getting someone to do all the work for you and you not learn anything. The bottom block at bottom of page is not clear? do you want bottom block to remain at bottom of page (browser screen) until content greater than browser window, then move down with content, which is known as a sticky footer, OR you wish to set a minimum height for left, right, center block of 500px, that will keep bottom block at that height until again the content will be greater, then in that case you would use min-height. Link to comment Share on other sites More sharing options...
niche Posted December 8, 2012 Share Posted December 8, 2012 Don't count your chickens. As dsonesuk points out, the price of passage is the code you post. No code means not much help. Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 8, 2012 Author Share Posted December 8, 2012 Ok, well the nice things people have said about this forum is all a lie then. 2) The code I do have I changed it so many times it wouldn't help you to figure out what I'm trying to do. That's why I drew it for you. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 Dude we want code cause we don't understand your textual diagram. Make a picture, supply code and we try and help. But also take time to figure out yourself. I know some people on here are a little harsh about handing free code, and it's fine once or twice, but honestly we can't trust on simple words that you have done any work.Anyway if you can provide a mockup picture and/or your code, we will be glad to help. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 9, 2012 Share Posted December 9, 2012 I totally understand what he wanted from post #1 a 3 column layout, with header and footer, i just don't know what the problem is with his html or css coding that is causing the problem, WHY! because he has not provided either, and how difficult can it be to figure out a simple three column layout, with header and footer, with 5 to 6 box elements with css styling applied to each to get required layout. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 Lol I could not understand lol. Well yeah we need his code. Link to comment Share on other sites More sharing options...
niche Posted December 9, 2012 Share Posted December 9, 2012 FYI, dsonesuk is one of the most prolific givers of code. Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 Lol I could not understand lol. Well yeah we need his code. Well the best I can do is give you guys the web url. It's like I said. I got some of it to work. Just not all of it. I know that the CSS is wrong or not right. and I changed it so many times that it qouldn't matter giving you guys the code. I know the code is all screwed up. Here's the link http://www.toppersbbs.info/mapnet/ If you look at it. You will see what I'm trying to do. How ever. Like I said the code is wrong. and sense it's not on this PC. It's too much of a pain in the butt to copy this crap over just so I can post it for you to read. and then I don't think you would be able to unstand it any way. So let me know. The drawing I posted earlier should have been more then what you or any one would need. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 (edited) I am still lost. Looks fine. Well not fine, but plan archived....,? Edited December 9, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 Ok, I'm going to have to find a way to copy this code over so you can see it. Any way. Your right it looks ok. How ever if I try and add blocks to it. Then it would look right. Because the bottom block is set up wrong. Ok, See when I add new blocks. Top blocks or blocks on the sides. This moves the page down. When this happens. The bottom block should move down all so. When new blocks are are added. Are you getting this idea. Let me make some changes. I'll add some new blocks and then you will see what the problem is. Be right back. Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 Ok, I added 2 new blocks. One on the left and one on the right. Now look at the bottom block. It stays in the same place and doesn't move down. So look at it again http://www.toppersbbs.info/mapnet/ Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 I just copied my code over. I hate doing it like this. I just didn't know what else to do. Any way. This is the CSS and and html page. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Welcome too Mapnet - Med Little Helper</title><style type="text/css"> ::selection{ background-color: #E13300; color: white; } ::moz-selection{ background-color: #E13300; color: white; } ::webkit-selection{ background-color: #E13300; color: white; } body { background-color: #fff; margin: 40px; font: 13px/20px normal Helvetica, Arial, sans-serif; color: #4F5155; } #logo { width: 99%; margin-left: 25px; } a { color: #003399; background-color: transparent; font-weight: normal; text-decoration: none; } h1 { color: #444; background-color: transparent; border-bottom: 1px solid #D0D0D0; font-size: 19px; font-weight: normal; margin: 0 0 14px 0; padding: 14px 15px 10px 15px; } code { font-family: Consolas, Monaco, Courier New, Courier, monospace; font-size: 12px; background-color: #f9f9f9; border: 1px solid #D0D0D0; color: #002166; display: block; margin: 14px 0 14px 0; padding: 12px 10px 12px 10px; } #body{ margin: 0px auto; } p.footer{ text-align: right; font-size: 11px; border-top: 1px solid #D0D0D0; line-height: 32px; padding: 0 10px 0 10px; margin: 20px 0 0 0; } #container{ margin: 0px auto; border: 1px solid #990000; -webkit-box-shadow: 0 0 8px #D0D0D0; } #portal { border: 1px solid Black; -webkit-box-shadow: 0 0 8px #D0D0D0; } .b_bar { border: 12px solid cornflowerblue; margin: 0px auto; border-radius: 25px; -moz-border-radius: 25px; /* Old Firefox */ } .b_border { border: 1px solid #E13300; } .block_content { margin: 0px auto; } h4 { margin-top: -23px; margin-left: 100px; } .top_block { width: 90%; margin: 10px auto; } .left_block { width: 20%; float: left; margin: 10px auto; margin-left: 20px; } .center_block { width: 50%; float: left; margin: 20px auto; margin-left: 20px; } .right_block { width: 20%; float: right; margin: 20px auto; margin-right: 20px; } .bottom_block { width: 90%; margin: 20px auto; margin-top: 500px; } .clear { clear: both; } </style></head><body> <div id="logo"> <img src="images/logo.jpg"> </div> <div id="container"> <h1>Welcome to Mapnet!</h1> <div id="body"> <?php if($this->session->userdata('is_logged_in')) { echo '<a href="'.base_url().'home/logout">Logout</a>'; if($this->session->userdata('usergroup') == 'Admin') { echo '<a href="'.base_url().'home/admin">Admin CP</a>'; } } else { echo '<a href="'.base_url().'home/login">Login</a> | '; echo '<a href="'.base_url().'home/register">Register</a>'; } /* if($this->session->userdata('is_logged_in')) { echo $this->session->userdata('username'); echo $this->session->userdata('is_logged_in'); } else { echo 'Don\'t see sessions at this time'; } */ ?> </div> <div id="portal"> <?php echo '<div class="top_block">'; foreach($top_blocks as $blocks) { echo '<div class="b_bar"></div>'; echo '<h4>'.$blocks['block_title'].'</h4>'; echo '<div class="b_border"></div>'; echo '<div class="block_content">' . $blocks['block_content'] . '</div>'; } echo '</div>'; ?> <?php echo '<div class="left_block">'; foreach($left_blocks as $blocks) { echo '<div class="b_bar"></div>'; echo '<h4>'.$blocks['block_title'].'</h4>'; echo '<div class="b_border"></div>'; echo '<div class="block_content">' . $blocks['block_content'] . '</div>'; } echo '</div>'; ?> <?php echo '<div class="center_block">'; foreach($center_blocks as $blocks) { echo '<div class="b_bar"></div>'; echo '<h4>'.$blocks['block_title'].'</h4>'; echo '<div class="b_border"></div>'; echo '<div class="block_content">' . $blocks['block_content'] . '</div>'; } echo '</div>'; ?> <?php //This is the bottom block and where the problem is. echo '<div class="right_block">'; foreach($right_blocks as $blocks) { echo '<div class="b_bar"></div>'; echo '<h4>'.$blocks['block_title'].'</h4>'; echo '<div class="b_border"></div>'; echo '<div class="block_content">' . $blocks['block_content'] . '</div>'; } echo '</div>'; ?> <?php echo '<div class="bottom_block">'; foreach($bottom_blocks as $blocks) { echo '<div class="b_bar"></div>'; echo '<h4>'.$blocks['block_title'].'</h4>'; echo '<div class="b_border"></div>'; echo '<div class="block_content">' . $blocks['block_content'] . '</div>'; } echo '</div>'; ?> </div> <div class="clear"></div> <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p></div></body></html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 (edited) Okay this is just a simple bare bone to help you fix it yourself.HTML: <div id="topBox"></div><div id="containerBox"><div id="leftBox"></div><div id="centerBox"></div><div id="rightBox"></div></div><div id="bottomBox"></div> CSS: #topBox,#containerBox,#bottomBox {width: Xpx;margin: 0 auto 0;}#topBox,#containerBox,#leftBox,#centerBox,#rightBox,#bottomBox {overflow: hidden;}#topBox {height: Xpx;}#leftBox,#centerBox,#rightBox {float: left;}#bottomBox {height: Xpx;} Thats very basic, you have really overcomplicated yours. Hope this helps. Edited December 9, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 Thanks, How ever that didn't work. How ever I did find out why is wasn't working. I had 2 extra <div> tags that I didn't have ending tags for. I just removed the tags at the top. and well. Take a look. http://www.toppersbbs.info/mapnet/ Thanks Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 9, 2012 Share Posted December 9, 2012 Well my layout is how it should be laid out. You add your extra stuff after. But good you got it working. Link to comment Share on other sites More sharing options...
bigjoe11a Posted December 9, 2012 Author Share Posted December 9, 2012 Well thanks for your time. 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