This is my code so far:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" value="search">
</div>
</body>
</html>
css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:relative;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
How do I make the search bar be positioned further down, i need the search bar to be positioned in the middle of the header not the top. Why is top:25% not working?
Replace position:relative with position:absolute:
html, body {
height:100%;
min-height:100%;
width:100% min-width:100%;
}
.header {
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"] {
position:absolute;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
If you look at the definition for relative positioning:
The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position
your search bar was really positioning itself.
Demo
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Can anyone help me?
My code below is not working in responsive mode.
Parent container placement should be at the right side of the screen.
Here's my code
.parent {
position:relative;
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
Like so:
html,body{
margin:0; padding:0;
}
.main{
width:980px; background:darkGreen; margin:0 auto;
}
.rel{
width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
</head>
<body>
<div class='main'>
<div class='rel'><div class='abs'></div></div>
</div>
</body>
</html>
.child {
position:absolute;
width:150%;
border:1px solid blue;
}
You don't need to have left and right values when you have width, unless you want to specify the position.
A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as
left:0;
right:0;
is similar to
left:0;
width:100%;
With this, you could specify a
left:0;
right:-10%;
and it would be equivalent to a
left:0;
width:110%;
P.S. you could also use VW and VH instead of %.
A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.
remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.
html,body{
width:100%;
height:100%;
}
.parent {
/*position:relative;*/
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
I want to make a box(in a form of div) that could arrange and move around objects in.
But, when I try to make objects to alight to left they pop out of it.
How can I fix this issue?
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100px;
overflow: hidden;
clear:both;
}
Try this(replace your class)
Edited found the answer:
just add position:relative;
to #slide in css file
HTMl
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slide">
<div id="right">
</div>
<div id="left">
</div>
</div>
</body>
Css
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100;
}
#right
{
top:40%;
height:20px;
width:20px;
background:black;
right:0;
position:absolute;
}
#left
{
top:40%;
height:20px;
width:20px;
background:black;
left:0;
position:absolute;
}
I'm new to CSS and this is just some training stuff. I created a basic layout and I add a navigation bar with some a elements. The problem is that you can't see the full a elements. I tried to change the margin-top property to 0 but nothing changed. How could I solve this problem?
#container{
width:100%;
height:100%;
position:absolute;
}
#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
background-color:#FFF1D5;
}
#nav
{
position:absolute;
top:20%;
left:0;
width:100%;
height:5%;
background-color:#660033;
text-align:center;
}
#nav ul li{
text-decoration:none;
display:inline-block;
margin-left:25px;
margin-right:25px;
margin-top:0;
}
#nav ul li a{
font-size:25px;
color:white;
position:center;
text-decoration:none;
display:inline-block;
}
#leftnav
{
position:absolute;
left:0;
top:25%;
width:20%;
height:55%;
background-color:yellow;
}
#body
{
position:absolute;
top:25%;
left:20%;
width:60%;
height:55%;
background-color:silver;
}
#rightnav
{
position:absolute;
top:25%;
right:0;
width:20%;
height:55%;
background-color:yellow;
}
#Footer{
position:absolute;
bottom:0;
left:0;
height:20%;
width:100%;
background-color:green;
}
edit :
`<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet">
<title> K </title>
</head>
<body>
<div id="container">
<div id="Header"> Das ist der Header </div>
<div id="nav">
<ul>
<li>Home</li>
<li>Produkte </li>
<li>Kontakt </li>
</ul>
</div>
<div id="body"> Das ist der body </div>
<div id="leftnav"> Linke Navigation</div>
<div id="rightnav"> Rechte Navigation</div>
<div id ="Footer"> Footer</div>
</div>
</body>
</html>`
If I am understanding your question then:
#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%; /* This is set to 20%, try increase it */
background-color:#FFF1D5;
}
Since your elements have the position attribute you can assign them the z-index attribute to control which one goes on top. Also, I personally wouldn't have that many elements with the position: absolute on there. It'll be a mess of work if you decide you want to move one of them. Try assigning some of them with position: relative.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.