Création d'un site pour streaming.

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Création d'un site pour streaming.

chrispc

T'es tendue Natasha !

Bonjour,

Je n'arrive pas à trouver la commande html et/ou CSS qui conviennent pour mettre 2 images à droite d'une vidéo et 2 images à gauche de cette même vidéo.

En gros ça donnerait ça :

Image Image

Vidéo

Image Image

Merci d'avance pour vos réponses =)

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

Publicité

rufo

Pas me confondre avec Lycos!

En css, faut utiliser float (left ou right).

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

chrispc

T'es tendue Natasha !

Ah donc c'est cette commande, je t'en remercie =)

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

chrispc

T'es tendue Natasha !

Code :

#Menu
{
background-color : #000000;
height : 28px;
width : 1670px;
text-align : center;
}
#Menu li
{
display : inline-block;
margin-right : 15px;
}
#Menu a
{
font-size : 1.3em;
color : #760001;
text-decoration : none;
}
#Menu a:hover
{
text-decoration : none;
height : 23 px;
background : white;
}
#menu a
{
display : block;
background-color : #000000;
text-decoration : none;
color : #444;
}

Mon problème c'est que même en enlevant "width" j'ai la zone de navigation qui se limite. ( Voir http://www.valadone.fr.nf/ )
Si quelqu'un sait ce que je dois faire =/

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

rufo

Pas me confondre avec Lycos!

Bizarre de mettre en bock un lien hypertexte (#menu a)

Citation :

j'ai la zone de navigation qui se limite

Je comprends ce que tu veux dire. Le bandeau de navigation prend bien toute la largeur, par contre, tes 3 liens sont l'un en-dessous de l'autre. C'est de ça dont tu parles ? Si oui, ben c'est normal, ça vient du "display: block" que t'as mis sur #menu a

Message édité par rufo le 26-05-2014 à 10:47:25

chrispc

T'es tendue Natasha !

Non le problème c'est que mon bandeau navigation ne s'ajuste pas en fonction de la page. je dois le limiter a 1670 px pour que Contact et CV soit au milieu. Je voudrais un code qui me permette de faire en sorte que je n'ai plus à limiter width et que ça s'ajuste automatique.

J'ai enlevé le display : block, ça n'avait aucune utilité dans le code

Message édité par chrispc le 26-05-2014 à 12:20:56

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

rufo

Pas me confondre avec Lycos!

Si tu mets ton body avec un width à 100% et ton menu de nav avec un margin-left et un margin-right à auto; , ça le fait pas ?

David Boring

Ligne 120 de style.css, tu dois retirer le width: 48%; et le display: inline-block;
En ensuite, tu n'as plus besoin de width pour #Menu

chrispc

T'es tendue Natasha !

Je vais essayer tout ça, je vous dis ce que ça donne.

Edit : Ca ne donne rien =/

Peut être un problème ailleurs.

Je vais vous donner mes lignes de code CSS et HTML peut être ça sera plus simple.

Code :

/*feuille de style */
html,body,div
{
margin : 0px;
padding : 0px:
}
body
{
background-image: url("Background.jpg" );
}
/*En-tête de page */
header
{
background-color : rgb(0,0,0);
height : 150px;
top : 0px;
}
#Logo
{
margin : auto;
text-align : center;
}
/*Navigation*/
nav
{
width : auto;
padding : 0px;
}
#Menu
{
margin-left : auto;
margin-right : auto;
background-color : #000000;
height : 28px;
text-align : center;
}
#Menu li
{
display : inline-block;
margin-right : 15px;
}
#Menu a
{
font-size : 1.3em;
color : #760001;
text-decoration : none;
}
#Menu a:hover
{
text-decoration : none;
height : 23 px;
background : white;
}
#menu a
{
background-color : #000000;
text-decoration : none;
color : #444;
}
/* -----*/
/* Corps */
body
{
width : 100%;
}
#corps
{
margin-top : 0px;
}
@font face
{
font-family: 'Pacifico';
src: url('polices/Pacifico.ttf');
font-weight: normal;
font-style: normal;
}
h1,h2,h3
{
font-family: 'Pacifico', Arial, sans-serif;
color: rgb(183, 0, 0);
}
strong
{
font-style: normal;
font-weight: bold;
}
h1
{
text-align: center;
font-size: 70px;
}
section
{
width : 1420px;
height : 530px;
}
/*Cartes*/
#Carte1
{
float: right;
}
#Carte2
{
float: top;
}
footer
{
background-color : black;
height : 150px;
}
a:visited
{
color: #ffffff;
}
ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
padding-left: 2px;
}

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title> Valadone </title>
</head>
<body>
<header>
<div id="Logo">
<img src="Valad.jpg"/>
</div>
</header>
<nav>
<ul id="Menu">
<li><a href="#">Contact</a></li>
<li><a href="Mon_CV.pdf">CV</a></li>
</ul>
</nav>
<section>
<img id="Carte1" src="Card1.jpg">
<img id="Carte2" src="Card2.jpg">
<div id="corps">
<center>
<object type="application/x-shockwave-flash" height="530" width="820" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=valadone" bgcolor="#000000">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=valadone&auto_play=true&start_volume=25" />
</object>
<a href="http://www.twitch.tv/valadone" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:15px;text-decoration:underline; text-align:center;"><strong>Regarder le Live de Valadone sur www.twitch.tv</strong></a>
</center>
</div>
</section>
<footer>
<h3> Liens </h3>
<ul>
<li><a href="www.azote.org" title="Title">Azote ( Nom de domaine gratuit) </a></li>
<li><a href="" title="Title">Site 2</a></li>
<li><a href="" title="Title">Site 3</a></li>
</ul>
<ul>
<li><a href="" title="Title">Site 1</a></li>
<li><a href="" title="Title">Site 2</a></li>
<li><a href="" title="Title">Site 3</a></li>
</ul>
</footer>
</body>
</html>

Et j'ai toujours le problème au niveau de mes images autour de la vidéo.

Le schéma que je veux est :

Image Vidéo Image
Image Vidéo Image
Vidéo
Vidéo
Image Vidéo Image
Image Vidéo Image

Float ça me donne les images à droite et à gauche mais la vidéo est en dessous d'eux ...

Message édité par chrispc le 26-05-2014 à 21:36:42

---------------
L'écoconception n'est pas négociable - Topic habitats de demain : https://tinyurl.com/y5h2mjx7

rufo

Pas me confondre avec Lycos!

Faut penser à utiliser le clear: both pour annuler certains effets du float left/right

FORUM HardWare.fr

Programmation

HTML/CSS

Création d'un site pour streaming.

Sujets relatifs
Creation filtre sepia	Site: lien
Projet de site	CDC pour developpement site ~60k€
Site ou thème CMS proche de Google Play ou Itunes	Qui m'aiderait à tester mon site ?
Intégration de vidéo de n'importe quel site sur mon site.	Ouvrir l'app concernée sur site mobile ?
Comment créer un site web qu'on peut gérer avec un CMS après ?	[Débutant] création site de streaming !
Plus de sujets relatifs à : Création d'un site pour streaming.

Page générée en 0.066 secondes