Placer des éléments sur une page htmlFermé

Question

Bonjour !

En fait je suis plutôt débutante en codage et dans le cadre de mon stage je dois réaliser une interface graphique.

Or j'ai un souci. J'ai crée un tableau dans ma page principale. Dans une autre page j'ai crée un graphe et je l'ai inséré dans ma page principale grâce à une iframe.
Sauf qu'ils se mettent l'un en dessous de l'autre et moi je voudrais qu'ils soient l'un à coté de l'autre.

Sauriez-vous comment je pourrais m'y prendre?

F3WDc · Answer

Bonjour,
Pourrais-tu mettre ton code ?
(Sans les données si tu ne le veut pas bien sur ;) )

Linanenu · Answer

Oui. PS21e

Deployment name		Satellite selection		Connectivity	Direct Cross

Transponders list of SAT[i]

Ensuite le css de cette page : header{margin-bottom : 20px; }nav{display : block;position : absolute;left : 0px; width : 100%; background-color : white;margin-top : 20px;}#onglets{font : normal 17px Verdana, arial, serif;color : rgb(0,56,130);text-align : center; list-style-type : none; }#onglets li{float : left;height : 23px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */width : 23.23%;background-color: white;margin : 2px 0px 0px 0px !important; /* Pour les navigateurs autre que IE */margin : 1px 0px 0px 0px; /* Pour IE */border : 1px solid rgba(0,56,130,0.5); } /* #onglets li:hover { background-color : rgba(0,56,130,0.4); } */ #onglets li.active{background-color : white;border-top : double;border-left : double;border-right : double; border-bottom : 1px solid white;} #onglets li.inactive{background-color : rgba(0,56,130,0.1); }.scroll {height: 250px; /* Hauteur de 250 pixel */width: 200px; /* Largeur de 700 pixel */overflow: auto;}#global { margin-left: auto; margin-right: auto; width: ...; /* largeur obligatoire pour être centré */}.logo{width : 200px;height : 35px; }#thales{position : absolute;left : 10px;}#S21{position : absolute;right : 10px;}/* Bouton protection */.onoffswitch {position: relative; width: 151px;-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}.onoffswitch-checkbox {display: none;}.onoffswitch-label {display: block; overflow: hidden; cursor: pointer;border: 2px solid #999999; border-radius: 30px;}.onoffswitch-inner {width: 200%; margin-left: -100%;-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;}.onoffswitch-inner:before, .onoffswitch-inner:after {float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;border-radius: 30px;box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;}.onoffswitch-inner:before {content: "Protection on";padding-left: 12px;background-color: #31EF2E; color: #FFFFFF;border-radius: 30px 0 0 30px;}.onoffswitch-inner:after {content: "Protection off";padding-right: 12px;background-color: #CCCCCC; color: #333333;text-align: right;border-radius: 0 30px 30px 0;}.onoffswitch-switch {width: 30px; margin: 0px;background: #000000;border: 2px solid #999999; border-radius: 30px;position: absolute; top: 0; bottom: 0; right: 117px;-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);box-shadow: 0 1px 1px white inset;}.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {margin-left: 0;}.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {right: 0px;}/* Style Transponders List http://www.leblogger.com/2010/05/comment-creer-tableau-blog-html-css.html */#tableau { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 10px 0; width: 100%; text-align: left; border-collapse: collapse;}#tableau th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/s1600/gradhead.png') repeat-x; border-top: 2px solid #d3ddff; border-bottom: 1px solid #fff; color: #039;}#tableau td { padding: 8px; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid #fff; background: #e8edff url('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/s1600/gradback.png') repeat-x;}#tableau tfoot tr td { background: #e8edff; font-size: 16px; color: #99c; text-align:center;}#tableau tbody tr:hover td { background: #d0dafd url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png') repeat-x; color: #339;}#tableau a:hover { text-decoration:underline;}#corpsOnglet{position : absolute;left : 0%; margin-top : 65px; margin-left : 40px;height : 827px;width : 1520px;background-image : url("fond.jpg"); background-repeat : no repeat;background-position : center; } Ensuite le code html du graphe : Graphe

Frequency organization

(MHz)

TR1: TR1

et le css associé : dl#csschart, dl#csschart dt, dl#csschart dd{ margin:0; padding:0; } dl#csschart{ background:url(bg_chart.gif) no-repeat 0 0; width:467px; height:385px; } dl#csschart dt{ display:none; }dl#csschart dd{ position:relative; float:left; display:inline; width:33px; height:330px; /* margin-top:22px; */ } dl#csschart dd.first{ margin-left:33px; } dl#csschart span{ position:absolute; display:block; width:33px; bottom:0; left:0; z-index:1; color:#555; text-decoration:none; } dl#csschart span em{ display:block; font-style:normal; float:left; line-height:200%; background:#fff; color:#555; border:1px solid #b1b1b1; position:absolute; top:50%; left:3px; text-align:center; width:23px; } /* default column styling */ dl#csschart span{height:50%;background:#96CA2D repeat-y;} /* // default column styling */ /* column types */ dl#csschart span.type1{background:#96CA2D repeat-y;} dl#csschart span.type2{background:#B9121B repeat-y;} dl#csschart span.type3{background:#01B0F0 repeat-y;} dl#csschart span.type4{background:#F69C00 repeat-y;} /* // column types */ /* percentages */dl#csschart span.p0{height:0%;}dl#csschart span.p1{height:1%;}dl#csschart span.p2{height:2%;}dl#csschart span.p3{height:3%;}dl#csschart span.p4{height:4%;}dl#csschart span.p5{height:5%;}dl#csschart span.p6{height:6%;}dl#csschart span.p7{height:7%;}dl#csschart span.p8{height:8%;}dl#csschart span.p9{height:9%;}dl#csschart span.p10{height:10%;}dl#csschart span.p11{height:11%;}dl#csschart span.p12{height:12%;}dl#csschart span.p13{height:13%;}dl#csschart span.p14{height:14%;}dl#csschart span.p15{height:15%;}dl#csschart span.p16{height:16%;}dl#csschart span.p17{height:17%;}dl#csschart span.p18{height:18%;}dl#csschart span.p19{height:19%;}dl#csschart span.p20{height:20%;}dl#csschart span.p21{height:21%;}dl#csschart span.p22{height:22%;}dl#csschart span.p23{height:23%;}dl#csschart span.p24{height:24%;}dl#csschart span.p25{height:25%;}dl#csschart span.p26{height:26%;}dl#csschart span.p27{height:27%;}dl#csschart span.p28{height:28%;}dl#csschart span.p29{height:29%;}dl#csschart span.p30{height:30%;}dl#csschart span.p31{height:31%;}dl#csschart span.p32{height:32%;}dl#csschart span.p33{height:33%;}dl#csschart span.p34{height:34%;}dl#csschart span.p35{height:35%;}dl#csschart span.p36{height:36%;}dl#csschart span.p37{height:37%;}dl#csschart span.p38{height:38%;}dl#csschart span.p39{height:39%;}dl#csschart span.p40{height:40%;}dl#csschart span.p41{height:41%;}dl#csschart span.p42{height:42%;} dl#csschart span.p43{height:43%;} dl#csschart span.p44{height:44%;} dl#csschart span.p45{height:45%;} dl#csschart span.p46{height:46%;} dl#csschart span.p47{height:47%;} dl#csschart span.p48{height:48%;} dl#csschart span.p49{height:49%;} dl#csschart span.p50{height:50%;} dl#csschart span.p51{height:51%;} dl#csschart span.p52{height:52%;} dl#csschart span.p53{height:53%;} dl#csschart span.p54{height:54%;} dl#csschart span.p55{height:55%;} dl#csschart span.p56{height:56%;} dl#csschart span.p57{height:57%;} dl#csschart span.p58{height:58%;} dl#csschart span.p59{height:59%;} dl#csschart span.p60{height:60%;} dl#csschart span.p61{height:61%;} dl#csschart span.p62{height:62%;} dl#csschart span.p63{height:63%;} dl#csschart span.p64{height:64%;} dl#csschart span.p65{height:65%;} dl#csschart span.p66{height:66%;} dl#csschart span.p67{height:67%;} dl#csschart span.p68{height:68%;} dl#csschart span.p69{height:69%;} dl#csschart span.p70{height:70%;} dl#csschart span.p71{height:71%;} dl#csschart span.p72{height:72%;} dl#csschart span.p73{height:73%;} dl#csschart span.p74{height:74%;} dl#csschart span.p75{height:75%;} dl#csschart span.p76{height:76%;} dl#csschart span.p77{height:77%;} dl#csschart span.p78{height:78%;} dl#csschart span.p79{height:79%;} dl#csschart span.p80{height:80%;} dl#csschart span.p81{height:81%;} dl#csschart span.p82{height:82%;} dl#csschart span.p83{height:83%;} dl#csschart span.p84{height:84%;} dl#csschart span.p85{height:85%;} dl#csschart span.p86{height:86%;} dl#csschart span.p87{height:87%;} dl#csschart span.p88{height:88%;} dl#csschart span.p89{height:89%;} dl#csschart span.p90{height:90%;} dl#csschart span.p91{height:91%;} dl#csschart span.p92{height:92%;} dl#csschart span.p93{height:93%;} dl#csschart span.p94{height:94%;} dl#csschart span.p95{height:95%;} dl#csschart span.p96{height:96%;} dl#csschart span.p97{height:97%;} dl#csschart span.p98{height:98%;} dl#csschart span.p99{height:99%;} dl#csschart span.p100{height:100%;}/* // percentages */

F3WDc · Answer

Au risque de te decevoir, chez moi ton iframe et ton tableau ne se chevauche pas du tout ... (Quel navigateur utilise-tu ???)

Linanenu · Answer

Non non mais je dis pas qu'elles se chevauchent, je dis juste qu'ils sont l'un en dessous de l'autre, et moi je voudrais qu'ils soient l'un à côté de l'autre.

J'utilise Mozilla

Placer des éléments sur une page html

4 réponses

Discussions similaires

Newsletters