bigjoe11a Posted October 4, 2011 Share Posted October 4, 2011 This time I took it one step at a time. and I fixed the errors. and now. This is where I'm stuck at. Is lining text up on a image. if you go to http://toppersbbs.dtdns.net/mapnet/ and look at the bottom. You will see what I mean. The idea is that I can add more blocks. More blocks can be added just under the 1st block. Below is my page <link href="styles/templates/block.css" rel="stylesheet" type="text/css"><table border="0" cellpadding="1" cellspacing="1"><tr><div class="block_top_header"><td><div class="block_top_intro"><h4>{B_TITLE}</h4></td></div><td><div class="block_top_content">{B_CONTENT}</div></td></div></tr></table> here's my style sheet. div.block_top_header { background-image: url(../../portal/images/block_top.jpg); background-repeat: no-repeat; color: White; background-color: Black; height: 184px; width: 865px; margin-left: 25px;}div.block_top_intro { color: Yellow; top: 255px;}div.block_top_content { left: 90px; top: 1505px; color: Red; margin-left: 150px; } The header sets up the image and crap like that. The intro should go at the top of the image on the blue line. and the content should go just under the intro. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2011 Share Posted October 5, 2011 When using tables (which you should not using for the layout of a page), You can't place html elements outside the cells (td) of the table, and you can't have opening div tag in one cell and the closing div tag in another. Also left: top: won't do anything unless position: absolute, relative or fixed are used. If I were you I would get rid of the table, tr, td completely, and just use the div containers on their own. Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 Ok, I'll try that. and let you know Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 If I would have know that that using the tables what was causing the problem. I would have yelled at the guy telling me to use tables. So thank you. If you go http://toppersbbs.dtdns.net/mapnet/ here and look at the bottom. The Login is on the left side of the portal. and the Sample Center should be in the center. Just right of the Login. Can you please tell me how to do that. here's my html <link href="styles/templates/block.css" rel="stylesheet" type="text/css"><div class="block_center_header"><div class="block_center_title">{C_TITLE}</div><div style="color:red">=============================</div><div class="block_center_content">{C_CONTENT}</div></div> and here's my style sheet code div.block__center_header { float: right;}div.block_center_title { color: Yellow; }div.block_center_content { color: White;} Thanks again for you helpJoe Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2011 Share Posted October 5, 2011 It all depends on what you are looking for in your design, fixed width, or fluid width, and its hard to figure what you are looking for with your description, but here goes. Block elements like div will stretch to the total width of the parent element container they are within, that is why you see the content stack below the login, what you need to do is set a fixed width for login section block_left_header(260px) and float it left, now because it is floated, the NON float element, will merge with the login section, now all you have to do is give the content a left margin slightly wider than login, which will force it leftmost edge away from the login so text will not go under the login section as the content increases. .block_left_header {float:left; width:260px;}.block_center_header {margin-left:262px;} the content is fluid it will stretch to total width available to it, to prevent this, give it a fixed width instead. Also I see multiple links to the same css file within the body? you only need 1 link to external css file within a page, AND all links to these files should be placed in the <head>...</head> of the page, and not in the <body>...</body>. Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 Thank You, How ever that still doesn't work. The idea is to create blocks. On the left Side. The center and on the right side. Like most portal systems are setup. The blocks on the left and right side more then likely will have a fixed width and height. Where the center block will have a fixed width. How ever the height could change. It could get smaller or higher, The width is FIXED The idea is for some thing like this. Login Sample Center Left Block================== =============================== ======================== That's the idea I had, Keep in mind that new blocks can be added on all 3 sides. and here's the web urlhttp://www.toppersbbs.dtdns.net/mapnet I move every thing over to another pc so that i can work on it with out using up resources on my server. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2011 Share Posted October 5, 2011 The principle is the same, give the the left, right blocks a fixed width, float: left, for left block, float: right for right block, these MUST be placed above the middle content block, the middle block left, right margins should match or be slightly wider, than the left and right block widths. Lastly I would place a outer container around all of these, and use this container to define the total width of your page, with a fixed width you can use margin: 0 auto; to centre it. for example <div id="wrapper" style="width:960px; margin:0 auto;"><div id="left" style="float:left; width:200px;"></div><div id="right" style="float:right; width:200px;"></div><div id="centre" style=" margin: 0 210px;" ></div></div> Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 From what your telling me. I should have this setup on just one page. Because I don't know where to put the #wrapper at. I use a template system and I load the blocks from a mysql database.So I have a page for each block. They are not all on the same page. If that's where the problem is. Let me show you. so that you can under stand what I'm going, When the index.php loads. It loads the header and so on.Then it loads the top block. This is the block you see just under the navbar Here's how I load it //display top blocks $mysql = new Mysql(); $mysql->connect($settings['db_host'], $settings['db_name'], $settings['db_user'], $settings['db_pass']); // change this line here $query = "select * from blocks where block_pos='top'"; // and table name here $result = $mysql->query($query); foreach ($mysql->fetchAll($result) as $row) { if($row['block_on'] == 1) { $page = new page('styles/templates/block_top.html'); $page->replace_tags(array( 'B_TITLE' => $row['block_title'], 'B_CONTENT' => $row['block_content'], '' => '', '' => '', )); $page->output(); }} As you can see this loads and displays the top block. Then I load in the left block, center block and last the right block. in the same way as above. I use one style sheet for all of the blocks. Now here's the html page for the top block. <link href="styles/templates/block.css" rel="stylesheet" type="text/css"><div class="block_top_header"><div class="block_top_intro"><h4>{B_TITLE}</h4></div><td><div class="block_top_content">{B_CONTENT}</div></div> The block_top_header sets up the top block. Width and so on. and here's the style code div.block_top_header { background-image: url(../../portal/images/block_top.jpg); background-repeat: no-repeat; color: White; background-color: Black; min-height: 184px; width: 864px; margin-left: 25px;} div.block_top_intro { color: Yellow; margin-left: 50px; padding-top: 1px;} div.block_top_content { color: ThreedFace; margin-left: 75px; font-size: 10px; } Now, as you see above, each of these are repeated. block_top, block_left, block_center and block_right.Then at the bottom, There's a block_bottom(Or will be) and then the footer. so like I said I have no idea what to do with the #wrapper.. Link to comment Share on other sites More sharing options...
thescientist Posted October 5, 2011 Share Posted October 5, 2011 If I would have know that that using the tables what was causing the problem. I would have yelled at the guy telling me to use tables. was trying to give you a heads up in your previous thread... Personally, I would review the HTML/CSS tutorials and get out of using tables and absolute positioning for your layout. Also, why are you including the same file multiple times? Are you generating this a server side language? Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 was trying to give you a heads up in your previous thread... 1) Yes I know. thank you for that.2) It's just that most of the tutorials I fount are on youtube.com and I been viewing them. It's just for what I'm trying to do, not all ways will related to the video I'm watching. and Yes I have look threw the tutorials and I have leaned a lot from them. It's just when your trying to do one thing like what I'm trying to do, It gets crazy some times. I do need to know that in order to get this to work. I would need a new page layout and well it took me 6 months just to setup the old page layout. So i could use some help with that. I only way to do that is too create a table, with one row and 3 cells. Then it could just repeat the process and the block_main (Not added yet). So that cell 1, would be the left block, cell 2 would be for the block_center and last the cell 3 would be for the block_right. Well if I need to get a way from tables. I need is an idea for a page layout.How would I setup a page with all the layout to add all that information from a mysql database Joe Link to comment Share on other sites More sharing options...
ShadowMage Posted October 5, 2011 Share Posted October 5, 2011 Well if I need to get a way from tables. I need is an idea for a page layout.How would I setup a page with all the layout to add all that information from a mysql databaseYou do it just like dsonesuk has been trying to show you. It doesn't matter if it's produced with PHP or not. I'm not sure what you mean by having multiple pages. If you had everything in a table before, then it must have all been in one page. BTW, in your PHP code you posted before, what is that page class you're using? Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 5, 2011 Author Share Posted October 5, 2011 Ok, guys I did some editing so take a look, I had to use a table. I didn't know of any other way to set this up. so go herehttp://toppersbbs.dtdns.net/mapnet/ and look at the bottom. That looks a lot better, Now how do I line up the center and right with the left, below is my code. My new html template is below <link href="styles/templates/block.css" rel="stylesheet" type="text/css"><table style="width: 100%" id="wrapper"> <tr> <td> <div class="block_left_header"> <div class="block_left_title">{L_TITLE}</div><br /> <div style="color:red">=============================</div><br /> <div class="block_left_content">{L_CONTENT}</div><br /><br /> </div> </td> <td style="width:350px;"> <div class="block_center_header"> <div class="block_center_title">{C_TITLE}</div><br /> <div style="color:red">=============================</div><br /> <div class="block_center_content">{C_CONTENT}</div><br /> </div> </td> <td style="width:180px;"> <div class="block_right_header"> <div class="block_right_title">{R_TITLE}</div><br /> <div style="color:red">=============================</div><br /> <div class="block_right_content">{R_CONTENT}</div><br /> </div> </td> </tr></table> and last the style sheet /*blocks main page wrapper*/#wrapper { width: 960px; margin: 0; auto;}div.block_top_header { background-image: url(../../portal/images/block_top.jpg); background-repeat: no-repeat; color: White; background-color: Black; min-height: 184px; width: 864px; margin-left: 25px;}div.block_top_intro { color: Yellow; margin-left: 50px; padding-top: 1px;}div.block_top_content { color: ThreedFace; margin-left: 75px; font-size: 10px; }/*for left block*/div.block__left_header { float: left; width: 200px; font-size: 11px;}div.block_left_title { color: Yellow; }div.block_left_content { color: White; font-family: "Times New Roman", Times, serif;}/*for center block*/div.block__center_header { margin: 0 210px;}div.block_center_title { color: Yellow; }div.block_center_content { color: White;}/*for right block*/div.block__right_header { background-color: Black; width: 200px; float: right; color: Yellow; }div.block_right_title { left: 740px; color: White; font-family: "MS Serif", "New York", serif; }div.block_right_content { left: 740px; color: Yellow; font-family: "MS Serif", "New York", serif; } Thanks guys Link to comment Share on other sites More sharing options...
dsonesuk Posted October 6, 2011 Share Posted October 6, 2011 Let me show you. so that you can under stand what I'm going, When the index.php loads. It loads the header and so on.Then it loads the top block. This is the block you see just under the navbar ??? is there any chance we can see all the code of this index.php page with all the code you use to place each block. Link to comment Share on other sites More sharing options...
bigjoe11a Posted October 6, 2011 Author Share Posted October 6, 2011 Yes you can, The code is way to big just to paste here, So I attached it for you. You will see how and where every thing loads the index.php page and how the page is setup. Joe index.php Link to comment Share on other sites More sharing options...
dsonesuk Posted October 6, 2011 Share Posted October 6, 2011 There must be some sort of template page with <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="click.js"></script><link href="styles/templates/headerstyle.css" rel="stylesheet" type="text/css"> <title>MapNET</title> </head><body> </body></html> that this is included into? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.