Jump to content

Mikasa Ackerman

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Mikasa Ackerman

  1. Sorry, it was late at night when I typed that response. You're right, I've got the position:relative example the wrong way around. Yes, you can use both left and right positioning, as shown above. I did not say you can't use both. I said you wouldn't usually do it. To do so makes things unnecessarily confusing in my opinion. In fact, I'm a little confused by some behavior I'm seeing in a codepen, if you don't mind could you take a look and telling me what's happening. http://codepen.io/anon/pen/ezmjA The red box is in it's normal position inside a body container that is 1200px wide. The body is positioned relatively so that the divs inside it will position themselves relative to this container, rather than to the browser window (or in this case the codepen frame). The green box is positioned relatively, 1000px from the left and 500px from the right. The right positioning appears to have no effect nomatter what length it's set to, for positive and negative values. The position of the box is the same even if you remove the "right" declaration all together. The blue box is positioned absolutely, 1000px from the left, and 500px from the right. Again, nomatter what the right possition is set to, it does not appear to have an effect. Removing the "right" declaration has no effect. For both the green and blue boxes, it does not seem to make a difference what order the left and right positions are written in the CSS. Even writing something exagerated like the following: right:5000px;left:1000px; the boxes are still positioned 1000px from the left. This makes me wonder if maybe left just always has priority over right? The purple box has its left/right margins are set to "auto". This was the case in the OP's scenario. Before adding any other styles the purple box is centered horizontally as expected. When its position is changed to absolute, it goes to the left side of the screen. I've positioned it t at the bottom of the div so that it does not overlap the blue box. Positioning 1000px from the left puts it in the same X position as the green and blue boxes. Adding a right position of 500px does nothing. Using positioning from the right -50px does nothing. but a right value of -500px moves the purple box further off screen to the right. Rearanging the order of the left and right declarations makes no difference. I'm not understanding why in the green and blue boxes the right declaration seems to have no effect nomatter what the value, and nomatter what order it's in whenever there is a left declaration. Im also not understanding why the purple box, with the addition of a left and right margin of auto, sort of seems to obey some of the right position declarations, but not always. Yes, float in this specific example won't work unless there is some positioning of the image that we're not seeing in the code that's provided. In any case, do you think it's a better idea to use the image as a background image of "text-container" instead of in the markup, and position text container instead of positioning the h2. It's hard to say what the right answer is though, without having a better idea of what thefinal result should look like. I can't see the image in question when I test to it's tough to say what will work best. In general, I don't like positioning things absolutely if I can avoid it, which is why I recommended using a float (I wasn't taking the image being in the markup into consideration). Absolute positioning does have it's place, but taking elements out of the content flow and then remembering the context of the parent elements can be confusing, particularly for maintanence later on. With well organized code, this shouldn't be too much of an issue, but as a beginner it can be confusing to remember why an element is in a certain position when, based on the markup, it looks like it should be elsewhere.
  2. It would be helpful to show the relevant code. The HTML document you provided doesn't actually have your drowdown menues working so it's dificult to test. Anyway, the first image isn't centered either. It just so happens that all of your sub links take up all of the allowed space and make it appear that it's centered. I think the problem is this: #nav ul li{float:left;} All of your nav links are floating to the left. Something like this might help? Not sure #nav ul li ul{margin:0 auto;}#nav ul li ul li{float:none;display: inline;}
  3. Or, you could use this if you want it to truly stick to the bottom right corner: position:absolute; right:0; bottom:0; I'll try to explain what's going on in your code so you have a better idea how to procede. position:absolute; takes the element in question out of the normal flow of the document. For example, if I had three paragraphs in a row in an HTML document, normally they would apear in your browser one right after the other in the same order they are written in the HTML document. However, when I use position:absolute on one of those paragraphs, I'm removing it from the document flow, and can position it anywere on the page, relative to the top, bottom, left, and right sides of the browser window. I made a really quick codepen to show you exactly what I mean: http://codepen.io/anon/pen/sLdzJ When you look at the HTML, paragraph one, paragraph two, and paragraph three are in order. But when you look at the way the code is rendered, paragraph two is taken out of the normal order and stuck at the bottom right corner of the window. So, when you say possition:absolute; right:0; bottom:0; You're really saying, take this element out of it's normal position, and put it 0px from the right edge of the browser window, and 0px from the bottom of the browser window. The reason your original code doesn't work on bigger monitors is because you're saying you want the element positioned left:0 (which means 0px from the left edge of the screen) and THEN you're saying right:-824px which moves it from the left edge over to the right by 824px. If you didn't have left:0 first, the h2 would start at it's normal position and then be moved to the right 824px which would be 824px off the screen to the right. Positioning the h2 to the very left edge of the screen, then pushing it over to the right 824px is basically the same thing as saying left:824px (ie position the elemet 824px from the left edge of the screen). When the monitor gets bigger, instead of the h2 appearing somewhere near the right edge, it's appearing closer to the middle b/c it's still only getting pushed 824px to the right from the left edge of the window. Typically, you only use left or right positioning, but not both. You would also use top or bottom possitioning, but not both, because they cancel each other out. OK, now on to the second part of your question. Position:relative; means you want to position the element relative to where it would normally be in the page. So, going back to the paragraph example, if I had the second paragraph positione:relative; and left:20px; the paragraph would appear basically in it's normal position, sandwiched between the first and third paragraphs, but it would be indented to the left by 20px compaired to the normal paragraphs. I'm not sure why you're creating a pos_left and pos_right class for the H2. The first one h2.pos_left { position: relative; left: -20px;} would position the h2 20px to the right of where it would normally be. The second one h2.pos_right { position: relative; left: 20px;} would move the H2 20px to the left of its default position on the page. If you use these at the same time, they will just cancel each other out. Seperately, neither of them will position the h2 at the bottom right of the page. I hope that makes sense!
  4. I sent you a PM about this before I had posting privelages, but wanted to reply to your thread too in case this might help someone else. In your h2 styles, take out the position:absolute and right:-824px, and add this instead... float:right;
  5. You already read this suggestion in a PM, but I wanted to post it here in case it helps anyone else. Sorry, I cant post in the forum yet. Here's the answer to your question: Instead of using whitespace and display properties, use float and clear. IE use something like this:div{float:left; clear:both;}Here's a codepen to show you how it works: http://codepen.io/anon/pen/tzvmD
  6. I sent you a message before I had postng privelages. Here's that message again in case it helps: In CSS, overflow:hidden should work... but it will clip any content that doesn't fit in your iframe so you would need to make sure your iframe is big enough. Otherwise there are iframe properties that you could add in the html - scrolling="no"frameborder="0".Overflow:hidden should cover it, but if it doesn't work in all browsers, adding the scrolling="no" property to your html will cover the cases where the css solution doesn't work.
×
×
  • Create New...