I´m new to web development, like I just did 3h and am trying to finish a google clone as an exercise and I don´t seem to understand much about how the things relate.
I tried adopting several type of positions for the divs and buttons but nothing seems to change for the search field and the 2 buttons below.
running out of ideas.
Can you perhaps tell me which style rules are clashing with each other?
body {
margin: 0;
}
#Search {
margin: 150px auto;
width: 50%;
}
.holder {
text-align: center;
}
.loginbutton {
background-color: blue;
color: white;
position: absolute;
top: 20px;
right: 20px;
border-radius: 5px;
}
.gbutton1 {
background-color: lightGrey;
padding: 5px;
border-radius: 5px;
height: 50%;
top: 50%;
margin: auto;
}
.gbutton2 {
background-color: lightGrey;
padding: 5px;
border-radius: 5px;
height: 50%;
top: 50%;
margin: auto;
}
}
.box {
position: absolute;
right: 50%;
top: 50%;
margin: auto;
}
.footer {
position: fixed;
width: 100%;
bottom: 0px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My crappy Google</title>
<meta name="author" content="n00b">
</head>
<body>
<button class="loginbutton">Login</button>
<div id="Search">
<div class="holder">
<img src="https://www.google.at/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" width="75% of window">
</div>
<div class "box">
<input type="text" name="search" placeholder="Search....">
</div>
<div>
<button class="gbutton1">Google-search</button>
<button class="gbutton2">i´m feeeling like crap</button>
</div>
<div class="footer">footer</div>
</body>
</html>
Related
So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right
So here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
<script src="main.js"></script>
</body>
</html>
And here is the css
*{
padding: 0%;
margin: 0%;
box-sizing: inherit;
}
body {
font-size: 15pt;
width: 480px;
height: 500px;
box-sizing: border-box;
}
#kilograms {
position: relative;
top: 70px;
left: 140px;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
top: 100px;
left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
position: relative;
top: 150px;
left: 240px;
border-radius: 4px;
}
Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.
Also, get rid of the top left attributes.
*{
padding: 0;
margin: 0;
box-sizing: inherit;
box-sizing: border-box;
}
body {
font-size: 15pt;
// width: 480px;
// height: 500px;
}
#kilograms {
position: relative;
// top: 70px;
// left: 140p;
border: 20px solid crimson;
border-radius: 4px;
}
#pounds {
position: relative;
// top: 100px;
// left: 240px;
}
.dinnars {
border: 15px solid darkorchid;
width: min-content;
position: relative;
// top: 150px;
// left: 240px;
border-radius: 4px;
}
.box{
border:2px dotted green;
width: 500px;
height 500px;
}
<div class='box'>
<input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
<p id="pounds">0</p>
<p id="dinnars" class="dinnars">0</p>
</div>
The p-element is in relative position with the element that has a class .dinners at right, so applying border on the p-element will make the right hand border look bigger because of the of relative element that already has it's own border that look like it's merging with the one at the Left because of there is no space between the two. Also note that the box-sizing property affects the way properties are applied on elements. Maybe try using box-sizing: border-box.
My content in .box for some reason is going over my header, but not my footer when you resize the window. I was trying to make the footer/header fixed, so they don't move and have content go over them when the window is resized. But like I said it only works for the footer and the header allows content to go over it. So I'm wondering what can I do to fix this? Thanks.
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
Set a z-index for the header with a higher number than the .box which are both 0 by default. So, like try z-index: 999; You can decide to set a higher z-index value for the footer too, although, as it is added after the .box element in the html layout, it will show on top by default.
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
Also, in the example, I decided to change the .box css. Not positive why you have the other css styles. Guess you were working on something a bit different.
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
body {
background-color: #323232;
font-family: Lato;
padding: 0;
margin: 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 7px 25px;
display: inline-block;
}
.container {
width: 100%;
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
z-index: 999;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
}
.fixed-header{
top: 0;
}
.fixed-footer{
bottom: 0;
}
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
margin: 0 auto;
padding: 24px 0;
box-sizing: border-box;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kumo99.cf</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="fixed-header">
<div class="container">
<nav>
HOME
PROJECTS
ABOUT
</nav>
</div>
</div>
<div class="box">
<div class="container">
<img src="images/avatar.png" alt="" class="box-avatar">
<h1>KUMO</h1>
<h5>RANDOM DEVELOPER</h5>
<ul>
<li>I'm Kumo and this is my website. Here I post random releases of development, projects and concepts. Checkout my other pages for more information.</li>
</ul>
</div>
</div>
<div class="fixed-footer">
<div class="container">Made by Kumo © 2017</div>
</div>
</body>
</html>
.box {
background: #FFFFFF;
padding: 10px;
width: 400px;
height: 600px;
text-align: center;
/* top: 50%; */
/* left: 50%; */
/* position: absolute; */
/* transform: translate(-50%, -50%); */
margin: 0 auto;
}
.fixed-header, .fixed-footer {
width: 100%;
position: fixed;
background: #333;
padding: 10px 0;
color: #fff;
text-align: center;
z-index: 10;
}
Using these updated classes you can achieve what you are looking for.
I struggle to get my hover to connect with a GIF. Obviously, it does not show when I set display:none on the text, but I thought the #witch:hover ~ text{ display:block} really would work.
#animcontainer {
position: relative;
margin: auto;
overflow-y: hidden;
#witch {
position: absolute;
left: 2950px;
height: 150px;
bottom: 50px;
z-index: 2` #hello {
position: absolute;
display: none;
border: 25px;
padding: 1.5rem;
background-color: orange;
left: 3100px;
font-size: 20px;
border-radius: 20px;
text-align: center;
bottom: 200px;
left: 2900px;
z-index: 1;
}
#witch:target~#hello {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="animcontainer">
<div id="hello"> text</div>
<img id="potato" src="url">
</div>
</body>
</html>
I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>