Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Putting div elements inline

Tags:

html

css

I want to make a timeline but it has broken structure. I think that is because of display:inline, and if I tried to do that to my site, it would break it. display: inline-block also funks it up.

I tried to display: inline to the overall div containing the timeline and that didn't work. So then I did it to all the divs that were also in the timeline and that didn't work either.

Timeline:

<span class = "timelinefull">
    <div ng-controller="MainController">
        <div class="timeline">              
            <!-- ANCHOR DOT -->
            <div class= "dot">
                <div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false"   ng-mouseover="getCoords(event)">
                    <img class="icon" ng-src="img/icon_dot.png" height="30px" width="30px">
                </div> 
                <div class="info label label-info" id="info" ng-show="infoIsVisible">
                    <p>Was born</p>
                </div>
            </div>

            <!-- REST OF MY DOTS -->

            <div class="dot" ng-repeat="timelineEvent in timelineEvents">
                <timeline-info info="timelineEvent"></timeline-info>
            </div>          
        </div>
    </div>
</span>

Template for ng-repeat:

<div class="timeline-inner" ng-init="infoIsVisible= false">
    <img class="line" src="components/timeline/template-timeline/img/line.png" height="5px" width="{{ info.months }}">
    <div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false"   ng-mouseover="getCoords(event)">
        <a href="{{ info.link }}">
            <img class="icon" id="icon" ng-src="{{ info.icon }}" height="30px" width="30px">
        </a>
    </div> 
</div>

<div class="info label label-info" id="info" ng-show="infoIsVisible">
    <p>{{ info.description }}</p>
    <p style="font-size: 8px"> Click for more info </p>
</div>

CSS

.timelinefull {
    display: inline;
}

.timeline-inner {
    display: inline;
}

.info {
    display: inline;
    padding-top: 10px;
    position: absolute;
    z-index: 100;
    -webkit-transition:all linear 0.3s;
    transition:all linear 0.3s;
}

.line {
    box-shadow: 0 0 0 2px rgba(0,0,0,.05);
    margin-left: -5px;
    margin-right: -5px;
}

.info.ng-hide {
    opacity:0;
}

a:link {
    text-decoration: none;
}

Thanks for the help!

like image 207
user5812721 Avatar asked Jan 24 '16 22:01

user5812721


2 Answers

You have 3 options, to choose for the display property of an element in CSS:

Inline elements:

  1. respect left & right margins and padding, but not top & bottom
  2. cannot have a width and height set
  3. allow other elements to sit to their left and right.

Block elements:

  1. respect all of those
  2. force a line break after the block element

Inline-block elements:

  1. allow other elements to sit to their left and right
  2. respect top & bottom margins and padding
  3. respect height and width

So, it's better to put display:inline-block for elements with these classes:

  • dot
  • timeline-inner

like this:

timeline dot, timeline timeline-inner{
    display: inline-block;
}

Please dont forget to put enough time to provide a summarized, though useful version of your code, including Markup and CSS, to let people reproduce final results.

like image 191
Pmpr.ir Avatar answered Nov 15 '22 08:11

Pmpr.ir


Try adding the following to your CSS

.timeline, .timeline .dot, .timeline-inner, .timelinefull {
    display:inline-block;
}
.timeline, .timelinefull {
    width:100%;
}

Update:

Shot in the dark, without a snippet..

Could you add to your css

.dot .timeline-inner {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

The above code will vertically center .timeline-inner. From your screenshot it seems because the elements are now display-inline they only take up as much space as they need (the correct behaviour), however, you need the elements to align vertically centered within the timeline.

like image 42
mani Avatar answered Nov 15 '22 09:11

mani