Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

image pushing section down

Hello, my image on my page is pushing my text section down, is there anyway to abvoid this, and make the text and banner overlap the image?

heres a picture of it http://imgur.com/aT4b4EN

Kind regards

// erdag

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

heres the css

.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    clear:both;
    margin-bottom: 130px;
}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  float: right;
  z-index: 0;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.support-text {
  clear: left;
}

and html 

<img src="img/ct.png" class="ct-pic">

    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p>Hello hello hello hello hello hello hello hello hello hellohello
helloh ellohello hello helooh elloh ello helloh ello hello hello
hello hellohello hello hello hello </p>

    </section>
Tim Holley
Tim Holley
8,464 Points
Tim Holley
Tim Holley
8,464 Points

Is your intentions for that image to be the background, and then the support us would be in the foreground? If this is the case, you can then do this.

.support-text {
background-image: url('...')
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

The images i want to the right side of the banner and the text, but the image is to large so it pushes the text and banner down, is there anyway to make the text and banner overlap the image?

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

I agree with Tim,

Your best bet will be setting the first image as the background image. you should also set the max-width to 100% for the inner img so that it is at the .support-text width. View below. LEt me know if you have any questions.

<section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p>Hello hello hello hello hello hello hello hello hello hellohello
helloh ellohello hello helooh elloh ello helloh ello hello hello
hello hellohello hello hello hello </p>
    </section>

.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    clear:both;
    margin-bottom: 130px;
  background: url('http://goo.gl/ef6gSh');

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
  max-width: 100%;
}


.support-text {
  clear: left;
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hello, thanks fro replying, i positioned my images with absolute, heres a picture http://imgur.com/KwzphQP thats how i want the them to be, but know when i rezise the window they move around, (note; my page has a fixed layout)

i want the pictures to be like this, 1 to the left and 1 to the right, but know when i rezise the characters move around heres the css 

.support-text {
  width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  clear: left;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}
Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

That one is a bit more complected especially when you consider users with mobile devices. You can use media queries to display the two images on larger screen and hide them on smaller screens. 

@media screen and (min-width: 690px) {

.ct-pic {
  position: absolute;
  right: 10px;
  bottom: 30px;
  float: right;
}

.ct-pic:hover,
.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  position: absolute;
  left: 40px;
  bottom: 30px;
  float: left;
}

}

@media screen and (max-width: 689px) {

.ct-pic,
.t-pic {display: none;}

}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

my page is not made for mobile screens, but i want the images to stay at the same locations even when i rezise the browser, is this possible?

Chyno Deluxe
Chyno Deluxe
16,936 Points

I'm sure it is but the answer is beyond my knowledge unfortunately. I hope you find your answer.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

oh okey, thanks :)