I admit it... I'm struggling with this one... I'm trying to make a responsive page with 4 stacked divs.
All divs are width: 100%
The header div: I want the text to display at the bottom of the div (this would be a slogan) so it appears closer to the image.
The image div: I want the image centered vertically and horizontally in the div.
The button div: I want the button (logon) at the top of the div so it appears closer to the image.
The footer div: I want to be at the absolute bottom of the page no matter what.
+-----------+
| |
| |
| Header |
+-----------+
| |
| Image |
| (75%x75%) |
| |
+-----------+
| Button |
| <a link |
| |
+-----------+
+-----------+
| Footer |
+-----------+
On an iPad what I have seems to work but when I load it on a device with a smaller screen (android or iPhone 4/5) it all crumbles...
My HTML:
<div id="welcomePage">
<div class="welcome">
<div class="welcome_header">
<h1 class="welcome">Welcome Slogan</h1>
</div>
<div class="welcome_image">
<img src="logo.svg">
</div>
<div class="welcome_button">
<input type="button" value="Get Started Now!">
<p>Already have an account? Login here</p>
</div>
<div class="welcome_footer">
<h3>© 2018 BlahBlah, Inc.</h3>
</div>
</div>
</div>
My CSS:
.welcome {color: #5e87b0; height:100%; }
.welcome_header {width: 100%; height: 25%; min-height: 25%; display: table-header; vertical-align: text-bottom;}
.welcome_header h1{font-size:6vh;}
.welcome_image {width: 100%; margin-left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }
.welcome_image img {border: 0; width: 75%; height: 75%;}
.welcome_button {width: 100%; height: 20%; position: absolute; clear: both; position:absolute; bottom:5%; left:0;}
.welcome_button h3 {transform: translateY(100%); bottom:0; text-align: center;}
.welcome_footer {width: 100%; height: 5%; position: fixed; clear: both; bottom: 10px; left:0;}
.welcome_footer h3{font-size:1vh;}
What am I missing (besides modern css skills ;-) )?
You can easily stack them with flex
#welcomePage {
display: flex;
flex-direction: column;
}
#welcomePage div {
flex: 1 1 auto;
}
Related
I am trying to center three images on my page. The page consists on a fixed menu on the left of the page and a div in which I want to display three photos (later it will be more photos) with float: left property on my CSS but centered horizontally, I mean that on the left and on the right of the photos have to be the same space. I want it to be responsive.
Here it is what I want:
┌───────────────────────────────────────────────────────────┐
| HEADER(The white space without anything by the moment) |
├──────────┬────────────────────────────────────────────────┤
| | DIV CONTAINER |
| | |
| | |
| | [SPACE] THE IMAGES [SPACE] |
| MENU | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
└──────────┴────────────────────────────────────────────────┘
Both spaces have to be equals.
I tried a lot of changes on my CSS to get that behaviour but I could not get it. I also take as reference the answers on this question: Align image in center and middle within div but still does not work.
Here is my actually code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<style type = "text/css">
body{
margin: 0;
}
#menu{
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container{
position: absolute;
left: 120px;
top: 150px;
width: 100%;
height: 100%;
text-align: center;
}
img.centeredImages{
display: inline-block;
width: 350px;
height: 200px;
float: left;
margin: auto;
}
#image1{
margin: 20px 20px;
}
#image2{
margin: 20px 10px;
}
#image3{
margin: 20px 8px;
}
</style>
</HEAD>
<BODY>
<div id = "menu">
<span class = "spanMenu"> HOME </span>
<span class = "spanMenu"> LOGS </span>
<span class = "spanMenu"> QUESTIONS </span>
</div>
<div id = "container">
<img class = "centeredImages" id = "image1" src = "https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
<img class = "centeredImages" id = "image2" src = "http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
<img class = "centeredImages" id = "image3" src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</BODY>
</HTML>
Thanks in advance!
1.Firstly change the width of the #container :
#container {
width: calc(100% - 120px);
}
2.And after that remove the float to the images. They are display: inline-block so they will be on one line:
img.centeredImages {
float: none;
}
I hope this will help you.
I recommend using bootstrap or foundation 5.
In bootstrap:
<div class="row">
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
<div class="col-md-3"><img src=""></div>
</div>
you can add xs, lg, xl later if you want.
In foundation5:
<div class="row">
<div class="medium-3 columns offset-1"><img src=""></div>
.
.
.
</div>
you can also use block grid which is made for troubles like yours :).
By adding a display: inline-block to all the images and then text-align: center to the container element, the images will all take up the same space and be horizontally centered.
However, since you want each image to be centered horizontally but on a new line I would add display:block to the images, along with position:relative and left: 50%. Finally, I would add a negative margin on the images which would look like margin-left: -[insert half of your image width].
Hope this helps.
You can easily achieve that by wrapping each image in a container:
.image-wrapper{
width: 100%;
float: left;
}
.image-wrapper img{
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
<div class="image-wrapper">
<image ... />
</div>
Have a look at this example:
body {
margin: 0;
}
#menu {
background-color: orange;
position: fixed;
text-align: center;
left: 0px;
top: 0px;
width: 120px;
height: 100%;
margin-top: 150px;
}
#container {
position: absolute;
top: 150px;
left: 120px;
text-align: center;
}
.image-wrapper img {
width: 100%;
max-width: 350px;
max-height: 200px;
margin-bottom: 20px;
}
.image-wrapper:last-child img {
margin-bottom: 8px;
}
.image-wrapper {
width: 100%;
float: left;
}
<div id="menu">
<span class="spanMenu"> HOME </span>
<span class="spanMenu"> LOGS </span>
<span class="spanMenu"> QUESTIONS </span>
</div>
<div id="container">
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
<div class="image-wrapper">
<img src="https://porelplanetaphoto.com/noticias/wp-content/uploads/2015/10/34059861vEE.jpg">
</div>
<div class="image-wrapper">
<img src="http://orig11.deviantart.net/9675/f/2008/333/3/b/3b5dd04be82af929dd3070cb089bcf03.jpg">
</div>
<div class="image-wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-Photographs.png">
</div>
</div>
To have more images aligned on the same row change the width of .image-wrapper, and have a look at CSS media queries to obtain a better responsive result on different devices and screen sizes.
I am trying to achieve this in HTML/CSS:
+---------------------------------------------------------------------+
| HEADER DIV |
+------------+--------------------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| nav DIV | scrollable DIV |
| | |
| | |
| | |
| | |
| | |
| | |
+---------------------------------------------------------------------+
| FOOTER DIV |
+---------------------------------------------------------------------+
Header and footer div are browser window width.
header and footer and fixed height in pixels
header and footer and fixed on the top and bottom of the browser
window nav div is the height of the browser window minus (header height +
footer height)
scrollable content is scrolling internally, without affecting the
absolute position of hte footer or header.
I can only get to a point where both nav DIV + and scrollable DIV scroll together.
I can't make the NAV div not scroll while the scrollable DIV scrolls.
I guess the key is how I put the two divs side by side and yet not scroll one of them when the other scrolls.
<style>
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; }
.header { height: 10%; width: 100%; }
.wrapper { width: 100%; height: 80%; }
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; }
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; }
.footer { height: 10px; width: 100%; }
</style>
<body>
<div class="container">
<div class="header"></div>
<div class="wrapper">
<div class="nav">
</div>
<div class="scrollable">
</div>
</div>
<div class="footer"></div>
</div>
</body>
nav
{
margin-left:0px;
width:100px;
}
scrollable
{
margin-left:100px;
}
OR
.container
{
width:800px;
}
.nav{
width: 300px;
float: left;
}
.scrollable {
width: 500px;
float:right;
}
HTML File
<div class="container">
<div class="nav">left content</div>
<div class="scrollable">right content</div>
</div>
Try this i hope it may help you !
Alright, here's my problem: I've got a Div with a logo in it floated left, and a div with a menu in it floated right. When they touch, the menu drops to a new line, and I'd like them to be forced to stay on a single line, with the logo getting smaller instead.
| |
| +---------------+ |
|<---| logo |---> |
| | variable width| +----------------------------------------+ |
| | float left | | Menu | |
| | | | fixed width based on content | |<----->
| | | | float right | |
| | | +----------------------------------------+ |
| +---------------+ |
| |
The layout is basically:
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
Thanks for any help!
you can use "display:table" to solve the problem. By using this code you can also vertically center the content (as you show in your scheme).
HTML
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
CSS
.Container{max-width: 800px; width: 100%; display:table;}
.Logo{display:table-cell; vertical-align:middle}
.Logo a img{width: 100%; max-width: 200px}
.MenuContainer{vertical-align:middle; display:table-cell; width:400px;}
.MenuInnards{float:right;}
Try this
HTML
<div id="holder">
<div id="left">
<a><img/></a>
</div>
<div id="right"></div>
</div>
CSS
#holder {
width: 960px;
height: 300px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
#left {
width: 248px;
height: 130px;
background-color: yellow;
float: left;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#right {
width: 640px;
height: 70px;
background-color: red;
float: right;
margin-top: 70px;
margin-left: 10px;
margin-right: 20px;
}
I'd like to make a webpage like this:
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d | |
| e | |
| b | |
| a | |
| r | |
|----------------------------|
The header has a fixed height but it's width should be dynamic. The left-sidebar should have a fixed width but a dynamic height. For the content area, both height and width are dynamic. When user scale their browser, the scrolling bar should not appear(not set overflow:hidden; to hide it.).
I tried to write code like this:
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
MAIN
</div>
with CSS:
.top {
width: 100%;
height: 92px;
}
.left {
width: 178px;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 100%;
}
But it failed.
EDIT: Content Area and Left-SideBar must fill the whole browser window.....
I don't need
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d |----------------------|
| e |
| b |
| a |
| r |
|-----|
example at jsFiddle
.top {
position:absolute;
left:0; right:0;
height: 92px;
}
.left {
position:absolute;
left:0; top:92px; bottom: 0;
width: 178px;
}
.main {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
Here is the simple code for you. Try this & know the quality CSS coding.
HTML:
<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">MAIN</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}
LIve demo
Hi now you just do easily as like this
Css
.top {
height: 92px;
}
.left {
width: 178px;
float:left;
}
.main {
margin-left:178px;
}
HTML
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>
Live demo
------------
Updated Demo
You just need to remove "float: left;" from your .main definition.
Also, when debugging positioning this really helps:
div {
border: 1px solid #000;
}
Also it might be worth dropping height: 100% from .left and .main to prevent vertical scrollbar
Demo : http://jsfiddle.net/nRQeA/
.top {
width: 100%;
height: 92px;
}
.left {
width: 20%;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 80%
}
You can also use display : table and display : table-cell to create a page that holds a table-level element with 2 table-cells (sidebar & content area)
<div id="outer-container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
#outer-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
display: table-cell;
width: 15%;
vertical-align: top;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
}
A tutorial with a demo here : http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
I'm a newbie to css, but I've been familiar with html. I took over a website created by someone else who extensively used tables for web page placements. I'm redoing one page of the website, leaving out the tables. I'm making a comment on Lee's solution above in 2012. I made his solution work by adding "top:0;" as a property to the top css class. I figured I could do this since I note that left is also a property for the left css class in Lee's solution. I imagine Lee's solution, as is, was not working for me since there must be a conflict in the existing css file that was created by someone else.
I'm going round in circles with a CSS layout. I basically want it like:
<-------><-------------->
<------><------>
400px 50% 50%
So its 3 colums, one fixed size, and the other two taking up 50% each of the remaining space. I cant seem to make the second and third take up 50% of the remaining space.
Any help would be greatly appreciated,
thanks very much :)
I tried a couple of variations. Below works in Chrome 2, Firefox 3.5 and IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>NLR</title>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
div { height: 500px; border-collapse: collapse; }
#wrapper { padding-left: 400px; }
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; }
#main { overflow: hidden; background: blue; }
#left { float: left; width: 50%; background: red; height: 300px; }
#right { float: right; width: 50%; background: green; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
the markup:
<div id="left">some content</div>
<div id="main">
<div>more content</div>
<div>still more content</div>
</div>
the css:
#left {
float: left;
width: 400px;
margin-right: -405px; /* throwing in a little extra */
}
#main {
margin-left: 405px; /* matching the margin of #left */
}
#main > div {
width: 50%; /* may need to make it 49.9% for some browsers */
}
Your best bet would be to have it set up like so:
Wrappers are pretty important and make a lot of things much easier. To center things inside of wrappers, you can set margin left/right of the divs inside of the wrappers to "auto".
<div class="bigwrapper">
<div class="400pxdiv">
Content for 400pxdiv
</div>
<div class="rightwrapper">
<div class="50percent1">
50percent1's content
</div>
<div class="50percent2">
50percent2's content
</div>
</div>
</div>
First of all it's always a good practice to WRAP your layout. In the following example:
+---------------BODY-----------------+
|<---DIV#1---><--------DIV#2-------->|
| <---DIV3--> | <--DIV4--><--DIV5--> |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | |__________________| |
| |_________| | |____CLEAR DIV_____| |
+-----------------------------------+
DIV0 : main-wrapper
DIV1 : sidebar-wrapper
DIV2 : content-wrapper
DIV3 : sidebar-content
DIV4 : content-left
DIV5 : content-right
CLEAR DIV: to clear the floats.
This works for me in Firefox.
<!DOCTYPE html>
<title>Test</title>
<style>
#A { width: 400px; float:left; outline: thin solid pink; }
#B { margin-left: 400px; overflow: hidden; outline: thin solid pink; }
#B1, #B2 { width:50%; float:left; outline: thin solid pink; }
</style>
<div id=A>
A
</div>
<div id=B>
<div id=B1>
B1
</div>
<div id=B2>
B2
</div>
</div>