This seems like it should be so simple. 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.
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
with a JavaScript function that runs onload:
function populateArrays()
{
// populate arrays - no problems here.
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 - this is not helping my issue, I thought that it would.
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.
Thus, 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
To follow up on the <br> tag, the only two acceptable uses of it are for laying out poetry, and addresses.
Everything else that it’s used for are more appropriately achieved by using CSS to set the paragraph margin, using a wrapping class name to apply that style to the paragraphs.
If you want something at the left edge of the viewport then don’t put it inside a centred container especially one with position:relative added.
The left edge of the viewport will be left:0 if using absolute positioning and assuming the element is not nested inside another positioned element. Remember though that absolute elements are removed from the flow and you would need to make sure that other elements don’t overlap should they be in the same vicinity.
If you are doing a simple hover effect then you don’t need js for that unless you are doing more than just hover as mentioned b y Ray.
As others have mentioned that html you are using is not correct and needs quite a bit of tidying up. Get rid of those breaks and use an un-ordered list (ul) for your menu. Use CSS for the spacing (never a break) and use margins or padding where appropriate to make space between elements. Don’t use fixed widths for your containers as that caters for one size only but rather use max-width or fluid widths so that the page adapts nicely to all screen sizes.
I’d knock up a demo but am too busy at the moment.
I had some time to spare this afternoon so I put something together.
@AARRGGHHH, Based on the screenshot you linked to and the html you posted I think this may be close. It will be enough to get the concept across though and it can be tweaked to fit your needs.
Most all of the images in your page should have really been background images in the CSS. The only time an image belongs in the HTML is when it is part of the pages actual content. Images used for decoration should always be background images.
The logo image and menu images are set up as background images using the Gilder/Levin Image Replacement method. That allows for your page to be accessible to screen readers and maintains the semantics for the document.
The menu tabs on the left side are using CSS Transitions to do the sliding, no JS needed yet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Out Menu Tabs</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #eee;
}
img {
display: block;
}
.wrap {
overflow: hidden;
width: 100%;
max-width: 1015px;
margin: 1em auto;
border: 1px solid #000;
border-radius: 20px;
background: #fff;
}
/*-- Header Styles --*/
.header {
display: table;
width: 100%;
border-bottom: 1px solid;
}
.logo {
display: table-cell;
width: 20%;
max-width: 215px; /*logo image size*/
max-height: 135px; /*logo image size*/
position: relative;
}
.logo span { /*Image Replacement*/
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
padding: 20px;
background: orange url(images/logoglow.png) no-repeat center;
background-size: 100%;
}
.logo span:hover {
background-color: purple;
color: #fff;
}
.banner {
display: table-cell;
width: 80%;
max-width: 800px;
height: 135px;
background: lime url(images/ac.png) no-repeat center;
background-size: 100%;
}
.banner h1 {
display: block;
height: 100%;
font-size: 1.5em;
text-align: center;
margin: 0;
}
.banner h1 a {
display: block;
width: 100%;
height: 100%;
padding: 1em 0;
text-decoration: none;
color: #000;
}
.banner:hover a{
background-color: purple;
color: #fff;
}
/*-- Main Content Styles --*/
.content {
display: table; /*contain floats*/
padding: 1em 0;
}
.main {
overflow: hidden; /*prevent from sliding under floated ul*/
padding: 0 1em;
}
h2 {
font-size: 1.3em;
margin: 0 0 1em 0;
}
.main p {
margin: 0 0 3em 0;
}
/*-- Menu Styles --*/
ul.menu {
float: left;
list-style: none;
margin: 0 0 0 -175px;
padding: 0;
}
.menu li {
display: block;
width: 200px; /*background image size*/
height: 35px; /*background image size*/
margin: 0 0 2.5em 0;
position: relative;
}
.menu li a {
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
margin-left: 0;
transition: margin-left .4s .5s ease;
}
.menu li a:hover {
margin-left: 175px;
transition: margin-left .2s 0s ease;
}
li a span {
position: absolute;
top:0; left:0;
width: 100%;
height: 100%;
border-radius: 0 10px 10px 0;
}
li a.bar0 span {
background: red url(images/homeSilverGlassText.png) no-repeat;
}
li a.bar1 span {
background: blue url(images/aboutSilverGlassText.png) no-repeat;
}
li a.bar2 span {
background: orange url(images/contactSilverGlassText.png) no-repeat;
}
li a.bar3 span {
background: yellow url(images/gallerySilverGlassText) no-repeat;
}
li a.bar4 span {
background: purple url(images/uiSilverGlassText.png) no-repeat;
}
li a.bar5 span {
background: lime url(images/imgeditSilverGlassText.png) no-repeat;
}
/*-- Footer Styles --*/
.footer {
display: table;
width: 100%;
border-top: 1px solid;
}
.footer div {
display: table-cell;
width: 33.33%;
padding: .5em;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<header class="header">
<div class="logo">
<a href="index.html">Link text under logo<span>Hover Logo Image</span></a>
</div>
<div class="banner">
<h1><a href="index.html">Business Name - Site Heading</a></h1>
</div>
</header>
<div class="content">
<ul class="menu">
<li><a class="bar0" href="#">Home<span></span></a></li>
<li><a class="bar1" href="#">Anout Me<span></span></a></li>
<li><a class="bar2" href="#">Contact Me<span></span></a></li>
<li><a class="bar3" href="#">Gallery<span></span></a></li>
<li><a class="bar4" href="#">Design<span></span></a></li>
<li><a class="bar5" href="#">Editor<span></span></a></li>
</ul>
<main class="main">
<h2>Slide Out Menu Tabs</h2>
<p>The header logo and the slide out menu tabs both use the <strong>Gilder/Levin Image Replacement</strong> method.</p>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing Sed Morbi libero consectetuer. Pellentesque sagittis leo nunc Phasellus sapien Curabitur semper vel dignissim sodales. </p>
<p>Sed felis augue semper risus mus netus in Phasellus sagittis penatibus. Curabitur Vestibulum tortor Ut commodo consectetuer laoreet leo felis orci elit. Arcu et.</p>
<p>Augue wisi a semper Mauris risus arcu vel Morbi iaculis non. Felis est dui nunc dictumst est ut ac lobortis tellus adipiscing. Eros vel sapien et urna at metus lorem eu morbi condimentum. Nonummy dui congue.</p>
</main>
</div>
<footer class="footer">
<div>Footer Text</div>
<div>Footer Text</div>
<div>Footer Text</div>
</footer>
</div>
</body>
</html>
Ray H, thank you very much for all the work you put into that, I’m looking forward to trying it out. I have a feeling I’ll still have the same issue, since the and width of 1024 is what’s throwing off my CSS from working, it may throw off all CSS. The problem is, the page looks ridiculous without the width being constrained.
Is there a workaround for controlling page width which will allow me to use either my code or your code with 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 and 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 and width throwing off my left alignment.
You need to understand that there is no such thing as a screen width theses days. The width of the screen is different for almost every device and monitor and even those with the same screen width as you may have browsers with more ’chrome’ visible or indeed like me always surf with multiple windows open so windows are only half size or smaller.
What you are designing is based on magic numbers that possibly will only ever match your unique setup. This is not how sites are designed today so you need to stop thinking in terms of fixed width or fixed screen sizes. There are almost unlimited device widths these days so your design must work seemlessly for all of them.
This is achieved by thinking ahead and designing fluid components that work across all screen sizes. There is no magic fix as such but you do need to learn the basics of responsive and responsible design first.
If you have a mock up picture of your design then we can point you with the best way forward but you can forget about fixed widths unless you are using multiple media queries to adjust the widths before they overflow. To make a responsive design you never want a horizontal scroll bar on the viewport at any width.
I already explained how to put a menu at the edge of the viewport and it does not rely on magic numbers at all so you need to rethink what you are doing. Any time you need to keep adjusting something to make it work likely means it is the wrong approach:)
That’s where you would use media queries to control the break points where your page would need them. Keep in mind, we have not seen your page so we have no idea what is really going on at your end.
If your old site is still live, then post a link for us to see the general design. With a new responsive page your layout will most likely need to change at screen widths where it begins to break.
The example I posted was not meant to be a plug-n-play code for your site, rather an example to show you how to get your HTML straightened out first and to show you how CSS can accomplish much more these days. I had not used any media queries at all, your header will certainly go through layout changes at different widths if you are using background images in it.
You don’t want loads and loads of media queries, it’s possible that you could get away with one or two. Some sites don’t need any if they rely on fluid widths. Paul gave a detailed explanation above on how to approach responsive design. Your new responsive site will not be an exact replication of the old one, it will make changes along the way to cater to various screen widths.
I have a lot to read through here, but 1 question comes to mind immediately: If I should not use width:1024; to constrain width because of interference with Responsive Design, what should I be using to constrain width?
If you look back at my example I am using width:100% along with max-width on the wrap div.
.wrap {
overflow: hidden; /*hides the menu links off left*/
width: 100%;
max-width: 1015px;
margin: 1em auto;
}
Though I didn’t have your images i based that max-width:1015px off the combined width of the two images shown in your header from post#3. Using width:100% allows it to fill the screen when below the max-width.
The header images need to be scaled down though as the page narrows in width, you can have some degree of success by using background-size along with 100%, or cover, or contain.
I say “some degree” because it depends on the aspect ratio of the image.
If you have your site live, can you post the link? So we can access the images.
If not, you can upload your header and menu images here. Without knowing what any more details about the page, the best I could do is to show you how to scale them down.
As your page goes through changes at various widths you can also remove or relocate elements. Take your logo for example, it could be removed below 800px or whatever and the banner image would then become the background for the entire header.
Get rid of those breaks and use an un-ordered list (ul) for your menu. Use CSS for the spacing (never a break) and use margins or padding where appropriate to make space between elements. Don’t use fixed widths for your containers as that caters for one size only but rather use max-width or fluid widths so that the page adapts nicely to all screen sizes.