Hi,
please, need your advice. I want on a not yet responsive 960px site, page-aligned: centered, two lines to stretch full width when possible.
On a desktop it all goes fine.
But…
on an iPad/tablet either those lines shouldn’t exceed the right border at 960px, so that the browser doesn’t scale down the page because it wants to display the whole line at the right site.
Is there a simple (inflow/box) way to handle this issue, without setting page-alignment to none (as Softpress adviced)
In the early days I tricked to make an extra ‘tablet-version’ of the site and let those objects end at 960 px width. With a breakpoint action it showed well on tablets.
I dont know about your other pages and their background colours etc. but the easiest way is just to create a window background image that incorporates the 2 lines. Such as at http://deltadesign.co/FW7Test/sterringgear.html it has a height of 2000px (or as tall as your longest page) width of 30px and set to tile horizontally.
Of course this is not responsive in that all the header stuff will have to fit above and between the lines.
Hi David,
this is indeed a solution of which I didn’t think of. The problem that occurred was that the first 2px line on top of the menu deactivated the pulldown when hoovering slowly.
I made the line 1 px and it served better but your solution is in the background and thats a better choice. The culprit is to place it exact in the gap of the menublocks but that shouldn’t be a problem.
thnx Richard. But a few questions: why a dotted border? And what comes
after ‘etc…?’.l
I’ve made something (see test file) but that won’t work…My mistake
ofcourse but what I’m missing?
Andries
Op 23 nov. 2014 17:01 schreef “Richard van Heukelum” <email@hidden
** I thought, why mention ‘solid’ and then suddenly show ‘dotted’ in a live example. The ‘etc’ just stands for all other styling you might want to apply to the div.
As you can see, there’s just a full-width/flexible-height parent div, containing a centered child div with a fixed width of 960px. Just a box within a box. The parental box has a top and bottom border applied to it, that’s all. Nothing fancy.
thnx again Richard… I will check it out. One last question: when I try to
add 100% to ‘width’, an error prompts. Only pixels can be added. In which
state is 100% possible?
Op 23 nov. 2014 19:45 schreef “Richard van Heukelum” <email@hidden
:
** I thought, why mention ‘solid’ and then suddenly show ‘dotted’ in a
live example. The ‘etc’ just stands for all other styling you might want to
apply to the div.
As you can see, there’s just a full-width/flexible-height parent div,
containing a centered child div with a fixed width of 960px. Just a box
within a box. The parental box has a top and bottom border applied to it,
that’s all. Nothing fancy.
I was afraid you were gonna answer that Thomas! David & Richard helped me
out, I have to make some changes but I think the last option will set me
back to align:none for the pages. With some tweaking I managed to let the
lines take full screen width when centered, but om my iPad (which places
all sites left aligned) the pages become too small because Safari wants to
let the viewers see the whole lenght of the lines. So I wondered if I could
let both lines end at 1460px (total -500px + 960 px) instead of -500 + 960
500 px.
regards Andries
2014-11-24 0:04 GMT+01:00 Thomas Kimmich email@hidden:
in the state of format, not measurements.
And to answer your initial question:
Is there a simple (inflow/box) way to handle this issue, without setting
page-alignment to none (as Softpress advised)
No there isn’t (never was and never will be) - it’s just the way web works
(or how a browser use to render code).
I’m gonna try it this morning. Looks clear to me. The only thing I think
your option will set me back to align:none for the pages. (in that way 100%
width is only possible ofcourse).
With some tweaking I managed to let the lines take full screen width when
centered, but om my iPad (which places all sites left aligned) the pages
become too small because Safari wants to let the viewers see the whole
lenght of the lines. So I wondered if I could let both lines end at 1460px
(total -500px + 960 px) instead of -500 + 960 + 500 px.
vr groet/regards
Andries
2014-11-23 23:25 GMT+01:00 Richard van Heukelum email@hidden:
I’m gonna try it this morning. Looks clear to me. The only thing I think your option will set me back to align:none for the pages. (in that way 100% width is only possible ofcourse).
How did you get on with doing it using a background image - at least with that method you do not need to change your page structure.
I’m gonna try your option also later this day and let you know.
Site is online now and there are minor tweaks to do, but that suits better in the evening.
With some tweaking I managed to let the lines take full screen width when
centered …
What screen-size do you work on, giving you this illusion? That’s my view of your page:
… but om my iPad (which places all sites left aligned) the pages become too small because Safari wants to let the viewers see the whole lenght of the lines.
Exactly indeed.
So I wondered if I could let both lines end at 1460px
(total -500px + 960 px) instead of -500 + 960 + 500 px.
No you can’t. By fixing the first DIV (PageDiv) “center”, you set the boundaries for your entire artwork:
Poor iPad can only do two things:
Displaying the entire page small(er)
Starting at -500px and leave you with side-scrolling (theoretically)
Keeping your page structure as is, David’s method IS the only chance you have. The problem on this is, that this background-image can’t increase to unexpected “growing” content between the lines (and is impossible to handle if it once comes to responsive layouts).
Once again:
The inflow-construction is no cyber-bullying, neither by softpress nor Freeway (or even me) - it’s as is. All efforts of “work-around” is wasted time and energy leaving you with two possibilities:
Living with those constraints, concentrating on content
Starting to review strategies (keeping content still in view)
And if you do “client-work” - I’m pretty sure what number to chose.
Correct Thomas, the test page is only 960px… Site also but contains two
div’s at 1460 or 1960 px width. The 1460px centered version shows well on
left-aligned iPad (-500 + 960 px). The 1960px not.
Davids solution I have to test. Different browsers can indeed disturb my
pixelprecise alignments.
For now my solution is the 1px line on top of the navbar. If theres a small
mismatch with the gaps it’s hardly visible. Works on IE, safari, chrome
and FF. But still, if visitors move too slow their mousepointer the
pulldown menu can sometimes fail. With a 2px line it failed constantly.
to be continued…
Op 24 nov. 2014 10:01 schreef “Thomas Kimmich” email@hidden:
With some tweaking I managed to let the lines take full screen width when
centered …
What screen-size do you work on, giving you this illusion? That’s my view
of your page:
… but om my iPad (which places all sites left aligned) the pages
become too small because Safari wants to let the viewers see the whole
lenght of the lines.
Exactly indeed.
So I wondered if I could let both lines end at 1460px
(total -500px + 960 px) instead of -500 + 960 + 500 px.
No you can’t. By fixing the first DIV (PageDiv) “center”, you set the
boundaries for your entire artwork:
Starting at -500px and leave you with side-scrolling (theoretically)
Keeping your page structure as is, David’s method IS the only chance you
have. The problem on this is, that this background-image can’t increase to
unexpected “growing” content between the lines (and is impossible to handle
if it once comes to responsive layouts).
Once again:
The inflow-construction is no cyber-bullying, neither by softpress nor
Freeway (or even me) - it’s as is. All efforts of “work-around” is wasted
time and energy leaving you with two possibilities:
Living with those constraints, concentrating on content
Starting to review strategies (keeping content still in view)
And if you do “client-work” - I’m pretty sure what number to chose.
The gaps in the menu are too small now. But if I make the lines of the backgroundimage 1 px instead of 2, the red line becomes distorted/hazy.
I can’t find in the CSSmenu code were the gaps can be adjusted. I can change heights though, or do I have to adjust that non linear?
So not height:17px;line-height:17px
but height:17px;line-height:19px ?
The gaps in the menu are too small now. But if I make the lines of the backgroundimage 1 px instead of 2, the red line becomes distorted/hazy.
Not sure if this is directed at me or not.
I am not sure why you want any gaps in your CSS menu - you should think of the menu and the background as 2 totally separate items with no interaction between them.
hi David, yes I meant you, because I promised you to show the result of
your option. The 1 pixel gap between the Cssmenu should pixelmatch the
background image with red/blue lines. And should be 2 pixels also. But I
can’t find in the Css code parameters for spacing the menu-objects. Only
line-height and height.
Any tip?
Op 25 nov. 2014 17:45 schreef “DeltaDave” email@hidden:
The gaps in the menu are too small now. But if I make the lines of the
backgroundimage 1 px instead of 2, the red line becomes distorted/hazy.
Not sure if this is directed at me or not.
I am not sure why you want any gaps in your CSS menu - you should think of
the menu and the background as 2 totally separate items with no interaction
between them.
