I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}
Related
I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/
I'm using sticky.js to accomplish a sticky header. Everything is working except when I scroll down, the header moves up about 10-20 pixels and to the left about 10-20 pixels as well. I'm not sure what I'm doing wrong but if anyone knows why this might be, i'd really appreciate the help.
Here is a link to the site in progress http://barret.co/dad/services.html.
Any help or suggestions appreciated.
To counter the vertical movement, you'll have to instruct sticky.js (if possible, can't tell) to set the top of .sticker to 10 pixels (the top padding of the <aside> element), not 0.
Then:
the css for the logo image should be changed to something like this:
#logo {
margin-left: 5%;
margin-bottom: 25%;
margin-top: 20px;
}
I removed the
display: block;
max-width: 100%;
margin: auto;
as you can see. You'll have to play around with the left margin value to position it to your liking.
Then:
Because of the width of the .sticker element being in percentages, the actual width of the element changes when it becomes 'fixed'. This is because the element is now considered a child of the viewport and not the html parent element. This squishes your content from 310 to roughly 273 pixels. Set a width (in percentages) on your .sticker element that suits your design and be done with it.
Hope it helps!
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
I'm currently coding a jQuery slideshow effect and need a bit of help.
I have all of the sideshow functionality working properly, my only problem is that I want to have my navigation arrows to be automatically positioned on either side of the slideshow box (960px, centered on the screen).
The end product should be something like Kriesi does here: http://www.kriesi.at/themes/upscale/
I've looked at his code, but can't quite figure it out. Any help would be appreciated!
Thanks!
I don't understand what you mean by "I can't quite figure out how to initially position them over the slideshow... If I do it in CSS, then it won't work on all screen resolutions."...?
If you position the arrows relative to the slideshow, there will be no issue. For example to place them at the top left and top right corners, include the following in your styles:
#slideshowcontainer{
width: 960px;
height: 400px;
position: relative;
}
#leftarrow{
position: absolute;
top: 0px;
left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
position: absolute;
top: 0px;
right: -40px; /* position the arrow 40px to the right of the slideshow */
}
Obviously you will need to adjust the values to suit, depending on the size of your arrows and where you want them etc
Arrows are situated in . That block is positioned as absolute with top value as 50% - 12px (margin-top: -12px);
Then, there is a list which contains images and other data and affect height of it's parent .
So, basically, in the code, when user clicks on an arrow, jQUery probabaly uses outerHeight() to get height of li elements in and then uses animate() to change height of the which affects height of the and that in it's turn smoothly changes position of the arrows.
Personally, i think it's a bad designing when arrows change it's position. Very annoying when you have to move mouse up and down every time you want to see the next slide.
First, here's is my rough example: http://demindu.com/sandbox/simple.html
What I'm trying to do:
Create a content div: let's say 400px tall and 700px wide, like the example. The content box has a margin of 50px in each direction. The content div should always be centered both vertically and horizontally, regardless of screen resolution. The black background should extend from the centered content area all the way to the right side of the screen, but not to the left.
The only way I can think of possibly doing this is something using window.innerWidth & window.innerHeight in JavaScript, but I don't know enough to know if this is even possible.
The amount of blank space above and below the middle section would need to be:
window.innerHeight - height of the div (in this example: 500px [400px box with two 50px margins]) / 2
The blank space to the left of the black bar would need to be:
window.innerWidth - width of the div (in this example: 800px [700px box with two 50px margins]) / 2
My question to you is: Is this possible in JavaScript? Is this possible somehow with pure CSS?
You can do this entirely in CSS with 4-point absolute positioning. You will need two elements:
The first item spans from the right of the screen to the center where the content is positioned. This element uses absolute positioning for the top, left, and right coordinates of the element (we can leave bottom unspecified as it's taken care of by the height.)
The second item is nested in the former. This item has a fixed width to ensure the content itself remains in the specified width you've chosen. We can also set the height and padding on this object and the parent will inherit it's height. Don't use margins to simulate padding - it can cause cross browser issues when you're just trying to do some positioning tricks as we are here.
So your HTML code would look something like this:
<div id="my_centered_design">
<div id="my_centered_design_content">
<p>This is just some example text.</p>
</div>
</div>
And you're CSS would look like this:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
Essentially this is the same trick as the Joe2Tutorial except we are applying additional positioning rules to adhere the centered element to the right side of the screen.
I think this pure css solution would suit you best: http://www.joe2torials.com/view_tutorial.php?view=37
A very quick google resulted in this piece of code.
this code does not align a div in the middle. what you actually for your own website is that you put the following div css
.main {
width: 140px;background-color: #252525; float: left;margin-top: 25px; }
inside a table that is aligned to be centered. so, basically you're using the table's centering feature to center your left floated div simply as a content. you're not doing anything through div or css for that matter. the piece of css code you offered doesn't not anything about centering a div in the middle.