I'm learning HTML/CSS in my web standards design course this month and this week we are fixing our websites to be responsive.
I have converted all of my px to percentages and all font from px to em. I messed something up with the max-width: 100% on my gallery.
I'll post my link instead of all the codes.
http://jgoldd.github.io/wsd/index.html
Take the width and margin off your body tag. Make a class called a wrapper and add it inside your containers eg
.wrapper{
max-width:960px;
margin:0 auto;
width:100%;
}
<header>
<div class="wrapper">
// put your content in here
</div>
</header>
<div id="content">
<div class="wrapper">
// put your content in here
</div>
</div>
<footer>
<div class="wrapper">
// put your content in here
</div>
</footer>
If you don't want to do this you could just set your body to
body{
max-width:960px;
width:100%;
}
But I would change your structure to the way with a wrapper is good to practice clean code hygiene from the start :-)
Your css is too buggy. So, let me explain you a simple technique to activate responsive behavior to images
Try this code in HTML
<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">
CSS
.resize {
max-width: 100%;
height: auto;
width: auto;
}
This code simple activates the responsive behavior on images.
Do let me know if you have any queries...! :)
You're going to need to play with it a bit, but here is a quick bit to get you going in the right direction. (remove the lines I commented with REMOVE)
#gallery li{
width: 49%;
display: inline-block;
.display: inline; /* for IE 8 */
zoom: 1; /* for IE 8 */
/* float: left; REMOVE */
}
#gallery img {
width: 100%;
/* max-width: 100%; REMOVE */
}
#gallery_container{
width: 100%;
/* width: 41.666667%; REMOVE */
}
Give it a try. Should give you better results and hopefully get you where you want to be.
Related
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
So I'm developping MVC app and am not very experienced in this feature, and I have encountered a problem which bugs me.
My desktop resolution is 1920x1080. When any app is rolling in fullscreen, it displays normally. But if the window is resized (ex: clicking on the button on the upper-right border of the browser), everything gets crunched in the middle.
Or I would like at least that the full dimension width of my browser / app be maintained at all time and that a scrolling bar shows down on the page because I do not have the time / resources to work on a "resize" app or script, if that even exists.
Can anyone help me out? Don't hesitate to add information or ask for more info if you need, I love to learn new stuff.
EDIT
Here are some images took a short while ago. The normal view:
And when the window is resized:
Another image from another app:
And the same image when resized:
Like I said, in those 2 cases I would like everything to remain as they are and the user would have to scroll horizontally. I figure that it would be less "painful" to develop that way than to recalculate / resize everything...
EDIT 2
For those familiar with MVC templates, here's some coding that I have added for one of my app, maybe that will help me understand what's happening.
First the _Layout view:
<div id="body">
<div>
<div id="leftSide">
#{
Html.RenderAction("ShowCardSetLinks", "Home");
}
</div>
<div id="inner">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<div id="rightSide">
#{
Html.RenderAction("GetCardOfTheDay", "Home");
}
</div>
</div>
<div id="dialog-modal" title="See Card Detail"></div>
</div>
Then the CSS I have added:
#body {
width: 1920px;
display: table-cell;
table-layout: fixed;
}
#leftSide {
width: 20%;
display: table-cell;
position: relative;
}
#rightSide {
width: 20%;
display: table-cell;
position: relative;
}
#inner {
width: 70%;
display: table-cell;
position: relative;
}
that's about it for the main layout, if I have anything else, I will post it.
Remove display: table-cell; from all of your CSS. This is not proper structure. Especially remove it from the body tag and the table layout (awful bro). Why do you have a width on the body tag too - and for that large?? This not good coding practice at all...change to this and let me know if it works. Wrap all your main content is a wrapper with the class I specified below.
You also had 70%, 20%, and 20% as widths. That's 110%. Obvs can't exceed 100%. I changed this.
EDIT: I see that you had an ID named BODY and it wasn't the body tag (you should rename this). My mistake. See update below...
#body {
position:relative;
margin:0 auto;
width:100%; // change it to whatever value you want your site, but don't exceed 980px. Just leave it at 100% if you want a fluid site.
overflow: hidden;
clear:both;
}
#leftSide {
width: 20%;
position: relative;
float:left;
}
#rightSide {
width: 20%;
position: relative;
float:left;
}
#inner {
width: 60%;
position: relative;
float:left;
}
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).
-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.
Q: Can I get what I expect using css only? How?
Sorry for poor English, however I think the question is easy to understand.
Thank you.
P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.
UPD:
I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.
UPD2:
Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.
I know it's an old question, but you could try doing:
top: 100%;
transform: translateY(-100%);
Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.
Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).
<style>
body {
min-height: 2000px;
}
#test {
position: relative;
top: 2000px;
}
</style>
<script>
var testHeight = $("#test").height();
$( "#test" ).css({
margin-top: -testHeight;
});
</script>
The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:
html, body {
height: 100%;
margin: 0;
}
body {
display: table;
width: 100%;
min-height:2000px;
}
#test {
display: table-footer-group;
height: 1px; /* just to prevent proportional distribution of the height */
}
It is very much possible using relative position. this is how you do it.
Assume height of your footer is going to be 40px. Your container is relative and footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.
HTML will be like this
<div class="container">
<div class="footer"></div>
</div>
CSS will be like this
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.footer{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Live example here
Hope this helps.
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.
The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html
EDIT Read your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.
JSFiddle: http://jsfiddle.net/TAQ4d/ if you really actually need that.
short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0
EDIT
this plugin uses position: fixed too!
then I think you should write it down by yourself or have someone to write it for you :D
if u dont want to use position:absolute; left:0; bottom:0; then u may try simple margin-top:300px;...
Yes it is Posiible with CSS only:
HTML:
<body>
<div id="test">
some dynamically
changed content
</div>
</body>
CSS:
body{
line-height: 2000px;
}
#test{
display: inline-block;
vertical-align: bottom;
line-height: initial;
}
JSFiddle
If you want to have the text on the bottom of the screen then you can use:
body {
line-height: 100vh;
margin: 0px;
}
here are solution I come up with
<ul class="navbar">
<li> Welcome <i></i></li>
<li> Portfolio <i></i></li>
<li> Services <i></i></li>
<li> Blogs <i></i><i class="arrow right"></i>
<ul class="subMenu">
<li> Why Did Mint Net CMS Born <i></i></li>
<li> Apply AJAX and Mansory in gallery <i></i></li>
<li> Why did Minh Vo create Mint Net CMS <i></i></li>
</ul>
</li>
<li> About <i></i></li>
<li> Contact <i></i></li>
<li> Estimate <i></i></li>
</ul>
<style>
.navbar {
display: block;
background-color: red;
height: 100px;
}
li {
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
li > a {
display: inline-block;
vertical-align: bottom;
line-height:initial;
}
li >ul {
display: none;
}
</style>
We do like that:
Html:
<body>
<div id="bodyDiv">
<!-- web site content is here -->
</div>
</body>
<footer>
<!-- Footer content is here -->
</footer>
Jquery:
$( document ).ready(function()
{
$('#bodyDiv').css("min-height",screen.height);
});`
dynamically change content element min-height attribute according to screen resolution.
Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight
this solution requires that you know the height of the footer...
<body>
<div class="wrapper">
your content
</div>
<div class="footer">
footer content
</div>
</body>
and your css would look like this:
.wrapper {
min-height: calc( 100vh - 2em );
}
.footer {
height: 2em;
}
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.