1
基本的には、メニューバーを上にしてメインコンテナを75％〜25の割合で2つのセクションに分けて作成しようとしていますその上に、このコンテナの背景が無限に水平に伸びる必要があります。残念ながら、私は多少ので、これはここに私の現在のコードサブセクション内にサブセクションを持つコンテナを作成するにはどうすればいいですか？
@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
body { background-color: #2d2d2d; }
h1 {
color: white; font-family: UbuntuG; font-size: 30;
}
h2 {
color: white; font-family: UbuntuG; font-size: 18;
}
p {
color: white; font-family: Arial; font-size: 16;
}
table, th, td {
border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
\t color: white;
\t font-family: UbuntuG;
\t font-size: 16;
height:43px;
line-height:43px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1d1d1d;
}
li {
float: left; border-right: 2px solid white;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #00BFFF;
}
.left,
.right {
float: right;
width: 46%;
padding: 2%;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
}<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div style="margin-top:-8;margin-right:-8;margin-left:-8"><ul>
\t \t <li><a class="active" href="#home">Home</a></li>
\t \t <li><a href="#about">Who are we?</a></li>
\t \t <li><a href="#contact">Contact</a></li>
\t </ul></div>
<div style="background-color: black">
\t \t <div class="right" align="right">
\t \t \t <img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fimages.apple.com%2Fdownloads%2Fdashboard%2Fstatus%2Fimages%2Fpolarclockwidget_20070723105852.jpg&f=1">
\t \t \t <img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fa5.mzstatic.com%2Fus%2Fr30%2FPurple4%2Fv4%2Fae%2F41%2F4d%2Fae414d52-c726-ac67-27ea-02b8b56fcb37%2Ficon.png&f=1">
\t \t </div>
\t \t
\t \t <span class="left" align="left">
\t \t \t <p>PLAY NOW WIDGET</p>
\t \t </span>
</div>
</body>
</html>
いただきまし通報しますか？あなたはその75％/ 25％をどこで設定しましたか？それは水平に分割されているか垂直になっているか？あなたのスニペットにbkgが表示されなかったので、背景はどこにありますか？ –
より具体的になるようにあなたの目標を言い換える必要があるかもしれません。たとえば、「無限に水平に」ということはどういう意味ですか？要素を任意の画面サイズに合わせたいのですか、画面に収まるアイテムがあればスクロールできるスクロールバーが必要ですか？また、75％の分割されたものは、分割をどのようにしたいかを定義したいかもしれません。 –