I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.
Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...
Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.
SO sorry for the messy code, I'm going to clean it up once I get this stuff working.
EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.
Look at your code. You have defined width twice. use width:97%;
#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%; ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%; ********
}
Related
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 trying to get two font-awesome icons to always display over a series of divs.
When the user hovers over the main details, I can get the details to be surrounded by a border with a different background. However, this does prevent the the icons from being displayed correctly.
I understand that this requires the use of the z-index, but all of my attempts to display the icons correctly have failed. I have searched SO & Google, but still cannot solve this simple issue.
This is what I am attempting to achieve:
This is what I currently have:
Here is my JSFiddle example.
I would really appreciate some assistance solving this issue.
Just some code to display the jsfiddle:
<div id="id_membership_details_resume_template" class="live_preview_wrapper noselect resumeStyleWrapper10" dir="ltr" style="direction: ltr;">
Remove this
#id_resume_detail_content {
position: relative;
}
Edit: and update this also for the X button ( just changed top and right according to jsfiddle provided template )
.resume_details_unselect {
position: absolute;
right: 15px;
top: 45px;
visibility: hidden;
}
I am having a very weird problem. I do a css 3 cardflip animation for my portfolio. In Firefox everything works fine, but in chrome for some reason the first card has a wrong direction for the animation. As you can see, the left image shows the wrong animation, stretched wrong, while the right one is perfect. All the cards are created by a script so there can not be a difference in the html markup or the css for that matter.
Any Ideas? What kind of information can I provide to help figure this out?
Cheers Lukas
Update
.card flip
{
text-decoration: none;
text-align: center;
float: left;
position: relative;
display: block;
z-index: 30;
}
Remove perspective and webkit-perspective they causing error
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}