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.
Related
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 am building a web page that displays user information. It looks like this:
As shown in the colored legend, the form contains a label and an ordered list. CSS has been used to give both display: inline and make the list appear as a comma-separated list of group names. Here's the relevant HTML fragment:
<label>Group membership</label>
<ol>
<li>domain users</li>
<li>denied rodc password replication group</li>
</ol>
The problem
The form's width as a whole is unknown (it's fluid). The label has a fixed width in order to support right-aligned text, but the ordered list is free to consume the rest of the available space horizontally.
However, this is what happens when the list of groups becomes large:
The list needs more space than is available horizontally, so it moves down and appears detached from the label and the label/display element alignment goes out the window. This looks really bad.
What I want to achieve
The list should expand downwards as necessary, but it should remain anchored next to the label (as would happen in a table-based layout where the two cells would have vertical-align: top).
Is there a CSS technique that will allow this easily? What would be the least invasive method to achieve the goal? There are tons of forms styled in the same manner throughout the app, so radically changing the CSS could easily impact some other form and for this reason would be impractical.
Surgically targeting the HTML for the list is possible, so feel free to recommend an alternative if that would help.
Here is a fiddle of a mockup with all the relevant styles that you can use as reference.
Instead of using inline-block, float that particular label to the left, and make the list block with a margin-left – see http://jsfiddle.net/8tx24/1/
(I made the LI inline as well, because as inline-block the long value in the second LI might make it break into a new line, which looks kinda weird. But if you want that behavior, you can keep your inline-block.)
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/
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.
i'm trying to create a frame that will contain a dynamic amount of text.
it has rounded corners so a created 3 divs:top, body and bottom.
body will hold the content while top & bottom only display the respective images of the frame.
all this can be seen here:
http://www.m-challenge.com/nimrod/modular_frame.php
the problem:
there is a space those top and bottom divs and the middle one.
please take a look and any input would be highly appreciated.
have a nice day :-)
Your issue is that the p tag has some margin on top/bottom. Give it a margin of 0 to fix that. The same would apply if you put any h#, ul and similar tags in the box.
Also, can I recommend you not spend so much time making rounded courners this way and simply use CSS3's border-radius? I know, it's not fully supported yet but you have support from most browsers apart from IE, and IE users simply get a gracefull fall back to a square box. Just a suggestion
I think you should first reset margins and paddings:
http://meyerweb.com/eric/tools/css/reset/
then apply the proper values, depending on the effect you want to achieve.