1
Я новичок в кодировании и не уверен, что я ошибаюсь в своем коде, что делает выпадающее меню не центром на веб-странице, как карта и легенда. Если бы кто-нибудь мог помочь, это было бы здорово, вот код.Центрирование атрибутов на моем веб-сайте iframe
<html>
<style>
body {
min-width: 942px;
background: #ffffff url(http://ijc.org/templates/system/images/bg.png) 0 0 repeat-x;
margin: auto;
padding: 0;
position: relative;
font-family: Arial, Helvetica, sans-serif;
/*word-break: break-all;*/
font-size: 13px;
}
.legend {
margin: auto;
width: 398px;
border: 3px solid rgb(104, 170, 225);
margin-top: 20px
}
.center {
margin: auto;
width: 675px;
border: 3px solid rgb(104, 170, 225);
margin-top: 160px;
}
#my-div {
width : 675px;
height : 575px;
overflow : hidden;
position : relative
}
#my-iframe {
position : absolute;
top : -250px;
left : -305px;
width : 1280px;
height : 1200px;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: red;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
#xbuilder table {
border: 2px
border-collapse: collapse;
background-color: #0191c8;
}
#xbuilder {
margin-top: 20px;
width: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
border-color: grey;
border-top-color: grey;
border-right-color: grey;
border-bottom-color: grey;
border-left-color: grey;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
border-top-color: inherit;
border-right-color: inherit;
border-bottom-color: inherit;
border-left-color: inherit;
}
#xbuilder td {
text-align: center;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
padding: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
white-space: nowrap;
border: 1px solid white;
border-top-color: white;
border-top-style: solid;
border-top-width: 1px;
border-right-color: white;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
vertical-align: top;
}
div {
display: block;
}
#xbuilder div {
float: left;
}
header {
margin: auto;
}
</style>
<script>
function set_st(t) {
var sel_el = t.options[t.selectedIndex]
document.getElementById('my-iframe').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
}
</script>
<header>
<div id='map_container' style="margin-bottom: 20px; border: 0px solid red; width: 700px; text-align: center;">
<div id="xbuilder">
<table>
<tbody>
<tr>
<td>
<div>
United States:
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='set_st(this);' >
<option value=''>States</option>
</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>California</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District of Columbia</option>
<option value='fl'>Florida</option>
<option value='ga'>Georgia</option>
<option value='hi'>Hawaii</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiana</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>New Mexico</option>
<option value='ny'>New York</option>
<option value='nc'>North Carolina</option>
<option value='nd'>North Dakota</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvania</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>South Carolina</option>
<option value='sd'>South Dakota</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginia</option>
<option value='wa'>Washington</option>
<option value='wv'>West Virginia</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='set_st(this);' >
<option value=''>Water Res. Region</option>
<option value='01'>01 New England</option>
<option value='02'>02 Mid Atlantic</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Great Lakes</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Upper Mississippi</option>
<option value='08'>08 Lower Mississippi</option>
<option value='09'>09 Souris-Red-Rainy</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-White-Red</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Upper Colorado</option>
<option value='15'>15 Lower Colorado</option>
<option value='16'>16 Great Basin</option>
<option value='17'>17 Pacific Northwest</option>
<option value='18'>18 California</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaii</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
</td>
</tr>
<tr>
<td>
<div>
Canada:
<span data-tooltip='Choose a Canadian province'>
<select name='nus' id='nus' size='1' onchange='set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>British Columbia</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>New Brunswick</option>
<option value='znl'>Newfoundland and Labrador</option>
<option value='zns'>Nova Scotia</option>
<option value='znt'>Northwest Territories</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Prince Edward Island</option>
<option value='zqc'>Quebec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choose a Canadian river basin'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Canadian River Basins</option>
<option value='z01'>01 Maritime Provinces Drainage</option>
<option value='z02'>02 St.Lawrence River Drainage</option>
<option value='z03'>03 Northern Quebec Drainage</option>
<option value='z04'>04 Southwest Hudson Bay Drainage</option>
<option value='z05'>05 Nelson River Drainage</option>
<option value='z06'>06 Western Hudson Bay Drainage</option>
<option value='z07'>07 Great Slave Lake Drainage</option>
<option value='z08'>08 Pacific Drainage</option>
<option value='z09'>09 Yukon River Drainage</option>
<option value='z10'>10 Arctic Drainage</option>
<option value='z11'>11 Mississippi River Drainage</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input name="go" value="Go" type="submit"/></div>
</td>
</tr>
</tbody>
</table>
</div>
</center>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://waterwatch.usgs.gov/new/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>
</html>