Go to this link to get the code
http://jsfiddle.net/o3rh4oeb/
Go to this link for actual design I want.
http://www.bbc.com/news/
See here my problem is the white spaces,between the boxes.How to get rid of it,I tried both margin and padding 0px but never worked for top one not the below one :(
help me please...
The ul in the #topicmenu section has a margin-top applied by the browser. You just need to remove it:
#topicmenu ul {
margin-top: 0;
}
Related
I must change two things:
Move the Header, so that it is on the same "view line" like the
unordered List.
Make a frame around every box, so that any letter
not hit the frame.
Here is the Image and the url It's on the Startpage before the footer.
CSS
https://gist.github.com/DarthKeks/5eacceba397d8d950d06d448f7b473ac
HTML
https://gist.github.com/DarthKeks/19a7645e4d831106de674d92f92fa85e
Thanks for your answers.
I'm not really sure I got what you meant, but maybe trying some padding and margin might help you:
.box {
padding: 10px;
}
.box h3 {
margin-left: 20px;
}
https://jsfiddle.net/gg3m397b/
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important; that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.
Short solution:
* {
margin: 0;
padding: 0;
}
/* your styling */
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox:
-moz-padding-start: 0px;
I had this issue for a menu aswell and tried to correct it in the ul .navigation {} style I was using but didn't work until I reset it in the ul {} itself - incase anyone else has the same trouble.
I have made a dropdown menu. I need a 25px x 25px image to the left of the dropdown list's text? Every time i try, the image will not appear? Why? and how do i fix it? I have tried and tried, but the image will never appear. http://jsfiddle.net/Hunter4854/M4Ef2/1/
Try:
.custom-select ul {
...
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
}
I don't think you can put an image tag in a option tag, the best thing would be to set a background image and padding on the option tag.If you look at the script you'll see that it rebuilds the .custom-select ul that's why you lose any <img> in the markup, check out this fiddle where I comment out that code.
$('#test_select option').each(function(i){
html.push('<li rel="'+$(this).val() +'">'+$(this).text()+'</li>');
});
$('.custom-select ul').html(html.join(''))
Unless I am missing someting, I am not sure why people are suggesting stuff with <li>. If you want the 25x25 image to appear in the drop down, use:
CSS
select#test_select option[value="graphic designer"] {
background: url("myimage.png") left top no-repeat;
padding-left: 50px;
} // continue with every value
I am using custom bullet points on a website.
Now this site will also be available in Arabic.
.post ul li{
color: #555555;
background: url(images/ico-bullet_round.gif) no-repeat !important;
background-position: 300px 6px !important;
padding-right: 15px !important;
padding-left:0 !important;
direction:rtl;
}
However with direction:rtl; I am unable to have all the bullet points on the right side. Some are more indented than others.
Please see a screenshot showing the problem.
Any suggestions on how to simply align all bullet points on the right?
UPDATE: Please see this screenshot with background-position set to 0 6px. It has something to do with direction:rtl; but I can't figure it out.
Is there any reason why not simply list-style-image, which is designed specifically for custom bullets?
ul { margin: 0 20px; padding: 0; }
ul li {
margin: 0; padding: 0;
list-style: disc url(images/ico-bullet_round.gif);
direction:rtl;
}
works for me, assuming you do mean the right-hand side when you say “right side”. You could have them on the left as well if you wanted by putting the rtl on a child div inside the li, but that'd look a bit strange for Arabic, I think.
I had the same problem and got over it by using:
ul{direction:rtl;}
li{direction:rtl; margin-right:20px;}
The functioning attribute is using: margin-right:20px while using direction :rtl
Thanks
One solution could be to put background-position like this:
background-position: 100% 6px !important;
I supppose that the direction: rtl, does not influence in backgrounds.
Trying using • at the beginning of the sentence, while aligning everything to the right. That way you can get something like this:
مرحبا •
Try ::before and ::after in css styling and your rtl file and use JavaScript to release css effect.
Example:
this is (RTL list but bullets are not suitable
Here are you Css code for before RTL.
ul.points li:before{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
Then After i made RTL file i used this code :
ul.points li:after{content:"\f0c8";font-family:fontawesome;color:#135588;margin-right:7px;font-size:.75em}
but look for this image ( it has bullets before and after ( hence your turn to remover it using javascript (add class and remove class) to Css:
this is (after) rtl css style
I wish this helps noting that it's my first comment in stack ever!
Try background-position: right;
Worked for me.