I have been trying to learn HTMl and CSS for a while, I already know some of the basics, but for a long time I have been struggling with positioning items where I want them.
I have followed many tutorial, and if I follow it exactly hoy they do it everything works perfect, but when I start playing with things around to make it a bit more complex, things don't behave the way that I expect to.
Check at this image for example. I have rows with elements, the first one I was able to cover 50% percent of the screen with each item and align them in the middle with a float, but when I change the width to 40% instead 50%, they loose the center alignment and what is even more strange to me is that they move down a few pixels and loose the separation with the item bellow.
I don't understand why changing the width affects its vertical position.
With the elements of the second row, that im positioning them as absolute, I can't figure out how to center them in the middle of the screen.
Ande the forth row, the beige and green boxes, I don't understand why the text on the beige box is on the bottom of the box and part of it is out of the box, while the text in all the other rows aligned vertical to the center of the box automatically.
Here is my code:
body {
margin: auto;
max-width: 4000px;
height: 5000px;
font-family: "Lato";
}
#text-1{
background-color: black;
color: white;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-1:hover{
background-color: white;
color: black;
}
#text-2 {
background-color: lightgray;
color: black;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-2:hover {
background-color: white;
color: black;
}
#text-3{
background-color: black;
color: white;
width: 500px;
padding: 0px, 50px;
position: absolute;
left:200px;
top: 100px;
text-align: center;
}
#text-3:hover{
background-color: white;
color: black;
}
#text-4 {
background-color: lightgray;
color: black;
width: 500px;
padding: 0px, 50px;
position: absolute;
left: 700px;
top: 100px;
text-align: center;
}
#text-4:hover {
background-color: white;
color: black;
}
#text-5 {
background-color: lightpink;
color: black;
width: 100%;
padding: 0px, 50px;
position: fixed;
top: 200px;
text-align: center;
}
#text-5:hover {
background-color: white;
color: black;
}
a:link{
text-decoration: none;
color: inherit;
}
a:visited{
text-decoration: none;
color: inherit;
}
.box-1 {
background-color: beige;
color: black;
width: 500px;
height: 100px;
position: relative;
left: 100px;
top:300px;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}
.box-2 {
background-color: lightgreen;
color: black;
width: 200px;
height: 100px;
position: relative;
left: 300px;
top: 250px;
padding: 20px, 20px,20px, 20px;
text-align: center;
border-style: solid;
border-width: 1px;
z-index: 0;
}
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div id="text-1">
<a href="index.html" target="_blank">
<p>Experimenting with one paragraph</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-2">
<a href="index.html" target="_blank">
<p>Another chunck of text</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-3">
<a href="index.html" target="_blank">
<p>Button 3</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-4">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-5">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
</a>
</div>
<div class="box-1">
<p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
</div>
<div class="box-2"></div>
</body>
</html>
Do you want like this?
body {
margin: auto;
max-width: 4000px;
height: 5000px;
font-family: "Lato";
}
#text-1{
background-color: black;
color: white;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
position: relative;
}
#text-1:hover{
background-color: white;
color: black;
}
#text-2 {
background-color: lightgray;
color: black;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
position: relative;
}
#text-2:hover {
background-color: white;
color: black;
}
#text-3{
background-color: black;
color: white;
width: 40%;
padding: 0px, 50px;
position: absolute;
left:10%;
top: 110px;
text-align: center;
}
#text-3:hover{
background-color: white;
color: black;
}
#text-4 {
background-color: lightgray;
color: black;
width: 40%;
padding: 0px, 50px;
position: absolute;
left: 50%;
top: 110px;
text-align: center;
}
#text-4:hover {
background-color: white;
color: black;
}
#text-5 {
background-color: lightpink;
color: black;
width: 100%;
padding: 0px, 50px;
position: fixed;
top: 200px;
text-align: center;
}
#text-5:hover {
background-color: white;
color: black;
}
a:link{
text-decoration: none;
color: inherit;
}
a:visited{
text-decoration: none;
color: inherit;
}
.box-1 {
background-color: beige;
color: black;
width: 500px;
height: 100px;
position: relative;
left: 100px;
top:300px;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
margin: 0;
}
.box-2 {
background-color: lightgreen;
color: black;
width: 200px;
height: 100px;
position: relative;
left: 300px;
top: 250px;
padding: 20px, 20px,20px, 20px;
text-align: center;
border-style: solid;
border-width: 1px;
z-index: 0;
}
.box-1 > p{
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div id="text-1">
<a href="index.html" target="_blank">
<p>Experimenting with one paragraph</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-2">
<a href="index.html" target="_blank">
<p>Another chunck of text</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-3">
<a href="index.html" target="_blank">
<p>Button 3</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-4">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-5">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
</a>
</div>
<div class="box-1">
<p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
</div>
<div class="box-2"></div>
</html>
</body>
</html>
In the 2nd row divs are aligned at the center by specifying width of #text-4 and #text-5 to 40% , left of #text-4 to 10% and left of #text-5 to 50%.
P tag inside #box-1 is aligned inside #box-1 by setting it's position absolute
Related
this is something I built:
https://i.imagesup.co/images2/e51854cad0f72ef2900debd5518472d71713cc71.png
There is no overflow because I put in body tag overflow-x:hidden, and it's kind of "nasty" way.
I tried to set div container as width:100vw,max-width:100vw; but it's still not helping. tried to do it with a negative margin and every possible way I know but it's still create overflow like this:
https://i.imagesup.co/images2/794cf0f60d80b8a2de4f5ac44d93579bd50ace2d.png
This the relevant code of the light blue part, thanks in advance:
<body>
<div id="divStyle1">
<header>
<h1>
<span>How to <span class="importantH1">ripen Avocado</span> quickly ?</span>
<span><span class="importantH1">RFP bags</span> ripen Avocado within <span class="importantH1">12-24 hours !</span></span>
</h1>
</header>
<main>
<div id="purpuleLineBox">
<div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
<div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
<div id="purpuleLine3"> <p>The quickest way to achieve the perfect avocado taste</p> </div>
<div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
<div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
</div>
<img id="logoImg" src="Logo.png" alt="">
</main>
</div>
</body>
body {
margin: 0 auto;
}
html {
scroll-behavior: smooth;
}
#divStyle1 {
height: 90vh;
background-color: #016087;
}
h1>span {
display: block;
}
h1 {
color: white;
text-shadow: 2px 2px black;
font-size: 45px;
margin: 0 auto;
}
.importantH1 {
border-bottom: 10px solid #D52C82;
font-size: 53px;
}
.importantH1:hover {
border-bottom: 15px solid #D52C82;
font-size: 55px;
transition-duration: 0.5s;
}
#logoImg {
position: absolute;
right: -20px;
top: 10vh;
transform: rotate(8deg);
border: 20px dashed white;
padding-left: 20px;
padding-bottom: 20px;
padding-bottom: 20px;
}
#purpuleLineBox {
margin-top: 100px;
}
#purpuleLine1 {
background-color: #D52C82;
height: 50px;
width: 34%;
margin-bottom: 30px;
}
#purpuleLine2 {
background-color: #D52C82;
height: 50px;
width: 44%;
margin-bottom: 30px;
}
#purpuleLine3 {
background-color: #D52C82;
height: 50px;
width: 52%;
margin-bottom: 30px;
}
#purpuleLine4 {
background-color: #D52C82;
height: 50px;
width: 58%;
margin-bottom: 30px;
}
#purpuleLine5 {
background-color: #D52C82;
height: 50px;
width: 60%;
margin-bottom: 30px;
}
div>p {
font-size: 30px;
color: white;
text-shadow: 2px 2px black;
font-weight: bold;
margin-top: 0px;
}
This is happening due to a combination of using absolutely positioned right: -20px; and transform: rotate(8deg); if you remove the transform and set right to 0 it should not have the blank space.
If you want to keep these styles just use overflow-x: hidden;
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I'm trying for tag SOLD OUT as shown in below figure
but able to achieve upto certain extend shown in below figure
using following HTML & CSS
<a href="some-href">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
You need to do a few things:
set the parent's position to relative(the in your case) and overflow to hidden.
set the "sold out"'s width to something that will overflow and the image's height and width to 100% to fill the parent
You'll need the position:relative of the parent so the "sold out" will be aligned to its parent when position:absolute and the overflow:hidden will be applied to it.
.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}
<a href="some-href" class="parent">
<img src="http://i.stack.imgur.com/Mmww2.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
https://jsfiddle.net/ivankovachev/snxt61an/
Try this, set backface-visibility:hidden
a{
text-decoration:none;
width:200px;
height:200px;
display:block;
position:relative;
overflow:hidden;
}
a > img{
width:100%;
height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}
<a href="some-href">
<img src="https://source.unsplash.com/user/erondu">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Here the solution!...
Try this code...
<div class="img-wraper">
<a href="some-href" class="">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
</div>
<style media="screen">
.img-wraper {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid #cccccc;
}
.img-wraper a {
display: block;
position: relative;
}
.img-wraper a img {
width: 100%;
height: 100%;
}
.wp-sold-out-strip {
position: absolute;
bottom: 20px;
right: -30px;
width: 142px;
transform: rotate(-33deg);
text-align: center;
background-color: #8760AF;
color: #FFF;
font-size: 13px;
font-weight: bold;
}
</style>
Here's another answer for you. Fiddle
What I did to set the parent element a position: relative and position: absolute on the banner. You can then more easily align the item with top and left.
It's also important to set the parent to overflow: hidden so that nothing appears to protrude outside your image. Finally, you need to override the default inline behavior of anchor tags so that you can align the banner properly.
I also increased the left padding for the text to make it appear centered.
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 170px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 7px 0 7px 14px;
position: absolute;
top: 107px;
left: -2px;
transform: rotate(-26deg);
}
a {
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
display: inline-block;
}
<a href="some-href">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
Just add
height:30px;
line-height:28px;
and change this value:
margin-top: -70px;
Demo (new tag in orange, old in purple), enjoy:
.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);
}
<a href="some-href">
<img src="http://i.stack.imgur.com/Nahj0.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section
Hi I am working on making a website. The problem is the dimensions of the website change on the computer. The computer screens are different sizes, and some are different browsers. For instance the navigation bar will change width, and it will also overlap on some computers. It also will outline images on one computer, and it is using Internet Explorer, but on another computer that is running Chrome (And Different Screen Size) the images are not outlined. I do not know why this is, please help!
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Drippr
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="title">Drippr</h1>
<div id="navbar">
<a href="http://drippr.me/" class="boxtext">
<div id="box1">
<p> Dripps </p>
<img src="http://drippr.me/images/paper.svg" style="height: 40px">
</div>
</a>
<a href="http://drippr.me/" class="boxtext">
<div id="box2">
<p> Bucket </p>
<img src="http://drippr.me/images/bucket.svg" style="height: 40px">
</div>
</a>
<a href="http://drippr.me/" class="boxtext">
<div id="box3">
<p> Settings </p>
<img src="http://drippr.me/images/settings.svg" style="height: 40px">
</div>
</a>
</div>
<div id="hometop">
<ul id="hometoplist">
<li>TEST</li>
</ul>
</div>
<table>
<tr>
<td>
<div class="bubbles">
</div>
</td>
<td>
<div class="bubbles">
</div>
</td>
</tr>
</table>
<div id="footer">
</div>
</body>
</html>
My CSS:
#title {
color: #1c63ff;
text-align: center;
font-size: 35px;
position: absolute;
margin: auto;
border: 1px solid white;
margin-left: 45%;
width: 120px;
height: 45px;
background-color: white;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#navbar {
height: 100%;
width: 10%;
background-color: #D1ECFF;
border-radius: 0;
position: fixed;
margin-left: -10;
top: -1;
border: 2px solid #A1C6FF;
}
.boxtext {
color: darkblue;
font-weight: bold;
text-align: center;
margin: auto;
text-decoration: none;
font-size: 22px;
}
.boxtext:hover {
color: darkblue;
font-weight: bold;
font-size: 25px;
}
#box1 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 5px;
margin-left: 6.5px;
position: absolute;
}
#box1:hover {
background-color: #79AEFF
}
#box2 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 145px;
margin-left: 6.5px;
position: absolute;
}
#box2:hover {
background-color: #79AEFF
}
#box3 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 285px;
margin-left: 6.5px;
position: absolute;
}
#box3:hover {
background-color: #79AEFF
}
#hometop {
height: 50%;
width: 100%;
background-color: #D7D7D7;
border-bottom: 2px solid gray;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.bubbles {
height: 200px;
width: 200px;
border-radius: 100px;
background-color: #99C2FF;
border: 2px solid #1975FF;
margin: auto;
margin-top: 20px;
margin-left: 160px;
}
#hometoplist {
text-align: right;
margin: auto;
margin-top: px;
}
#footer {
}
I believe your navigation bar issue is due to different screen resolutions on different displays. Since the smallest width for the majority of users is >= 1024 px, try setting a width of 1024 px for your site's <body> or a div wrapper around everything in the body of the site.
Also, I recall IE has images bordered by default...try adding to your css:
img {
border:0;
outline:none;
}