Making unusual navigation work in all screen dimensions

[AARRGGHHH]

I'm using somewhat unusual navigation, as seen here. When a user mouses over the bars, they slide out into view. All of that is working fine. The problem is, I cannot find the CSS to make the buttons align left of the edge of the screen (as seen in the image), regardless of the display dimensions.

I originally tried:

<style>
#container {width: 600px; height: 25px; position: relative;} 
#bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: -340px;}"; 
</style> 

Which worked perfectly. But only on my screen. I thought that position:absolute inside position:relative would work regardless of screen dimensions, but I was obviously wrong.

I then tried several variations on dynamically adjusting the screen width in the container <div> with a function that runs onload:

function populateArrays() 
{                 
  // populate arrays
  for (i = 0; i <= 5; i++)  
  {
    position[i] = -340; 
    bar[i] = document.getElementById("bar" + i.toString());
    id[i] = i; 
  }
  // Add a dynamically built style sheet 
  var sheet = document.createElement('style');  
  var sWidth = screen.width; 
  var lWidth = sWidth - 1024 // 1024px is width of the page body. The result, 342, works perfectly at my resolution of 1366: 1366 - 1024 = 342 (I use -342).    
  sheet.innerHTML = "#container {width: " + sWidth + "px; height: 25px; position: relative;} #bar0, #bar1, #bar2, #bar3, #bar4, #bar5 {position: absolute; left: " + -(lWidth) + "px;}"; 
  document.body.appendChild(sheet);           
}

But this also did not work.  Perhaps I should be using a formula other than screen.width - 1024 = -(lWidth)? All I know is it doesn't work at other resolutions. 

What is the correct way to align the images to the far left, partially (mostly) off screen, regardless of dimensions?

I've lost an entire day's work to this. Thank you very much 

[Ingolme]

Can you describe what you see happening incorrectly in your first block of plain CSS code? The negative left position should always behave the same regardless of screen size unless some other CSS is interfering.

All of this can be done without the need for Javascript.

[AARRGGHHH]

That would be nice!!!

The first block of code looks fine at my resolution of 1366.  When I switch to my laptop's resolution of 1920,  the images disappear (possibly off to the far left).

Also, the scrollbar at the bottom of the page extends to the far right, beyond 1920 pixels

In case it's useful, here is the page's style sheet: 

 

header 
{
background-color:#000000;
width:1024px; 
margin-left:auto;
margin-right:auto;
}

body 
{
background-color:#000000;
width:1024px;
margin-left:auto;
margin-right:auto;
}

nav 
{
background-color:#000000;
width:1024px;
margin-left:15px;
margin-right:auto;
}

main
{
background-color:#000000;
width:1024px;
margin-left:auto; 
margin-right:auto;
/* float:right; */ 
}

h1, h2, h3, h4, h5, h6 
{
font-family:calibri,verdana,arial,sans-serif;
color:#938FEB;  
text-align:center; 
margin-left:auto;  
margin-right:auto; 
}

p, form, ul, td   
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
/* text-align:left; */ 
}

li     
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:left;
font-weight:bold;
}

div  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;
}

span  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FF0000; 
text-align:center;
}

footer
{
background-color:#000000; 
width:1024px;  
bottom:0; 
/* float:right; */
/* position:fixed; */  
margin-left:auto;
margin-right:auto;
}

Thank you !!!  

Edited April 26, 2018 by AARRGGHHH
Added Style Sheet

[Ingolme]

I don't see your #container item in your stylesheet, and I have no information about the HTML structure to which the CSS applies, so I can't tell what's going on. You could try making a working example of your page.

I would recommend against using fixed-width values for your content and would avoid absolute positioning wherever possible.

Since I don't have enough information about your situation, I've just made a guess as to what you intended your menu to look like and made a simple example here: https://www.w3schools.com/code/tryit.asp?filename=FQQ3PRA7JYTD

Try to read and understand what the code does. It is very simple, the overflow prevents the buttons from being seen when outside of the list, the position is relative rather than absolute because the object only needs to move relative to its original position. I've added a transition effect and a :hover selector to illustrate that the sliding can be done without Javascript.

[AARRGGHHH]

Hi 

Here is the relevant HTML: 

			<div id ="container">
				<br><br><br><br>
				<img src="homeSilverGlassText.png" alt="Home" width="200" height="35" id="bar0" onmouseover="startMove(0)" />
				<br><br><br><br>
				<img src="aboutSilverGlassText.png" alt="Anout Me" width="200" height="35" id="bar1" onmouseover="startMove(1)" />
				<br><br><br><br>
				<img src="contactSilverGlassText.png" alt="Contact Me" width="200" height="35" id="bar2" onmouseover="startMove(2)" />
				<br><br><br><br>
				<img src="gallerySilverGlassText.png" alt="Gallery" width="200" height="35" id="bar3" onmouseover="startMove(3)" />
				<br><br><br><br>
				<img src="uiSilverGlassText.png" alt="Design" width="200" height="35" id="bar4" onmouseover="startMove(4)" />
				<br><br><br><br>
				<img src="imgeditSilverGlassText.png" alt="Editor" width="200" height="35" id="bar5" onmouseover="startMove(5)" />
			</div>

 

The container item is only used on this page, not on the entire website, so its CSS is in the <style></style> tags, it did not work on any resolution but mine. 

If it's possible to avoid absolute positioning here, please tell me how! 

Your sample menu is doing exactly what it should be doing.   

You mentioned that the CSS in the <style></style> tags should work regardless of resolution.  Do you know why it's not working?  

Many thanks!   

[Ingolme]

It's hard to tell, it could be due to the Javascript moving it to the wrong places.

Your code is really outdated, it is almost like the coding style used over 15 years ago. <br> tags are no longer needed for spacing because CSS does this with margin and padding much more accurately. Dimensions of objects aren't usually measured in pixels anymore and instead are flexible to adapt to different screen sizes. Images aren't used for buttons anymore because the text in them isn't readable by browsers or search engines. Javascript is almost never used for effects because CSS can do it easier and more efficiently. It would be ideal for you to read through the HTML and CSS tutorials on W3Schools to become familiar with modern page design practices.

I would recommend building your menu basing it on the code I provided in the previous post. You can still use the images for the buttons, the code will still work as long as the images are wrapped in the links.

[AARRGGHHH]

On 4/26/2018 at 4:01 AM, Ingolme said:

It's hard to tell, it could be due to the Javascript moving it to the wrong places.

No, your original suggestion that the CSS is throwing off the alignment is correct. 
 

However, the page looks ridiculous without constraining the width. I tried using % instead of pixels and have the same problem. Is there a workaround for controlling page width which will allow me to use my code, which works perfectly, AND keep width control?  

 

The offset of the buttons is the concern. At a width of 1366 and an offset of -340, the buttons don't disappear, they're about 10% visible before they animate (that's exactly what I want). By using screen.width, there should be a way to adjust this offset dynamically, so that it's right for any size display. But I can't figure out the math...  Interestingly, 1366 (my screen width) - 1024 (my <body> and <main> width = 342. If I use "left: -342;" the result is perfect. But screen.width - 1024 = leftOffset does not work at higher resolutions. A resolution of 1600 requires "left: -460;" a resolution of 1920 requires "left: -620;". So, I still haven't figured out the math needed to adjust for the <body> and <main> width throwing off my left alignment. 
 

 

 

[dsonesuk]

First I don't know anyone who uses a fixed width for body? Use a wrapper container of some sort.

You don't have to use positioning, just a manipulation with margins can achieve the same effect.

https://www.w3schools.com/code/tryit.asp?filename=FQRIYK5BH3V6

or if you mean to left viewport edge

https://www.w3schools.com/code/tryit.asp?filename=FQRJ9UIBR7C0

Edited April 27, 2018 by dsonesuk

[AARRGGHHH]

I have a lot to read through here, but 1 question comes to mind immediately: If I should not use a fixed width for body,  could you supply a code sample of the "wrapper container" you suggested? 

Thank you

[dsonesuk]

I did? in second link, although it is fluid, its not hard to make it fixed, but you would have to adjust in media queries for different width devices, then make it fluid for the smaller mobile devices.