Ich bins mal wieder…
Habe hier ein extrem lange Webseite als Beispiel und dort ist das 2Klick Menü integriert…
Das 2 Klick Menü hat eine Extra CSS Datei (original von Heise)
[code].social_share_privacy_area {
clear: both;
margin: 20px 0 !important;
list-style-type: none;
padding: 0 !important;
width: auto;
height: 25px;
display: block;
margin-left: auto;
margin-right: auto
}
.social_share_privacy_area li {
margin: 0 !important;
padding: 0 !important;
height: 21px;
float: left;
}
.social_share_privacy_area li .dummy_btn {
float: left;
margin: 0 0 0 10px;
cursor: pointer;
padding: 0;
height: inherit;
}
.social_share_privacy_area li div iframe {
overflow: hidden;
height: inherit;
width: inherit;
}
/* Facebook begin /
.social_share_privacy_area .facebook {
width: 180px;
display: inline-block;
}
.social_share_privacy_area .facebook .fb_like iframe {
width: 145px;
}
/ Facebook end /
/ Twitter begin /
.social_share_privacy_area .twitter {
width: 148px;
}
.social_share_privacy_area li div.tweet {
width: 115px;
}
/ Twitter end /
/ Google+ begin /
.social_share_privacy_area .gplus {
width: 123px;
}
.social_share_privacy_area li div.gplusone {
width: 90px;
}
/ Google+ end /
/ Switch begin /
.social_share_privacy_area li .switch {
display: inline-block;
text-indent: -9999em;
background: transparent url(images/socialshareprivacy_on_off.png) no-repeat 0 0 scroll;
width: 23px;
height: 12px;
overflow: hidden;
float: left;
margin: 4px 0 0;
padding: 0;
cursor: pointer;
}
.social_share_privacy_area li .switch.on {
background-position: 0 -12px;
}
/ Switch end /
/ Tooltips begin /
.social_share_privacy_area li.help_info {
position: relative;
}
.social_share_privacy_area li.help_info .info,
.social_share_privacy_area li .help_info.icon .info {
display: none;
position: absolute;
bottom: 40px;
left: 0;
width: 290px;
padding: 10px 15px;
margin: 0;
font-size: 12px;
line-height: 16px;
font-weight: bold;
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 3px 4px #999;
-webkit-box-shadow: 0 3px 4px #999;
box-shadow: 0 3px 4px #999;
background-color: #fdfbec;
color: #000;
z-index: 500;
}
.social_share_privacy_area li.gplus.help_info .info {
left: -60px;
}
.social_share_privacy_area li .help_info.icon .info {
left: -243px;
width: 350px;
}
.social_share_privacy_area li.help_info.display .info,
.social_share_privacy_area li .help_info.icon.display .info {
display: block;
}
.social_share_privacy_area li.help_info.info_off.display .info {
display: none;
}
.social_share_privacy_area li .help_info.icon {
background: #fff url(images/socialshareprivacy_info.png) no-repeat center center scroll;
width: 25px;
height: 20px;
position: relative;
display: inline-block;
vertical-align: top;
border: 2px solid #e7e3e3;
border-right-width: 0;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
margin: 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu.on .help_info.icon {
border-top-width: 0;
border-left-width: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu.perma_option_off .help_info.icon {
border-right-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/ Tooltips end /
/ Settings/Info begin /
.social_share_privacy_area li.settings_info {
position: relative;
top: -2px;
}
.social_share_privacy_area li.settings_info a {
text-decoration: none;
margin: 0 !important;
}
.social_share_privacy_area li.settings_info .settings_info_menu {
background-color: #f3f4f5;
border: 2px solid #e7e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #c1c1c1;
-webkit-box-shadow: 2px 2px 3px #c1c1c1;
box-shadow: 3px 3px 3px #c1c1c1;
left: 0;
position: absolute;
top: 0;
width: 135px;
z-index: 1000;
margin: 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu.off {
border-width: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent;
}
.social_share_privacy_area li.settings_info .settings_info_menu.off form {
display: none;
margin: 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu .settings {
text-indent: -9999em;
display: inline-block;
background: #fff url(images/settings.png) no-repeat center center scroll;
width: 25px;
height: 20px;
border: 2px solid #e7e3e3;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
border-left: 1px solid #ddd;
margin: 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu.on .settings {
border-top-width: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset {
border-width: 0;
margin: 0;
padding: 0 10px 10px;
}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset legend {
font-size: 11px;
font-weight: bold;
line-height: 14px;
margin: 0;
padding: 10px 0;
width: 115px;
}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset input {
clear: both;
float: left;
margin: 4px 10px 4px 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset label {
display: inline-block;
float: left;
font-size: 12px;
font-weight: bold;
line-height: 24px;
-moz-transition: color .5s ease-in;
-webkit-transition: color .5s ease-in;
transition: color .5s ease-in;
margin: 0;
padding: 0;
}
.social_share_privacy_area li.settings_info .settings_info_menu form fieldset label.checked {
color: #090;
}
/ Settings/Info end */[/code]
Wie zum Teufel bekomm ich das Teil mittig?
