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
Related
We have a responsive image, and there are elements positioned absolutely above the image - The elements positioned above the image need to stay in the exact same position proportionate with the image.
For example: http://jsbin.com/juremuqa/1/edit - I want the red circles on the cat to stay above the eyes. The circles do not have to resize, just cover the eyes no matter height or width of square element. The image should also scale proportionately.
Possible in just CSS? Or would you have to calculate label position with JS?
The positioned elements will be text in the end.
Add this to the Css.
.square .image {
background: url('http://animalkingdomz00.com/images/chartreux-cat-6.jpg');
width: 100%;
height: 100%;
display: block;
background-size: 100% 100%;
}
Try and tell me
If you don't need the red dots to do anything then the easiest solution is to replace the eyes with a transparent background and let the red background color shine through. Otherwise your going to need to play around with image positioning, right now your problem is that your keeping height and width both fixed which means when the image changes size it stretches in ways that change the height to width ratio making your eye percents fail. If you want that then SSS has the right idea.
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
}
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.
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
I've got a fixed position menu at the top of my page, inside it is a div with the menu items and a .container class in order to center and limit the width. I can't seem to figure out how to limit my drop down menu to stay with in the .container class width limits. It keeps going off towards the right and will be cut off depending on page widths. Any help is really appreciated.
http://jsfiddle.net/rKaPN/47/
http://jsfiddle.net/rKaPN/51/
Changed:
//fixed so submenu will be relative to menuitem
.menu ul li{
padding:0;
float:left;
position:relative;
}
//if a rightmenu, float right instead of left
li.menu-right.drop-down ul{
display:block !important;
position:absolute;
right:0;
}
You'll probably need to make sure that your .container is using a percentage based width.
Your menu is floating to the right of the container... so if the container is set to 500px, but your browser is 400px, your menu is going to get cut off.