Some layout concerns; text centering...

User 2676159 Photo


Registered User
38 posts

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
david@kiwiscene.kiwi

User 2088758 Photo


Senior Advisor
2,700 posts

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:
body > .row > [class*='coffee-span-'].header-container {
min-height: 500px;
background-color: #4c71b5;
background-image: url(../images/ddg_background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}


to this:
html {
background: url(../images/ddg_background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


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.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2676159 Photo


Registered User
38 posts

Steve wrote:
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 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 :)

I would create a custom.css file and put all your changes in there.


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!)

I would change what you have:
body > .row > [class*='coffee-span-'].header-container {
min-height: 500px;
[snip]
}


to this:
html {
background: url(../images/ddg_background.jpg) no-repeat center center fixed;
[..]
background-size: cover;
}



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!)

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


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 :)

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.


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
david@kiwiscene.kiwi

User 2484360 Photo


Registered User
3,293 posts

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!)


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
User 2676159 Photo


Registered User
38 posts

Adam East wrote:

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.


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).

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


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
david@kiwiscene.kiwi

User 2484360 Photo


Registered User
3,293 posts

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.
User 122279 Photo


Senior Advisor
12,283 posts
Online Now

Make sure you are putting the link to your custom css file AFTER the css files created by RLM.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 2676159 Photo


Registered User
38 posts

Adam East wrote:
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.


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
" html {...."
- 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 :)
david@kiwiscene.kiwi

User 2484360 Photo


Registered User
3,293 posts

David C wrote:
[quote=Adam East]

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
" html {...."
- 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.
User 187934 Photo


Senior Advisor
18,454 posts

Adam East wrote:

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

Not if your using
<style>
html{ }
</style>

I do this a lot to make changes then switch it to external style sheet. Saves a little time.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.