Drukuj stronę - Szachownica div

Plik HTML o nazwie przyklad1.html

<html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<link href="p_szachownica.css" type="text/css" rel="stylesheet">
<title> Szachownica</title>
</head>
<body>
<div id="tlo">



            <div class="lewy">
            <p>lg</p>
            </div>
            <div class="prawy">
            <p>pg</p>
            </div>

            <div class="lewyd">
            <p>ld"</p>
            </div>
            <div class="prawyd">
            <p>pd"</p>
            </div>
</div>
</body>
</html>

Plik css o nazwie: p_szachownica.css

#tlo{
width: 700px;
height:700px;
background: #CCFFCC;
padding: 0px;
border:0px solid #000;
}

.lewy {
width:50%;
height:50%;
float:left;
margin: 0px;
padding:0px;
border: 0px solid #FFAAAA;
background: #ff0000;
}
.prawy {
width:50%;
height:50%;
float: right;
margin: 0px;
padding:0;
border: 0px solid #000000;
background: #ffffff;
}
.lewyd{
width:50%;
height:50%;
float:left;
background: #ffffff;
}
.prawyd{
width:50%;
height:50%;
float: right;
background: #ff0000;
}

Plik podstawowy HTML

<html>
<head>
<link href="PSI1_5_div.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="back">
<div id="zapomniany">Szachownica</div>
<div id="lg">A</div>
<div id="pg">B</div>
<div id="ld">C</div>
<div id="pd">D</div>
</div>
</body>
</html>

Drugi plik zapisany w tym samym katalogu co plik HTML. Plik css o nazwie: PSI1_5_div.css

#back {
width:1000px;
min-height:600px;
margin:auto;
background-color:#FFFFAA}
#zapomniany{
width: 1000px;
height:200 px;
background-color: #ffaaaa}
#lg {
width:50%;
height:50%;
float:left;
font-size:50;
margin:auto;
background-color:white}
#pg {
width:50%;
height:50%;
float:right;
font-size:50;
margin:auto;
background-color:red}
#ld {
width:50%;
height:50%;
float:left;
font-size:50;
margin:auto;
background-color:red}
#pd {
width:50%;
height:50%;
float:right;
font-size:50;
margin:auto;
background-color:white}

<html>
<head>
<link href="magda.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="back">
<div id="zapomniany">Szachownica</div>
<div id="lg">
<div id="lg">A</div>
<div id="pg">B</div>
<div id="ld">C</div>
<div id="pd">D</div>
</div>
<div id="pg">B</div>
<div id="ld">C</div>
<div id="pd">D</div>
</div>
</body>
</html>

Darmowe Forum

E14 => DIV => Wątek zaczęty przez: admin Wrzesień 07, 2016, 11:08:28