I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.
Related
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.
I'm using html/css/javascript as a game UI for a 3D game. I render the page on top of my game. Most game UI's have an anchoring concept (position widgets to Top, Left, Right, Bottom, Center, LeftCenter, RightCenter, TopCenter, BottomCenter). I'm wondering if anyone knows of any existing html/css framework out there that mimics this behavior or if it's fairly easy to do such a thing with css? I'm not all that familiar with css and I've done some searching around this but haven't seen anything that seems like it's a direct anchoring like I was referring to above. It seems like anchoring div's like this would be ideal in my situation.
I'm picturing behavior like anchoring a div to the bottom center and when I add things inside of it the overall div itself always stays centered at the bottom no matter if I resize the window.
Comment as answer:
Look at css position: fixed it basically causes the element to act like a watermark
If you want it bottom-left you would do
css bottom: 0; left: 0;
If you wanted top-center you could do
css top:0; left:0; right:0;
(I think you can get where I'm going with that without explaining all the different scenarios)
left: 0, right: 0 seems to just make the div take up the entire width. Giving a width of 50% doesn't center that div of a width of 50% it seems.
Response
try html
<div id='a'>
<div id='b'></div>
</div>
css
#a {
position: fixed;
left:0;
right:0;
}
#b {
width: 50%;
margin: auto;
}
I am soo confused right now. Coding really isn't my thing, so I believe that I messed up majorly somewhere which creates this problem:
I'm trying to make a sticky footer. The footer does stick--but only if I make my main content DIV (the white centered box) relative. I need the height of that DIV to stretch with the content (which will contain a PHP script that'll pull from my Wordpress blog--so naturally, I need it to adjust as necessary). If the DIV stretches longer than 500px, there's a weird two-scrollbars things going on, & I hate that. I like the relative DIV, but I would love to rid of all the extra scroll space, as well as making sure it stetches/regresses with content & the footer stays where it is.
I hope that's not too confusing. I'd just like someone to look over my source code & see where I'm going wrong. Thank you for any help.
http://www.missa.me/practice3.php
nice website :)
You need to make the footer fixed,
use this CSS
#footer {
position: fixed;
height: 80px;
clear: both;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
}
and take overflow: auto; off of #main
what this does is tell the footer to stay 'fixed' to the bottom of your viewport, so it will always stick to the bottom of your screen.. and taking overflow:auto; off will give your #main the natural ability to expand it's height depending on the content inside it.
on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.
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.