0
これは私のコードで、私は#eateries divと#categories divを隣に置くことができません。私は関連する部分だけを含めるためにウェブページを削除しました。私はhtmlを学ぶのに数ヶ月しかいませんでした。2つのdivを互いに隣り合わせにするには？
編集： 私は提案されたものを実装しようとしましたが、フルサイトでは動作しませんでした。
@charset "UTF-8";
#contacts {
background-color: #424040;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
p {} #content {
border: medium solid #FE4B3B;
background-color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#navigation {
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
background-color: #424040;
height: 60px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
#header #navigation ul li {
list-style: none;
display: inline;
}
#header {
background-image: url(Assets/boston.jpeg);
background-repeat: no-repeat;
height: auto;
}
#options {} #contact_info {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
#header_image {
background-repeat: no-repeat;
height: 250px;
border-left-color: #FE4B3B;
border-right-color: #FE4B3B;
border-top-color: #FE4B3B;
border-left-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-width: medium;
border-right-width: medium;
border-top-width: medium;
}
.Nav_button a {
background-color: #424040;
margin-right: 50px;
padding-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
color: #FFFFFF;
text-decoration: none;
font-size: large;
}
#Title_image {
text-align: center;
width: 100%;
height: 100%;
}
.Nav_button a:hover {
color: #FFFFFF;
background-color: #000000;
}
body {
margin: 0 auto 0 auto;
width: 1300px;
background-image: url(Assets/Boston_Back_Bay_reflection.jpg);
}
#garden_img {
width: 400px;
height: auto;
}
#header_text {
font-size: xx-large;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #0C0D12;
text-align: center;
}
.text_content {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: large;
}
#hall_img {
width: 200px;
height: auto;
text-align: center;
}
.picture_div {
width: auto;
margin: auto;
height: auto;
text-align: center;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 1294px;
border: 0px;
margin: 0 auto 0 auto;
}
#const:hover {
background-color: #FE4B3B;
}
#mfa:hover {
background-color: #FE4B3B;
}
#nathist:hover {
background-color: #FE4B3B;
}
#mos:hover {
background-color: #FE4B3B;
}
#categories {
border: medium solid #000000;
width: 200px;
}
#placestoeat {} #eateries {
border: medium solid #000000;
width: 400px;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="header_image">
<img src="Assets/Boston_Header.png" alt="" width="1291" height="455" id="Title_image" />
</div>
<div id="navigation">
<ul width="1291" height="455">
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 253) {
$('#navigation').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 253) {
$('#navigation').removeClass('navbar-fixed');
}
});
});
</script>
<li class="Nav_button"><a href="index.html">Home</a>
</li>
<li class="Nav_button"><a href="History.html">History</a>
</li>
<li class="Nav_button"><a href="restraunts.html">Restraunts</a>
</li>
<li class="Nav_button"><a href="outdoor.html">Outdoors</a>
</li>
<li class="Nav_button"><a href="Maps.html">Maps</a>
</li>
</ul>
</div>
</div>
<div id="content">
<p id="header_text">Places To Eat</p>
<p>Boston is home to many restraunts, cafes, food vendors, and diners. There is a huge variety of cultural foods in boston such as Italian, French, Mediteranean, South American, German. Since boston is right on the water you will find many seafood focused
restraunts with large selections of food. There is a huge variety of prices in boston with upscale fancy restraunts as well as small places offering up affordable food guaranteed to make your mouth water. Take a look at our long list of places to
eat!
</p>
<div id="placestoeat">
<div id="categories">
<ul>
<li>Seafood</li>
<li>Italian</li>
<li>French</li>
<li>Mediteranean</li>
<li>German</li>
<li>South American</li>
<li>American</li>
</ul>
</div>
<div id="eateries">
<table width="200" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contacts">
<p id="contact_info">Email: [email protected] Phone: 123-456-7890 Mailing Address: 123 Fake Street, PA</p>
</div>
</div>
</body>
</html>