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!
Related
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
In CSS3 resize, the icon to resize is positioned in the bottom right. How do I make it appear in the top left and make the user able to resize accordingly?
I've found here:
The precise direction of resizing (i.e. altering the top left of the element or altering the bottom right) may depend on a number of factors including whether the element is absolutely positioned, whether it is positioned using the ‘right’ and ‘bottom’ properties, whether the language of the element is right-to-left etc. The precise direction of resizing is left to the UA to properly determine for the platform.
So far, managed to place the icon in the bottom left using:
.fixed {
position: fixed;
bottom: 0;
right: 0;
resize: both;
overflow: auto;
direction: rtl;
}
You can't, it is handled by the User Agent (but you can try rotating it :)
Honestly, I agree with the one commenting that the whole resize property thing should have been left out of the standards:
This shouldn’t be in the standard. Resizable textboxes are a user
agent feature to help mitigate poor design, and giving developers the
option to it is madness. If I as a user want to resize a textbox to
help me enter text, then that should be up to me. The developer has no
idea about the screen resolution, DPI, and physical dimensions of my
device, or any special accessibility overrides or user stylesheets I
have applied, and therefore no way to say I don’t need to resize
something.
Amen :/
Look at the last line from what you quoted:
The precise direction of resizing is left to the UA to properly determine for the platform.
That means the default behavior is browser specific and you can't hack it.
Your only other option is to do the resizing with JavaScript.
A quick Google search led me to this: http://rightjs.org/ui/resizable/demo
Though I am sure you could do this without the JavaScript Library overhead.
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
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.
I'm almost finished with a pretty big text project that I'm working on, and I need to address a problem I've been putting off: the sidenotes I'm using are occasionally running into each other and overlapping. You can see the problem here if you look for ovoce a or Euripedes.
There are probably lots of different ways of solving the problem. But I'm just not sure where to begin. Any suggestions or clever ideas would be very welcome. Thanks!
EDIT: I'm trying this again. The solution that seemed to work turned out not to work too well!
In your HTML structure, the asides belong to the same column as the main text. If you take away the asides' CSS, they will appear in their original positions, pushing the main text further down. The CSS pushes the asides to the left; position:absolute prevents the asides from taking up space in the main text's column. The layout relies heavily on position:absolute. Take the property out and all the numbering pseudo-elements in front of the paragraphs will be displaced as well.
To achieve the same effect without absolute positioning, you have to rewrite a lot of code: either introduce a 4-column (instead of 2-column) table and move the sidenotes to their own columns, or switch to a jungle of floated divs. Welcome to CSS hell.
I don't know how strict the restrictions on your project are, but here's another approach.
.sidenote {
background-color: white;
}
.sidenote:hover {
z-index: 10;
}
By setting background-color to white, the asides will be opaque. Should they overlap, the aside further down will cover the one above it. As soon as the user hovers over an aside, it will be brought on top of the nearby asides.
I searched for ovoce and found the issue. The sidenote for the text above it is too long so it overlaps. Anyway you can just style the text below it and give it a margin-top like this?
style="margin-top: 60px;"