I'm trying to build a website and am experiencing problems with the position of a div 'tile'.
This is the site I'm working on :
https://dl.dropboxusercontent.com/u/103417607/1/index.html
I'm fairly new to the CSS and responsive programming world.
Problem I have is the 'date' tile on the right, when resizing the window, for some reason, this tile creeps up underneath the 'log on' tile. I just don't see what I'm doing wrong as I don't have this with the other tiles.
You can test it for yourself bij slowly dragging the right side of the browser window to the left (making the width smaller). The date tile will slowly creep up, while the other tiles (screenstar and latest news) stay nicely put. I don't understand this, as my css code is the same.
This is my CSS file :
https://dl.dropboxusercontent.com/u/103417607/1/css/style.css
Any help would be greatly appreciated, this is giving me headaches.
(I did check de JQUERY mosaic stuff, but I don't know if that is what I'm lookign for)
Thanks,
Maarten
The div in question has the following CSS:
#datequote_position_front {
float: right;
margin-top: -610px;
}
Which tells us that the top edge of the <div> is 610px lower than where it would normally be in the document flow.
We can safely assume the vertical position of the <div> is directly influenced by which other <div>s appear above it in the document flow.
The reason why the <div> is floating upward is because, as you reduce the width of the viewport, your horizontal menu disappears.
I haven't checked but I would guess the <div> is rising by a number of pixels exactly equivalent to the height of the horizontal menu.
Your solution to prevent the vertical position of the <div> from changing is, therefore, to use another method to position the <div> - ie. one that isn't relative to other elements in the document flow.
For instance:
#datequote_position_front {
position: absolute;
top: 610px;
right: 6px;
}
This will mean that the <div> will always be absolutely positioned 610 pixels below the top edge of its parent and 6 pixels to the left of the right edge of its parent.
N.B.
Two points:
1) I haven't tested these styles in a browser so you may need to adjust the top and right co-ordinates of the <div> correctly according to your design.
2) You'll (probably) need to insert a media query, if you want to change the declared absolute position of the <div> at narrower viewport widths.
I was able to solve the issue thanks to these tips :
http://www.htmlforums.com/css/t-positioning-divs-in-mosaic-style-160801.html#post854724
Cheers.
Maarten
Related
I am developing an information board for a university club of mine. I almost have it complete, except I have one annoying bug left: The center image expands beneath the viewport.
The image is supposed to shrink and expand to stay between the two side columns, which it does because of
a percentage width css attribute. However, I would like it to not expand further once the bottom of the image makes contact with the bottom of the viewport; it should simply remain centered.
For the life of me I cannot get a solution that both stops it from growing beyond the bottom of the page without mangling the aspect ratio of the image.
I thought I was on to something with object-fit: contain but alas, it appears width will always prioritize itself over object-fit.
Any help would be much appreciated, as I'm quite new to web dev.
Here is a link to a client-side view of what I have so far:
https://jsfiddle.net/ydumcrnk/
Have you looked into display: flex? You can wrap a div around the three .column classes, give that container div a property of display:flex and then you can add some subsequent properties that will line up the .column classes the way you want.
Here is a page on the subject I reference often.
I have set a div to position: fixed in order to maintain a top fixed header. The problem is that the moment that you set a div to postition: fixed; or position: absolute; it's like that div is no longer considered when spacing the content and the content that used to be just below that content is now overlayed. One way to fix this is to wrap in a div and set a fixed margin or height, but what is the margin is not fixed?
When the browser is resized, the height of the fixed div increases, meaning that the fixed height/margin that I implemented no longer suffices. Please have a look at http://littegiant.myfreelancer.co.za. You will see that I added a bunch of <br> in order to assert a fixed-height differential so that the content does not overlap, but that this is no longer enough when the browser width (and thus the header height) changes. I have seen that this is a problem when used the Bootstrap, navbar-fixed-top as well. There HAS to be a way to assing a fixed div and still keep it in mind when populating the other content and scrolling...
Original Width:
Adjusted Width:
There HAS to be a way to assing a fixed div and still keep it in mind
when populating the other content and scrolling...
There is not. What you are observing is (and always has been) part of the CSS spec. absolute or fixed positioned elements are taken out of the normal document flow meaning non-child elements are not affected by them.
Why not use conditional CSS to change the positioning of the overlapping navbar if the window is resized or if the device has a lower resolution.
#media only screen and (max-device-width: 480px) {
#topHeader{
position:relative !important;
}
This appears to give things some room to breathe. You will need to make your slider responsive though, it seems to be dipping off screen.
I hope this helps.
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
I'm quite new to CSS and I'm trying to get a page up and running. I managed
to successfully produce what I thought was a nice page until I resized the
browser window then everything started to move around. I have no idea why
this is happening!!
Could someone offer me some advice please. When I resize the window I would
like the 'objects' to stay where they are but the window to resize. for
example, if I drag the bottom corner of a window up and to the left I'd
expect to see what was at the bottom right disapear and scroll bars to
appear but the object in the top left hand corner would stay exactly where
they are.
Am I making sence ?
Have a look at working condition of my page : http://aimmds1.estheticdentalcare.co.in/
then try to resize the browser window by dragging the right size leftwards .
and look at the content in header , and also the menubar .. they jump down ,, the header content was also jumping down then i make overflow: hidden ; .. but as i understand all this is not the right way.
Please find the html and CSS here : http://jsfiddle.net/swati/hCDas/
I already tried prevent div moving on window resize , i tried setting min-width:820px; for div header , that the main containing div.. but that doesnt solve it.
Thanks in anticipation of your help.
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
There are two types of measurements you can use for specifying widths, heights, margins etc: relative and fixed.
Relative
An example of a relative measurement is percentages, which you have used. Percentages are relevant to their containing element. If there is no containing element they are relative to the window.
<div style="width:100%">
<!-- This div will be the full width of the browser, whatever size it is -->
<div style="width:300px">
<!-- this div will be 300px, whatever size the browser is -->
<p style="width:50%">
This paragraph's width will be 50% of it's parent (150px).
</p>
</div>
</div>
Another relative measurement is ems which are relative to font size.
Fixed
An example of a fixed measurement is pixels but a fixed measurement can also be pt (points), cm (centimetres) etc. Fixed (sometimes called absolute) measurements are always the same size. A pixel is always a pixel, a centimetre is always a centimetre.
If you were to use fixed measurements for your sizes the browser size wouldn't affect the layout.
I'd rather use static widths and if you'd like your page to resize depending on screen size, you can have a look at media queries.
Or, you can set a min-width on elements like header, navigation, content etc.
hi firstly there seems to be many 'errors' in your html where you are missing closing tags, you could try wrapping the contents of your <body> in a fixed width <div style="margin: 0 auto; width: 900px> to achieve what you have done with the body {margin: 0 10% 0 10%}
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.