[CSS] opmaak - Softwareontwikkeling

vrijdag 20 mei 2005 10:52

Acties:

Verwijderd

Topicstarter

Bij het maken van de layout heb ik volgend probleem, dit is mijn css:

Cascading Stylesheet:

#BackParent{
    width:1024px;
    position:absolute;
    height:100%;
    top:0px;
    left:50%;
    margin-left:-512px;
}
/* de banner layout met wat er allemaal in moet komen */
#BackBanner{
    width:1024px;
    height:100px;
    background-image:url(images/banner.jpg);
    text-align:center;
    font-size:48px;
    position:absolute;
    top:0px;
}
#logout
{
    margin-top:25px;
    text-align:right;
    left:1000px;
    margin-right:10px;
    font-family:Verdana;
    font-size:12px;
    font-weight:bold;
    text-decoration:underline;  
}
/* navigatiemenu voor de modules */
#Backmenu
{
    border-width:1px;
    position:absolute;
    font-size:12px;
    left:0px;
    top:100px;
    width:100%;
    background-color:White;
    
}
#navigationBack
{
    position:absolute;
    top:100px;
    left:50%;
    margin-left:-512px;
    width:1024px;
    vertical-align:middle;
}

/*De tekst van in de tabellen van navigatie */
td.text
{
    text-align:center;
    font-family:Verdana;
    font-size:12px;
}

/* overkoepelende layout van de content */
#mainBack
{
    position:absolute;
    top:230px;
    width:100%;
    height:100%;
    background-color:Maroon;
    
}

#centerHeadBack{
    background-color:#000099;
    color:#FFFFFF;
    font-family:Verdana;
    font-size:18px;
    text-align:center;
    position:absolute;
    top:0px;
    left:0px;         
    height:20px;
    width:1024px;
    border-width:0px;
    border-style:solid;
    border-color:#FFFFFF;   
}

/*#leftPaneBack
{
    left:0px;         
    width:224px;
    font-family:Verdana;
    font-size:12px; 
    height:100px;   
    padding-left:2px;    
}*/

#leftPaneBackBody
{
    position:absolute;
    top:40px;
    width:220px;
    left:0px;
    font-family:Verdana;
    font-size:12px; 
    height:100px;   
    padding-left:2px;

}
/*#contentPaneBack
{
    top:30px;
    left:224px;
    width:100%;
    height:100px;
    text-align:center;    
}*/
#contentpaneBackBody{

    position:absolute; 
    top:30px;
    left:224px;
    width:800px;
    height:100%;
    z-index:0;
    text-align:center;       
}
tr.text_invullen
{
    text-align:left;
    font-family:Verdana;
    font-size:12px;

}
td.heading
{
    font-family:Verdana;
    font-size:14px;
    text-align:center;
    font-weight:bold;
}

en die gebruik ik op volgende pagina met de algemene layout

HTML:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="1ColumnBack.master.cs" Inherits="_1ColumnBack"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Back end</title>
</head>
<body>
    <form id="frmBack_end" runat="server">
    <div id="BackParent">
        <div id="BackHead">
            <div id="BackLogo"></div>
            <div id="BackBanner"><asp:Label ID="lblClubnaam" runat="server" Text="Sportclubnaam" />
                <div id="logout"><asp:LinkButton ID="LBLogOut" runat="server" Text="Uitloggen" PostBackUrl="~/back/index.aspx" /></div>
            </div>
        </div>
        <div id="Backmenu">
        <div class="navigationBack">
        <table width="100%">
            <tr>
                <td align="center"><asp:ImageButton ID="administratie" runat="server" ImageUrl="~/back/Images/icon_administratie.gif" ToolTip="Clubadministratie" OnClick="administratie_Click" Enabled="false" /> </td>
                <td align="center"><asp:ImageButton ID="ledenbeheer" runat="server" ImageUrl="~/back/Images/icon_ledenbeheer.gif" ToolTip="Ledenbeheer" OnClick="ledenbeheer_Click" Enabled="false"/></td>
                <td align="center"><asp:ImageButton ID="ploegen" runat="server" ImageUrl="~/back/Images/icon_ploegen.gif" ToolTip="Reeksen en ploegen" OnClick="ploegen_Click" Enabled="false" /></td>
                <td align="center"><asp:ImageButton ID="kalender" runat="server" ImageUrl="~/back/Images/icon_kalender.gif" ToolTip="Speeldagen en wedstrijden" OnClick="kalender_Click" Enabled="false"/></td>
                <td align="center"><asp:ImageButton ID="evenementen" runat="server" ImageUrl="~/back/Images/icon_evenementen.gif" ToolTip="Evenementen" OnClick="evenementen_Click" Enabled="false"/></td>
                <td align="center"><asp:ImageButton ID="artikels" runat="server" ImageUrl="~/back/Images/icon_artikels.gif" ToolTip="Artikels" OnClick="artikels_Click" Enabled="false"/></td>
                <td align="center"><asp:ImageButton ID="fotoalbum" runat="server" ImageUrl="~/back/Images/icon_foto.gif" ToolTip="FotoAlbum" OnClick="fotoalbum_Click" Enabled="false"/></td>
            </tr>
            <tr>
                <td class="text" align="center">Clubadministratie</td>
                <td class="text" align="center">Ledenbeheer</td>
                <td class="text" align="center">Reeksen en ploegen</td>
                <td class="text" align="center">Kalender</td>
                <td class="text" align="center">Evenementen</td>
                <td class="text" align="center">Artikels</td>
                <td class="text" align="center">Fotoalbum</td>
            </tr>
        </table>
           
        </div>
        
    </div>  
    <div id="mainBack">
        <div id="centerHeadBack">
            <asp:ContentPlaceHolder ID="centerHead" runat="server" />
        </div>


            <asp:ContentPlaceHolder ID="leftBack" Runat="server" />

  
            <asp:ContentPlaceHolder ID="centerBack" Runat="server" />
 
    </div>
    </div> 
    
    </form>
</body>
</html>

nu het probleem is:
ALs ik deze pagina wil laten weergeven dan geeft hij het niet goed weer, namelijk hij geeft de achtergrodn kleur die ik meegeef in MainBack niet weer want daar zou hij onafhankelijk van de inhoud een achtergrond kleur moeten geven over de gehele hoogte van de inhoud. Dat wil hij dus niet doen.

Iemand een idee?

[ Voor 16% gewijzigd door Verwijderd op 20-05-2005 11:06 ]

vrijdag 20 mei 2005 10:59

Acties:

BtM909

Watch out Guys...

Hoi Koen,

Ten eerste welkom op GoT \o/. Daarnaast heb ik eerst wat algemene tips voor je:
• Plaats je code tussen [plain]

Cascading Stylesheet:

[/] en [plain]

HTML:

[/] -tags.
Hierdoor is het al een stuk leesbaarder.

• Zoveel code hier neerplempen heeft niet zo heel veel nut. Handiger is om het ergens online te hebben en/of alleen de relevante stukken hier neerzetten...

• Lees onder andere ook: [rml][ W&G FAQ] Welkom in W&G: FAQ en Beleid[/rml]

Als je dan toch bezig bent, wellicht handig om eens te zoeken naar semantisch gebruik van HTML.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 20 mei 2005 11:07

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

BtM909 schreef op vrijdag 20 mei 2005 @ 10:59:
Hoi Koen,

Ten eerste welkom op GoT \o/. Daarnaast heb ik eerst wat algemene tips voor je:
• Plaats je code tussen [plain]
Cascading Stylesheet:
1
[/] en [plain]
HTML:
1
[/] -tags.
Hierdoor is het al een stuk leesbaarder.

• Zoveel code hier neerplempen heeft niet zo heel veel nut. Handiger is om het ergens online te hebben en/of alleen de relevante stukken hier neerzetten...

• Lees onder andere ook: [rml][ W&G FAQ] Welkom in W&G: FAQ en Beleid[/rml]

Als je dan toch bezig bent, wellicht handig om eens te zoeken naar semantisch gebruik van HTML.

^^^^ Eigenlijk weinig op aan te vullen

In deze vorm klikt iedereen je topic weg na het zien van zo een lap code

Je kan een nieuw topic aanmaken, maar let dan wel op de quickstart

Neem dan ook gelijk een duidelijke titel: opmaak zegt niet zo veel over het probleem

[ Voor 5% gewijzigd door gorgi_19 op 20-05-2005 11:08 ]

Digitaal onderwijsmateriaal, leermateriaal voor hbo