http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form
I was trying to install this theme on my blog and I noticed a little problem - the avatars in the comment section are not displaying in full, they're cut off as well as the container. I've edited the codes a hundred times but I just can't figure out what the problem is. Help would be much appreciated!
Use your developer toolbar (Chrome) and inspect the image. If you don't see anything wrong with the image, work up the DOM until you see the problem. Check their widths, heights, paddings, margins, and "top" and "left" CSS attributes.
This element <div class="avatar-image-container vcard"> has max-height: 36px which is too small.
The image element itself has width and height attributes of 35x35 even though the image is 45x45.
You're restricting the height, that's why it's cutoff.
Comment out the height rules like this:
#comments-block .avatar-image-container {
left: -41px;
width: 48px;
/* height: 48px; */
margin-top: 25px;
}
.comments .avatar-image-container {
float: left;
/* max-height: 36px; */
overflow: hidden;
width: 36px;
}
#comments-block .avatar-image-container {
/* height: 37px; */
left: -45px;
position: absolute;
width: 37px;
}
Turning off those 3 rules shows the image with dimensions that you've defined in the rule #comments-block .avatar-image-container img.
Remove these three and it should do the trick. I think padding is the main culprit here along with other things.
#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}
1) Remove padding from
2) Remove max-height from .avatar-image-container
3) You're done. Play with settings to get desired results.
.comments .avatar-image-container has max-height:36px. Remove it or your avatars will be chop off since this element has overflow:hidden.
The image also has height="35" inline, which is not affecting on chrome, but can be removed.
Related
my border is moving when you have the download file ?tab? open on chrome (haven't tested it with any other browser). This completely destroys the look of my website, the text is still in the same position but the border and background moves up a bit.... I have tried every position but it didn't work... I'm really annoyed at this problem, any help would be appreciated.
here is the css code
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 11%;
top: 110px;
right: 5px;
left: 5px;
}
This is simply how Chrome works when you start a download. You can work around this with css, but please provide us with some code or a demo with what you've already tried.
A quick thought:
The first thing that comes to mind is to not use percentage for your height property, since it takes 11% of the current height, which depletes when you get the download bar in your screen, since the download bar takes up space of your screen.
If you give the class a fixed height, for example 100 pixels, you will see the class won't decrease in height.
So the code will be:
.classA {
border: 5px solid;
text-align: left;
line-height: 0.5;
position: fixed;
height: 100px; /* just an example, does not need to be 100px */
top: 110px;
right: 5px;
left: 5px;
}
I'm currently trying to make a new design for my website. I got to this point, but I cannot find out how to remove the blank space to the right of the picture (slide the webpage to the right and you see it, a huge blank space).
Here is the JSFiddle: https://jsfiddle.net/yscu95hb/1/
And here is part of the code that I think I have to change.
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
}
.images {
margin: auto;
position: relative;
width: calc(100vw - 260px);
align-content: center;
}
.images img {
max-height: calc(100vh - 35px);
max-width: 100%;
position: absolute;
z-index: 990;
}
Can anyone help me?
Thank you.
-- edit --
I already posted the code that shows the image but I cannot make it to center. Any suggestions?
the reason you see the "white" space on the right side is the css you are applying to your #conteudo element.
This is your css for the element:
#conteudo {
top: 15px;
position: absolute;
margin: 0px 15px 0px 260px;
width: 100vw;
}
there are multiple ways to fix this. one way would be to remove the margin attribute or change the width to something lower than 100vw.
What you are doing is saying the element should be as wide as the browser window (100% of the window width) and then also saying that outside that width it should have more margin (in your case 15px on the right and 260px on the left), and that is "streching the page", causing the total widht to be larger than window width.
Add Eric Meyers resets to the top of your css file. It removes all styling that the browser automatically includes such as margin and padding. It seems like alot and most of it will go unused, but its nice to have all of it just in case.
Its good practice to have a set of resets at the beginning of every webpage and from my experience this one is the best.
I am making a "Starcraft II" website for my clan. And I want the navigation bar to contain the text "ALLOYE" and stick to the bottom of the navigation bar. I have tried this code:
vertical-align:text-bottom;
But the text seems to say about 10 pixels over the bottom. Is it becouse some hidden border or something?
This is my total HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="title">
<strong>ALLOYE</strong>
</div>
</div>
</body>
</html>
And here is the CSS code:
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
height: 7%;
background: -webkit-linear-gradient(#FFB441, #FF9A00);
background: -o-linear-gradient(#FFB441, #FF9A00);
background: -moz-linear-gradient(#FFB441, #FF9A00);
background: linear-gradient(#FFB441, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
}
If you temporarily set a border on both classes, you will see what is happening.
Once you see that, try putting the 7% height onto the .title instead.
Then do the following to see what happens:
change the height of your browser window to very short heights.
look in different browsers (IE, Chrome, Firefox etc)
look at it on your phone
Press F12 when in your browser and experiment
Good luck.
It is likely that the .nav height (7%) is causing the overlap. If you set this to px instead of a % you should be able to force the 'ALLOYE' below the bar.
Something like the below:
.nav
{
position: absolute;
width: 100%;
height: 15px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
You want something like:
.nav{
position: relative;
width: 100%;
height: 80px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: absolute;
font-size: 65px; /* This large a font has significant whitespace at the bottom */
bottom: -15px; /* Compensate for font whitespace. Tweak to fit your font /*
}
But other than that, as Ruskin suggests in his answer, you probably want to set a fixed height on your navigation.
Remove the height: 7%; from .nav and add it to .title:
(Updated CSS):
body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
height: 7%;
}
Fiddle:
http://jsfiddle.net/Wae6n/3/
Use the bottom CSS property on the element containing the absolute positioning property (in this case, it's .nav). Set the bottom property's attribute to 0%. Your css should look something like this :
.nav{position: absolute;bottom:0px;}
First off, I think you need a reset, as I am not seeing the space in my jsfiddle with no changes to your code (http://jsfiddle.net/R6dTU/).
Then I'd actually follow a different approach here. I'd absolutely position the title so that it is
.title{
position: absolute;
bottom: 0;
}
I'd also recommend not using percentage heights without a min-height, unless you don't mind your text being cropped off screen.
Also, keep in mind that vertical-align: text-bottom; aligns the text to the bottom of the descenders (e.g., the tails on lower case p's and q's), so you will not quite get the effect you're looking for with this. Position absolute is more reliable.
Per #ANeves's comment, The reset is not the 'best practice' solution here, but it may be a quick fix. The proper solution would be to
Use a proper tag for your header text. divs should only be for elements that cannot be otherwise classified. I'd suggest a h1 tag here
Set margins and padding on this tag, and set a line-height, otherwise it may change between browsers (this is what the reset is a quick fix for)
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.