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
Related
I am currently using this code which fixes the image next to the first image. But the third and forth image are not aligned with the first image. It is only the first line that has the problem. Images on the second line all line up correctly.
ul.products li.product:nth-child(2n)
{margin-top:-25px;}
When I use this code it fixes the image next to it but throws out the image in the second line.
Here below is a link to the page that has the issues.
http://www.secsa.co.za/fingerprint-readers/
Please can some point me in the right direction. Thanks in advance
Having inspected the issue area via developer tools, the problem may be resolved using display:flex; flex-wrap:wrap assigned to <ul> containing product list and removing margin-top:-25px from the li.product:nth-child(2n)
This should fix the problem across all areas of your product list , you may refer to the link of video attached for better understanding:
https://www.awesomescreenshot.com/video/1021817?key=a7eff6742ac925aa9179172b4e03772c
This will fix your Problem.
ul.products {
display: inline-table;
}
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.
this is my first time asking a question so please forgive me if I'm not asking the right questions. I'm having a problem with my website and I'm pretty sure it's somewhere in the divs and containers. I'm trying to keep the navigation at the top and I want to put some content underneath. The problem is the content isn't showing up. Also, I made a "spacer" id to push the text down where I wanted it. I'm not really sure how to align the text at the bottom without it. If anyone could help with that also, I would appreciate it.
I don't know which parts I should post so if it's any easier, I can just post the links to the page and the .css.
The page is:
http://www.preferredcaskets.com/Untitled.html
The CSS is:
http://preferredcaskets.com/nav.css
Again, forgive me if I'm not asking the right questions. It's late and I'm a little confused at the moment.
Thank you.
You've put your background in an <img> tag, and given it position:fixed, which automatically places it on top of your other content. Quick fix: add 'style="z-index:-1;" to the <img> tag. A Better way is to add it as a background to your body (and also more semantically correct, since the background is not part of your content).
css:
body{
background-image: url("images/bg.jpg");
}
Try display inline in spacer
#spacer {
height:110px;
width:auto;
display:inline;
}
JSFiddle - http://jsfiddle.net/a4enG/
I was able to get three div's in a row, no sweat. Where the problem lies when the site is done some pages have text in the center column, however when i start typing the text spills over into the other divs..... The text doesn't wrap (stay in that div)
I'm sure I am probably missing one little dumb thing but any help would be greatly appreciated!
I uploaded a test of it for you guys to see:
http://graves-incorporated.com/test_sites/solera_new/test3col.html
and with the text spilling onto the next div:
http://graves-incorporated.com/test_sites/solera_new/test3col_2.html
I think you worry about nothing. Words like
Stufffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
are not found in many languages. You will see if you put normal language in your div, the text will not overflow at all
You could always use CSS's word-wrap CSS Word-Wrap example.
Or PHP's wordwrap() function PHP Word-Wrap example.
There are various ways you can approach it, but that should set you off in the right direction :)
I Think you must use a proper language then it will not go out of Div's Width , Becase your DIV is already in a Fixed Width.Just use another the good words instead of stuuuuuuuuuuuufffffffff. It will work fine then :).
overflow: hidden will help prevent it from breaking the layout, although some content may be hidden. I would suggest word-break: break-all, but that has a tendancy to break words unnecesarily.
http://elastichosts.darkgreener.com/cloud-support/index.html
Please could anyone explain why the table (#support-table) is being pushed down to align with 'Submit a ticket', rather than following straight on from the first paragraph?
I don't understand why the table is being pushed down, but the header and paragraph are displaying just fine inline alongside the right-hand gray block.
I assume it must be something to do with the display property of the table - I've tried setting it to display:inline, but it doesn't seem to help.
Thanks.
It's because of float: left in extra.css line 135. Remove that or change it to float: none and it scoots up to the paragraph.
You're unnecessarily floating your table left. (float:left;)
Removing this property will restore the table to the right location.
As the other answers pointed out, you have the float: left. The reason that this was causing problems is because of the clear:right that you have on the button to the right. The button is cleared to the right and the flow of the document continues fromt that point and so the table is floated to the left even with that button.