So, I'm trying to do something like this:
The web page is supposed to look like a phone app, and it has to be responsive. The problem is that I can't position the buttons right. They always move in relation to the 'tablet' whenever I'm re-sizing the browser window. This is what I've tried (with only one button):
CSS
img {
max-width: 100%;
}
#tabletBG {
width : 60%;
}
#buttons{
position:absolute;
width:10%;
left:40%;
top:12%;
}
HTML
<div id="content">
<div id="tablet">
<img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
<div id="buttons">
<img id="quienes" src="images/quienes.png" alt="quienes"></img>
</div>
</div>
</div>
I just want the buttons to stick to the tablet. Even if i'm re-sizing the browser window. Is there an easier way of doing this? Thanks.
Regarding your original question above:
Try setting the position of your content div to absolute, fixed, or relative.
This will ensure that your absolutely positioned buttons div contained within it will use it as a reference point rather than referring its resizing/relocating to the window.
DEMO: http://jsbin.com/tixed/1/
Regarding your comment below:
It works, but for an extent. There's a point that if you keep expanding the browser window, the tablet will keep expanding, but the button won't. Here's a link.
The problem there is that your image is only 96 pixels wide, and you've set a CSS rule for all img elements to have a max-width: 100%. Under these conditions, the image will expand only to the point of its original size (the default action, and not what you want), and only to the point of its containing element (by your CSS rule, and to no noticeable effect).
To correct, ideally you would get a larger image. For a quick fix, change its rule to be simply width: 100%. This will ensure the image always expands to the point of its containing element.
Yes, whenever you re-size your browser the images will change their alignment and this is a default behavior of browsers. Only you can make this images to float.
Try this:
img{
float: left;
}
Related
I'm having a problem with my layout when I set a background-image with CSS. I've looked through Google and SO but couldn't find someone with exactly the same problem, and none of the solutions applied.
What I'm trying to do is create a page with a background image that fills the entire height of the screen.
Consider this simple html page:
<html>
<body>
<section class="main-section">
<div class="my-div"></div>
</section>
</body>
</html>
In CSS I have two selectors:
.main-section {
background-image: url("../images/image-hero.jpg");
height:100vh;
}
.my-div {
width:500px;
height:500px;
border-style:solid;
border-color:white;
}
And it works fine, except when I resize the window. If the browser is resized to a value that is less than the div's width and height, scrollbars appear and the content is cut. Here's a 300kb gif that illustrates the behavior.
https://i.imgur.com/fS46akt.gif
I tried changing the height to % instead of vh, auto, tried messing with the minimum-height property using every possible value, tried using the background-size property, and setting different values to all these properties.
What I want to achieve is the following: the background image fills the entire height of the screen while keeping its original aspect ratio, it's ok if it overflows horizontally. When the windows is resized, the background image should resize accordingly (or not, it doesn't really matter) and if it becomes smaller than its contents, they should still be visible after scrolling, instead of cutting and showing white/empty space.
I think I'm missing something really obvious or I'm not using the background-image property as it's intended. Please help.
Add background-size: cover; to .main-section
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
I'm trying to make a website and as I'm making it I test it out on two monitors: my 1366 x 768 laptop and a 1080p monitor hooked up to it. I am trying to align a div tag to always stay in the same place and I am using this:
nav{
position:absolute;
left: 40%;
top: 60%
}
However this does not seem to get the job done. It works fine on one monitor but not the other. I would have assumed that if I use percentages instead of pixels then it would work. Any advice on whats going wrong here would be very appreciated.
With using position:absolute; all fixed elements will be based on the <html>.
This means that it will left of 40% of whatever monitor you are using. A larger width and its position will change.
To fix this, you will need a parent container with position: relative.
Now anything with position:absolute inside of the parent element with pos:rel will be relative to this element and the parent will still follow the documents flow.
In short:
//html
<body>
<element>
<nav>
</nav>
</element>
</body>
//css
element {
position:reletive;
}
nav{
position:absolute;
left: 40%;
top: 60%
}
Your div has class = nav or id = nav? In that case, prefix nav in your css with . in case of class and # incase of id.
And if you want div to be exactly at the same place with respect to your browser's top and left, switch back to px
% will be relative to your browser size.
I assume you're trying to position an element relative to the browser window (which is what I assume you want to do when you're talking about monitor size. i.e. browser in full-screen.
In that case you'll want to use
nav{
position:fixed;
left: 40%;
top:60%;
}
This breaks the element out of the normal rules of flow and moves it relative to the viewport.
I'm not aware of any CSS rule that target the window position relative to OS desktop space.
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.
It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks
Wrapper containing the slides:
#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}
Class added on every sliding obj
.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}
Live demo: http://utvecklingspunkten.se/heightIssue.php
Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.
It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)
Removing the overflow setting will have the effect I think you want.