...

View Full Version : Resolved Remove whitespace that appeared from hiding an image with a media query



CSSNoob7
02-17-2012, 09:00 PM
Hi,

I've got an image that is removed by the media query:


@media all and (max-width: 800px) {
img {
display: none;
}
}

However, the whitespace from where the image would be is still present - how can I make it so the other elements on the page go up to take the place the image would be (ie. make it so there is no whitespace)?

Thanks!

Kevin_M_Schafer
02-17-2012, 11:50 PM
CSSNoob7,

Can you post a link to the page so we can look at your code, which includes your html?

--Kevin

.

CSSNoob7
02-18-2012, 11:30 AM
CSSNoob7,

Can you post a link to the page so we can look at your code, which includes your html?

--Kevin

.

I don't have it uploaded anywhere public so here it is in code tags:

HTML (I had to replace all text with 'x's):


<html>

<head>
<title>xxxx xxxxx xxxxxxx</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>

<body>
<h1>xxxx xxxxx xxxxx</h1>

<p>x xxxx xx xxxx xxxxx xxxxxxx, xxxxxxx xx xxxxx.</p>
<p>xxxxxx x xxxxx xxxx xxxxx xxx xxx xx xxx xxxx, xxxx xx xxxxx xxx xxx xxxx xxxxx.</p>

<br/>

<div style="height: 495px; width: 800px;" id="ImageMap_1_1163747142"><map name="ImageMap_1_1163747142" id="ImageMap_1_1163747142">
<area href="States/Alabama/index.html" shape="poly" coords="537,310,556,377,518,382,518,395,506,391,504,312" alt="Alabama" title="Alabama" />
<area href="States/Alaska/index.html" shape="poly" coords="127,381,128,451,148,457,171,481,171,491,153,491,132,461,98,456,83,473,10,482,55,456,34,431,43,391,60 ,375,89,365" alt="Alaska" title="Alaska" />
<area href="States/Arizona/index.html" shape="poly" coords="110,330,159,362,191,368,204,271,134,258,131,272,123,272,117,290,126,304" alt="Arizona" title="Arizona" />
<area href="States/Arkansas/index.html" shape="poly" coords="409,289,408,337,416,350,460,350,472,311,479,295,467,290" alt="Arkansas" title="Arkansas" />
<area href="States/California/index.html" shape="poly" coords="23,137,76,151,61,203,117,283,115,289,124,303,112,329,76,325,34,279,11,162" alt="California" title="California" />
<area href="States/Colorado/index.html" shape="poly" coords="214,196,308,207,304,276,206,267" alt="Colorado" title="Colorado" />
<area href="States/Connecticut/index.html" shape="poly" coords="683,154,683,172,705,163,703,150" alt="Connecticut" title="Connecticut" />
<area href="States/Delaware/index.html" shape="poly" coords="663,199,667,225,678,225,674,213" alt="Delaware" title="Delaware" />
<area href="States/Florida/index.html" shape="poly" coords="610,378,648,455,632,486,617,487,596,434,574,394,553,405,521,393,521,384,556,379,556,384" alt="Florida" title="Florida" />
<area href="States/Georgia/index.html" shape="poly" coords="537,307,572,304,614,348,609,380,557,381" alt="Georgia" title="Georgia" />
<area href="States/Hawaii/index.html" shape="poly" coords="183,423,180,461,216,491,283,492,286,465,244,424" alt="Hawaii" title="Hawaii" />
<area href="States/Idaho/index.html" shape="poly" coords="141,40,128,89,134,97,121,117,114,159,189,172,197,131,172,128,167,106,158,109,160,88,146,60,152,42" alt="Idaho" title="Idaho" />
<area href="States/Illinois/index.html" shape="poly" coords="463,184,450,219,470,243,467,254,486,275,496,274,505,243,501,189,493,174,461,179" alt="Illinois" title="Illinois" />
<area href="States/Indiana/index.html" shape="poly" coords="503,191,502,260,527,254,542,237,537,185" alt="Indiana" title="Indiana" />
<area href="States/Iowa/index.html" shape="poly" coords="385,164,379,179,391,215,446,215,454,204,461,188,451,165" alt="Iowa" title="Iowa" />
<area href="States/Kansas/index.html" shape="poly" coords="307,224,301,278,407,280,407,243,401,238,404,231,393,224" alt="Kansas" title="Kansas" />
<area href="States/Kentucky/index.html" shape="poly" coords="485,286,565,275,582,259,569,241,544,234,528,258,502,261" alt="Kentucky" title="Kentucky" />
<area href="States/Louisiana/index.html" shape="poly" coords="421,407,426,382,416,367,418,351,461,351,463,363,456,385,479,385,488,396,495,416,456,421" alt="Louisiana" title="Louisiana" />
<area href="States/Maine/index.html" shape="poly" coords="698,93,709,124,713,131,748,88,740,74,728,50,708,47" alt="Maine" title="Maine" />
<area href="States/Maryland/index.html" shape="poly" coords="611,211,611,219,631,212,649,222,648,229,658,232,666,247,677,224,665,224,662,202" alt="Maryland" title="Maryland" />
<area href="States/Massachusetts/index.html" shape="poly" coords="681,142,682,155,708,150,715,156,733,158,733,143,713,134" alt="Massachusetts" title="Massachusetts" />
<area href="States/Michigan/index.html" shape="poly" coords="454,95,463,109,497,124,511,187,554,183,562,159,540,107,485,71" alt="Michigan" title="Michigan" />
<area href="States/Minnesota/index.html" shape="poly" coords="374,66,380,119,378,123,385,130,385,164,451,164,451,155,428,140,426,125,434,105,464,80,403,72,399,59" alt="Minnesota" title="Minnesota" />
<area href="States/Mississippi/index.html" shape="poly" coords="474,314,503,311,506,394,488,395,478,383,456,383,464,356,463,346" alt="Mississippi" title="Mississippi" />
<area href="States/Missouri/index.html" shape="poly" coords="392,216,393,224,406,240,407,288,472,287,468,295,476,295,486,279,466,254,469,245,447,218" alt="Missouri" title="Missouri" />
<area href="States/Montana/index.html" shape="poly" coords="154,41,149,58,162,87,159,106,167,103,174,127,196,128,198,123,285,132,293,63" alt="Montana" title="Montana" />
<area href="States/Nebraska/index.html" shape="poly" coords="284,169,281,204,307,206,307,221,396,224,384,181,355,174" alt="Nebraska" title="Nebraska" />
<area href="States/Nevada/index.html" shape="poly" coords="77,152,150,167,130,270,122,270,118,285,61,204" alt="Nevada" title="Nevada" />
<area href="States/New Hampshire/index.html" shape="poly" coords="692,95,688,140,711,134,697,91" alt="New Hampshire" title="New Hampshire" />
<area href="States/New Jersey/index.html" shape="poly" coords="668,173,667,188,673,193,665,200,675,212,687,187,680,182,680,176" alt="New Jersey" title="New Jersey" />
<area href="States/New Mexico/index.html" shape="poly" coords="204,267,290,275,281,364,204,360,202,370,189,366" alt="New Mexico" title="New Mexico" />
<area href="States/New York/index.html" shape="poly" coords="607,148,597,171,658,159,667,170,680,174,680,180,687,184,707,169,685,171,682,154,682,139,670,103,648, 107,629,139" alt="New York" title="New York" />
<area href="States/North Carolina/index.html" shape="poly" coords="589,274,556,305,597,298,624,300,641,313,682,278,670,258" alt="North Carolina" title="North Carolina" />
<area href="States/North Dakota/index.html" shape="poly" coords="293,63,288,115,380,120,373,67" alt="North Dakota" title="North Dakota" />
<area href="States/Ohio/index.html" shape="poly" coords="545,234,567,238,572,244,596,203,592,178,563,187,553,184,538,186,542,229" alt="Ohio" title="Ohio" />
<area href="States/Oklahoma/index.html" shape="poly" coords="290,276,407,281,412,340,359,331,331,324,331,290,288,288" alt="Oklahoma" title="Oklahoma" />
<area href="States/Oregon/index.html" shape="poly" coords="50,66,22,121,22,135,113,157,118,114,131,98,125,87,83,87,61,81,60,69" alt="Oregon" title="Oregon" />
<area href="States/Pennsylvania/index.html" shape="poly" coords="591,175,597,213,660,200,671,192,665,186,667,171,658,159" alt="Pennsylvania" title="Pennsylvania" />
<area href="States/Rhode Island/index.html" shape="poly" coords="708,149,713,156,707,163,702,153" alt="Rhode Island" title="Rhode Island" />
<area href="States/South_Carolina/index.html" shape="poly" coords="572,303,616,349,638,314,625,301,597,297" alt="South Carolina" title="South Carolina" />
<area href="States/South_Dakota/index.html" shape="poly" coords="289,115,380,120,377,124,383,131,383,163,380,179,355,173,313,169,285,168,286,152,286,134" alt="South Dakota" title="South Dakota" />
<area href="States/Tennessee/index.html" shape="poly" coords="475,312,557,305,588,273,480,287" alt="Tennessee" title="Tennessee" />
<area href="States/Texas/index.html" shape="poly" coords="289,285,281,366,229,360,255,405,276,418,290,404,307,407,340,467,367,477,367,444,423,408,426,381,416, 344,403,337,331,325,330,288" alt="Texas" title="Texas" />
<area href="States/Utah/index.html" shape="poly" coords="152,168,190,174,187,194,214,195,204,268,135,256" alt="Utah" title="Utah" />
<area href="States/Vermont/index.html" shape="poly" coords="670,103,681,140,688,140,691,100" alt="Vermont" title="Vermont" />
<area href="States/Virginia/index.html" shape="poly" coords="582,259,565,276,670,257,658,234,647,230,649,223,638,215,628,215,610,231,606,254" alt="Virginia" title="Virginia" />
<area href="States/Washington/index.html" shape="poly" coords="48,63,61,71,61,79,93,85,132,91,140,41,73,21,50,28" alt="Washington" title="Washington" />
<area href="States/Washington/index.html" shape="poly" coords="24,32,30,35,30,40,46,43,66,45,70,20,37,10,25,14" alt="Washington" title="Washington" />
<area href="States/West Virginia/index.html" shape="poly" coords="637,217,628,216,620,232,611,230,607,248,598,257,584,260,575,248,579,229,592,219,594,201,597,214,612, 212,612,219,628,211,635,212" alt="West Virginia" title="West Virginia" />
<area href="States/Wisconsin/index.html" shape="poly" coords="436,108,434,117,428,122,428,141,449,154,450,175,458,180,494,175,501,130,495,128,488,119,457,105,449, 100" alt="Wisconsin" title="Wisconsin" />
<area href="States/Wyoming/index.html" shape="poly" coords="199,123,186,194,281,204,286,131" alt="Wyoming" title="Wyoming" />
<area href="States/Delaware/index.html" shape="rect" coords="737,227,795,242" alt="Delaware" title="Delaware" />
<area href="States/Maryland/index.html" shape="rect" coords="736,243,794,263" alt="Maryland" title="Maryland" />
<area href="States/New Hampshire/index.html" shape="rect" coords="563,28,655,50" alt="New Hampshire" title="New Hampshire" />
<area href="States/New Jersey/index.html" shape="rect" coords="723,204,793,224" alt="New Jersey" title="New Jersey" />
<area href="States/Massachusetts/index.html" shape="rect" coords="567,73,646,94" alt="Massachusetts" title="Massachusetts" />
<area href="States/Connecticut/index.html" shape="rect" coords="727,185,797,203" alt="Connecticut" title="Connecticut" />
<area href="States/West Virginia/index.html" shape="rect" coords="716,284,795,301" alt="West Virginia" title="West Virginia" />
<area href="States/Vermont/index.html" shape="rect" coords="607,53,651,72" alt="Vermont" title="Vermont" />
<area href="States/Rhode Island/index.html" shape="rect" coords="720,163,796,184" alt="Rhode Island" title="Rhode Island" /></map><img alt="" src="800px-Map_of_USA_with_state_names.svg.png" width="800" height="495" usemap="#ImageMap_1_1163747142" />
</div>

<br/>

<div id="states">

<div id="states1"><ul>
<li><a href="States/Alabama/index.html">Alabama (AL)</a></li>
<li><a href="States/Alaska/index.html">Alaska (AK)</a></li>
<li><a href="States/Arizona/index.html">Arizona (AZ)</a></li>
<li><a href="States/Arkansas/index.html">Arkansas (AR)</a></li>
<li><a href="States/California/index.html">California (CA)</a></li>
<li><a href="States/Colorado/index.html">Colorado (CO)</a></li>
<li><a href="States/Connecticut/index.html">Connecticut (CT)</a></li>
<li><a href="States/Delaware/index.html">Delaware (DE)</a></li>
<li><a href="States/Florida/index.html">Florida (FL)</a></li>
<li><a href="States/Georgia/index.html">Georgia (GA)</a></li>
</ul></div>

<div id="states2"><ul>
<li><a href="States/Hawaii/index.html">Hawaii (HI)</a></li>
<li><a href="States/Idaho/index.html">Idaho (ID)</a></li>
<li><a href="States/Illinois/index.html">Illinois (IL)</a></li>
<li><a href="States/Indiana/index.html">Indiana (IN)</a></li>
<li><a href="States/Iowa/index.html">Iowa (IA)</a></li>
<li><a href="States/Kansas/index.html">Kansas (KS)</a></li>
<li><a href="States/Kentucky/index.html">Kentucky (KY)</a></li>
<li><a href="States/Louisiana/index.html">Louisiana (LA)</a></li>
<li><a href="States/Maine/index.html">Maine (ME)</a></li>
<li><a href="States/Maryland/index.html">Maryland (MD)</a></li>
</ul></div>

<div id="states3"><ul>
<li><a href="States/Massachusetts/index.html">Massachusetts (MA)</a></li>
<li><a href="States/Michigan/index.html">Michigan (MI)</a></li>
<li><a href="States/Minnesota/index.html">Minnesota (MN)</a></li>
<li><a href="States/Mississippi/index.html">Mississippi (MS)</a></li>
<li><a href="States/Missouri/index.html">Missouri (MO)</a></li>
<li><a href="States/Montana/index.html">Montana (MT)</a></li>
<li><a href="States/Nebraska/index.html">Nebraska (NE)</a></li>
<li><a href="States/Nevada/index.html">Nevada (NV)</a></li>
<li><a href="States/New Hampshire/index.html">New Hampshire (NH)</a></li>
<li><a href="States/New Jersey/index.html">New Jersey (NJ)</a></li>
</ul></div>

<div id="states4"><ul>
<li><a href="States/New Mexico/index.html">New Mexico (NM)</a></li>
<li><a href="States/New York/index.html">New York (NY)</a></li>
<li><a href="States/North Carolina/index.html">North Carolina (NC)</a></li>
<li><a href="States/North Dakota/index.html">North Dakota (ND)</a></li>
<li><a href="States/Ohio/index.html">Ohio (OH)</a></li>
<li><a href="States/Oklahoma/index.html">Oklahoma (OK)</a></li>
<li><a href="States/Oregon/index.html">Oregon (OR)</a></li>
<li><a href="States/Pennsylvania/index.html">Pennsylvania (PA)</a></li>
<li><a href="States/Rhode/index.html">Rhode Island (RI)</a></li>
<li><a href="States/South Carolina/index.html">South Carolina (SC)</a></li>
</ul></div>

<div id="states5"><ul>
<li><a href="States/South Dakota/index.html">South Dakota (SD)</a></li>
<li><a href="States/Tennessee/index.html">Tennessee (TN)</a></li>
<li><a href="States/Texas/index.html">Texas (TX)</a></li>
<li><a href="States/Utah/index.html">Utah (UT)</a></li>
<li><a href="States/Vermont/index.html">Vermont (VT)</a></li>
<li><a href="States/Virginia/index.html">Virginia (VA)</a></li>
<li><a href="States/Washington/index.html">Washington (WA)</a></li>
<li><a href="States/West Virgina/index.html">West Virgina (WV)</a></li>
<li><a href="States/Wisconsin/index.html">Wisconsin (WI)</a></li>
<li><a href="States/Wyoming/index.html">Wyoming (WY)</a></li>
</ul></div>

</div>

<br style="clear:both;" />

<div id="index-footer"><b><a href="credits.html">Credits</a></b></div>
</body>
</html>

CSS:


body{
text-align: center;
white-space:nowrap;
}

ul, li{
list-style-type: none;
text-decoration: none;
}

a:link{
color: blue;
text-decoration: none;
}

a:visited{
color: blue;
text-decoration: none;
}

a:hover{
color: red;
text-decoration: none;
}

a:active{
color: red;
text-decoration: none;
}

#ImageMap_1_1163747142{
margin-left:auto;
margin-right:auto;
}

#index-footer{
width: 100%;
}

#index-footer a:link{
color: red;
text-decoration: none;
}

#index-footer a:visited{
color: red;
text-decoration: none;
}

#index-footer a:hover{
color: blue;
text-decoration: none;
}

#index-footer a:active{
color: blue;
text-decoration: none;
}

@media all and (min-width: 700px) {
#states{width: 800px; margin:0 auto;}
#states1{float: left; align: center;}
#states2{float: left; align: center;}
#states3{float: left; align: center;}
#states4{float: left; align: center;}
#states5{float: left; align: center;}
}

@media all and (max-width: 800px) {
img {
display: none;
}
}


Thanks for any help you can offer!

sunfighter
02-18-2012, 05:37 PM
You are killing the img but not the div that contains it. That div hasn't width/height so it may be something else that should be removed but this works at getting rid of empty space:

@media all and (max-width: 800px) {
#ImageMap_1_1163747142 {
display: none;
}
}

CSSNoob7
02-18-2012, 06:51 PM
You are killing the img but not the div that contains it. That div hasn't width/height so it may be something else that should be removed but this works at getting rid of empty space:

@media all and (max-width: 800px) {
#ImageMap_1_1163747142 {
display: none;
}
}

Thanks, that worked perfectly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum