Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I was wondering when styling some of my website's what the correct use of the top, right, left, bottom properties are.
This would sound like an way too open question so I am narrowing it down to this: Let's say if I am styling some text that I want at the bottom of my page would it be correct to use something like bottom: 265px;?
This would give the desired result however is this also considered clean code and a correct use of this function?
Or would there be a better option for this. I am wondering this because I also have to make my site's responsive as well.
I have had a read through W3schools - CSS Positioning and Stackoverflow Question - CSS Positioning but it did not have the anwser I am looking for
You use top, bottom, left, and right to place absolute-positioned content.
There are certainly cases where absolute positioning is the best and cleanest approach. The problem is that it's too easy to overuse, which can lead to very fragile layouts.
Signs that you're overusing absolute-positioning:
every time you change something in the page you end up having to
update a lot of absolute-positioned elements
different content (a too-long header, or a too-short paragraph, or etc) causes things to overlap unintentionally
your layout only works for specific screen sizes, and doesn't flow to match the browser window width
It's almost always better to start by letting the browser do most of the work, depend on document flow to position the majority of the content, and reserve absolute positioning for only the elements that really truly need to be in exactly the same place no matter what else is going on on the page. In practice, most of the time, this tends to be relatively few (or no) elements.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I've looked everywhere and I've tried almost everything and I can't seem to understand why my work is messing up. I even asked my ict teacher for help but I didn't want to tell him that it didn't show up since he spent ages on it.
Anyways, uh quite frustrated since everything is going wrong. I just want my footer to be at the bottom of the page and for me to write on the page without it going into the header.
coding for website: https://gist.github.com/JazmineCz/12884de1cf76ce72f3265b83c13aab76
The <footer> just act as a <div> and don't have some special property to get at the bottom of the page.
Your page don't have that much content so that the footer get to the bottom, What I mean is footer is at correct place at the end of page as your page is ending there
One thing you can do is fill up the page.
another was to move it to bottom are using css.
2 things you can do either give the article section a height:100vh this will make the Article section a vertical page long, or *make the footer's postion:fixed and then set bottom:0 this will fix the position of footer and it will be not move even you scroll
You need to give height to your section. For example;
section {
height: 500px;
}
Your footer is in the bottom actually. Since you don't have enough content between, it doesn't have a place at the bottom.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
According to the inspect elements menu, this thing called <tbody> exists, and <tr> is inside it. The problem is, tbody, is 100% height and width, which it should be, but <tr> is always 4 pixels less in height than it should be, even when styled at 100% height
THEN
inside there are two tds, one has 20% and one has 80% width, but they both have these annoying border type things, that i cant get rid of, it looks like margin but honestly cannot find anything
This question is a bit of a mess, but i cant find any sort of solution
I would suggest looking at the padding around "tr". A great tool to use is Pesticide (it's a Google Chrome extension) that when it turns on, it will show the outlines of different sections to help you determine what is being controlled in terms of padding/margin. It sounds like there may be a padding issue. If you turn on Chrome Developer, under the Element tab on the right side, if you scroll all the way down, you can see the box model and see the padding/margin that is used in the respective section.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've been trying several solutions, but the clickable areas for links in my navigation sidebar aren't where they should be. I'm just looking to get the entire div or even just the text inside to be a link.
http://prelude2cinematestsite.weebly.com/
If you hover at the very top of "home" you'll finally locate one of the links. One of the solutions I attempted very early seemed to finally fix the problem, but then caused the entire sidebar to have scroll for width and push the social media icons down passed the bottom of the screen where they refused to budge. Unfortunately I can't seem to find this solution anymore since it's the only one that actually did what I wanted even if it broke a lot of other things.
There was originally supposed to be drop down menus, but even taking them out didn't seem to help.
And this isn't a problem with Weebly, I've checked that.
You do not need to apply position:absolute to the .sidebar-nav div and the #social div. Make them position: relative. They will automatically fall one below the other just as you need them. Then, remove the excessive padding that you've used on the divs to re-position them.
Currently, since the two are positioned absolutely, the social div is overlapping on top of the .sidebar-nav div and inadvertently preventing you from clicking on the buttons.
Adding a negative z-index to #social in your css file will solve your immediate problem but it looks like you may still have to work on the mobile version of your navigation.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to solve this problem in Internet Explorer 8.
I have two div tags whose content should be shown on the same line. I know I can easily achieve this by using inline-block. However, I also want that, if the browser window is reduced to the point where the content doesn't fit in a line anymore, the content of the second div is moved on the line below.
Basically I'm looking for a behaviour of the kind "show both items on the same line if there is enough space, otherwise go to the next one".
Is there any way to achieve this with IE8? Even a Javascript solution is fine.
Try using style="float:left" on both divs. You may need to wrap both of them in another div to get the effect you're looking for.
You can use a media query to check the width of the screen and change the styling based on that:
#media(min-width:768px) { //div style here }
Check it out here:
http://jsfiddle.net/b9ahqnt0/
as well as float left try adding a percentage as a width so when the size of the screen is reduced it can adjust. Although normally when it comes to responsive sites you are better setting it up then adjust the issues as Daniel said using #media conditions to change the layout as the screen changes to what you need it to look like..
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a quick question about CSS positioning. I have already looked up all about absolute, relative, static etc but am still having problems. So, for example, on one of my webpages, I am using four different div's for the four seperate sections I have on the page. I can manage to position them so they look perfect, but the top left section expands as the user adds entrys. When it expands, it then overlaps the section below it. Same with the other side, the section expands a little if it needs to display error messages and overlaps the section below it. Any suggestions as to how I would overcome this?
Thank you !!
If you want divs to flow normally on a page, you don't have to use positioning. Generally, if you are using positioning, you use it for a div that you want to have in a specific place that would in a normal situation, be somewhere else. For example: you would position something relatively if you wanted it to actually escape the container it is in. You would position something absolutely if you want it to be in exactly the same place, no matter what (this includes scrolling) OR if you want to overlap divs using a z-index.
Usually, if you just want divs to line up side by side, you can display: inline or use float.