In the page layout I am creating, for some reason, the scrollbars never seem to show and rather the content tries to rearrange itself. Is there a way to lock in a set width and height for the whole page so that if the window is scaled it shows scrollbars?
The page: http://thetalkingcloud.com/clipit.com/
Specifically, if you make the window small, the "COPY PASTE SHARE" links change their position dramatically.
Thanks if anyone can help out :)
If you want to make layout more "fluid," specifically the slogan in the header, try making the following changes to .top_text
.top_text {
float: right;
font-family: "Lucida Grande",Verdana,Arial,sans-serif;
font-size: 60px;
margin-right: 20px;
padding-top: 24px;
}
You will still need to establish a minimum width for the page. Because IE6 doesn't support the min-width property, I often achieve this simply by placing an empty div with the desired minimum width at the top of whatever container I would otherwise use min-width on.
Your top div has a percentage width, instead give it a fixed pixel width so it does not collapse.
Related
I'm trying to set up a fluid column layout for a site I'm working on. I'd like to do this without javascript, but it's looking like that might end up being the easiest option. Regardless, anyone know how to get this done with CSS?
Both columns need to fill the browser height. The left column contains an image with an aspect ratio of 2:3, with height: 100% and width: auto, so the left column's width will change depending on how tall the browser is. The right column needs to fill the remaining space.
I saw a trick using float:left and overflow: hidden that's working great, except the divs do not resize themselves correctly when the browser window is resized.
Here's a simplified fiddle to demonstrate the problem, with the CSS below:
.left-column {
float: left;
}
.left-column img {
height: 100%;
display: block;
width: auto;
}
.right-column {
box-sizing: border-box;
padding: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
.left-column, .right-column {
height: 100%;
}
https://jsfiddle.net/v7unnhnc/2/
It seems like .left-column doesn't resize itself automatically. Any ideas?
basically your code works ok. You may add display:inline-block to your left column and you will see the img container adapt when resizing vertically, however the text won't flow properly this time.
The problem (if a problem) is that the width of your container (left one).. the one with your width:auto (and you don't really need to add it to your css as your image will set the width of the container when overflow is hidden.. when floating) won't understand the resize of the img without reloading the page even if you visually can see it.
But it's important to know as many web developers these days are too much focused into (imho) making a responsive design while resizing the window that GOAL is not that. The main goal is your web to adapt to whatever window size your users (or future users) have at the moment they load your web. And your code is right on that.
Just people like us may go into a web and start resizing manually the window to check the responsiveness.. and even then, the vast mayoritie of us with just check it resizing on the x-axis.
The chances you have to get someone notice your web not working ok when resizing the window (y-axis) is... well, I hope you have SOO many pepople noticing. that will mean you have a lot of visitors.
I have an image that's inline with text. That image is 32x32. I'm looking to have it auto size to the line height of where it's contained so it fits properly. Is there a way to do that?
I'm looking to be able to place the image anywhere with an unknown line height and have it resize properly.
Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*
See this Updated Demo (Increase or decrease the font size to view the result.)
You can set the height to the line height if you explicitly set both, e.g.
* { line-height: 1.3; }
img { height: 1.3em; }
If you don’t want to set the line height, you would need to make a guess on browser defaults (which usually depend on font). This might be a good guess:
img { height: 1.12em; }
To make an image fit properly into text, so that it does not cause the actual line height to be increased, you would also need to align it vertically to the bottom of the line box, no to text baseline (which is higher):
img { vertical-align: bottom; }
If you need to let the image sit on the baseline (the default), you need to make a guess on the distance between the bottom and the baseline and set the image height accordingly smaller. In this case, height: 1em, or maybe with a little smaller value, might be a good guess.
I have been working at this for the past day and a half. So any help will be greatly appreciated.
The general layout has a top bar and a side bar which are position fixed. I want the content container to fill the rest of the page without a scroll bar unless it is necessary due to content. I am not sure if it is possible to do purely in CSS or if I will need to modify my html structure as well. I have posted a fiddle below to show the most simple example possible.
http://jsfiddle.net/wU2Hd/
Again, any help or pushes in the right direction will be greatly appreciated, this has been throwing me for a loop.
It's not impossible. Check out this JSFiddle I forked from yours.
I did not need to change the HTML structure, but there were some important changes made to the CSS.
First I removed the height: 100%; from html, body. This was forcing the scroll bar to appear.
Then I removed the height and width declarations from .content, and gave #shell-content absolute positioning:
#shell-content {
background: #FFFFFF;
position:absolute;
left: 100px;
top: 86px;
bottom: 0px;
right: 0px;
overflow-y: auto;
}
The left and top are values based on the explicit height you gave to your header and the explicit width you gave to your menu. The overflow-y: auto tells it to only show the scroll bar if the content out-grows its available space, but not otherwise.
The JSFiddle has some crazy-long lorem ipsum text to show the effect. If you change it to less text, the scrollbar will disappear entirely.
The problem is that you are setting
#shell-content{
height:100%
}
body{
height:100%
}
Which means the body fills to fit the window, and then the shell-content expands to fill that space (the EXACT size of its direct parent), but is displaced by shell-top-wrapper, so it overflows. You should either decide on a relative height for the shell top wrapper, or change the height of the shell-content dynamically (using javascript).
Here is a take off of your fiddle: http://jsfiddle.net/eeMz4/. You'll see that with the large image in the content area, it scrolls. If you take the image OUT and replace it with text or something smaller than the available space, the scrollbar goes away.
The trick was adding overflow:auto to #shell-content.
Cheers!
Cynthia
I made a few small changes: http://jsfiddle.net/wU2Hd/5/
- remove the height from content
- remove the height from content-shell
- set the body background to white
- set the sidebar background to grey
This will not actually stretch up the content, but it will appear like it does. Scrollbar will appear automaticly when the content becomes bigger then the viewport.
I'm working on a website where disabled access is one of the primary requirements. To do this, I've implemented a Javascript font size increase/decrease function that works great.
However, the div element where the resized text resides changes height based on the text size while everything else stays the same. Width doesn't change, but the height property set to 100% makes no difference. What changes to the CSS are necessary to keep the height fixed? so the footer content as well as the content element background stay the same?
This is the container element where all other divs are nested inside:
#container{
width:1000px;
height:100%;
background-color:#FEFFF1;
margin: 0 auto;
margin-top:5px;
text-align: left;
font-size:1.4em;
border: 1px dotted black;
overflow:scroll;
}
This is the content element, where the page-unique content goes:
#content{
float:left;
margin-top: 223px;
margin-left:250px;
height:100%;
width: 70%;
overflow:auto;
padding-bottom:120px;
position:relative;
}
EDIT changed container overflow value to scroll, where it should have been originally.
If you don't allow the containers that hold the text to expand with the text, then what's the point of letting people resize the text?
Note that text-size is not an issue for 'disabled' people. It's an issue for everyone. On the plus side, we're finally at the point where browsers are adding this as a much more usable and findable feature than in the past. As such, writing your own JS based text-resizing widgets isn't as big of a deal as it once was.
To answer your specific question, height, in CSS, refers to the height of the page (at the outer level) or whatever container it is nested within. It will exceed said height if need be if the contents overflows, unless you provide an overflow value of SCROLL or HIDDEN, which, again, defeats the purpose of the font resizing. Your best bet is to make sure your page design/layout can handle variable font sizes.
Just specify a fixed height instead of a percentage. As in
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.