I currently studying HTML/CSS/DOM and I am a begginer. I tried to make an Instagram main page for practicing and improving my level. I will share my code, so you can understand what I'm trying to do!
This is HTML code
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
/*box-sizing: border-box;*/
}
#font-face {
font-family: instagramFont;
src: url("./westagram.ttf") format("opentype");
}
.wrapper {
margin: 10px 10px 10px 10px;
}
.wrapper .nav {
padding-top: 20px;
padding-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: solid 1px #dbdbdb;
position: fixed;
z-index: 99999;
/*포지션 여러개 썼을때 우선순위 설정 인덱스값이 클수록 우선순위*/
width: 100%;
}
.wrapper .nav .logo {
font-family: instagramFont;
font-size: 2rem;
padding-right: 100px;
}
.search-box {
margin-top: 5px;
width: 215px;
height: 28px;
}
.wrapper .nav .icons {
margin-left: 100px;
}
.wrapper .main {
position: relative;
/*포지션을 쓰면 위치 조정 top left right bottom*/
top: 90px;
width: 100%;
/*height: 900px;*/
background-color: yellow;
}
.wrapper .main .feeds {
position: relative;
top: 40px;
right: 5px;
left: 40px;
width: 60%;
height: 660px;
background-color: red;
}
.wrapper .main .feeds .article {
position: relative;
display: flex;
flex-direction: column;
top: 10px;
right: 10px;
left: 15px;
width: 95%;
height: 600px;
background-color: green;
}
. .wrapper .main .feeds .article .identi {
position: relative;
/*width: 97%;*/
/*height: 100px;*/
/*background-color: black;*/
}
.identi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wrapper .main .feeds .article .identi .selfi {
padding: 20px 20px 20px 20px;
width: 30px;
height: 30px;
border-radius: 50%;
}
.wrapper .main .feeds .article .identi .id {
padding-top: 20px;
}
.wrapper .main .feeds .article .identi .fa {
padding-top: 20px;
padding-right: 20px;
}
.wrapper .main .feeds .article .pic {
position: relative;
width: 100%;
/*top: 10px;*/
height: 65%;
background-color: lightblue;
}
.wrapper .main .feeds .article .show-box {
position: relative;
width: 100%;
height: 15%;
background-color: lightcoral;
}
.wrapper .main .feeds .article .comment {
position: relative;
width: 100%;
height: 9%;
background-color: lightcyan;
}
.wrapper .main .feeds .article .name {
/*margin-left: 40px;*/
/*padding-bottom: 20px;*/
}
.wrapper .main .main-right {
position: absolute;
top: 40px;
right: 30px;
width: 30%;
height: 900px;
background-color: blue;
}
#compass {
width: 30px;
height: 30px;
}
#heart {
width: 30px;
height: 30px;
}
#my-page {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Westagram Main Page</title>
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<!-- header : segmantic tag -->
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search" , style="font-family:Arial, FontAwesome">
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png">
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png">
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png">
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="about.png">
<span class="id"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
</div>
<div class="show-box">
</div>
<div class="comment">
</div>
</div>
</div>
<div class="main-right">
</div>
</div>
</div>
</body>
</html>
According to the CSS file, I declare the height of each section for checking those sections in the right position. Based on my knowledge, If I delete the height, it would be automatically adjusted height(I mean Depending on the size of the screen window, the horizontal/vertical height will increase or decrease.) This is what was expected. However, the main and the height of the others is fixed... Could you help me out with this problem? I struggling with it the whole day :(
Thank you for your help in advance!
You can use vh (view height) ,em ,rem or percentage.
Example:
height: 120px;
height: 10em;
height: 75%;
Related
I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.
Picture of website:
Thanks for any advice if someone has some!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
p {
color: #45d163;
font-size: 2.5vh;
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: 8vw;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: auto fit-content(70%) auto;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
height: auto;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
height: auto;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="header">
<img src="images/cornerlogo.png" height="50px">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-center">
<img src="images/homepageFour.png" width="100%"> </img>
</div>
<div class="grid-item"></div>
</div>
</body>
</html>
<!-- partial -->
The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".
If you want to almost maximize the specificity value, you have to: use !important.
.header a {
width: max-content !important;
}
I am currently attempting to make my website responsive i.e. images scale up and down with page resizing, content stacks above each other, etc. I was under the impression that I had taken the appropriate steps, but the elements are still stretching in size when resizing and the contents are not staying in their original positions.
How can I achieve this result while keeping all of my elements intact?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(img/food-background.jpg);
background-attachment: fixed;
height: 100%;
}
.main-content {
display: flex;
flex-wrap: wrap;
}
.container {
margin-left: auto;
margin-right: auto;
width: 1140px;
}
.Navbar {
text-align: center;
display: block;
margin-top: 2%;
}
#center-logo {
width: 100%;
max-width: 200px;
height: auto;
text-align: center;
}
#Navbar_Link-Toggle {
display: none;
}
img {
width: 40%;
}
.links {
text-decoration: none;
font-size: 13px;
color: black;
font-weight: bold;
padding: 25px;
}
.links:hover {
color: #f58300
}
a:visited {
color: black;
}
.header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3%;
height: auto;
background-color: yellow;
}
#food {
height: 65vh;
width: 100%
}
.footer {
margin-top: 100%;
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
}
.top {
float: left;
width: 100%;
}
#olive-green {
margin-top: 5%;
position: absolute;
right: 50px;
max-width: 450px;
}
#coral {
max-width: 450px;
position: absolute;
left: 50px;
margin-top: 5%;
}
#teal {
max-width: 450px;
position: absolute;
left: 50px;
margin-top: 50%;
}
#honey {
margin-top: 50%;
position: absolute;
right: 50px;
max-width: 450px;
}
.images {
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 900px) {
.top {
width: 100%;
}
.bottom {
width: 100%;
}
}
<div class='main-content'></div>
<div id='Navbar_Link-Toggle' style='font-size: 20px'>
<i id='main' class='fas fa-bars'></i>
</div>
<div class='container'>
<div class='Navbar'>
<a class='links' href=''>FOOD</a>
<a class='links' href=''>FUN</a>
<img id='center-logo' src='img/SAMO.png'>
<a class='links' href=''>HISTORY</a>
<a class='links' href=''>LOCATION</a>
</div>
</div>
<div class='header'>
<img id='food' src='img/food.jpg'>
</div>
<div class='images'>
<div class='top'>
<img id='coral' src='img/coral.png'>
<img id='olive-green' src='img/olive-green.jpg'>
</div>
<div class='middle'>
<img id='teal' src='img/teal.jpg'>
<img id='honey' src='img/honey.jpg'>
</div>
</div>
</div>
<div class='footer'>
<p>200 Santa Monica Pier, Suite A Santa Monica, CA 90401</p><br>
<p>Questions? Drop us a message at: info#santamonicapier.org or 310-458-8900</p><br>
<p>All Rights Reserved © 2019 Santa Monica Pier</p>
</div>
You have an extra closing div on the first line of your HTML. So your .main-content element is actually being closed right away instead of wrapping around the rest of the elements.
I'm working on a little something and I'm trying to make it so the footer is always getting pushed down when the screen shrinks. I'm struggling to do this as my content instead goes under the footer. Can anyone help?
I'm also open to any things I can improve on or clean up, I know the CSS is a bit un-neat but I'm getting used to not using bootstrap so I'm working on it :)
Many thanks,
Conner.
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
min-height: 100%;
}
#image-wrap {
background-color: #2E2E2E;
}
#wrapper-image {
height: calc(100vh - 135px);
background: url(../images/background-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
}
.full-view {
width: 100%;
}
/* Fonts */
.title-color {
color: #FF1A1A;
}
#font-face {
font-family: titleText;
src: url("../fonts/Typo_Round_Regular_Demo.otf") format("opentype");
}
.page-font {
font-family: titleText;
}
/* Header Handler */
#header-container {
position: absolute;
top: 0;
background-color: #2E2E2E;
}
#site-title {
display: inline-block;
margin-left: 175px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 20px;
}
#navbar-handle {
float: right;
display: inline-block;
margin-right: 90px;
margin-top: 25px;
}
.navi-bar {
display: inline-block;
list-style: none;
}
.navi-bar li {
display: inline-block;
text-decoration: none;
}
li a {
text-decoration: none;
color: white;
padding: 20px;
font-size: 25px;
}
.nav-item {
background-color: #4A4A4A;
border-radius: 5px;
margin-top: 10px;
margin-left: 15px;
padding: 5px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
text-align: center;
}
#footer {
background-color: #2e2e2e;
position: relative;
bottom: 0;
height: auto;
clear: both;
}
#footer-title {
margin-left: 10px;
}
#footer-text {
text-align: center;
}
#footer-subtext {
color: white;
}
#discord-icon {
font-size: 60px;
padding: 10px;
}
#discord-item-container {
margin-top: 5px;
border: solid 1px red;
border-radius: 5px;
display: inline-block;
width: auto;
background-color: #494949;
text-align: center;
padding: 5px;
}
#builder,
#builder a {
color: white;
text-align: left;
text-decoration: none
}
/* Content */
#content {
position: absolute;
top: 275px;
width: 100%;
height: auto;
}
.grid-container-1 {
display: grid;
grid-template-columns: auto;
text-align: center;
height: auto;
}
#image-container {
height: auto;
margin: 0 auto;
position: relative;
}
#logo {
height: 125px;
width: 125px;
}
#content-subtext {
color: white;
}
#media screen and (max-width: 420px) {
.grid-container {
grid-template-columns: auto;
}
#discord-item-container {
margin-top: 10px;
margin-bottom: 5px;
}
#site-title {
display: block;
margin-top: 10px;
text-align: center;
margin-left: 0;
font-size: 20px;
}
#navbar-handle {
display: block;
text-align: center;
margin-left: 0;
margin-right: 0;
float: none;
padding-bottom: 5px;
}
li a {
padding: 5px;
font-size: 20px;
}
}
#media screen and (max-width: 770px) and (min-width: 421px) {
#site-title {
margin-left: 60px;
}
li a {
padding: 5px;
font-size: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover, user-scalable=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/page-style.css">
<!-- Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div id="image-wrap">
<div id="wrapper-image">
</div>
</div>
<div class="full-view" id="header-container">
<div class="title-color page-font" id="site-title">
<h1>Voltunix's Services</h1>
</div>
<div id="navbar-handle">
<ul class="navi-bar page-font">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Services
</li>
</ul>
</div>
</div>
<div id="content">
<div class="grid-container-1">
<div class="grid-row" id="image-container">
<img src="./images/logo.png">
<h1 class="page-font title-color">Voltunix's Services</h1>
<p class="page-font" id="content-subtext">Quality work fitting your personal budget</p>
</div>
</div>
</div>
</div>
<footer class="full-view" id="footer">
<div id="footer-title">
<div class="grid-container">
<div class="grid-item" id="footer-text">
<h2 class="title-color page-font">Voltunix</h2>
<p class="page-font" id="footer-subtext">Freelance Manager,<br> Server Owner,<br> Middleman
</p>
</div>
<div class="grid-item">
<div id="discord-item-container">
<i class="fab fa-discord title-color" id="discord-icon"></i>
<p class="page-font" style="color: white;">Voltunix#0033</p>
</div>
</div>
<div class="grid-item" style="border: solid 1px red;">
<p id="builder">Website developed by Conner Murphy</p>
</div>
</div>
</div>
</footer>
</body>
</html>
This is taken from here https://css-tricks.com/couple-takes-sticky-footer/ and only one solution but you can use flexbox and do the following
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper{
flex: 1 0 auto;
}
.footer{
flex-shrink: 0;
}
I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I am trying to make a header for a site that has a logo in the left column, and a rotating image banner and the top-level navigation on the right, without using floats. What am I doing wrong here?
This is what I would like it to look like:
Here is my HTML:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div id="logo"><p>Logo</p></div>
<div id="right">
<div id="rotator"><p>Rotator</p></div>
<div id="navigation"><p>Navigation</p></div>
</div>
</div>
</body>
</html>
Here is my CSS:
#header{
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
top: 10px;
font-size: 0px;
}
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
}
#rotator{
display: block;
background-color: green;
width: 718px;
height: 132px;
}
#navigation{
display: block;
background-color: blue;
width: 718px;
height: 60px;
}
p{
font-size: 24px;
margin:0;
padding: 0;
}
This is what it ends up looking like:
Try putting vertical-align: top; on the logo and right divs
Here's the fiddle
#logo{
display: inline-block;
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right{
display: inline-block;
background-color: black;
width: 718px;
height: 192px;
font-size: 0px;
vertical-align: top;
}
#right {
background-color: black;
font-size: 0;
height: 192px;
position: absolute;
right: 168px;
top: 28px;
width: 718px;
}
Here's one way to do it using display:table & table-cell.
http://jsfiddle.net/zR9GZ/
<div class="container">
<div class="col1">LOGO</div>
<div class="col2">
<div class="rotator">ROTATOR</div>
<div class="navigation">NAVIGATION</div>
</div>
</div>
.container {
display: table;
width: 100%;
color:# fff;
}
.col1, .col2 {
display: table-cell;
}
.col1 {
background: red;
width: 25%;
}
.col2 {
width: 75%;
}
.rotator {
background: green;
}
.navigation {
background: blue;
}
Though flexbox isn't quite ready for production designs, here's what a responsive solution would look like (try resizing it!):
#header {
display: flex;
flex-flow: row wrap;
}
#header{
background-color: yellow;
font-size: 0px;
}
#logo{
background-color: red;
width: 306px;
height: 192px;
font-size: 0px;
}
#right{
background-color: black;
font-size: 0px;
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-width: 40%;
}
#rotator{
background-color: green;
flex: 2 1 auto;
}
#navigation{
background-color: blue;
flex: 1 1 auto;
}
http://jsfiddle.net/2UjC3/ (prefixes not included)
Until enough browsers support flexbox, my recommendation is to use the display table/table-cell solution by Billy Moat.