Hey all.

Firstly, I used the tutorial at http://www.coffeecup.com/forums/respons … und-image/ (thanks again Mansour!) to create the pages involved in this query.

So I am maintaining the site for Diamond Double Glazing at http://www.diamonddoubleglazing.co.nz/

I also have a contact page (awaiting client approval at time of writing!) at http://www.diamonddoubleglazing.co.nz/contact.html

My two questions are, firstly, some of the centering of text is a bit "off" when playing with the screen sizes. But that said, most people will view the pages with a fixed screen size so probably won't notice. Is this worth looking at and is there a better way? I am mostly proud of how the site displays on various screens, but the centering is a little concering on some sizes. same for the logo I guess.

Second, and related, is the white space that appears at the bottom of the page in some screen sizes. I would like the image to cover that, but I haven't been able to find a way to get it to play nice - I am proud of having no horizontal scroll bars on this page and would love to keep it that way, but would love to be rid of the white. Could I do a background colour closer to the picture colour, and if so what colour - the blue of the sky or the blue of somewhere lower down?

Thanks for any help,
David

Hi David,

My first suggestion would be not to edit the main.css file as this will be over-written every time you re-export your RLM project. I would create a custom.css file and put all your changes in there.

I would change what you have:


to this:


As for the centering issue I do not see the issue it looks fine to me.

As a suggestion for improvement:

I would include some kind of navigation/menu system on this website as you continue on. You may also want to have more distinction between your content area and your footer. Perhaps a different color background.

Happy coding.

I tend to make template pages and customise them as I go. Unless there's a need for significant changes, I wouldn't be exporting this page again (or others following the same format ). I've already been significantly chastised for using RLM as my main editor and only using something else to add in the necessary PHP etc code

The edit itself isn't bad. I've got more php code and other stuff that goes into each page anyway, the edit is a simple copy and paste of a block.

But see below - if I can work out how to do it reliably I'll happily make one css file



Could you explain how to do that? I had to abort another project that relies on CSS for menus because RLM craps all over the CSS. By that I mean RLM sets elements that aren't used in the RLM page, meaning the other CSS doesn't function as it should - the RLM stuff over-rides the custom stuff the page needs to work. Would love to know how to work CSS to what I want takes precedence (manually removing the extra RLM gunk resulted in an even worse mess!)



Now I'm lost Where would that code go into place? In one of the css files or in the html? And where?

(I'm not a web designer, I just play one in the workplace sometimes!)



Thanks. I see it most as I slide things around a bit. I've done the best I can without going to dozens of breakpoints (I can see at least another 5-6 I'd love to have in to have text/image sizes change but that makes the page waaaaaay to big code-wise! )

As expected, for someone else looking at it (especially someone looking at it from a static page size) it's not an issue



The menu bar was completely rejected by the customer. But the code is quick and easy to add in - I can see it coming once we get another page or two in there (I still have to add something in to the contact page to take people back to the home page). It wasn't the style or anything, just an outright "no menu bar" - but then that was when we were looking at a single static page with no need for one. As things grow, it'll be needed.

As to the distinction, I may yet play with a bit of darkening or lightening the area that has the contact details inside. IIRC that's made of several different blocks though, some with only RH borders and so on. Of course, changing the border size might help as well.

Thanks for your help. Once I am sure where you want the suggested code to do I'll try it out (the thing I like with the current setup is the displayed image sizes largely to the viewport size without scroll bars)

Take care,
David

That is not correct. RLM does not overwrite any of your CSS files. What may be happening is that some of your CSS properties are named the same as what is used in RLM. Thus the last CSS style would be the one the browser uses.

If you are adding a menu and it is not working then you are missing a step somewhere. I would recommend reading through this article that helps walk you through adding a custom.css

What I meant was "the RLM stuff over-rides the custom stuff the page needs to work" - ie I have my own CSS files (even tried inline as well) but the RLM settings for things like IL and OL (iirc - the tags for lists and so on) were set to defaults even though I had not used them in RLM (and I turned everything off as per suggestions in the relevant thread, the behaviour still happened).



Thanks, I'll look into that Would dearly love to use the menus I like with the responsive layout I've designed

Thanks again,
David

Then you are doing something wrong. Inline styles should have corrected any cascading (or overwriting) issue.

You are most likely not applying the correct coding to the correct HTML Element. I would check that to make sure that it is correctly written and also correctly referenced within the page.

Make sure you are putting the link to your custom css file AFTER the css files created by RLM.

The code is correct, functions perfectly in the original page. In the RLM -built version (with the menu code added) it doesn't

I'd forgotten what the problem was because I'd walked away from the project for a while, but basically I have a menu bad with a top and bottom border line, and some drop-down menus. In the original site (dlit.co.nz) the drop downs happily cover the bottom border. In the RLM version (dlit.co.nz/h4) the bottom bar is pushed down the height that the menu would occupy if it was visible. But that's another project for a spare weekend.. if I ever find one without anything else to do

What's important right now is the bit I am stuck with from your earlier advice in this thread, where you told me to change a css bit to - where do I add that html bit?

(Site design isn't my field! I may do OK at it but I struggle to understand so much of it! )

Thanks again for your help, it is appreciated

That is CSS code, you would place that in your custom.css file.

Not if your using

I do this a lot to make changes then switch it to external style sheet. Saves a little time.