I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li>Homepage
</li>
<li>Tips and Trick
</li>
</li>About me
</li>
<li>Get in Touch
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
You can use the standard resize DOM event. Then at
window.onresize = function(event) {
...
}
you can adjust the elmenets positions and size accordingly.
However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
Here is an example with the code :http://jsfiddle.net/TZGXf/4/
Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/
Instead of using set widths like width: 1000px; use percentage values like width: 100%;. But be careful as this can cause unforeseen problems.
Related
As you can see in the attached pic, the .grid-item div doesn't have the exact height of the content inside it (in my case the <img>), but it seems to add a few pixel on the bottom.
How can I tell the .grid-item div to use the exact height of the image inside it?
Ideally if it's possible I'd like to keep absolute and relative positioning of the divs like it is in the example below.
HTML structure:
<section>
<div class="grid-item">
<div class="item-content">
<div class="caption">
<!-- .... -->
</div>
<img src="http://placehold.it/700x400/" alt="" />
</div>
</div>
</section>
CSS:
*{
box-sizing:border-box;
margin:0;
}
body{
font: 16px/1.5em sans-serif;
}
img{
width:100%;
height:auto;
position:relative;
}
section{
max-width:960px;
margin:0 auto;
}
section .grid-item{
width:50%;
float:left;
padding:20px;
}
section .grid-item .item-content{
position:relative;
width:100%;
overflow:hidden;
}
section .grid-item .item-content .caption{
position:absolute;
width:100%;
height:100%;
background:#333;
transform:translateX(-50%);
z-index:2;
}
-
FULL CODE:
http://codepen.io/anon/pen/zrydZX?editors=1100
Add display:block to your img rule: http://codepen.io/anon/pen/qbLXxd?editors=1100
Images are by default inline allowing you to vertically align them in blocks of text. The key disadvantages are that this then results in them also being affected by line height, font size, kerning, etc.
I am new to the world of HTML5 and I am trying to build a layout to give me a better understanding on how i can move on from HTML4. I have currently built a layout but wanted to check:
If my code is written correctly (any tips or advice would be really appreciated, as first time I am writing in HTML5 so want to make sure im doing things right)
trying to fix the footer to sit at the bottom of the page, overlapping the sidebar and section2 slightly but at present it is showing across the middle of the page.
I have noticed when viewing the site in Firefox and using Firebug the site does not show up in the exact size that I have defined in the CSS, so would like to understand why this is.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
</head>
<body>
<div id ="container">
<header>
<h1>This my Header</h1>
<nav><h2>My Navigation Bar<h2></nav>
</header>
<div id="banners"><h2>My Banners<h2></div>
<aside id="sidebar"><h2>My SideBar<h2></aside>
<section id="content"><h2>This is my section1</h2></section>
<section id="list"><h2>This is my section2</h2></section>
</div>
<footer>
<h3>This is my footer</h3>
</footer>
</body>
</html>
My CSS:
body {
background:#FFF;
}
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
}
header {
margin:0;
padding:0px;
text-align:center;
height:166px;
}
nav {
height:65px;
text-align:center;
background:#CCC;
}
#banners {
margin:0;
height:253px;
background:#01AEF0;
text-align:center;
}
#sidebar {
height:600px;
width:310px;
background:#ec8400;
float:left;
text-align:center;
}
#content {
height:300px;
width:650px;
background:#CCC;
float:right;
text-align:center;
}
#list {
height:300px;
width:650px;
background:#01AEEF;
float:right;
text-align:center;
}
footer {
margin:0;
padding:0;
text-align:center;
font-weight:bold;
height:167px;
background:#efefef;
z-index:-1px;
text-align:center;
}
Thanks in advance for looking at this, any advice would be greatly appreciated.
give height to the 'container' in css file should be in 'px'...
example
#container {
margin: 0px auto 0px auto;
width:960px;
border:1px solid #CCC;
height: 600px
}
it should work fine
some steps to to at first:
Remove default browser margin and padding.
* {
margin: 0px;
padding: 0px;
}
Remove margin:0 and padding:0 from .header, .footer and #banner.
use meta viewport tag to make it more responsive:
<head>
<title>BrightBees Layout</title>
<link href="styles2.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Use classes instead of ID's, they're too specific. Leave ID's for JS.
See here for the difference between ID's and classes:
https://css-tricks.com/the-difference-between-id-and-class/
I have added the following to my footer tag in the css file and this overlaps behind the sidebar/section that i required.
margin-top: -80px;
Thanks guys for looking at this for me, really appreciate it.
I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
I am trying to make a in window app similar to
http://jsfiddle.net/szfkn/5/ structure but I want it to not overlap on the sizebars/footer/header/content is there a way to do this while still maintaining a fluid layout?
Or any good pointers on keeping content in window without scrolls and fluid.
Steve Sanderson in his blog shared a few pointers on how to generate a nice css layout: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Don't know if it is the answer you are looking for but it is definetely worth reading :)
<html>
<head>
<title>Fluid Layout</title>
<style>
.hBar, .vBar
{
opacity:.5;
position:absolute;
font-weight:bold;
font-family:Tahoma, Arial, Times New Roman;
text-align:center;
}
div
{
display:block;
}
.hBar
{
height:10%;
width:100%;
left:0px;
z-index:5000;
font-size:1.2em;
}
.vBar
{
width:5%;
height:100%;
top:0%;
z-index:3000;
font-size:.7em;
color:Lime;
}
div#TopWrap
{
background-color:#000;
top:0%;
}
div#RightWrap
{
background:#0FF;
right:0px;
}
div#BottomWrap
{
background-color:#F00;
bottom:0px;
}
div#LeftWrap
{
background-color:#FF0;
left:0px;
}
div#ContentWrap
{
padding:7% 0% 0% 8%;
position:relative;
z-index:1000;
}
</style>
</head>
<body>
<div id="TopWrap" class="hBar">
Top Wrap</div>
<div id="RightWrap" class="vBar">
Right Wrap</div>
<div id="BottomWrap" class="hBar">
Bottom Wrap</div>
<div id="LeftWrap" class="vBar">
Left Wrap</div>
<div id="ContentWrap">
<h3>
Fluid Layout</h3>
<div>
#* Content goes here *#
</div>
</div>
</body>
</html>
Can't guarantee browser compatibility, but should get you a good foundation. The example I have provided just pads the content wrapper. You could modify the div#ContentWrap styling to: 'margin:15%;overflow:hidden;'. Be mindful that any padding you place on that container will affect your overall size.
As far as the content scrolling, there are plenty of jQuery plugins out there that can help with the content scrolling. http://jquerytools.org/demos/scrollable/vertical.html seems to have a good example of what you are looking for.
Best of luck!
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.