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 Ivan Tomicic
Ivan Tomicic
3,873 Points

DIV height according to another DIV?

Hey guys...

I'm still having problems with this quote thing...

I want to have arrows in yellow area in the middle of that div, but I can't figure out how to tell that div to be same height as red one.

Here is my link, quote is at the bottom. Thank you so much!

http://www.blackcoffeestudio.com/about/

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi i hope to help you but im not sure what you want to do . bdw when i looked at your website , your nav bar should apear a little bit ealier i think , because in quite a long time it desapears so in js or php you could try when scroll 100px down the nav apears or like in yahoo.

Ivan Tomicic
Ivan Tomicic
3,873 Points

Thanks for your advice!

What I want to do is to make left and right arrow (near quote) positioned in the center and not at the top as they are now.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

aaaa i get you , you can try line-height and depends what previous height you put you can try ans see how it works or you can try with top:-10px etc... try this i think it shoud work and make sure both arrow have exactly same class name for it . If it doesnt help i sugest you to paste a bit of the code here so we can look at it .

Ivan Tomicic
Ivan Tomicic
3,873 Points

Well, I can't do that as I will never know height value of "quote" area...

Here is code:

<div class="rotatinquotes-wrapper">
<div class="rotatinquotes-subwrapper">
<div class="prevnext">
    <span class="fa fa-arrow-left"></span>
</div>
<div class="rotatingquotes">
    <div class="cycle-slideshow" 
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="5000"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides="> div"
    >
    <div class="quote-box">
        <p class="quote-text">At BLACKCOFFEE, we believe in you. You know your product, your service, your story. Our job is to help you bring that story to life and tell the world. We’ll do it with integrity and passion – building and preserving your reputation along the way.</p>
        <p class="quote-author">Shannon Larkins, President</p>
    </div>
    <div class="quote-box">
        <p class="quote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p class="quote-author">Ivan Tomicic, Web Developer</p>
    </div>
    <div class="quote-box">
        <p class="quote-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="quote-author">Cit, Brand Designer</p>
    </div>
    </div>
</div>
<div class="prevnext">
    <span class="fa fa-arrow-right"></span>
</div>
</div>
</div>

.rotatinquotes-wrapper {
    margin: 100px 0 0 0;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 40px 0;
    overflow: hidden;
}

.rotatinquotes-subwrapper {
    width: 900px;
    margin: 0 auto;
}

}

.prevnext {
    width: 100px;
    float: left;
    background: yellow;
}

.rotatingquotes {
    max-width: 700px;
    width: 100%;
    float: left;
    background: red;
}

.cycle-slideshow div {
    max-width: 700px;
    width: 100%;
}


.quote-box .quote-text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;  
    font-size: 1.125em;
    padding: 15px 15px;
    background-image: url('images/quote_start.png'), url('images/quote_end.png');
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    margin: 0;
}

.quote-box .quote-author {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;  
    font-weight: 600;
    color: #55C2B9;
    font-size: 1.125em;
    padding: 0 20px;
    margin: 0;
}
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

bdw how long did it take you to lern all htis suff? and what path did you do ? if you can tell me if you have time

1 Answer

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Ivan,

I'm not quite sure what you are after. The page changes every time I look at it. If all you want is the yellow arrows aligned vertically you might try this:

.prevnext {
    margin-top: 5%;
}

Jeff