Could someone take a look at the following link of a work in progress test page for my new website - http://goo.gl/YwGiB
I'm new to CSS, and I have come across some issues that I can't figure out without some expert help. Could someone answer me three questions and possibly an explanation of how to amend it?
1) Why does my middle column by default split itself into sections, whereas my right hand column is pretty much the same but does not have the divisions? What could I do to cause that to default in the right hand column?
2) I am looking to have a box in the right hand column running parallel to the first box titled 'news' in the centre column, and then a second running parallel underneath this (with the box titled 'blog' but it will have an irregular length. What would be the best way to do this? Would this be a case for using the standard positioning commands to shift them into place or is there a better way?
3) I have stripped the padding and margins from my h1-h3 tags (specifically the h2 tag) yet there still appears to be space above the lettering. It is more pronounced when using the font MerceariaAntique which is going to be the final font, but unfortunately I am unable to amend my html file to show this right now. I am attempting to resolve it by adjusting the line-height but I am not getting anything consistent. Is there anything else I can do other than make line-height and margin adjustments?
Thanks in advance
Firstly, in your markup, you have divided your sections using the <div> element, which is completely acceptable, however you have used the same ID to identify each of them. This is what classes are for. IDs should be unique and only used once on a page, classes can be used to apply the same styles to multiple elements.
So this:
<div id="newsitem">
should be this:
<div class="newsitem">
Answers to your actual questions now!
By default, paragraph and headings have paddings and margins set. The reason your sections have spaces is down the margin on the paragraph tag. Removing this removes the space, but also brings the text together with the next heading. You can over come this by giving the <p> tags 0 margin and giving them padding, or giving padding to the section container instead.
If you want the boxes in the right hand column to line up with the ones in the middle column, you'll have to change how your layout works so that you have rows rather than columns I think. That would make it easier to line them up.
From your description, you should then have the following layout:
middle column | right column
middle column | right column
middle column
To maintain the background colour of the centre column, you could apply the background-color property to the class .centre or to be more specific .column.centre (this type of CSS selector might not work in IE6 though).
The issue with the H2 is down to line-height, each font may have a different line-height so you will have to play with the value until you get it right. If you find you're getting the top position right, but text underneath is getting closer or overlapping, give the H2 a padding-bottom value.
I see you are using h2 and h3, but I can't find an h1 that you mentioned. I'd remove "line-height" option from your css to prevent wrong/incorrect spacing.
To run div's parallel you need to have the same padding and margin on both divs (the left and right side). To do so just create a class "floatingColumn" that would float to the left and append it to both divs with all the margins and paddings.
Related
I am new to css. I am having an alignment issue in one of my html pages. I have created an invoice page, which can be viewed at: https://www.w3schools.com/code/tryit.asp?filename=G6HQYBZLNH3Y .
When you will open this page you will notice that one of DIVs is slightly more to the right and one of its edge is pointing out. i have tried multiple things but i am unable to set its alignment. I will be really thankful if anyone can solve this issue.
The Bootstrap .row class adds negative margin to the left and right, and the .col classes add padding to the left and right. You have tried to counteract this padding by adding columns to the container to wrap your rows which in turn wrap additional columns.
Try removing those wrapper columns. This will allow the previous rows with black backgrounds to extend further, the text will line up better, and then the div in question won't extend further than the previous rows.
https://www.w3schools.com/code/tryit.asp?filename=G6HS3SOMWWM8\
A few days ago I found this nice psd Landing Page and I'm not sure how to style it. I've seen this kind of styling long time ago.
Should this line be an image or something?
Moreover, can you send me some code examples of similar style?
Screenshot
I have wanted to make one of these before so I whipped this up in 10 minutes, I am using SCSS - to view plain CSS click the drop down chevron next to "CSS (SCSS)" then "View Compiled CSS".
http://codepen.io/z-/pen/bwPBjY/
Analysis of what I have used:
Each event is .entry and they are all contained within .entries, .entries is centered using margin:auto and given a width with a percentage with a maximum width with pixels in order for various screen size support.
Every other entry is on the same side so I'm using :nth-child(2n) to select all even numbered entries so I can float them to the right and text-align to the left; I will be using it to override default styling given to the odd numbered enties.
To put entries on either side of the line I make the width calc(50% - 80px) which basically means that there will be an 80px gap between the text and the line because we are floating outward. We also want the entries to be fairly close height-wise (the image you gave the vertical spacing is uneven so I just ignored it and did my own thing) so we give a negative margin-top of -60px, we also want to make sure that the overlapping that we do is what we want so we need to add in clear:both to stop elements drifting into the open space; so the first entry doesn't vanish off the top of the page we can use the :not() selector .entry:not(:first-child) {margin-top:-60px;} and this will give the negative top margin to all but the first element.
To add the circles we use pseudo-elements :before or :after, I'm using the title as the base and just make a circle and move it out towards the line a number of pixels.
If what I've said has just gone over your head then I suggest you get some base knowledge from somewhere like https://codecademy.com/
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
This has always bugged the hell out of me. Why are lists like this? If you set margin and padding to 0, you would expect it to align normally at the left where the text around it would be, but no. That's where the text within the list item tags begins, then it renders the bullets and/or numbers to the left of that, overlapping borders etc. Why have they not fixed this yet? Who in their right mind decided that to be the behavior for lists? You can't even specify an accurate padding or margin for the left to keep the numbers aligned with the normal text because it does not automatically move right when the number count reaches a higher level (e.g. 9 -> 10, it's now 2 digits and takes up more space at the left).
Anyways, a question: Is there any simple way (not using JavaScript, etc) to fix this issue, preferably in CSS? I'd like to make the numbers at the left still aligned to the right but still have the entire list aligned to the left with the text.
lists http://img338.imageshack.us/img338/8957/lists.jpg
I know you can achieve this using tables, but that's not really an ordered list, now is it?
Edit: Notice how the list-style-position property makes the tenth element push the text right, making it uneven. I want to move the dark blue box above right so that the left edge of the dark blue is aligned with the text around it, but I can't simply set a padding value because the amount it needs to move over changes depending on the number of items.
list-style-position http://img707.imageshack.us/img707/9277/liststyleposition.jpg
To get that effect use: list-style-position:inside;
http://www.w3schools.com/Css/pr_list-style-position.asp
Another (little old) article on the possibilities with lists: http://www.alistapart.com/articles/taminglists/
As the other poster mentioned, the default position is outside.
Styling lists is very hard to deal with cross-browser due to the inconsistency and bugs. I would recommend using either JS or a server-side script to generate a span element containing the number and style it accordingly ( using a loop and whatnot ).
Pretty sure it's impossible to style cross-browser taking IE's horrible list rendering bugs into account.