I make tumblr themes (though I'm not a professional nor a student in any way, I learnt what I know by messing around) and I've been struggling with a 'malfunction' regarding post images.
Basically when you hover on a post, the images 'lose' a few px to the right just to 'get them back' after a few seconds, and this is affecting both full images and the eventual image padding - this only happening in webkit browsers.
Here's an example:
http://songbirdtheme8.tumblr.com/
and the code:
http://pastebin.com/XZgihVeX
If you scroll down the page you can see that the picture of cotton candy is not affected by this. I'd like to know:
Why is the whole thing happening?
How to fix it?
I found the solution but I can't exactly tell what the problem is.
Here's the solution: #post img { padding-right: 0 }
(not related) You shouldn't use the same id for multiple elements, you should turn #post, into .post (you'll have to figure out why by yourself)
Related
I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
I have a little experience with dabbling in css but I cannot figure this out. I bet there is only one number somewhere thats wrong but I cant find it.
I was wondering if someone could please help
Website: www.maxanthonyphotography.com/portfolio
P.s The website isn't finished yet anyway but my ocd is driving me mad
thank you in advance
Looking at the style.css file you have around line 2120
div {
height: 650px;
(etc)
}
This will mean that all div tags on the page will have a height of 650px (unless you override it with a class or something).
for now try changing that line to height: 100%;
for future reference (depending on the browser) right click on the page and go to inspect element, this will show you what is going on with different elements on the page.
Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.
I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?
This is my site:
http://www.djeveln.com
On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.
Here's my HTML:
<a class="ButtonLink" href="http://www.djeveln.com" title="Home">
<img src="/images/button.png" class="TestButton"></a>
Here is the CSS I use for the image position and size:
img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/
position: absolute;
width: 100px;
height: 75px;
top: 400px;
right: 250px;
}
Hope you can help me! :P
Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".
Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.
One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.
At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?
If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.
You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.
I have a menu that's been giving me quite some trouble. What I'm trying to do is make the menu links, when clicked, reveal a drop down secondary division. However, it's acting as if the menu being revealed is floating and I can't seem to figure out why.
Here's the ideal design I want:
http://jsfiddle.net/WeL6j/7/
Notice how the grey division is affected and slides down as well.
I'd like the same thing to happen with the divs that hold 01, 02, etc and the one with the green 01. Basically all the content below the menu. I've posted a fiddle of my code just to give an idea of what it's doing and so you can edit it in real time. I haven't created any fallback code for it, so it's only really viewable in chrome. (sorry) It's also going to be messy as I've been moving things around trying to get it to work properly. Anyways, here's what I have so far.
-removed-
Thanks in advance for the help, Brian.
Try this:
http://jsfiddle.net/ETaqa/63/
BTW, you should really format the nesting. It was confusing figuring out the div levels.
Hi you can define some properties in you css as like this
.content {
position: relative;
top: -7px;
z-index: 10;
}
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).