please I want to move this elements from the sidebar to this left space area but I can't I think there is a problem with this code
Screenshot
<div class='clear'/>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=4692355700320814336&widgetType;=HTML&widgetId;=HTML7&action;=editWidget§ionId;=sidebar-left' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML7"));' target='configHTML7' title='تحرير'>
<img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'/>
</div><div class='widget HTML' data-version='1' id='HTML4'>
<h2 class='title'>تابعنى على الفيس بوك</h2>
<div class='widget-content'>
<iframe allowtransparency='true' frameborder='0' height='180' scrolling='no' src='https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F%D8%A5%D9%8A%D9%87%D8%A7%D8%A8-%D8%A8%D9%84%D9%88%D8%AC-%D9%84%D9%84%D8%AA%D9%82%D9%86%D9%8A%D8%A9-%D9%88%D8%A7%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-1481672011862823andtabs;.width=280.height=180.small_header=false.adapt_container_width=true.hide_cover=false.show_facepile=true.appId=1426898060671616' style='border:none;overflow:hidden' width='300'/>
</div>
Css Code
#sidebar-wrapper-left {margin:0 auto;}
#sidebar-wrapper-right {margin:0 auto;}
#sidebar-wrapper-center {margin:0 auto;}
.clear {
clear: both;
}
#media (max-width: 767px) {
#footer-container {
text-align: center;
}
#copyright {
display: block !important;
}
.social-menu {
float: none !important;
}
/*- - - - -Sidebar- - - - */
#sidebar-wrapper-left .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px}
#sidebar-wrapper-left .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}
#sidebar-wrapper-left .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px}
#sidebar-wrapper-left h2{border-radius: 0;background:#254E71;color:#fff;clear: both;
font-family:Lobster,ge_dinar_tworegular;font-size:18px;font-weight:normal;margin:0px;border: 5px solid;padding: 7px 65px 5px 0px;position:relative;transition:all .5s ease-out}
#sidebar-wrapper-left h2:before{ content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#sidebar-wrapper-left h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;}
#sidebar-wrapper-right .widget{border-radius: 0;padding-bottom: 5px;background:#fff;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
font-family:Lobster,ge_dinar_tworegular;margin-bottom:16px}
#sidebar-wrapper-right .widget:hover{box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}
#sidebar-wrapper-right .widget-content{padding:5px;width:95%;margin:0px;margin-top:5px}
#sidebar-wrapper-right h2{border-radius: 0;background:#254E71;color:#fff;font-family:Lobster,ge_dinar_tworegular;font-size:17px;font-weight:normal;margin:0px;clear: both;padding: 7px 55px 5px 0px;position:relative;transition:all .5s ease-out; border-bottom: 1px solid #eee;border: 5px solid;}
#sidebar-wrapper-right h2:hover{ background-color:#F74047;text-decoration: none; transition: 1.0s; background: #29567D; background-image: linear-gradient(110deg, #254E71 0%, #254E71 50%, transparent 50%, transparent 100%); background-size: 200%; background-position: 150% 0; background-repeat: no-repeat; transition: background-position 1.9s ease, color 1.15s ease;}
#sidebar-wrapper-right h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
=
#PopularPosts1 h2:before{ content: '\f016'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#ContactForm1 h2:before{ content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#PageList1 h2:before{ content: '\f097'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#BlogArchive1 h2:before{ content: '\f0c7'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#Image1 h2:before{ content: '\f123'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0; right: 0; bottom: 0;position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 34px}
#HTML3 h2:before { content: '\f059'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#FollowByEmail1 h2:before {content: '\f003'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px;}
#Followers1 h2:before {content: '\f0c0'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#HTML2 h2:before {}
.sidebar h2:before { content: '\f005'; font-family: FontAwesome; font-style: normal; font-weight: normal; top: 0;bottom: 0; right: 0; position: absolute; padding: 0.4px 13px; background: #F74047; color: #fff; line-height: 37px; }
#HTML1 h2:before { content: '\f0e6'; font-family: FontAwesome; font-style: normal; font-weight: normal;
top: 0; bottom: 0;right: 0; position: absolute; padding: 0.4px 13px;
background: #F74047; color: #fff; line-height: 37px;}
#Label1 h2:before {content: '\f02c';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
#BlogArchive h2:before {content: '\f187';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
#BImage1:before {content: '\f005';font-family: FontAwesome;font-style: normal;font-weight: normal;top: 0;bottom: 0;right: 0;position: absolute;padding: 2.4px 13px;background: #F74047; color: #fff;line-height: 30px;}
.quickedit{display:none;}
html {overflow-x: hidden;}
and there is a problem wih "&"
please tell me what should I do ...
and this is the website if u want to see the source of the page
http://shefoblog.blogspot.com.eg/
The class .post-thumb-oi-web has a width, but does not have a float and that is why your main container and sidebar are not side by side.
I would suggest you give the width and float to the container of your main content, which seems to be .date-posts.
.date-posts {
float: right;
width: 821px;
}
should do the trick and then you can remove the width from .post-thumb-oi-web.
Related
I have a header that needs to have a greeting div inside of it. And that div has to be styled with :before and :after. I cannot add it via HTML. But when you resize the window, everything gets messed up. And I have no idea how to stop it from happening, without changing the font-size.
Can someone please take a look and tell me if there's something I can do? Thank you!
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
you may try this code, removed the absolute position :
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
text-align:center;
}
.title {
position: relative;
display:inline-block;
margin-top:15%;
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
I have the following css:
.tabstyle {
color: #ffffff;
font-weight: bold;
outline: 1px solid transparent;
border-radius: 10px 10px 0 0;
background: #C8DEE9;
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.05);
content: '';
-webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-family: "Raleway", sans-serif !important;
font-style: normal;
margin: 0;
}
However, when this renders, the tab looks as expected, but the text is skewed, I thought I could do something like:
.nav-tabs li a {
width: 200px;
font-size: 18px;
line-height: 2;
**transform: rotateX(-0.93deg)**
font-style: normal !important;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
margin: 0;
}
But no go, how do I de-skew the resulting text?
Update:
Update #2:
<uib-tabset active="activeTab" >
<uib-tab index="$index + 1" classes="tabstyle" ng-repeat="tab in tabData" ng-if="!tab.disabled" select="changeTab(tab.route)">
<uib-tab-heading>
<span class="material-icons {{tab.icon}}" style="vertical-align: middle"></span> {{tab.heading}}
</uib-tab-heading>
<!--<div ng-include="tab.content"></div>-->
</uib-tab>
</uib-tabset>
I need to reproduce following button:
I have already tried to create it, but the arrow on the right is not the same as in the picture. How can I reproduce the same white arrow?
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
...and so on...
https://jsfiddle.net/jobgaraux/h81z00jL/1/
Here I made it for you jsFiddle
Edited HTML:
<span class="arrowBtn"> <span class="icon"></span></span>
You can create CSS3 arrow from borders:
.sBtn-go .arrowBtn .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 13px;
border-color: transparent transparent transparent white;
}
may be this will help youl
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
.arrowBtn {
display: inline-block;
line-height: 2.5em;
text-align: center;
background: #333;
color: white;
font-size: 1em;
width: 2.5em;
transition: margin 200ms;
margin-left: .75em;
position:relative;
left:2px;
}
.sBtn-go .arrowBtn {
background-color: #B6AFB1;
}
.sBtn-go .arrowBtn:hover {
}
.sBtn-go .arrowBtn {
background-color: desaturate(darken(#F8AD6C,5%),5%);
}
<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">►</span></button>
.sBtn {
display: inline-block;
background: #908589;
border: 0;
color: #fff;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0.04em;
line-height: 2.5em;
padding: 0 0 0 1em;
outline: none;
text-decoration: none;
margin-top: 14px;
}
.arrowBtn {
display: inline-block;
line-height: 2.5em;
text-align: center;
background: #333;
color: white;
font-size: 1em;
width: 2.5em;
transition: margin 200ms;
margin-left: .75em;
}
.sBtn-go .arrowBtn {
background-color: #B6AFB1;
}
.sBtn-go .arrowBtn:hover {
}
.sBtn-go .arrowBtn {
background-color: desaturate(darken(#F8AD6C,5%),5%);
}
<button class="sBtn sBtn-go" name="search">Search<span class="arrowBtn">►</span></button>
I want to make this menu bar. I already managed to do the ghost buttons, but how can I make this outline border for the menu:
http://i.stack.imgur.com/wwBVw.jpg
This is my code: https://jsfiddle.net/ivailo/3q6ej7cc/
.button {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
color #fffff;
display: block;
content: '';
width: 15em;
height: 15em;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0s;
}
.button:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button:hover {
color: #000000;
}
.button1 {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button1::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
content: '';
width: 15em;
height: 15em;
transform: translate(-50%, -50%);
transition: all 0s;
}
.button1:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button1:hover {
color: #000000;
}
Check the code below, I enclosed the 2 buttons with a div and styled it to act as a border :-)
.button {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
color #fffff;
display: block;
content: '';
width: 15em;
height: 15em;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0s;
}
.button:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button:hover {
color: #000000;
}
.button1 {
position:relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none ;
overflow: hidden;
border-radius: 7px;
}
.button1::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
content: '';
width: 15em;
height: 15em;
transform: translate(-50%, -50%);
transition: all 0s;
}
.button1:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99,.2);
}
.button1:hover {
color: #000000;
}
.theborder {
text-align : center;
width: 600px;
padding: 20px 25px;
}
.theborder:before, .theborder:after {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(160,160,160,1) 50%,rgba(0,0,0,0) 100%);
display: block;
margin : 10px 0px;
}
<div class="theborder">
<a class="button" href="#"> Button </a>
<a class="button1" href="#"> Button1 </a>
</div>
Hello does anyone know why my left green checkbox is not aligned on left of the text ? Here is my code and what I see right now.
I want something like this "V Etendre le linge X" for one row (V is the checkbox and X is the destroy button)
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eaeaea url('../bower_components/todomvc-common/bg.png');
color: #4d4d4d;
width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.sapUiTv, .sapUiBtnS {
font: inherit;
font-size: inherit;
}
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
margin: 130px 0 40px 0;
border: 1px solid #ccc;
position: relative;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before {
content: '';
border-left: 1px solid #f5d6d6;
border-right: 1px solid #f5d6d6;
width: 2px;
position: absolute;
top: 0;
left: 40px;
height: 100%;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todoapp input:-moz-placeholder {
font-style: italic;
color: #a9a9a9;
}
#todoapp h1 {
position: absolute;
top: -120px;
width: 100%;
font-size: 70px;
font-weight: bold;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#header {
padding-top: 15px;
border-radius: inherit;
}
#main {
position: relative;
z-index: 2;
border-top: 1px dotted #adadad;
}
#new-todo,
.sapUiTfBrd.sapUiTfRo.todo,
.sapUiTfBrd.sapUiTfStd.todo {
position: relative;
margin: 0;
margin-right: 153px;
width: 100%;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
background-color: transparent;
border: 0;
outline: none;
color: #4D4D4D;
padding: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#new-todo {
padding: 15px 15px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.02);
z-index: 2;
box-shadow: none;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
#todo-list li {
position: relative;
font-size: 24px;
border-top: 1px dotted #ccc;
}
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list input[type='checkbox']:after {
content: '✔';
line-height: 62px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list input[type='checkbox']:checked:after {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
}
#todo-list input:not([type='checkbox']) {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2em;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li .destroy {
outline: none;
background-color: transparent;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#todo-list li .destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
}
#todo-list li .destroy:after {
content: '✖';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list .sapUiRrNoData,
#todo-list .sapUiRrPtb,
#todo-list .sapUiRrFtr {
display: none;
}
<html>
<head>
<meta charset="UTF-8"/>
<title>MyTodoList</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id = "todoapp">
<header id="header">
<h1>MyTodoList</h1>
<form action="#" id="todo-form">
<input type="text" id="new-todo" placeholder="New task" autofocus autocomplete="off">
</form>
</header>
<section id = "main">
<u1 id = "todo-list">
<li>
<div class="view">
<input type="checkbox" class="toggle">
<label>Etendre le linge</label>
<button class="destroy"></button>
</div>
</li>
</u1>
</section>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.0.3/angular.min.js"></script>
</body>
</html>
You have position:absolute on your checkbox. Removing it fixes the issue.
#todo-list input[type='checkbox'] {
text-align: center;
width: 40px;
height: auto;
/* position: absolute; */
/* top: 0; */
/* bottom: 0; */
margin: auto 0;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}