1005｜webデザイン求職者支援受講記録｜#10

webクリエイター訓練

時間割

ロゴトレース
ナビゲーションブロック
  • 横並び
  • 縦並び
忍者サーバー登録
  • FFFTPダウンロード
フラッシュ

課題

サイドバーを右に持ってきました。また、かなり時間がかかってしまった。content sidebar両方に指定が必要なんて思い浮かばなかった。ギブアップして出来た人のソースを見せてもらいました。
ボックス内にボックスある場合のマージンの相殺

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>1 column test</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
body{
    background-color:#9DCCC8;
}
#container{
    width:200px;
    height:auto;
    margin:0 auto;
    padding:15px 0;
    background-color:#4F76C6;
}
#header{
    width:170px;
    height:50px;
    margin:0 15px 15px 15px;
    background-color:#FF4E6B;
}
#wrapper{
    width:200px;
    margin:0 0 15px 0;
    overflow:auto;
}
#content{
    width:100px;
    height:70px;
    margin:0 0 0 15px;
    background-color:#FF4E6B;
    float:left;
}
#sidebar{
    width:55px;
    height:70px;
    margin:0 15px 0 0;
    background-color:#FF4E6B;
    float:right;
}
#footer{
    width:170px;
    height:50px;
    margin:15px 0 0 15px;
    background-color:#FF4E6B;
    clear:both;
}

</style>
</head>
<body>

<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">footer</div>
</div>


</body>
</html>