http://www.edsys.in/smart-card-solutions/ the list in the first block shows the first list bullet to the right side of the list compared to other.i have given
text-align:right;
to the list but did not work .
please help
What is happening here is that the star icon of class icon_up span into the block of your list for some reason, which cause the bullet to go the right.
Adding some <br/> before the <ul> will fix the issue.
Edit : Even if you accepted this answer, I did not found it was a good fix. An other solution less evil would consist of simply wrapping the <ul> into an inner div.
Try adding
Float: right;
I'm sure that is what you're asking for.
If you are looking to place the bullets on the other side, I think you may need to use an image.
Related
I'm a beginner with HTML and CSS, and I'm making a site for a friend. On this page http://mypersonalcredo.com/categories.php I can't get that last "Coming Soon" photo to shift up into the row above. I'm sure it's a simple fix, but I just can't seem to figure it out. Any help would be great and thank you!
Very easy fix: replace float:left; with display:inline-block; on your category class.
You may want to use vertical-align:top; as well to align the upper sides of all pictures.
Just remove the <br> after the "Wear What You Believe In!" text. inside .catdesc related to the t-shirt div.
It should fix it.
To see what is causing the issue you can open the developer console and then inspect the "Wear What You Believe In!" text . Remove the <br> element selecting it and pressing the DELETE button.
It works if you add:
clear: left;
to the ones that are stuck on the right and they will go to the far left underneath. I added it to that div for the "Cards". Check out the screenshot below:
It also may help for you to read more about using clears and floats.
Check out this article: https://css-tricks.com/all-about-floats/
This is because your image with the shirt is to large with the extra text undeneath and is making the floating elements push each other down. See image for example. To fix you will have to make it take up equal amount of space as the other category elements
I have 2 gaps in my unordered list that I cannot find the problem source or a proper solution to fix it.
An element.style {clear: left;} applied to the <li> tag immediately to the right of the space seems to clear the space to the left, but another randomly appears further down the page.
I am sure that the fix is simple, but all of the information that I can find seems to fit around multi-sized link images or a pattern of space. On the affected page all images should be the same size, 150x150, and the gaps seem to only affect 2 links out of 25+ listed. I nevertheless tinkered with their findings to see if it lead me to a solution, the closest I came was the above.
The affected page is here.
The page code and CSS are here.
I appreciate any advice that can be given, on how to properly resolve this issue. My solution seems to only mask the true nature of my problem.
Try adding this rule:
#list-1 >li:nth-child(3n+4) {
clear: left;
}
Try:
#list-1 #desc {
width: 150px;
min-height:44px;
}
I have this really tricky CSS formatting issue that i need a quick override fix to align the bullet point with the table I have as a list item. Don't ask me why we have a form like this, but we're using JSF for an internal tool that QA is complaining about. Regardless, there is a table that contains the dropdown box and those radio buttons you see inside a <li></li> block.
What can I apply to either the table, the li, or wrap it in something else to get the bullet point to be vertically centered with that table?
Many thanks!
I have seemingly fixed the issue for IE, but not Chrome. We only are concerned with IE in the company, so I figured I'd post my solution.
I set the list item to have a vertical-align: middle; and the table to be display:inline;.
If anyone has a better solution, I'd like to hear it for the future. Thanks!
I know there are tons of questions regarding floats, but I seem to be a bit stuck on how to overcome this problem.
See my example here: http://jsfiddle.net/eE9WT/1/
What I am trying to do (or infact, trying to avoid) is the third .float div starting once the second .float div has started.
I would prefer the third div to fall directly underneath the first, making use of all space on the page. I'm aware that I could separate this into two columns, but I was wondering if there is a better solution without having to do that.
Believe it or not, within my 5 years of developing for the web this seems to be the first time I've been faced with this problem!
Thanks guys
This article would help in creating a Floating Box Layout: http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm
Also check out his other layouts, just in case they seem a better fit for your design!
You can add a rule for the second float to be right
.float + .float {
float: right;
}
I think this is the solution you are looking for:
JSFiddle
I moved all the div's to the left with float.
Made some space in the right side of the screen with padding-right on the container.
And then used the position: relative; to moved the second column to that space.
Display:inline-block;
zoom:-1;
More than float it do something for you. Only some rare case am using float. I know this is not meet your goal, I just explore my side.
I have a list of items that I am displaying in a floated list, with each item in the list at a fixed width so that there's two per row. What is the best practice to prevent this horrible thing from happening:
alt text http://x01.co.uk/floated_items.gif
Possibilites:
Trim to a specified number of characters before displaying the data. Requires guesswork on how many characters will be "safe".
Overflow: hidden. Hacky.
Remove the background and just have a top border on each item.
Possible but silly:
Have a scrollbar in each item by doing overflow: auto, this will look horrendous.
Add a background image to the container. It's not guaranteed that there's always an equal number of items so this option is out.
Any help on this irritating issue appreciated!
Are you using a fixed font size, i.e. specified in px? If not you also need to consider the various text size options of each browser which is probably going to make the concept of trimming the string redundant. If it is fixed then perhaps seeing how many Ws you can fit in and restricting your text to that -3 and appending an ellipsis, not sure what this list is for so that's one approach.
Personally I'd probably use overflow:hidden as that covers all eventualities and ensures that it'll always keep your layout consistent.
I guess the last option would be to keep a tight control over what can be added to the list and prevent the problem occuring in the first place. Prevention better than cure as they say, although probably unhelpfully.
There are scripts that help with this by comparing the li in blocks of two and making them both equal to the tallest.
Usually, rather than thinking what's best from a css point of view though, you should consider what presentation you want, then get the css/JavaScript to get you to your desired effect.
If this is something that you're just wanting out of the way, consider using a gradient background image that highlights the top of the li and suggests the block without actually filling it in.
Adding link to a jQuery solution: Equalize
One solution would be to have a alpha-based PNG that would slowly fade the text to the backgroundcolor of your container, on the last 10px or so. That would look good if some text are considerebly shorter than the long ones, however in the case where the text would be equal to the container it could look kinda silly.
Of course, in combination with display: hidden and white-space: no-wrap
From an accessibility point of view it's not a good idea to simply hide the title, since that could hide content on people who increase font sizes due to bad eyesight. Your design should be able to float when hit by bad resolutions or similar obstructions, even if it floats into something less pleasing to the eye.
Now if I understand your issue with the background image correctly, I believe your problem could be solved using the techniques describes in the ALA article on sliding doors, where the background image expands with the content.
Here's some controversy for you.. use a table?
Sounds like you have a grid of data to me, would a table answer this problem for you?
It also raises the question, do you actually want the items to be the same height, or just have the same amount of black background behind them? You could apply the black to the row's background, then create the centre white separator with borders and margins.
You could try using:
ul li{
display:block;
float:left;
width:6em;
height:4em;
background-color:black;
color:white;
margin-right:1em;
}
ul{
height:100%;
overflow:hidden;
}
div{
height:3em;
overflow:hidden;
background-color:blue;
}
Don't know about cross browser consistensy though.
EDIT: This is the html I'm assuming:
<div>
<ul>
<li>asdf
<li>asdf trey tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>