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
Related
.grid-layout .hentry {
position: relative!important;
display: inline-block;
width: 30%;
margin: 5px;
}
Can someone help me with this code? I placed this additional code for 3 'Posts' that should be
displayed in a horizontal but straight; upward moving line. But the posts are not displaying in a
straight line but in a descending format. Like a staircase. What can I do to fix this?
You can try several solutions:
Set the position to relative
Use <pre> in the HTML file
If none of these work try setting the display for block
Please tell me if it works.
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.
Please look at my jsFiddle: http://jsfiddle.net/AnNyf
I am trying to get those icons to fit right under that block of text there on the right. I've tried a lot of methods but I just can't get it to work. I'm just a bit rusty on things so I need a refresher.
Thanks in advance!
add right:300px to your li css class
header#header .inner .networks li {
float: right;
list-style: none;
margin-top:122px;
position: relative;
right:300px; //recommend you play around with the value
}
http://jsfiddle.net/AnNyf/2/
I want to give captions to the images. There are two options I find.
By jquery
By only CSS
I think the second one is the cool way to go for it
I think airnb is doing it second way.
but I could not figure it out using firebug.
can you give me a simple example or any useful blog link for the same.
There's option 3) Through HTML (and CSS). Why not just add a caption in the HTML?
But to answer your question, if you want to do it in CSS, you can using something like this:
img {
margin-bottom: 50px; /* Make room */
}
img:after {
content: 'The caption of the image';
display: block;
position: absolute;
top: 100%;
}
You will still need a container for the positioning to work. And I can imagine the caption text should not actually be in CSS, so a pure CSS solution isn't ideal.
I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called Flickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.
(sorry about it is danish)
So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.
Thank you!
PS. i wan't as much as possible to not use tables.
Here is my suggestion.
HTML
<div class="photo-row">
<div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>
CSS
.photo-row .photo {
background-color: rgb(230,230,230);
display: inline-block;
vertical-align: middle;
width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }
Example: http://jsfiddle.net/xYZjL/
That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.
You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".
Then you can use CSS to define float and clear layout rules for each.