definir une valeur en fonction d'un element

**TheBlackReverand** · 09/02/2009, 17h05

Bonjour,

afin de fair de la superposition mes elements sont en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position: absolute;

je definis la largeur du contenu en pourcentage(80%) et la hauteur de redefinis automatiquement afin de garder un rapport hauteur/largeur d'origine

pour le menu superieure rien de compliquer, j'applique cela + "top: 0;" pour le coller au haut de page

le problème viens ensuite pour le bloc principale(sous le menu)
je ne sais pas comment definir la hauteur du bloc centrale pour qu'il soit(par exemple) toujours 1cm plus bas que le menu

le rendu souhaiter et quelque chose a la mode Dailymotion

Mon CSS actuel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
BODY
{
	background-color: White;
	width: 80%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
 
.BackEnTete
{
	width: 80%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	position: absolute;
	z-index: 0;
}
 
.EnTete
{
	float: right;
	color: White;
	position: absolute;
	margin-left: 59%;
	z-index: 1;
}
 
.BackBlockCentral
{
	width: 80%;
	top: 30%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	z-index: 0;
}
 
.BlockCentral
{
	width: 80%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	z-index: 1;
}

**GihefBey** · 09/02/2009, 17h52

Bonjour,

Apparemment Dailymotion n'utilise pas de %.

position et float ne vont pas ensemble.

Tu gagnerais en légéreté et en souplesse si tu regroupais tes différents éléments dans un bloc global.

Le code HTML de la page est nécessaire.

-

**TheBlackReverand** · 10/02/2009, 08h58

mon site n'est pas en HTML mais en APS.NET et je ne peut pas fusionner l'image du menu et du bloc principale car j'ai m'as page web qui contient le menu et un conteneur vide qui fait office de bloc principal.

ensuite lorsque lutilisateur click sur un lien le bloc principal est remplis par un WebUserControl perso. cela evite le rafraichissement complet de la page.

tout fonction très bien si le navigateur web est de taille fixe mais si on le redimensionne en largeur l'espace blanc entre le menu et le bloc principal vari, ce qui n'est pas très estetic....

Code ASP.NET

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NonConnecter.aspx.cs" Inherits="NonConnecter" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>MediaManager</title>
    <link rel="shortcut icon" href="http://www.megavideo.com/icon.ico" type="image/x-icon" />
    <link href="~/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form runat="server">
    <div>
        <div class="BackEnTete">
            <asp:Image ImageUrl="images/top.png" Width="100%" Height="100%" runat="server" />
        </div>
        <div class="EnTete">
            <asp:LinkButton CssClass="link" ID="lnkConnexion" Text="Connexion" runat="server"
                OnClick="lnkConnexion_Click" />
            <asp:Label ID="Label1" Text=" | " runat="server" />
            <asp:LinkButton CssClass="link" ID="lnkCreerCompte" Text="Créer un compte" runat="server"
                OnClick="lnkCreerCompte_Click" />
        </div>
        <div class="MenuEnTete">
            <asp:Menu runat="server" Orientation="Horizontal" StaticMenuItemStyle-ForeColor="White">
                <Items>
                    <asp:MenuItem Text="Acceuil" />
                    <asp:MenuItem Text="Videos" />
                    <asp:MenuItem Text="Musiques" />
                    <asp:MenuItem Text="Membres" />
                    <asp:MenuItem Text="Groupes" />
                </Items>
            </asp:Menu>
        </div>
        <!--
        ESPACEMENT
        ESPACEMENT
        -->
        <div class="BackBlockCentral">
            <asp:Image ID="imgBackBlocCentral" ImageUrl="~/images/news.png" Width="100%" Height="100%"
                runat="server" />
        </div>
        <div class="BlockCentral">
            <asp:Panel ID="center" runat="server" />
        </div>
    </div>
    </form>
</body>
</html>

Code C#

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class NonConnecter : Page
{
    protected void lnkConnexion_Click(object sender, EventArgs e)
    {
        Panel center = (Panel)Page.FindControl("center");
        center.Controls.Add(Page.LoadControl("~/Connexion.ascx"));
 
        Image img = (Image)Page.FindControl("imgBackBlocCentral");
        img.ImageUrl = "/images/connexion.png";
    }
 
    protected void lnkCreerCompte_Click(object sender, EventArgs e)
    {
        Panel center = (Panel)Page.FindControl("center");
        center.Controls.Add(Page.LoadControl("~/CreerCompte.ascx"));
 
        Image img = (Image)Page.FindControl("imgBackBlocCentral");
        img.ImageUrl = "/images/creation.png";
    }
}

Code CSS 2.1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
BODY
{
	background-color: White;
	width: 80%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
 
.BackEnTete
{
	width: 80%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	position: absolute;
	z-index: 0;
}
 
.EnTete
{
	float: right;
	color: White;
	position: absolute;
	margin-left: 65%;
	z-index: 1;
}
 
.MenuEnTete
{
	float: left;
	position: absolute;
	z-index: 1;
	top: 10%;
	left: 12%;
}
 
.BackBlockCentral
{
	width: 80%;
	top: 30%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	z-index: 0;
}
 
.BlockCentral
{
	width: 80%;
	top: 42%;
	min-width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	z-index: 1;
}
 
.link
{
	color: White;
}

Merci pour votre aide,
ce projet est important et pas toujours facile(mon 1er site web, et il compte pour la note finale de ma licence)

definir une valeur en fonction d'un element

CSS

Vue hybride

Discussions similaires

Partager

Partager