OT
You’re a wise man @PaulOB, in China that is the norm; the youngest or least knowledgeable start the discussion by speaking their mind, then the more experienced gives their view. The (oldest) and wise let all other speak before he talks. Nobody is embarrassed when corrected by an older and wiser and thats why the wise man just listen (and learn more) until all is said in the matter.
Wont submit anything either before getting the whole picture. Then please trample all my toes, they need all experience they can get.
/OT
FYI: Validation points out flaws and sometimes offers possible solutions. It cannot give detailed solutions because it does not read minds… it does not know what anyone’s intent is… it only reads their code.
There are still 13 erros showing. You could fix those while waiting. Fixing the “undefined elements” could best be done by replacing the XHTML transitional doctype with a modern <!doctype html> and making a couple of changes in the <head> portion of the page. We would be impressed, FWTW.
I apologize for being slow. I’m annoyed with myself because I am having difficulty transferring you menu into my rewrite. It shouldn’t be difficult, but I seem to have made it so. Maybe I need more coffee.
I asked several questions of you in post #30. I don’t thinki you addressed any of them. Some were for my benefit, some for yours. We learn by doing, you know.
I hope to have this done soon. If I don’t, others will contribute their solutions, so trust that you are not being ignored… they are just allowing me room/time to work out my problem and post my proposed solution.
It looks to me like you may have made a media query change… at least there is a new, narrower image, dk_content_1.jpg in the mix. It’s screwing up this page: http://www.dickettema.eu/dk_rwd/
I would like to request that you not make that change just yet.
Thank you for your stamina, Ronpat.
I did what you asked in your post yesterday, as far as possible and needed.
Concerning your post #30 - seeing exactly the same problems as in my coding; despite your adds in there.
The boxes despite the code do hold (stay fixed) in their given px or % height, when going to smaller screens (ipad / tablet; iphone etc.)
- you can give in a lower height under the media queries…but a complex work around.
(using: height: auto - makes the headerbox disappear completely)
(using: height auto and padding-top x% still gives space flaws and isn’t consistent with every following box.)
I guess Ronpat you knew and saw this already.
My question: isn’t there a css code or code-mix to overcome this logically arising problem, without skipping the background concept for this website.
I still can’t believe there isn’t. Having seen already so many other magic css designs since the latest war called rwd for webdesigner worldwide started.
(And of course is a website not a simple A5, A4 or A3 - or a Photoshop image; that’s an open door as open as that everyone today thinks to be a webdesigner.)
So a new one for the audience here:
“The wishes of the client - as he is the king - are the starting point of view. The webdesigner should try to translate them, if possible, as well to make them usable, but with art” from my point of view.
I need to be sure that I am not leading you astray. I have NOT sent any code that is to be ADDED to your code. I sent a test page that was meant to be executed (tested) all by its lonesome… not within any portions of your code. Granted, the images stretch out of shape (not what you wanted) but it is a starting point which is meant to be tested in isolation from your project. The purpose is for you to test my code exactly as it is, no changes, using the same methods you are using to test your code and see if my simple code renders a gap anywhere, and if it does, describe under what circumstances you see it. Simple. Uncomplicated. Screen shots are welcome.
If you have the ability to do so, you could simply put my code on your server in a different directory making sure that it does not access any of your resources, and we can all see how it behaves on different devices.
I’m sorry, I must have overlooked the sentence where you told me that you changed background-size from “100% 100%” to “contain” and THEN saw the spacing problem. Fixed heights and “contain” will do that.
The header padding-top (in the first media querie) is 12. 6%. When I change it to < 12.6 the side of the header begins to shrink; when I change it to > 12.6% the 1 px gap gets wider.
The Ipad landscape has in the test also a 1px gap.
What do you think?
Are we finally getting towards the ‘perfect’ solution?
(Not knowing yet if the nav-bar with content, will not disturb this; the content-box will be no probleem, I presume.)
dk_header_2.jpg = 1120x141 = 12.5893%; use your calculator to verify 141/1120 = .125893.
When “contain” looks close enough, CHANGE it to “100% 100%”. That should prevent the 1px error unless there is another error.
FYI, I do NOT see the 1px line between the header image and the nav image or between the nav image and the #box_home image when looking at your demo in my browser. It would be best if you can show us a screen shot of what you see in in your browser. Please mention your browser, too.
Likewise, dk_nav_2.jpg = 1120x83 = 7.4107%.
dk_content_home.jpg “contain” should be OK since it is allowed to repeat-y.
4 decimal places should be more accuracy than is needed.
You will also need this for the media query in which you change header images:
I truly think that you and I have written almost a new piece of css history. And will he who does not agree and seems to know beter speak now or be silent forever.
Although I see still three minor failures, will come back on that later, I will start implanting the nav info and content of the site - and then show it to you again.
Thank you, thank you, thank you, so far, Ronpat and have a great weekend.
P.S. In the Netherlands, webdesigners are sometimes adressed as ‘pixel_neukers’ (trans.: pixel_fckers.)
We have become percentage_fckers.
As I’ve requested before, I would like to see how it fails for you, so screenshots would be nice.
I am still working with the code that I have from you. Made some good progress yesterday, but I keep seeing little things that need tweaking and end up getting sidetracked.
If you are rewriting from scratch, I would like to nag you to format your code methodically. It won’t run any faster but it will be easer to read and modify when the time comes a couple of years from now.
At the moment, I am consolidating the nav and style CSS files. Too may duplicate and conflicting rules between the two. They can be separated again later, if preferred.
One suggestion… be sure to close your media queries (easy to see if they are indented). I don’t think ANY of them on your stylesheet were properly closed. Surely some of the rules were not being invoked. Details that matter.
It was the validation service that made me puzzle again about the opening and i.p. the closing } for the media queries, because I know not better then as up to the CSS 3 standard.
Until I did read: [...] “The origin of the problem is probably in some authoring program that has converted a normal SPACE to a NO-BREAK SPACE. It looks like a space, walks like a space, quacks like a space, but it still isn’t a space, in CSS parsing. So you need to edit the CSS file and replace the offending indentations by simple spaces.”
Yes, Ronpat, your kindhearted advices are very true and appreciated.
And yes, details and being secure and neat/clean in coding matters a lot and even more.
Thank you for giving your effort still to the design whimpse’s of this 11th Februari man
from 1955, the year in which the hovercraft saw it’s light.
And will send you the asked print-screens, and used browser versions, where I noticed again that the serveral online responsive tests, do show different results. Arghh.
Happy, Bro, that you also believe that css in one way or another can solve every webdesign problem! Yet still curious to how you would have solved my given problem.
I’m likewise curious what your design go(al/ld) is about. Can you please explain what you achieve using three background images that you can’t with only one (as @ronpat asked early in the thread but you ignored)?
No I will not! Because you did not contibute not even een single true part of the solution! I admire all those who contribute to tao and the art of css, artistic or functional. You didn’t. From the beginning presuming to know the solution in this never before given design problem. It is therefore that I deeply respect Ronpat because he did understood the consciousness I dared to share, in all my failures and vision, at front.
Truly, I could have posted the same information that my colleagues posted. They happened to read your post before I did. @Erik_J promptly responded first. I began working up a solution similar to @Gandalf’s, but when his post received no response, I changed my code and figuratively threw a pot of spaghetti at the wall when I posted it… lo and behold it stuck. No mysticism involved. Just asking questions and going with trial and error with the intent of eliciting constructive feedback, the same as my friends. We build solutions from the information that we glean from the Original Poster and from each other’s posts. My teammates deserve your respect as contributors who helped identify your wishes and were perfectly willing to help had you found their input acceptable. Nothing less. I’m not flattered. I am embarrassed.
I wont let you get away with that. It would nurish your ego if I did.
You early on made several rude remarks hinting we could not solve your problem. You gave poor feedback seeming to thought you already knew, and only responded when you could dismiss the suggestion as not working.
– That was a suggestion meant to get you start thinking of a solution that adjusts the height relative the width. I knew it would work first, then the max-width would distort the height, but it was meant for you to discover and maybe find the better way. But you did not respond!
After my post @Gandalf mentioned he missed adding padding-top: 12.6%; that would adjust the height relative the container width in his first post #2.
– That was one option I meant for you to find. But perhaps you didn’t knew that for margin and padding the % unit refers to the container width. But you did not respond to his suggestion either!
The members here urged you to try the suggestion in post #9 referring to his post #2, and finally you did and found it could work.
You kept on ranting about how difficult if not impossible your problem was without making sure your audience understood the point of or features of your background concept that made it so importent. I was hoping you should start to be open to discuss your ideas.
In the meantime you wasted valuable time for @ronpat trying to help. You have a problem follow his advice too.
Please take no offence; just lower your nose a bit.