Starting my first Tumblr layout.
For some reason, the columns are all a little to the left, and not centered within #content.
Not sure what I am doing wrong... any help would be very much appreciated.
Also... if anyone viewing this has any advice or sees a better way of doing these columns, I would love to hear it.
Thanks
Sam
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
text-align: center;
}
#wrap {
height: auto px;
width: 920px;
margin: 15px auto;
border: 1px black solid;
}
#header {
margin: 10px;
}
#content {
}
#column1 {
}
#column2 {
}
#column3 {
}
#footer {
}
.title {
font-size:25px;
}
.subtitle {
font-size:16px;
}
.column {
width: 300px;
float: left;
}
</style>
<title>{title}</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title">
{title}</div>
<div class="subtitle">
{description}</div>
</div>
<div id="content">
<div id="column1" class="column">
column1
</div>
<div id="column2" class="column">
column2
</div>
<div id="column3" class="column">
column3
</div>
</div>
<div id="footer" class="subtittle">
copyright {copyrightYears} {title}
</div>
</div>
</div>
</body>
</html>
Your container is more than 900px (300px x 3) wide.
Set column width to 33.3% (near enough 1/3 of the container width).
.column {
width:33.3%;
float: left;
}
http://jsfiddle.net/CZ9Lw/
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I have a full width and height section html home page. How can I devide this section into 3 row divs. Each div is full width and has a responsive background image. Please suggest how i can do this with css and the page being responsive.
Here is the solution below:
For background 2 add this media query css at end of your css code or media query responsive css-
#media(max-width:767px){
.bg-2{background-position:right center;}
}
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex:1;
background-size: cover;
background-repeat:no-repeat;
background-position:center center;
}
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);}
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);}
#media(max-width:767px){
.bg-2{background-position:right center;}
}
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 100%;">
<div style="width: 35%; float: left; background-color:blue; padding-right:20px;">
Div 1
</div>
<div style="width: 30%; float: left;background-color:cyan;">
Div 2
</div>
<div style="width: 30%; float: left; background-color:gold;">
Div 3
</div>
</div>
</body>
</html>
#page-wrap {
display:table;
width:90%;
border:1px solid #999;
border-radius:10px;
border-spacing:10px;
margin:auto;
background-color:#fff;
box-shadow:6px 6px 6px #999;
}
#page-wrap div {
display:table-cell;
width:33.33%;
padding:2%;
border:1px solid #999;
border-radius:10px;
background-image:linear-gradient(to bottom,#fff,#ddd);
box-shadow:inset 0 0 10px #999;
font-size:1.5vw;
word-wrap:break-word;
color:#666;
}
#media screen and (max-width:800px) {
#page-wrap div {
font-size:2.0vw;
}
}
#media screen and (max-width:480px) {
#page-wrap div {
font-size:2.5vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="/" media="screen">
<style media="screen">
</style>
</head>
<body background-color:#f0f0f0;>
<div id="page-wrap">
<div id="left"></div>
<div id="right"></div>
<div id="mid">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo.
</p>
</div>
</div>
</body>
</html>
I think that using flexbox would be the best way. Check out this pen: http://codepen.io/anon/pen/qRwZyW
* { margin: 0; padding: 0; }
html,
body,
.container {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.child {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.child1 {
background-image: url(https://unsplash.it/1201/1301/?random);
}
.child2 {
background-image: url(https://unsplash.it/1202/1302/?random);
}
.child3 {
background-image: url(https://unsplash.it/1203/1303/?random);
}
<div class="container">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div>
</div>
Guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can divide the page into 3 rows by using 3 div and give the height for each div
<html>
<head>
<style type="text/css">
.wrapper
{
height: 100%;
width: 100%;
}
.div1,.div3
{
height: 33.33%;
background-color:yellow;
}
.div2
{
height: 33.33%;
background-color:red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
Div 1
</div>
<div class="div2">
Div 2
</div>
<div class="div3">
Div 3
</div>
</div>
</body>
</html>
I am working on a navigation bar for my website. The navigation bar contains a menu icon, a header 'Reviews' and a search icon. The icons need to have a distance of 3% from the border. The problem is that I can't figure it out how I center the text. I think the problem is with the floating elements and I don't know how I center a floating element between to other elements(in this case two icons). I hope someone could provide me with an answer :)
This is the result:
the navigation bar
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
float: left;
}
.searchButton {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
You may use the flex boxmodel and margins :
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
/* see center */
background-image:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 50%);
margin: 3%;
display: flex;
justify-content: center;
}
.menuButton {
float: left;
margin: auto auto auto 0;
}
#nav h1 {
float: left;
}
.searchButton {
margin: auto 0 auto auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
edit.
Considering only float, then float elements should be ahead in the flux to let other non-floatting elements comes in between, so h1 can be standing in between and get text-align or be centered via display and margin.
float won't allow vertical centering of elements where flex does .
text-align and no float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
display:table;/* shrinks on itself */
margin:auto;
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
or display and margin without float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
text-align:center
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
Is this output are you expecting
Check output in codepen.io
* {
padding: 0;
margin: 0;
}
#nav {
width: 100%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
.searchButton {
float: right;
}
.a {
text-align: center;
}
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu">
</div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1 class="a"> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
How can I accomplish the same look as in https://stackoverflow.com/a/1032952/288568 but with the right div being the first in the HTML (so it appears first later when the site is displayed on a mobile where I stack left and right just on top of each other) ?
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
</style>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
If to use float, add this to your #right rule
float: right;
width: calc(100% - 180px);
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
float: right;
width: calc(100% - 180px);
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
flexbox would be another option, here using its order property
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
.wrapper {
display: flex;
}
#left {
width: 180px;
order: 1;
background-color: #ff0000;
}
#right {
flex: 1;
order: 2;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
#left {
width: 20%;
background-color: #ff0000;
}
#right {
float: right;
width: 80%;
background-color: #00FF00;
}
<html>
<head>
<title>This is My Page's Title</title>
</head>
<body>
<div>
<div id="right">
right
</div>
<div id="left">
left
</div>
</div>
</body>
</html>
html {
font-family: 'Open Sans', sans-serif;
}
body {margin: 0;
padding: 0;
}
#wrapper {
padding-left:50px;
padding-top:30px;
}
#third, fifth {
background-color:#E8E8E8 ;
}
img[src^="my_menu.png"] {
z-index:10;
}
#second, #third, #fourth, #fifth {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
background-color:white;
z-index:-1;
}
#second {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
margin-top:100vh;
}
#fourth, #second {
background-color:grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
<div id="fift">
</div>
</div>
</body>
</html>
I am making a website for my client, and I need help. I want to make 4 divs with height of 100vh, and with width equals to 100%. That's what I have. Now, I need to put arrow facing down to all of these divs, somewhere at the bottom center. How to do it?
I'm not sure if this is what you want, but according to your question, this might be what you want to achieve. Just created a div with an image inside (you can also use background property for arrow image)
html * {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.full {
position: relative;
height: 100vh;
width: 100%;
}
.full:nth-child(1) {
background: cyan;
}
.full:nth-child(2) {
background: magenta;
}
.full:nth-child(3) {
background: yellow;
}
.full:nth-child(4) {
background: lightgray;
}
.arrow-down {
position: absolute;
bottom: 10px;
width: 32px;
height: 32px;
left: calc(50% - 16px);
}
.arrow-down > img {
width: 100%;
}
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>
<div class="full">
<div class="arrow-down">
<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" alt="arrow-down">
</div>
</div>