I have recently began to make a webpage and have run into a problem. The format looks strange on some monitors. I have to change this div for it to work on any other computer monitor different from mine.
<DIV STYLE="position:absolute; top:100px; left: 15%; width:950px; height:1150px">
I was wondering if there is a way I could fix this. I do have a background image and on different monitors the text can be shifted all the way to the left. Is there any way I could fix this?
P.S. I thought of adding a text box that you could put a percent into and have that be the position to the left in the div.
Minimal use of property,
Position:absolute
is always a good way to code.
Use this only when there are no other options. If you can do the same task using relative or static, prefer those first.
Related
I need help. I'm creating a website on Dreamweaver. I have just started learning html and I don't know really what is the best way to position element in CSS. I'm always using this way (example):
.element {
position: absolute;
left: 185 px;
top: 50 px;
}
Am I positioning element the right way? However, I want to keep the same position on different resolution.
Using position absolute should not be your default method to position elements unless you have a good reason to. Usually this is used when you need an element to break out of the document flow.
If you are just getting started I'd recommend to checkout for example https://www.codecademy.com/learn/web (it's free).
At any given time, you should try avoiding position: absolute; and position: fixed; as much as ou can. They can be extremely handy at times, will not deny that, but most of the time you just want to go with the flow of the page.
When you create a new element, you'll naturally see everything will kind of fall in order. The text's go about the same length, they start around the same position horizontally, and the same goes for most other elements. However, when you use position: absolute or position: fixed, you pull a element out of the flow of the page, effectively creating another layer on top of your current page. This means that, while you will have loads of freedom to place it however you would like, it also means there will be problems if you make the window smaller than what you got right now. What happens, for example, if a mobile user visits your page?
That being said, use the already existing css-attributes as much as you can (text-align, vertical-align, even float and/or using margin's can be better) before anything else, when it comes to positioning.
EDIT: Also what stybl said in the comments, if you are just learning HTML and CSS, I'd not recommend using DreamWeaver either. Start off with a good text-editor and/or go to Codecademy instead!
I'm currently stuck on a problem I can't fix on my own.
I've cut a image into different layers I want to overlay on a website. Basically you can enable and disable various layers.
An example would be this:
Image of a tree without leaves
Actual leaves of the tree
Now there is a checkbox and when you click on it it'll either enable or disable the leaves.
Now I have some options to position those elements via css:
Make all images the same size and fill smaller ones with transparency. Something like this: http://i.imgur.com/GRd4eaI.png
Crop those large images into smaller ones. Here I don't know how to position them via css properly so they'll resize with the other pictures.
Create a canvas and draw the image onto it, then display that canvas.
I've currently implemented this and it works like I want. Problem though is that it'll lag when using the phone (Only renders part of the image till it finally finish after ~20 seconds to display the image properly)
I guess that would be the proper way to go but my problem here is that I don't know how to set the size of the overlaying smaller images.
Html Code:
<div class="container">
<img style="top:0%; left:0%;" src="img.png" />
<img style="top:69.56%; left:26.16%;" src="smallImage.png" />
<img src="images/null.png" id="last">
</div>
And the css code to that:
#container {
position: relative;
}
#container img:not(#last) {
position: absolute;
width: 100%;
height: 100%;
}
The null image is just there that overlaying other images work with that method.
The problem I have here is now that the smaller image will be positioned correctly but it wont shrink down to the proper size inside the div: http://i.imgur.com/4EgGIAl.png
I don't think that this would be the proper way, or easy way to do it. But I guess I'll use this then when I need to.
Also I think it's good to say that I'm working with image maps and areas. So perhaps that'll make it a bit more difficult to use then.
It would be very great if you could help me here, thanks :)
i have completed the basic template for my site. Although i have one problem. When you make the browser to small everything starts to scrunch together. The pictures get smaller and smaller until you cant see them anymore. The text starts to all go into one line. I am not sure why this is happening. My guess is that by changing the position it should work, so that is what i did. When i did change the positioning everything on my site went crazy. Is there anyway to group everything in a site and make it all static together? I am stuck at this point so any advice would be great. Basically i would like to know how to group together my site at the center while keeping the whole thing together.
I would assume that giving you a link to my site would be more effective than a fiddle.
mytesttestwebsite.com
But here is a jsfiddleanyways
http://jsfiddle.net/4yeb5x6g/
This is the code to one of the images that shrink when you make the site smaller.
.image10 {
z-index: 5;
margin-top: 738px;
margin-left: 478px;
position: absolute;
}
I would personally not start messing with the z-index property.
From the small css code you put here isn't enough to gauge the problem. I would suggest that you enclose everything into a div with a set width
<<'div id='container' style='width:800px'>>
place website in this space
'<<'/div>>'
sorry ignore the ' i don't know how to display code yet!
Good luck,
Boom!
Based on what you said, I feel that it is safe to assume you have used things like width="50%" or height="100%" or whatever.
Make sure you are using set heights, such as width="87px" or height="168px"
I have just looked at your code and yes, you need to define a wide for the entire site, so as I said before. You must put everything in a div tag and specify a width for it in CSS or the html
I'm creating a website and have a problem with the way it displays in different browsers. I'm testing using Chrome, iOS and IE8. The site displays correctly in the first two, but not so in IE.
The website in question is http://www.edalemill.co.uk/
Can anyone help point out what's wrong with my CSS to solve the problem?
Thanks!
I have taken a look and can replicate the issue.
I would suggest removing the
overflow:auto; from the #stripper
You have also used body more then once as well in your CSS, I would suggest having only one lot and tidying up your code.
Possibly consider using this as a base which should help you:
http://meyerweb.com/eric/tools/css/reset/
UPDATE
Otherwise for your code do the following for the CSS
#sidebar {
position:fixed;
}
I would recommend making that IE8 code only though
If you take out the height:100% on #container the background image fills up the rest of the text area for the about page.
Let me know if this helped.
Update
It might just be easier to have another CSS tag for the content areas that scroll. The height:100% works on those content areas that don't scroll, however, they break on those that do. My recommendation, even though it might not be the best way, is to either make a second CSS tag for the content areas that scroll, or just simply make the image bigger.
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.