Anonymous 0

Hello all. I was wondering if anyone could help me with this problem. I'm trying to raise a floated image, but I can't seem to get it past a certain point. My HTML looks like:

<div id='set1' class='set'>
    <h2>Set 1</h2>
    <div id='s1s01' class='song'>
      <div id='test_div' class="song_name_div">
        <h6>Song name:</h6>
        <input type="text" name="s1s01_name" size="30" />
      </div>
      <div id='test_div2' class="song_loc_div">
        <h6>File location:</h6>
        <input type="file" name ="upload[]" />
      </div>
      <img src="images/ul_seuge.png" class="sugue_indic"/>
      <div id='s1s01_addInfo' class='addInfo'>
        <p>additional info:</p>
        <textarea name="s1s01_addInfo" rows="1" cols="40" value="unknown"></textarea>
      </div>
      <p class="remove_song">remove song -</p>
    </div>
    <p class="add_song">add song +</p>
  </div>

and my css looks like:

div {border: solid 1px transparent;}

.set{
  width: 590px;
  /*"overflow: hidden" allows for auto-vertical expansion*/
      overflow: hidden;
      border-style:solid;
  border-width:5px;
  border-color:red;
      background: white;
      opacity:0.4;
      filter:alpha(opacity=40);

      -webkit-border-radius: 24px;

  -moz-border-radius: 24px;
}
.set h2{
  position: relative;
  top: 2px;
  left: 10px;
  font-family: verdana;
  font-size: 14px;
  color: navy;      
}

.song{
  position: relative;      
  left: 10px;
  width: 550px;
      height: 145px;
  background: blue;
      opacity:0.9;
      filter:alpha(opacity=90);

  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;
}

    .song_name_div{
      float: left;
      margin-top: 10px;
      margin-left: 10px;
      width: 250px;
      height: 80px;
      background: #76a8d7;
      opacity:0.9;
      filter:alpha(opacity=90);

      -webkit-border-top-left-radius: 24px;
  -webkit-border-bottom-left-radius: 24px;

  -moz-border-radius-topleft: 24px;
  -moz-border-radius-bottomleft: 24px;
    }

.song_name_div input{
  position: relative;
      left: 18px;
      bottom: 35px;
}

.song_name_div h6 {
  position: relative;
      bottom: 20px;
      left: 10px;
      color: #F2EFE9;
      font-family: Verdana;
      font-size: 14px;
}

/*song_loc_div's div positioning
meant as a reflection of song_name_div*/
.song_loc_div{
  float: right;
  margin-top: 10px;
  margin-right: 30px;
      width: 250px;
      height: 80px;
      background: #76a8d7;
      opacity:0.9;
      filter:alpha(opacity=90);

      -webkit-border-top-right-radius: 24px;
  -webkit-border-bottom-right-radius: 24px;

  -moz-border-radius-topright: 24px;
  -moz-border-radius-bottomright: 24px;
    }

.song_loc_div input{
  position: relative;
      bottom: 35px;
}

.song_loc_div h6 {
  position: relative;
      bottom: 20px;
      left: 5px;
      color: #F2EFE9;
      font-family: Verdana;
      font-size: 14px;
}

.sugue_indic{
  float: right;
  padding-right: 5px;
  padding-bottom: 100%;
}

.addInfo{
  float:left;
  padding-left: 10px;
  height: 20px;
}

.addInfo textarea{
  position: relative;
  left: 95px;
  bottom: 40px;
  color: navy;
  font-family: verdana;
}

p.remove_song{
  float: right;
  width: 100px;
  height: 20px;
  color: white;
}

p.add_song{
  position: relative;
  left: 15px;
  bottom: 5px;
  font-size: 14px;
  font-familt: verdana;
  color: blue;
  font-weight: bold;
}

Does anyone see why I can't raise<img src="images/ul_seuge.png" class="sugue_indic"/>any higher? All comments are appreciated. Thanks in advance...

1 answer

raphael 30
2
points
This was chosen as the best answer

It depends on where you want to place the image. You can try declaring the img tag above the other tags:

<h2>Set 1</h2>
<img src="images/ul_seuge.png" class="sugue_indic"/>
<div id='s1s01' class='song'>

Or you could try a negative margin-top, pulling the image up:

margin-top: -100px;
Answered almost 7 years ago by raphael
  • Thanks. Negative margins fixed it. Why doesn't adding a margin to the bottom do anything? Dan Woodson almost 7 years ago
  • Margin to the bottom would push content below it down, not raise it up. And actually, unless you had a clear on a div placed in the html below the float, it wouldn't have anything to push down. Cameron Conner almost 7 years ago
  • Cameron is right. Negative values for bottom margin will not raise the beneath elements as well. o.k.w almost 7 years ago