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 Jacob Thomson
Jacob Thomson
757 Points

CSS (STUCK)

Hey guys,

I don't know if i can explain my problem well, but here it is.. I have big slider image under my header with text on top of that image using the position property. What I'm trying to accomplish is to have that image cropped on the top and bottom, without disturbing the text over the image. This is my current html markup for the slider and text:

<div id="slider">
                <div class="croppedslider">
                    <img id="sliderimg" src="images/sliderimage.jpg" alt="">
                </div>
                    <h3 id="slider-header">FIRST HOME OWNERS GRANT<br><span id="slider-header2">ENDING SOON</span></h3>
                    <hr id="sliderline">
                    <p id="sliderinfo">Cash in on the government's $30,000 first home owners grant <br>and get your first home built for you, today. Interested? Call us!
                    </p>
                    <a href="#contactsection" id="getintouch" class="nav-link">
                        GET IN TOUCH
                    </a>
            </div>

This is my current css for the slider:

#slider img {
    width: 100%;
    height: 100%;
    position: relative;
}

#sliderimg {
  position: absolute;
  left: 0;
  top: 0;
}

#slider-header {
  z-index:100;
  position:absolute;    
  font-size:30px;
  font-family: Raleway-Thin, helvetica, sans-serif; 
  left: 500px;
  top: 500px;
}

#slider-header2 {
  font-family: Raleway-ExtraBold, helvetica, sans-serif;
}

hr {
  height: 3px;
  background: #FFFFFF;
  border: 0;
  border-color: #FFFFFF;
}

#sliderline {
  width: 430px;
  z-index: 99;
  position: absolute;
  color: #FFFFFF;
  left: 500px;
  top: 605px;
}

#sliderinfo {
  z-index: 98;
  position: absolute;
  left: 500px;
  top: 615px;
  font-family: Raleway-Regular, helvetica, sans-serif;
  font-size: 11pt;
}

#getintouch {
  z-index: 97;
  position: absolute;
  left: 500px;
  top: 680px;
  font-family: Oswald-Light, helvetica, sans-serif;
  border-style: solid;
  border-width: 1px;
  border-color: #25AAE1;
  padding: 7px 12px;
  background-color: #25AAE1;
}

I want the part of the image slider to appear hidden, I dont want the full-size image.. I know you can achieve this through CSS, using overflow property, but cannot get it without warping the image. Very hard to explain, still cannot figure this out

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

HI, you want basically hide the div ?so if you have three sidebars, you want to hide one sidebar so your left with 2 right?