I'm having some frustrating trouble with my FAQ accordions at the bottom of the following page.
I need to put about 50px of space in between them, but nothing seems to be working.
Any suggestions?
Try adding to your css:
.accordionButton {
margin: 25px auto;
}
.accordionContent p {
padding-top: 10px;
margin-top: 0;
}
div.accordionContent {
margin-top: -25px;
}
Hope this helps :)
Step 1: Wrap each question and answer in a div in my example I've given it a class container
Step 2: Remove float:left from your styles
Step 3: Add margin-bottom to the container
.container {margin-bottom:50px;}
Example: http://jsfiddle.net/c6Kvz/2/
For a tidier more semantic version please see: http://jsfiddle.net/VyzqR/. This uses CSS for the hover effect instead of javascript. Feel free to replace th h2 tag with what ever hx tag mages the most sense for your document layout, just don't use h1!
You may also want to investigate CSS Sprites for your background images. This will reduce filcker while the images load on hover or click.
Related
I'm trying to increase the bottom padding of my headline in my blog and for some reason it is not being possible.
This is the code that I'm writing to increase the padding:
.post .type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
Entry-title and Entry-content are the classes for H1 element.
Here is the link of the page where this issue exist -> https://www.writtenlyhub.com/writing-product-description/
I think this will help you in understand my problem better.
Please do help me out here.
Thanks
Simplest would be to use padding-bottom: 50px;
While there is nothing wrong in using shorthand, there is a recent video from Kevin Powell explaining some gotchas, I recommend you should watch it and some other videos on his channel.
.post .type-post would select an element with the class type-post, that is a descendant of an element with the class post - but you don't actually have that in your structure.
You have one element that has both classes - so the spacing between the two classes in your selector needs to be removed,
.post.type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
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'm very inexperience with html and only know the basics for my Tumblr blog. My question is probably very simple but I'm very pissed off at it and I'm losing sleep because I will not sleep without fixing it. So waaay in the beginning of my code, I have:
.post img { width: 100%; }
and then waaay later in the code, I have:
div class="asker-info"><img src="{AskerPortraitURL-24}" alt="" class="asker-avatar" /> {Asker}></div>
My problem here is that whenever someone asks me a question, their avatar appears 20x literally the size it should be. I've checked it out on Google Chrome's "inspect element" and found that the .post img part of my code cancels out with the width part in this section:
.asker-avatar {
float: left;
width: 24px;
margin: 5px 10px 5px 10px;
}
I'm so goddamn pissed off and nothing makes sense
Could you try this and tell what happens ?
Here you create a css class with the image size you want. You set the width what you want, and the height auto, it must pick a good value depending on height
.asker-avatar
{
width: 24px;
height: auto;
margin: 5px 10px 5px 10px;
}
Another question, can you put here the asker-info class you use in the div ? Could be that class the problem with your img ? And maybe you could try to remove the .post img {width:100%} because can make the img to resize to the 100% width of the div
And here you can practise with images sizes and resizes, and you can read some explanation about the img attributes, it's an useful page:
HTML_IMAGES W3SCHOOL
I fixed it!! Oh my god, am I relieved! I noticed that my own avatar was not affected by the .post img so I looked over the class and found out that by simply adding an id="_", you can change it!!
It's not working because the CSS selector .post img is "more specific" than the selector .asker-avatar.
Since .asker-avatar appears lower in the style-sheet that .post img, it will be enough to make that selector as specific as the one you want to override.
I'm not an expert on CSS specificity (this guy is), but try changing the .asker-avatar selector to img.asker-avatar (note - no space between img and .).
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.