I have been trying to figure this out for a few hours now, using the Chrome inspector but no luck. I'm probably missing something simple.
Have a look at this page: http://newslines.org/wiki/category/computer-people/aaron-swartz/
Please check the position of the comment link (looks like a speech bubble on the right of every post)
I took the comment link from another site, however on that site the box used position:absolute. I have tried a lot of variations but I cannot get absolute to work and it only works for me using relative positioning. However, this leads to spacing problems between the post titles and the body text and if you look at the entry for "September 16, 2012" you will see that the comment bubble is lower down than it should be.
Any help most appreciated!
Try this:
.container .comments {
background: -moz-linear-gradient(center top , #6FB1F0 0%, #589CDC 100%) repeat scroll 0 0 transparent;
border: 1px solid #4A8ECF;
border-radius: 3px 3px 3px 3px;
float: left;
height: 25px;
position: relative;
right: -20px;
top: 20px;
width: 34px;
}
.archive-layout .post .title {
float: left;
font-size: 22px;
width: 650px;
}
Related
I'm working on a presentation with ioslides (Rmarkdown). Since the corporate design rules for our university state that the logo should be on the right side (so the two faces look into the document) I'ld be happy if someone can help me with adjusting the ioslide theme via css or in the pandoc template.
The image and grey box should come in from the right side. I wasn't able to do that. All I could do was making the grey so long that is reaches the right side (which moves the logo as well cause it is relatively placed to the grey boxes right end as it seems to me).
Here is some CSS code I already found and experimented with:
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 90% !important; # with 250px instead of 90% it produces the image posted below
height: 170px !important;
}
This is the code produced after kniting: https://box.hu-berlin.de/f/d3d9e907fcef41a0bbf1/
I don't understand where the gdbar code resides in the first place. Would be happy about a hint here as well.
Edit: I have now this CSS setup and am almost done. Only the logo should be shifted a little bit to the left.
.gdbar img {
width: 150px !important;
height: 150px !important;
margin: 8px 8px;
}
.gdbar {
width: 250px !important;
height: 170px !important;
}
aside.gdbar {
left: initial;
right: 0;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 10px;
background-position: right;
}
Best regards, Simon
Your element has left: -1px property what makes sure it's always on the left. If you set left to initial:
aside.gdbar {
left: initial;
right: 0;
}
or you remove this left setting then your element will move to the right.
I have an issue where you can clearly see the parent in the top right and top left corners of the child.
I have tried with using overflow: hidden; on parent as well as using border-radius on the child.
The issue is a bit hard to explain but you can clearly see the issue on the fiddle.
https://jsfiddle.net/2Lccaf0u/
edit: Here is an image showing the issue as well (using chrome)
An easy fix would be to make the outer element have a large radius than the inner for only the top portion
body {
background: #000;
}
.outer, .outer2 {
width: 200px;
height: 100px;
border-radius: 15px 15px 5px 5px;
background: #fff;
margin-bottom: 20px;
}
.inner, .inner2 {
background: #111;
width: 100%;
height: 50px;
border-radius: 5px;
}
Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
So Facebook displays a popover showing a profile-preview of the person on whose name you're hovering. If you have problems reproducing this, because the popover always appears on top of the name, just scroll down a little, leaving it not enough room to be shown above the name. Here's an example:
http://i.stack.imgur.com/bD1lk.jpg
(apparantly i need 10 posts for images.. sorry!)
There's this little triangle showing its part of the respective background image. What technique was used to achieve this? I haven't been able to come up with a solution, yet. Since it doesn't seem to be css3 masking and generating a single image for each picture would be kinda overkill...
I hope you can help me out here.. Either i'm just using the wrong search queries or the solution is deliberately hiding from me!
Thanks in advance!
Cheers
// edit:
I have played around a little more and found out, that the space around the triangle definitely is transparent as seen in the following picture:
http://i.stack.imgur.com/7jBIj.png
This means it's not the technique shown by kalley (which is a really nice start, tough!).
You could try something like this: http://jsfiddle.net/Z6fYj/
It requires that you know the background color that it's going to be on top of, but you can see the effect.
.img {
background: url(...) no-repeat;
background-size: 500px auto;
/* -10px relates to the top position of :before */
background-position: 0 -10px;
width: 500px;
height: 372px;
position: relative;
margin-top: 20px;
}
.img:before {
background: url(...) no-repeat;
background-size: 500px auto;
/* -40px is the opposite of the left property */
background-position: -40px 0;
position: absolute;
width: 0;
top: -10px;
left: 40px;
content: '';
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
}
I'm not sure if that's exactly how facebook is doing it (can't seem to trigger the mouseover manually...), but this can probably give you a start.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/