K. St K. St - 4 days ago 7
CSS Question

Centering the attributes on my iframe website port

I am new to coding and am not sure what I am getting wrong in my code that makes the drop down menu not center on the webpage like the map and legend does. If anyone could help that would be great here is the code.

<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>

Answer

Remove the inline style width: 700px; from your div#map_container and add styling to the margin on the table:

#xbuilder > table { margin: 0 auto; }
Comments