header not complying to 100% width - javascript

kindly check out this website:
http://www.imageworkz.asia/cranium
try resizing the window so small to the point that a horizontal scrollbar appears. Drag the horizontal scrollbar to the right and then the problem occurs. The header and footer does not seem to adjust accordingly. In the css, the header and footer element has a 100% width.
Any ideas on how to fix this? Thanks!

That's how 100% width works. The width of the element is the same as the parent element, and as there is a scroll bar it's narrower than the page.

I don't see an issue, but if you want the header to resize, I suggest using media queries to adjust based on screen size.
Media Query Examples

Your article element has a fixed width so it overflows the container when the container shrinks. You could try floating your container div, that should make sure that it doesn't shrink.
<div id="container" style="display: block; float: left">

You need to use CSS3 multiple background images to the 'body' elements and then use CSS3 PIE to make it work in IE http://css3pie.com/documentation/supported-css3-features/#pie-background
body{
background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
-pie-background: url("/cranium/img/2 MAIN/bg.jpg") repeat 0 40px, url(headerbg.png) repeat-x left top, url(footerbg.png) repeat-x left bottom;
behavior: url(PIE.htc);
}
Remember -pie-background is relative to HTML, not to CSS
This will definitely solve your problem.

Related

Central div with margin, and ability to scroll out in all directions (using view width and view height)

So I want to have a central div that is full screen, and to make the width and height of the body 150 vw and vh, with a margin of 50% so when you load the page it holds the div central, but you can scroll up, down, left, right, outside of this central div a little bit.
If you do the div 100vw, 100vh, and then the body 200vw, 200vh, it only enables scrolling to the right and downwards.
This is my understanding of how to get towards what I'm trying to do:
HTML:
<div>
centered and full screen div?
</div>
</body>
CSS:
body{
width:150vw;
margin-left:50vw;
height:150vh;
margin-top:50vh;
}
div{
width: 100vw;
height: 100vh;
border: solid;
}
JAVA:
window.scrollTo(50 + 'vw', 50 + 'vh');
https://jsfiddle.net/dsLnzyxw/3/
But this doesnt work as the javascript doesn't accept vw in the scrollTo function.. but just to give a better idea of what I'm trying to do.
Also understand I might be going around on crazy route trying to achieve something that could be done quite simple in css?
How do I achieve this?
Thanks !
In order to get units relative to the viewport width and viewport height (vw and vh) you could do simple calculations:
window.scrollTo(0.5 * window.innerWidth, 0.5*window.innerHeight);
which would set the scroll position to 50% of the window width and 50% of the window height. window.innerWidth returns the width of the window, and this is multiplied by 50% to get 50% of the width of the window in pixels.
The same goes for height. Setting the scroll position is not possible without JavaScript unfortunately.

Logo position changes when zooming out (CSS/Angular4+)

I have navbar which has a logo (MostafaOmar), and when I zoom out, the position moves as well.
Try zooming to 70%, and you will see the position of the logo moves as well.
How can I make it stay how it is when its at 100%?
Logo
.nav .nav-heading .brand {float: left}
it looks like the re-sizing of the parent div with the class of .container is resizing and this is moving the contents, including your logo.
if you force the container class width to 80%, this fixes the problem for any resizes. your text might grow and shrink, but the location stays in the same place. I tested in your codepen and it works.
.container {
width: 80%;
}
alternatively, as you might not want to change the whole class, you could add an ID to the navbar container, and target the width of that the same way.
let me know if this helps
cheers

How to dynamically center an image that repeats on the x-axis with javascript?

I have a background image that is 1500px in width and repeats on the x-axis. I would like to dynamically center this image no matter the user's viewport width so that the image's center is always in the middle of the screen?
How can I accomplish this with JavaScript?
You shouldn't need JavaScript for this, CSS will (or should) do just fine:
background-position: center center;
background-repeat: repeat-x;
That line will ensure that the image is always centered in the element, and that it repeats starting from the center of that element. More info on background-position here.
Perhaps I misunderstood the question here, but I believe you can do this with just CSS.
.container {
background: url('path/to/image') repeat-x 50% 0;
}
Is that what you had in mind?

Centering a page layout on higher resolutions

I'm working on a site which has some big images etc to show. On my screen, at 1024 x 768 resolution, it fits the screen completely, going from left to right.
However on my client's screen, who has a bigger resolution, he sees the right part of the screen as blank, and wants me to center the layout rather than have it be left aligned. (I have my margin-left set to 0.)
If I simply increase the margin-left, it will cause a horizontal scrollbar to appear on lower resolutions like mine.
Is there any way to solve this that will work on all resolutions? Or do I have to resort to using javascript which will detect screen resolution, and increase the margin-left if the resolution is bigger than a certain value?
#wrapper { margin: 0 auto; width: 960px; }
this will horizontally center an element with id="wrapper", so if all your content is inside that element, your page will be centered
basically if you apply margin-left: auto; and margin-right: auto; to a block element, it will be centered horizontally
Make a container element around all the elements you want to center and give it an id like id="container" then add a css selector to center it.
#container {
margin: auto
}

css/ jQuery - center absolute positioned div

The div is 50% opaque and is displayed on top of the site's content, and it has a fixed width of 960 pixels (it's created by jQuery).
How can I center it horizontally?
margin: 0 auto; doesn't work :(
margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...
http://jsfiddle.net/UnsungHero97/HnzyT/2/
To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:
width: 960px;
position: absolute;
/* ... other CSS properties... */
left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */
If you want to center it both vertically and horizontally, you need to know how wide AND how tall the element is.
I hope this helps.
Hristo
Just subtract the window midpoint from half the width of you element on resize. Here's a simple plugin that you could easily accomodate to center vertically if need be as well:
$.fn.centerMe = function () {
this.css('left', $(window).width()/2 - $(this).width()/2);
};
$(window).resize(function() { $('#yourElem').centerMe(); });
$('#yourElem').centerMe();
See working example →

Categories

Resources