5 Replies - 812 Views - Last Post: 18 December 2013 - 04:53 PM

#1 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Inline-Block plus span doesnt stay in a straight inline

Posted 16 December 2013 - 01:00 PM

http://www.imagebana...m/Untitled2.jpg

Hello I have a problem with inline-block property.
When I add a span underneath the images, they go up according to the amount of text written.

I would like the inline block property to stay in a straight line and make span increase downwards pushing down the container below.

<div id="threefold"><!-- *threefold* -->
                        <ul>
                            <li class="display1">
                            <a href="#">
                            <img src="img/thumb2.jpg">
                            <div class="headline">Text & Text Text & Text Text & Text Text & Text Text & Text</div></a>
                            </li><!--
                                --><li class="display2">
                                <a href="#">
                                <img src="img/thumb4.jpg">
                                <div class="headline">Text & Text Text & Text</div></a>
                                </li><!--
                                    --><li class="display3">
                                    <a href="#">
                                    <img src="img/thumb3.jpg">
                                    <div class="headline"> Text & Text Text & Text Text & Text </div></a>
                                    </li>
                                        
                        </ul>
                        </div><!--threefold end-->



and css

#threefold{	/* featured articles */
	height: auto;
	width: 650px;
	float: left;
	padding: 0;
	display: block;
	position: relative;
	margin-bottom: 0px;
	
}

#threefold ul{
	padding: 0;
	margin: 0;
	display: block;
}

#threefold ul li{
	list-style: none;
	display: inline-block;
	overflow: hidden;
	height: auto;	
}

#threefold ul li a{
	display: block;
}


#threefold ul li a img{
	height: 225px;
	width: 100%;
	max-width: 100%;
}








#threefold ul .display1{
	margin-right: 5px;
	width: 350px;
}

#threefold ul .display2{
	margin-right: 5px;
	width: 155px;
}

#threefold ul .display3{
	margin-right: 0px;
	width: 135px;
}






#threefold ul li .headline{
	text-align: left;
	font-family: Noticia,Helvetica,Arial,sans-serif;
	font-size: 15px;
	color: #333;
}

#threefold ul li:hover a .headline{
	color: #2476ff;
	
}


Is This A Good Question/Topic? 0
  • +

Replies To: Inline-Block plus span doesnt stay in a straight inline

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Inline-Block plus span doesnt stay in a straight inline

Posted 16 December 2013 - 01:16 PM

Not exactly sure from your description what you want to achieve, but if you give your DIVs a height then everything lines up.

#threefold ul li .headline{
	text-align: left;
	font-family: Noticia,Helvetica,Arial,sans-serif;
	font-size: 15px;
	color: #333;
    height: 40px;
}

Posted Image

This post has been edited by andrewsw: 16 December 2013 - 01:19 PM

Was This Post Helpful? 1
  • +
  • -

#3 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Inline-Block plus span doesnt stay in a straight inline

Posted 16 December 2013 - 01:31 PM

So simple that I cannot believe it. Saving me again, big thanks!

However the anchor point (link) turns on when mouse hover on that specified height, is there anyway I could make the text to highlight just when hovered over it?

This is exactly what I am trying to do just slightly differently and I just cannot figure out how they've done it.

http://www.imagebana...x/Untitled3.jpg

thats from www.engadget.com
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3614
  • View blog
  • Posts: 12,437
  • Joined: 12-December 12

Re: Inline-Block plus span doesnt stay in a straight inline

Posted 16 December 2013 - 02:14 PM

Sorry, helping someone to reverse-engineer another site doesn't interest me.

In my opinion, if someone decides to do this, then I assume they know enough to be able to do this for themselves :).

Again, in my opinion, if you are doing this in an attempt to learn something from it then you would be better off taking a few tutorials ;)

View Postd.c, on 16 December 2013 - 08:31 PM, said:

So simple that I cannot believe it. Saving me again, big thanks!

No worries.

The solution may be simple but the answer isn't. Why does this work?

This post has been edited by andrewsw: 16 December 2013 - 02:12 PM

Was This Post Helpful? 0
  • +
  • -

#5 d.c  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 06-September 13

Re: Inline-Block plus span doesnt stay in a straight inline

Posted 16 December 2013 - 02:18 PM

Its not reversing-engineering another site, my design is completely different as its made out of an inline-block element and I am just trying to get the title underneath the images.

Its like saying that you wont help someone code their navigation bar because other website are using it.

Are you asking me why that solution worked? Perhaps because the text now have a specified height so that it can go downwards insted of pushing the images up like it did before because it didnt have any space specified for it.
Was This Post Helpful? 0
  • +
  • -

#6 nfc212  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 17
  • Joined: 08-December 13

Re: Inline-Block plus span doesnt stay in a straight inline

Posted 18 December 2013 - 04:53 PM

There is a way of doing this without using a list.

I changed the id threefold to a class and floated the elements.

Try the following:

<div class="threefold">
<!-- *threefold images* -->
	<p class="display1"><a href="#"><img src="img/thumb2.jpg"></a></p>
	<p class="display2"><a href="#"><img src="img/thumb4.jpg"></a></p>
	<p class="display3"><a href="#"><img src="img/thumb3.jpg"></a></p>
</div><!--threefold images end-->

<div class="threefold">
<!-- *threefold text* -->
	<p class="display1"><a href="#"><span>Text & Text Text & Text Text & Text Text & Text Text & Text</span></a></p>
	<p class="display2"><a href="#"><span>Text & Text Text & Text</span></a></p>
	<p class="display3"><a href="#"><span>Text & Text Text & Text Text & Text</span></a></p>
</div><!--threefold text end-->


.threefold{
height: auto;
width: 680px;
float: left;
padding: 0;
position: relative;
margin-bottom: 0px;
}
.threefold a img{
border:1px solid #000;
height: 225px;
width: 100%;
max-width: 100%;
float:left;
}
.threefold p.display1{
margin: 0 5px 0 0;
width: 350px;
float:left;
}
.threefold p.display2{
margin: 0 5px 5px 0;
width: 155px;
float:left;
}
.threefold p.display3{
margin: 0 5px 0 0;
width: 135px;
float:left;
}
.threefold span{
text-align: left;
font-family: Noticia,Helvetica,Arial,sans-serif;
font-size: 15px;
}
.threefold a{
color: #333;
}
.threefold a:hover{
color: #2476ff;
}


Using a class makes the code reusable within the page so you could have a series of these down the page.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1