December 6th, 2003, 02:03 PM
|
 |
Trapped on the forums...help
|
|
Join Date: Aug 2003
Location: /Users/edman007
|
|
help positioning stuff with CSS
i'm trying to layout a page i have with CSS so that i have a big image on the left and a some small images and some other stuff i want on the right of the image, the problem i have is the small images and other stuff wont go to the right of the image, it just stays under the image to the left
how do i get it to go to the direct left of the big image? What do i have to add? i have tried changing left, right, text-align, and padding for some of the css part, but it isn't helping
here is what i have
---the--html-----
Code:
<div id="ms_all" >
<input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" /><!-- This is the large Image -->
<div id="ms_side_bar" ><!-- This is the stuff i want on the right of the image -->
<div class="ms_button_name" >
Pan
</div>
<input class="ms_button" type="radio" name="zoom" value="0" checked="checked" />
<div class="ms_button_name" >
Zoom In
</div>
<input class="ms_button" type="radio" name="zoom" value="1" />
<div class="ms_button_name" >
Zoom Out
</div>
<input class="ms_button" type="radio" name="zoom" value="-1" />
<div class="ms_button_name" >
Zoom Size
</div>
<input class="ms_button" type="text" name="zsize" value="3" size="2" />
<div class="ms_button_name" >
Full Extent
</div>
<input class="ms_button" type="submit" name="full" value="Go" size="2" />
<input type="hidden" name="submitted" value="1" />
<input type="hidden" name="PHPSESSID" value="b330837baaa9ecdda6296b145be4dc7e" />
<br />
<img id="ms_ref_image" alt="Refence Image" height="120" width="120" src="map_ref_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" />
<br />
<img id="ms_scale_bar" alt="Scale Bar" height="34" width="200" src="map_scale_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" />
</div>
</div>
</form>
</div>
---the-css--
Code:
#ms_all {
padding:5px;
position: relative;
}
#ms_main_image {
padding:2px;
position: relative;
width:600px;
height:600px;
}
#ms_scale_bar {
position: relative;
}
#ms_ref_image {
position: relative;
}
.ms_button {
position: relative;
right:2px;
}
.ms_button_name {
position: relative;
}
#ms_side_bar {
position: relative;
padding:2px;
vertical-align:top;
width:200px;
}
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
