Page Contents Positioning Correctly... What's the Fix?
Permalink
I am starting to review the Page Type layouts I created within the Concrete site and I need to do some tweeking... It appears that I need to either add a "container" or a "wrapper" within my HEADER.PHP page code to control how the body of the page content will display... The width of the content is 1170px wide for a 1280px wide screen... so basically need to have the content block float center on the page...
Is the above what I need to use? How does the "padding" indicators translate if this is the correct approach.
Attached is an example of how it's currently displaying... the content block is almost positioned right but the page title is not. I want the page title to align with the content block as well as making sure that it is all centered from left to right on the page.
Any help is always much appreciated... tga
#wrapper { padding:125px 0 150px 260px; width:1170px; }
Is the above what I need to use? How does the "padding" indicators translate if this is the correct approach.
Attached is an example of how it's currently displaying... the content block is almost positioned right but the page title is not. I want the page title to align with the content block as well as making sure that it is all centered from left to right on the page.
Any help is always much appreciated... tga
Sure thing... I should have thought to include the other files.... let me attached things again... I including along with the image shot, the HEADER.PHP, FOOTER.PHP, and one of the page types because this issue is basically effecting all pages... therefore, that's why I was thinking it might have something to do with a missing element in the header... such as a "wrapper", etc.
Of course all PHP files have been saved as TXT instead to post.
Look forward to some guidance... tga
Of course all PHP files have been saved as TXT instead to post.
Look forward to some guidance... tga
Ok, first of all... tables?? tsk! tsk! I know how tempting it is but you really need to fight hard to do your layouts in divs even if it's harder at first.
I have redone the page with divs. Without being able to see what you want it to look like I was guessing about a few things. I have attached a 'test_full_page.txt' file that combines all three files in one. That's the only way to build them initially so you can use a program like Notepad++ (or any editor that highlights matching divs so you can see where your structure is bad)
Rename this file to 'test_full_page.php' and put it in your theme folder. Go to 'Dashboard->Themes' and 'Inspect' your theme to add the new page type file called 'test_full_page.php' to your theme. Visit a page and hover over the Edit button and choose 'Design' and assign 'Test Full Page' to that page.
Now you can mess around with 'test_full_page.php' until it's the way you want and only then should you chop it into 'header.php', 'footer.php' and 'inside.php' (<- or whatever you want to call that page type). I have put comments in the file where you would chop it into the three components.
Have a look at it and ask if you're not sure why I did what I did. You will notice that divs are 'float:left' until you want to end the row of divs and then you put in a <div style='clear:both'></div> which acts like creating a new row in a table.
That's the way I work when creating/converting a theme for use in concrete5. Others may have different methods.
I have redone the page with divs. Without being able to see what you want it to look like I was guessing about a few things. I have attached a 'test_full_page.txt' file that combines all three files in one. That's the only way to build them initially so you can use a program like Notepad++ (or any editor that highlights matching divs so you can see where your structure is bad)
Rename this file to 'test_full_page.php' and put it in your theme folder. Go to 'Dashboard->Themes' and 'Inspect' your theme to add the new page type file called 'test_full_page.php' to your theme. Visit a page and hover over the Edit button and choose 'Design' and assign 'Test Full Page' to that page.
Now you can mess around with 'test_full_page.php' until it's the way you want and only then should you chop it into 'header.php', 'footer.php' and 'inside.php' (<- or whatever you want to call that page type). I have put comments in the file where you would chop it into the three components.
Have a look at it and ask if you're not sure why I did what I did. You will notice that divs are 'float:left' until you want to end the row of divs and then you put in a <div style='clear:both'></div> which acts like creating a new row in a table.
That's the way I work when creating/converting a theme for use in concrete5. Others may have different methods.
Thanks man! I will take aook at this tomorrow and check things out... Didn't remember doing any "tables" stuff except for the header menu piece so that I could control the design of it... If that's what you're referring to by using "table" structure, then I will take a look at what you did and if it looks the same, then cool... ;-)
Be back in touch tomorrow... you know I will... hahaha
Appreciate it!
Be back in touch tomorrow... you know I will... hahaha
Appreciate it!
Yes, I was referring to the use of tables to layout the top area. Hey, tables do the job but they're so 1995.
I see we still got jokes, hmmmmmmm... LOL
Not really a joke. Just a fact ;->
Okay.... I took a look at the file and made some tweaks in both the TEST PAGE and the style.css files to get where I stand now... However, there are a couple further tweaks needed as shown in the attached image.
The header menu is not positioned where it used to be... it needs to be on the same level or in alignment with the other elements... in other words, it needs to position above (and on) the red line.
The other tweak is tightening up the "air" or space in between the page title or content title and the body content.
I have looked through the style.css file and also tried a few things on the header content such as adjusting or applying a verticle-alignment... but not having any luck.
The header menu is not positioned where it used to be... it needs to be on the same level or in alignment with the other elements... in other words, it needs to position above (and on) the red line.
The other tweak is tightening up the "air" or space in between the page title or content title and the body content.
I have looked through the style.css file and also tried a few things on the header content such as adjusting or applying a verticle-alignment... but not having any luck.
Try putting a negative margin such as 'margin-top:-35px' on the #mainMenu div and a "margin-bottom:-20px" on the #slide_menu div.
I have no idea how to tighten up the area below because you didn't attach your css sheets. Vertical spacing can usually be adjusted through reducing the margin on the h1-h4 elements or changing the 'line-height:' css on the surrounding div if you want to tighten up the actual text.
Try right-clicking on an area and choosing 'Inspect Element'. You can then actually change the css for that element and see it reflected live in your browser by changing the css in the bottom right of your browser. When you get the placement you want, transfer those adjustments to your real stylesheet.
I have no idea how to tighten up the area below because you didn't attach your css sheets. Vertical spacing can usually be adjusted through reducing the margin on the h1-h4 elements or changing the 'line-height:' css on the surrounding div if you want to tighten up the actual text.
Try right-clicking on an area and choosing 'Inspect Element'. You can then actually change the css for that element and see it reflected live in your browser by changing the css in the bottom right of your browser. When you get the placement you want, transfer those adjustments to your real stylesheet.
I'm really starting to get frustrated... I am sure it's something soooooo simple... and those are the most aggravating things... Attached are the TEST-PAGE file and CSS files... Everything I tried to adjust thus far made things worse... so I just reversed things out.
*sigh*
*sigh*
Do you really have this path in your file?
That looks like a localhost file structure but even on my localhost I just need :
Are you sure it's picking up your style.css at all?
../Documents/My%20Web%20Sites/style/style/themes/my_smanual/<?php echo $this->getThemePath()?>/style.css
That looks like a localhost file structure but even on my localhost I just need :
<?php echo $this->getThemePath()?>/style.css
Are you sure it's picking up your style.css at all?
I see it there but I didn't put it... swear I didn't.... and those background images are not even mine... so really they are looking for something that doesn't exist... so should I just kill those lines off?
I think I know why that is happening... I opened the .CSS file in Expressions Web... then saved it down to a .TXT file to my desktop... Expressions must have done that... Attached is the correct .CSS file.
I think I know why that is happening... I opened the .CSS file in Expressions Web... then saved it down to a .TXT file to my desktop... Expressions must have done that... Attached is the correct .CSS file.
It appears that I finally got these two elements corrected to how I want it.... Hopefully it will state that way.
Thanks again.... tga
Thanks again.... tga
Sorry, I haven't been able to help you much today. Lots on my plate. Glad you're making headway.
Yes, you've found out that you should NEVER open any of your files in ANY Microsoft product. They will all fill your files with crap.
This is the simplest and best editor I have found and it's free.
http://notepad-plus-plus.org/
Yes, you've found out that you should NEVER open any of your files in ANY Microsoft product. They will all fill your files with crap.
This is the simplest and best editor I have found and it's free.
http://notepad-plus-plus.org/
Thanks for the suggestion... I downloaded and installed it...
BTW, no worries... we all have our own lives and the help you've providing when you can has been most appreciated. Just glad another step forward has happened...
Is there a good tool... maybe the one you just mentioned.... that can take standard HTML like table structures and convert things to DIV instead?
BTW, no worries... we all have our own lives and the help you've providing when you can has been most appreciated. Just glad another step forward has happened...
Is there a good tool... maybe the one you just mentioned.... that can take standard HTML like table structures and convert things to DIV instead?
That being said, I think your 1170px inner div needs to be centered by applying 'margin:0 auto' rather than padding it.