DIV height wont scale the way I want - html

http://telschowdesign.com/_JCM/ - Mock up
http://telschowdesign.com/_JCM/index2.html - The fail
Pretty much I have these two side panels that I want to scale in height as shown in the mockup. For what ever reason I can't get them to do that using my current CSS. I've tried using height=100% but that isn't working. I do not want to use a static measurements such as 700px etc etc
I know this can be done using tables instead but I want to be able to use the same content for a mobile version for the CSS.

height:100% doesn't mean what you think it does. It means the element you set this style to, it will take up 100% of the height of its containing element, not 100% of its children's height.
What you want to achieve is a very typical 3 column layout. Here is a link to an example of how to do it:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

The height of a div is the height of the content.
You can try using line-height css property on your div.
line-height: normal;
line-height: 3.5; /* <number> values */
line-height: 3em; /* <length> values */
line-height: 34%; /* <percentage values */
line-height: 50px; /* <Pixel> values */
line-height: inherit
Hope this helps..

Replace the css of the #container id :
width: 1000px;
margin: 0 auto;
Then your content will be centered ;), if you need it, you can also use a CSS framework like 960grid.css, you will be desktop screen + mobile + iPad compatible and more productive and adaptive ;)
Then, you've a js error on node :
<body onload="javascript:panels()">
panels() function does not exists... ;)

You can use Divs and % on your site master and the following css
navigationbar
{ float: right; height:40px; }
maincontent
{ float: left; width: 60%; }
and your HTML will look like this...
div id="navigationbar"
div id="maincontent"
and these can be inside one big Div. Hope it helps

Related

hint.css expand tooltip height with content

I am using HINT.css for tool-tipping, and I can't for the love of god get the tooltip to expand with the content. I've tried clear fixing, setting heights and what not, but to no avail. Basically I would like to be able to say:
&:after
content: attr(data-hint)
background: $defaultColor
color: white
padding: $verticalPadding $horizontalPadding
font-size: $fontSize
line-height: $fontSize // Vertical centering.
width: 150px
min-height: 10px
and then the div will just expand along with the content (basically trying to prevent out-of-bounds cases)
<div class="hint" data-hint="Some very very very very very long tooltip going past 150px and should be multilined"></div>
In the CSS file of the plugin, add the following two CSS properties to .hint class after pseudo element.
.hint:after
{
width: 150px;
white-space: pre-wrap;
word-wrap: break-word;
}
You have set a fixed width of 150px. Try using no width or if you need a minimum, use min-width.
I found the issue which was related to very domain specific code that interlaced with the way hint.css is structured. I had to rewrite hint.css to a custom solution to make it work.

Making images responsive in CSS

http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}

CSS min-height based on image

So, currently I'm trying to set the minimum height for some css tabled content based on the height of the picture rather than the height of the text.
In essence, my layout is like this:
<Image #60% width> | <Text #40% width>
And I'm currently using flex boxes to do this.
However, right now, when the page is resized (I cannot use static heights as it needs to be fully responsive), at a certain point the image becomes extremely small and the text makes the container huge.
I'd like, ideally, for the text to be the same height as the image at all times and, if there is overflow, for it to be scroll based.
Here's my current Jsfiddle.
http://jsfiddle.net/D7h3z/4/
I'm not averse to using technologies that are new/experimental. I am averse to using JavaScript for this as there shouldn't be a need. And if I do need to, I don't use JQuery, so please avoid that in your answers if you can.
3check out the changes I made to your fiddle -- New Fiddle
Essentially, I made the inner span of description absolute positioned and then placed an overflow-y auto on it's container span. I the applied a min-height of 200px to the img container and it appears to be working as you described. Let me know if this isn't the case.
.description {
width: 40%;
padding: 10px;
position: relative;
overflow-y:scroll;
}
.imagebox {
width: 60%;
min-width: 300px;
}
.imagebox img {
width: 100%;
min-height:200px
}
.description span {
padding: 10px;
position: absolute;
}
EDIT Actually doesn't work 100% yet, the image doesn't maintain aspect ratio... sad trombone
EDIT 2 Added in a min-width which sorta gets it there, but from a dynamic standpoint, this is far from ideal. I will give it another look later tonight.

Can I have both Percentage (100%) and Pixels (-30px) in one CSS selector

I am modifying a child theme of Wordpress Responsive.
I am trying to get my H1 post/page headers inside a box, and have been successful.
The trouble is... I need to set the left padding of the Header to 15px, and whenever I do so, the box which the header sits in becomes too wide.
I have the box set to width: 100%; I need to use percentages because I'm modifying a responsive theme.
But as I want the inner element (H1) with a padding-left: 15px; ... all this does is make the width 100% + 15px, which I don't want.
I am trying to set the box (or the H1 inside) to 100% minus 15px... please can you tell me, is this even possible?
... Unfortunately, when I look at the page with Firebug, I see that the h1 { } and the other command .entry-title, .post-title { } don't seem to be separate in the HTML, like so:
<h1 class="entry-title post-title">Header!</h1>
I have tried setting one of the two CSS elements to width 100%, and the other to -15px, to no avail. I've also tried some basic dabbling with the z-index, setting one to z-index: 99; and the other to z-index: 1; , this didn't work either.
Thank you for reading
What you are looking for is the calc function in CSS. For your specific situation, you will want to do something like this:
h1 {
width: calc(100% - 15px);
}
That is, providing I understood your question correctly. What the above does is set the width of the h1 tag to 100% of it's parent element, minus 15px.
I would try box-sizing: border-box;.
h1 {
box-sizing: border-box;
}
Check this out for more information.

how to set button background such that it takes up height and width of parent div? what css property affects which dimension?

please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!