Sticky Social Media icons Possibility Conflict

HTML & CSS
1

This is the Layout design.(Please see attached Image).

842×745 8.84 KB

Small aside + Blog article area + Big aside = 1400px

Now I want that just adjacent to the smaller aside I can place social media Icons 90 degree tilted. See this image, for example.

835×678 170 KB

But my HTML developer has done it like this:

258×793 17 KB

He has fixed it to the extreme wall of the desktop/Laptop, not the end of the 1400px container/section whatever you call it.

He is saying what I want is not possible because those white spaces left and right to smaller aside and bigger aside are not fixed and will change with device/media, but I believe it is possible what I want. Need your guidance.

2

Although you showed what you don’t want, you didn’t describe what you want very clearly. A diagram or pseudo-screenshot showing how you would like to see the social media icons positioned would help. A copy of the code that your developer has written might help, too.

3

I have given the link in the image text.

4

How did I miss that?

What about the code, HTML and CSS. Can that be made available on a test site?

5

From what am reading, am I right to say that this blog won’t be used on a mobile device? Because a responsive design would make all those problems go away. Then just display your social icons somewhere else when the screen is smaller!

Also, sharing your code in codepen.io or any other testing tool would be helpful.

6

Can you elucidate this? what the HTML developer is saying that he has fixed width of 1400px on the bigger screen and depending upon the screen size the white space will take its width. In the responsive version he has hidden that object beyond 980px;

<div class="sticky_share">
<ul class="widget_share">
        <li><a href="" class="fb"><i class="fa fa-facebook" aria-hidden="true"></i><span>like</span></a></li>
       <li><a href="" class="tw"><i class="fa fa-twitter" aria-hidden="true"></i><span>follow</span></a></li>
        <li><a href="" class="goo"><i class="fa fa-google-plus" aria-hidden="true"></i><span>follow</span></a></li>
       </ul>
</div>

This is the CSS of those classes →

.sticky_share{position:fixed; top:50%; left:-176px; z-index:50; transform:rotate(270deg)}
.widget_share > li{display:inline-block; margin-right:10px;}
.widget_share > li > a{display:block; text-transform:uppercase;padding: 3px 0px; position:relative;
    padding-left: 35px;color:#fff; text-align:center;}
.widget_share > li > a > span{padding:0 15px; display:block; text-align:center;}	
.widget_share > li > a > i{width:35px; height:26px; line-height:26px; font-size:1.225em; position:absolute; left:0px; top:0px; background:#fff; display:inline-block;}
.widget_share > li > a.fb{border:1px solid #306199; background:#306199; }
.widget_share > li > a.fb i{color:#306199;}
.widget_share > li > a.tw{border:1px solid #26c4f1; background:#26c4f1; }

I know only basic of HTML, but what I know is that he has not used table model in the entire HTML.

7

If your developer has used display:table/table-cell for the section with the 5 columns, this should work at desktop widths. How you change the layout for narrower widths is undetermined since those columns will have content.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>width of rotated element</title>
<!--
https://www.sitepoint.com/community/t/sticky-social-media-icons-possibility-conflict/251032
Novicedeveloper
Jan 22,2017 9:50 PM
-->
    <style type="text/css">
.outer {
    display:table;
    width:100%;
    min-height:500px;  /* content should determine height */
    margin:0 auto;
}
.tcell {
    display:table-cell;
    vertical-align:top;
    outline:1px dashed magenta;
}
.col1,.col5 {
    width:10%;
    vertical-align:middle
}
.col2 {width:12%;}
.col4 {width:14%;}
.buttonbox {
    display:block;
    outline:1px dashed red;
    width:30px;
    margin:0 auto;
}
img {
    display:block;
    transform:rotate(90deg);
    outline:1px dashed blue;
    cursor:pointer;
    margin:100px -45px;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="tcell col1">
        <a class="buttonbox" href="#"><img src="http://placehold.it/120x30/"></a>
        <a class="buttonbox" href="#"><img src="http://placehold.it/120x30/"></a>
        <a class="buttonbox" href="#"><img src="http://placehold.it/120x30/"></a>
    </div>
    <div class="tcell col2"></div>
    <div class="tcell col3"></div>
    <div class="tcell col4"></div>
    <div class="tcell col5"></div>
</div>

</body>
</html>
8

I have provided some code in my above post.

9

Has he considered using Bootstrap to layout your page?
That page should adjust to any screen. If you are on a big screen (I.e. 1400px), you show all 3 blocks ( small aside, blog article, big aside)…If you are on a small screen (I.e. Android Phone or iPhone), you hide both asides and put your social media icons under one icon (for example an icon that floats on your screen), etc…

10

Hmmm, position: absolute and display: inline-block looks off to me (but maybe I need to get some sleep).

.widget_share > li > a > i {
  width:35px;
  height:26px;
  line-height:26px;
  font-size:1.225em;
  position:absolute;
  left:0px;
  top:0px;
  background:#fff;
  display:inline-block;
}

Doesn’t one “win” over the other?

2 Likes
11

Developers in India are comfortable in using bootstrap, but I insisted this time that he should write the entire HTML w/o bootstrap.

12

I have put your code here →

and asking him to review.

13

If I understand you correctly then both options are feuding →

 position:absolute;
 display:inline-block;

and finally this Option
display:inline-block;
will win over
position:absolute;

Thus there is no requirement of placing this →
position:absolute;

14

Others would know better than I.

But if you inspect the element in your browsers dev tools you should be able to see which styles are not being used.

184×330 13.7 KB

15


It’s not quite that simple because if the position is absolute then ‘display’ is computed as block but the element will still be absolutely positioned.:slight_smile: They are not mutually exclusive as with some properties because the ‘display’ property can in edge cases affect the way that ‘auto positioned’ absolute elements are placed.

2 Likes
16

Here’s a very quick and rough version showing a fixed panel to the side of a fluid layout. You will need to view this on codepen to see the effect as it won’t show in the embed properly.

The trick is to mimic the width of the normal layout with the fixed item and then place it under the content but allow the fixed element to be slightly larger. (Older versions of IE will not centre max-width items with margin:auto when using position:fixed but that can easily be fixed by using a fixed width instead but then using a media query to change the width to 100% when the screen width matches the fixed width.)

18

I have Created a Pen here → http://codepen.io/codeispoetry/pen/dNWBWY
Now I want mu Social Media Icons to be placed here like this → https://www.screencast.com/t/1iXxLQhAi
This is to be arranged in such a way that irrespective of how white space increase/decrease it should stick to where it is.

19

I gave you the exact code to do that in my codepen demo!

What is it that is different in my demo from your example?

You rarely want to create a site like that with fixed height columns as that will not work as you expect and is too rigid. If you want equal height columns then you need to use the display:table approach as in my example or for modern browsers use flexbox.

20

I have fixed the height just for the demo purpose.

21

Now tell me what you don’t like about my demo or what you would like it to do differently?

Here is the fixed method added into your codepen.

As I said floats with heights will not an equalising three column make :slight_smile: