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/
Related
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
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 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.
As demonstrated here, I've built a fixed menu using unordered lists and a lot of css. I've also included a button with a custom class that redirects back to the frontpage and made it a litter bigger using font-size: 130%. By using line-height: 0; I was able to force all buttons to be the same height. Unfortunately, somehow an extra pixel of height is added to the menu and the big button sticks to the top, while the rest of the buttons stick to the bottom. Apart from seriously triggering OCD, it looks plain ugly when hovering, so I'd like to fix it. I am at a dead end and cannot solve this by myself, so I would like to ask anyone to help me out.
Thanks in advance!
li.menu-titel {
font-size: 130%;
font-weight: lighter;
overflow:hidden;
line-height: 0;
}
Simple format all your li with display:inline-block (instead of inline),
or remove the vertical-align:top;.
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