【初月無料キャンペーン中】gooドクター

付属画像の右側のような配置にしたいのですが、上手くいきません。

◎◎ 付属画像の左側が現在のコードのwebでの表示画面なのですが、テーブル(灰色)の位置が上に行かず中途半端な位置になってしまいます。これをテーブルの幅や大きさを変えずに上げてたいです。

◎◎
画像が大きいせいか、画像がテーブル(灰色)にかぶさっています。これをテーブル(灰色)の大きさを一切変えずに、付属画像のように適切な位置に配置したいです。元の画像のサイズは幅1794、高さ1024の大きさです。

困っています。回答よろしくお願いいたします。


<!DOCTYPE html>

<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="seo.css">

</head>
<body>
<div class="box">正方形

</div>
<div class="mainlyrics1">
<img src="apurilyrics1.png">

</div>
<table>

<tr><td class="td-css1">使い方・マニュアル</td></tr>

<tr><td class="td-css2"></td></tr>
<tr><td class="td-css2"></td></tr>
<tr><td class="td-css2">・・高度翻訳機能・・</td></tr>
<tr><td class="td-css2">英語</td></tr>
<tr><td class="td-css2">中国語</td></tr>
<tr><td class="td-css2">スペイン語</td></tr>
<tr><td class="td-css2">フランス語</td></tr>
<tr><td class="td-css2">ロシア語</td></tr>
<tr><td class="td-css2">アラビア語</td></tr>
<tr><td class="td-css2">a</td></tr>
<tr><td class="td-css2">a</td></tr>
<tr><td class="td-css2">ヘルプ</td></tr>
<tr><td class="td-css2">b</td></tr>
<tr><td class="td-css2">c</td></tr>
<tr><td class="td-css2">d</td></tr>
<tr><td class="td-css2">e</td></tr>
<tr><td class="td-css2">f</td></tr>
<tr><td class="td-css2">g</td></tr>
<tr><td class="td-css2">h</td></tr>
<tr><td class="td-css2">w</td></tr>
<tr><td class="td-css2">s</td></tr>
<tr><td class="td-css2">mmmm</td></tr>
<tr><td class="td-css2">ログアウト</td></tr>
</table>
</body></html>
◎◎◎cssのコード(seo css)

/* 余白を無くすコード一番うえに記載で適応 */
body{
margin: 0px;
}
/* ヘッダボックスのデザイン */
.box{
height:56px;
width:100%;
background-color: rgb(0, 255, 221);
}
table {
border-collapse: collapse;
background-color:hsl(0, 9%, 96%);
}
.td-css1 {
color: rgb(68, 68, 68);
}
.td-css2{
border-left-style:none;
margin-left: 0%;
color: rgb(68, 68, 68);
}
/* 線のデザイン */
table td {
border: solid 1px #53535352;
width: 300px;
height: 30px;
}
/* 画像のデザイン */
.mainlyrics1{
height: 300px;
width: 100px;
margin-right: 100%;
margin-left: 200px;
margin-bottom: 0px;
}

「付属画像の右側のような配置にしたいのです」の質問画像
gooドクター

A 回答 (1件)

うそうそ・・・ ブロック同士が横並びや重なる訳ない。



その提示CSS以外の ↓ CSSの影響でしょ(笑)
<link rel="stylesheet" href="seo.css">
そのCSS側 ↑ を変更しないと何やっても不具合起きますよ・・・
    • good
    • 0
この回答へのお礼

ありがとうございました

お礼日時:2021/06/02 08:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

gooドクター

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング