As part of my education, I am reading the code to the following website, and trying to figure out how it all fits together.
http://p.w3layouts.com/demos/resume_pages/web/
My question; upon inspection of '.logo h1 a' (the word 'Resume' in the top left corner) I see that it is floated left, with 0 margin and no additional positioning. Why is it then, that the element does not sit 'flush' to the left-hand margin of the page? What is instructing the element to position in the way it has?
the '.logo h1 a' is sitting inside of a div tag with a class of 'header_style1'.
'header_style1' is sitting inside of a div tag with class 'wrap'. If you look at the CSS code for '.wrap'. you will see that is set to have a width of 80% and is also centered to the page.
Since '.logo h1 a' is ultimately sitting inside of the '.wrap' tag, it is being loaded to the left of that tag.
Related
For a class project, I'm currently constructing a personal website as a project from scratch in an attempt to learn HTML and CSS. My site is coming along just fine, until I get to adding text.
Below is a screenshot of my homepage. As you can see in my first image my h3 text is scrunched up on the bottom of the page, and the h3 elements are overlapping/stacked on top of one another. I have no idea why this is happening. I wanted to make the text underneath the h1 tags and nicely spaced out to make a landing page, see the mockup.
The HTML and CSS code can be found below:
I am having a similar issue is evident in my other pages as well. For example, on my About page, I envisioned it having a red gradient background with white text on it spaced throughout. Instead, I get this scrunched up text in the center of the page:
The CSS for this section can be found on the CSS image above, but this is what some of my HTML looks like
I'm sure my text overlapping issue is a quick fix, but I have no idea what it's doing or why. If anyone could help me out that would be great. Thanks
the overlapping is caused by either position:absolute, margin-top or top element in your bodyText class. Just remove the top and margin-top from bodyText class and put them in another class. use different padding for different paragraphs. here you are using same padding for all of your paragraphs so they ended up coming in the same place.
.bodyText{ margin:auto}// put other elements except top and margin-top and position:absolute
.paddingtop50{ top:50%}
.paddingtop70{top:70%} // don't use this if not required
<p class="bodyText paddingTop50">Loren ipsum dolor sit amet<\p>
<p class="bodyText">Loren ipsum dolor sit amet<\p>
You are seeing the overlap of text because of the position: absolute set on your h1, h3 and .bodyText.
Both your h3 elements have top set to 100%. This means both will try to position themselves at 100% (of the height of the containing block) down from the closest relatively positioned element, which I'm guessing is the body element in your case.
This is the same for your two p elements as well with the class of bodyText. Both have top:50% set, which will make the elements appear in the same position, causing the overlap.
If you are looking to vertically center your text in the screen, there are better ways to do that.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.
i created two divs first a red background div and then a blue background div both having a width height 100px. Blue div appears below red div. However if i apply a float left or display inline.Blue div appears next to red div. I want to understand how elements are placed on a html page what does applying float or display inline makes a difference to it.
See The Visual Formatting Model in the CSS specification.
Divs are "block" elements which means they have a line break before and after them, making new element appear below them.
If you set display to "inline" then they become inline elements removing the line breaks so new elements appear next to them.
Floating left makes an element "float" on to the left of the page (or containing element), content then flows around the right side of the element from the top of the element (it was designed to replace the "align" attributes for images).