I have these boxes that contain social icons at the end of each webpage of my website. I didn't write the code for it because I'm editing a template so I didn't really do anything. However, one of the pages has a messed up box. They all share the same CSS and the HTML for it is the same as on other pages so I can't figure out why this single page is acting up. I've carefully compared the pieces of code on other pages just in case I have mistakenly changed something but there's no difference and now I'm stumped. What can possibly be wrong? My code snippets below, if someone might kindly help me look at it.
HTML:
<!DOCTYPE HTML>
<html>
<body>
<section id="footer">
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Google+</span></li>
</ul>
<div class="copyright">
<ul class="menu">
<li>© 2022 by Me. All rights reserved.</li>
<li>Privacy</li>
<li>Terms of Use</li>
</ul>
</div>
</section>
</body>
</html>
And the CSS:
<style>
footer
{
margin-top: 1em;
}
br.clear
{
clear: both;
}
/* Sections/Articles */
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
/* Images */
.image
{
display: inline-block;
border: 0;
}
.image img
{
display: block;
width: 100%;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image.full
{
display: block;
width: 100%;
}
.image.left
{
float: left;
margin: 0 2em 2em 0;
}
.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default
{
list-style: disc;
padding-left: 1em;
}
ul.default li
{
padding-left: 1.5em;
margin-top: 1.5em;
}
ul.default li:first-child
{
margin-top: 0;
}
ul.icons
{
cursor: default;
}
ul.icons li
{
display: inline-block;
}
ul.icons a
{
display: inline-block;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
text-align: center;
border: 0;
}
ul.menu
{
cursor: default;
}
ul.menu li
{
display: inline-block;
line-height: 1em;
border-left: solid 1px #dad9d9;
padding: 0 0 0 0.5em;
margin: 0 0 0 0.5em;
}
ul.menu li:first-child
{
border-left: 0;
padding-left: 0;
margin-left: 0;
}
ul.actions
{
cursor: default;
}
ul.actions li
{
display: inline-block;
margin: 0 0 0 0.5em;
}
ul.actions li:first-child
{
margin-left: 0;
}
ol.default
{
list-style: decimal;
padding-left: 1.25em;
}
ol.default li
{
padding-left: 1.25em;
margin-top: 1.5em;
}
ul.default li:first-child
{
margin-top: 0;
}
</style>
Thanks!
I've been playing around with some navigation effects for a project and I've hit a few problems I'm afraid.
Firstly, the transition timing seems a bit off. My general desire was to have the "tooltip", or link name/label, to slide out when you hover over, and then slide back in when you hover off. The idea was to have the highlight color of the icon (numbers in this case) to appear as though it's simply extending and revealing the word, and then shrinking until it's all gone. I've tried a number of variations of timing and delays, but no luck.
I'm also having issues with getting the span to fill the available space/same height of the link area. I altered the spans color to highlight this discrepancy in area.
Lastly, I've put a longer name for link 5 to demonstrate the limitation/problem with using a fixed/specific width for the span. I don't think there's anyway to achieve all that I'm hoping to as well as having a variable width that depends on the length of the text.
Here is the code I have (CodePen link below):
HTML:
<body>
<div class="navigation navbar-fixed-top">
<div class="navigation container">
<ul class="navigation nav-left">
<li>1<span class="tooltiptext">Welcome</span></li>
<li>2<span class="tooltiptext">Second</span></li>
<li>3<span class="tooltiptext">Third</span></li>
<li>4<span class="tooltiptext">Fourth</span></li>
<li>5<span class="tooltiptext">ExtraLongOneToExposeProblem</span></li>
<li>6<span class="tooltiptext">Sixth</span></li>
</ul>
</div>
</div>
</body>
CSS:
.navigation::after {
clear: both;
}
.navigation::before, .navigation::after {
display: table;
content: " ";
}
.container::after {
clear: both;
}
.container::before, .container::after {
display: table;
content: " ";
}
.navigation {
min-height: 50px;
padding-left: 0;
padding-right: 0;
list-style: none;
z-index: 1;
}
.navigation > li {
display: block;
position: relative;
}
.nav-right, .nav-right > li {
float: right;
margin: 0;
}
.nav-left, .nav-left > li {
float: left;
margin: 0;
}
.navbar-fixed-top {
position: sticky;
margin-bottom: 20px;
top: 0;
border-bottom: 1px solid black;
}
.navbar-fixed-top::before {
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: -142px;
background-color: #008ed0;
background-image: linear-gradient(to bottom right, rgb(0, 87, 128), rgb(0, 157, 230));
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.tooltiptext {
display: block;
background-color: #008ed0;
opacity: 0;
width: 0;
color: white;
margin-left: 10px;
text-align: center;
z-index: 1001;
transition: width 1s ease-in-out, opacity 0.5s ease-in-out 0.5s;
}
.navigation li:hover .tooltiptext {
width: 150px;
opacity: 1;
}
body {
padding-top: 0px;
padding-bottom: 20px;
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
li > a {
display: inline-flex;
width: 100%;
padding: 15px 20px;
color: #fff;
text-decoration: none;
fill: white;
}
li > a:hover, li > a:focus {
background-color: #d50f67;
color: white;
fill: white;
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Any and all help is greatly appreciated. Linking to this CodePen in the hopes someone can help.
Kind regards,
Don
I need to show news in vertical timeline below example is perfect for what i am looking for this i can modify further to my requirement but i need same for English & Arabic language. English version : https://codepen.io/jplhomer/pen/lgfus
Modified version for Arabic (RTL) https://codepen.io/anon/pen/LboryL
#import "compass/css3";
$gray: #dddddd;
h1, h2, h3 {
font-weight: 300;
}
.container {
padding: 1em;
}
.timeline {
position: relative;
overflow: auto;
&:before {
content: '';
position: absolute;
height: 100%;
width: 5px;
background: $gray;
right: 0;
}
h2 {
background: $gray;
max-width: 6em;
margin: 0 auto 1em;
padding: 0.5em;
text-align: center;
position: relative;
clear: both;
}
ul {
list-style: none;
padding: 0 1em 0 0 ;
z-index: 1;
}
li {
background: $gray;
padding: 1em;
margin-bottom: 1em;
position: relative;
direction:rtl;
text-align:right;
&:before {
content: '';
width: 0;
height: 0;
border-top: 1em solid $gray;
border-right: 1em solid transparent;
position: absolute;
right: -1em;
top: 0;
}
}
h3 {
margin-top: 0;
}
time {
font-style: italic;
}
}
#media screen and (min-width: 40em) {
.container {
max-width: 1000px;
margin: 0 auto;
}
.timeline {
&:before {
left: 50%;
}
ul {
padding-left: 20px;
max-width: 700px;
margin: 0 auto;
}
li {
width: 42%;
}
li:nth-child(even) {
float: left;
margin-top: 2em;
}
li:nth-child(odd) {
float: right;
&:before {
border-top: 1em solid $gray;
border-right: 1em solid transparent;
left: auto;
right: -1em;
}
}
li:nth-of-type(2n+1) {
clear: both;
}
}
}
I have modified CSS to work with RTL language but the pointer for the First Element ul is showing arrow on right side which i tried to show on left breaks the arrow. I tried few thing but one or the other thing breaks in this
I fixed it by making changes to
li:nth-child(odd) {
float: right;
&:before {
border-top: 1em solid $gray;
border-left: 1em solid transparent;
right: auto;
left: -1em;
}
}
Working solution: https://codepen.io/anon/pen/LboryL
Notice how the page is centered in the middle. How can I make it expand to fit the screen, including the columns? Sorry, I'm brand new to coding. I included most of the code because I have no idea where to find it. Hopefully one of you can help. I'm assuming it must be on body or on the home page?
/* Base styles */
*, input[type=search] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
background-color: $color_2;
}
body {
color: $color_4;
font-family: $font_1;
font-size: 13px;
font-weight: lighter;
line-height: 1.5;
margin: 0;
margin-left: 0px;
padding-bottom: 100px;
}
img {
max-width: 100%;
vertical-align: middle;
}
img[width], img[height] {
max-width: none;
}
figure > img {
display: block;
}
a {
color: $color_5;
font-family: $font_2;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
[dir="rtl"] table {
text-align: right;
}
td, th {
border-color: #eeeeee;
border-style: solid;
padding: 18px;
}
th {
border-width: 1px 0;
color: #bebebe;
font-size: 11px;
font-weight: normal;
white-space: nowrap;
}
td {
border-width: 0 0 1px 0;
}
h1, h2, h3, h4, h5, h6 {
color: black;
font-weight: 400;
}
h1 {
font-size: 20px;
}
input, label {
display: inline-block;
vertical-align: middle;
}
label {
font-size: 12px;
}
input[type="checkbox"] + label {
margin-left: 5px;
}
input, textarea {
border: 1px solid #dddddd;
border-radius: 2px;
padding: 10px;
}
textarea {
height: 100px;
padding: 7px 10px;
resize: vertical;
}
textarea, input[type=text] {
width: 100%;
}
input, textarea, select {
color: #555;
}
input::-ms-clear {
display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
::-webkit-input-placeholder {
color: #cccccc;
}
:-ms-input-placeholder {
color: #cccccc;
}
::-moz-placeholder {
color: #cccccc;
}
/* Buttons */
button, [role=button], [type=button], [type=submit] {
border-radius: 4px;
border: 1px solid #dddddd;
color: $color_5;
cursor: pointer;
display: inline-block;
padding: 5px 10px;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
a[role=button]:hover {
text-decoration: none;
}
input[type=submit] {
background: #444;
border-color: transparent;
color: #FFF;
padding: 10px 30px;
}
input[type=submit][disabled] {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
/* IE 8 */
opacity: 0.4;
}
button img, [role=button] img {
border-radius: 4px;
margin: 0 5px 0 0;
height: 20px;
position: relative;
top: -1px;
vertical-align: middle;
}
[dir="rtl"] button img, [dir="rtl"] [role=button] img {
margin: 0 0 0 5px;
}
/* Forms */
.form {
max-width: 505px;
}
.form-field + .form-field {
margin-top: 25px;
}
.form-field label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-field input[type=checkbox] + label {
margin: 0 0 0 10px;
}
.form-field.required > label:after {
content: "*";
color: red;
margin-left: 2px;
}
.form-field p {
color: #bebebe;
font-size: 11px;
}
.form-field input[type=number], .form-field input.datepicker {
width: 150px;
}
.form form + form, .searchbox {
margin-top: 25px;
}
.searchbox-suggestions {
background-color: #fff;
border: 1px solid #eeeeee;
border-radius: 4px;
padding: 10px 20px;
}
.searchbox-suggestions li {
padding: 5px 0;
}
[data-loading="true"] input,
[data-loading="true"] textarea {
background: transparent url(/hc/assets/loader.gif) 99% 50% no-repeat;
background-size: 16px 16px;
}
.form footer {
border-top: 1px solid #eeeeee;
margin-top: 40px;
padding-top: 30px;
text-align: right;
}
.form footer a {
color: #cccccc;
cursor: pointer;
margin-right: 15px;
}
/* Navigation menus */
.nav li, .nav-bordered li, .nav-spaced li {
display: inline-block;
font-weight: bold;
}
.nav li a, .nav-bordered li a, .nav-spaced li a {
font-weight: normal;
}
.nav-bordered li + li {
border-color: #eeeeee;
border-style: solid;
border-width: 0 0 0 1px;
margin: 0 0 0 30px;
padding: 0 0 0 30px;
}
[dir="rtl"] .nav-bordered li + li {
border-width: 0 1px 0 0;
margin: 0 30px 0 0;
padding: 0 30px 0 0;
}
.nav-spaced li + li {
margin: 0 0 0 40px;
}
[dir=rtl] .nav-spaced li + li {
margin: 0 40px 0 0;
}
/* Search box */
.search-box, .sub-nav .search {
position: relative;
}
.search-box:before, .sub-nav .search:before {
content: "\1F50D";
font-family: "entypo";
font-size: 1.25em;
line-height: 0;
position: absolute;
text-align: center;
top: 50%;
width: 2.5em;
z-index: 1;
}
.search-box input, .sub-nav .search input {
line-height: 1.2em;
font-weight: lighter;
padding: .75em 2.7em;
width: 100%;
-webkit-appearance: none;
}
.search-box input[type="submit"], .sub-nav .search input[type="submit"] {
display: none;
}
/* Breadcrumbs */
.breadcrumbs li {
color: #bebebe;
display: inline-block;
font-size: 12px;
}
.breadcrumbs li + li:before {
content: ">";
margin: 0 4px;
}
.breadcrumbs li a {
color: $color_4;
}
/* Labels */
.label, .request-status {
border-radius: 20px;
display: inline-block;
font-size: 10px;
padding: 3px 10px;
text-transform: uppercase;
white-space: nowrap;
}
/* Metadata */
.meta, .meta-group {
color: #cccccc;
display: inline-block;
font-size: 11px;
}
.meta-group * + *:before {
content: "\2022";
font-size: 8px;
margin: 0 10px;
}
/* Helper classes */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* Social share links */
.share {
white-space: nowrap;
}
.share li, .share a {
display: inline-block;
}
.share a {
height: 30px;
line-height: 30px;
overflow: hidden;
vertical-align: middle;
width: 30px;
}
.share a:before {
background: #CCC;
border-radius: 50%;
color: #FFF;
display: inline-block;
font-family: "entypo";
text-align: center;
width: 100%;
}
.share a:hover {
text-decoration: none;
}
.share-twitter:before {
content: "\F309";
}
.share-facebook:before {
content: "\F30C";
}
.share-linkedin:before {
content: "\F318";
}
.share-googleplus:before {
content: "\F30F";
}
/* Pagination */
.pagination {
margin: 20px 0;
text-align: center;
}
.pagination * {
display: inline-block;
}
.pagination li {
border: 1px solid #eeeeee;
float: left;
margin-left: -1px;
}
[dir="rtl"] .pagination li {
float: right;
}
.pagination a, .pagination span {
color: inherit;
font-size: 12px;
padding: 5px 12px;
}
.pagination-current {
background-color: #f9f9f9;
color: #bebebe;
}
.pagination-first {
border-radius: 3px 0 0 3px;
}
[dir="rtl"] .pagination-first {
border-radius: 0 3px 3px 0;
}
.pagination-last {
border-radius: 0 3px 3px 0;
}
[dir="rtl"] .pagination-last {
border-radius: 3px 0 0 3px;
}
/* Markdown styles */
.markdown {
word-wrap: break-word;
line-height: 1.7;
}
.markdown img {
max-width: 70%;
}
.markdown hr {
background-color: #eeeeee;
border: 0;
height: 1px;
}
.markdown ul, .markdown ol {
list-style-position: inside;
padding: 0 15px;
}
.markdown ul {
list-style-type: disc;
}
.markdown ol {
list-style-type: decimal;
}
.markdown pre {
background: #f9f9f9;
border: 1px solid #eeeeee;
border-radius: 3px;
padding: 10px 15px;
overflow: auto;
white-space: pre;
}
.markdown blockquote {
border-left: 1px solid #eeeeee;
color: #bebebe;
font-style: italic;
padding: 0 15px;
}
/* Frame */
main, .header-inner, .footer-inner {
margin: 0 auto;
padding: 20 20px;
width: 500px;
}
/* Columns */
.main-column, .side-column {
display: inline-block;
vertical-align: top;
}
.main-column {
width: 620px;
}
.side-column {
width: 270px;
margin-left: 45px;
}
[dir=rtl] .side-column {
margin-left: 0;
margin-right: 45px;
}
/* Header */
.header {
background: $color_1;
border-bottom: 1px solid #eeeeee;
}
.header-inner {
display: table;
height: 100px;
}
.logo, .user-nav {
display: table-cell;
vertical-align: middle;
}
.logoHD, .user-navHD {
display: table-cell;
position: left;
left: 80px;
vertical-align: middle;
}
.logo img {
max-height: 60px;
}
.logoHD img {
max-height: 60px;
}
.user-nav {
text-align: right;
}
.user-navHD {
left: center;
}
.user-nav > * {
display: inline-block;
margin: 0 0 0 25px;
}
.user-navHD > * {
display: inline-block;
margin: 0 0 0 25px;
}
[dir=rtl] .user-nav {
text-align: left;
}
[dir=rtl] .user-nav > * {
margin: 0 25px 0 0;
}
/* Home page */
.hero-unit {
display: block;
font-size: 22px;
padding: 80px 60px;
}
body.community-enabled .knowledge-base, body.community-enabled .community {
display: inline-block;
vertical-align: top;
}
body.community-enabled .knowledge-base {
width: 620px;
}
.knowledge-base, .community {
display: inline-block;
vertical-align: top;
}
.knowledge-base {
width: 100%;
}
Change
.side-column {
width: 270px;
margin-left: 45px;
}
.main-column {
width: 620px;
}
To
.side-column {
width: 0px;
margin-left: 0px;
}
.main-column {
width: 100%;
}
You have to either use percentages or use something like media queries to set certain widths of the content. An example of percentages would be:
main, .header-inner, .footer-inner {
margin: 0 auto;
width: 90%;
}
You have main set to 500px width. You need to remove that width style. Then main will take up the full width of it's parent container which is the body.
The principle behind this is that a block-level element takes up the full width of it's parent container by default. Since main is a block-level element you don't have to set 100%; it defaults to 100% automatically.
As an aside, your padding style for main is malformed. You have padding: 20 20px; you need to use units, not just numbers. So either write padding: 20px 20px; or even better just padding: 20px;
It looks like you're using fixed sizes in your CSS. For example, the lines below:
.main-column {
width: 620px;
}
.side-column {
width: 270px;
margin-left: 45px;
}
are assigning fixed width values. (By fixed, I mean using units like px, mm, in). Rather, it'd be appropriate to use relative sizes (i.e., percents usually). For larger, containing elements, I tend to use units of vw (viewport width) and vh (viewport height). Doing likewise in your CSS where appropriate should help. Also this makes it easier to optimize for other device sizes should you choose to use CSS media queries later.
hey guys i am using bourbon neat framework to create a responsive thumbnail gallery. Now it generated the css and somehow when i resize the thumbs seem to be out of position.
here the code i used
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: #f4f4f4; }
.galleryContainer {
*zoom: 1;
max-width: 77.0625em;
margin-left: auto;
margin-right: auto;
max-width: 1200px !important; }
.galleryContainer:before, .galleryContainer:after {
content: " ";
display: table; }
.galleryContainer:after {
clear: both; }
.galleryContainer .galleryList {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
border: 2px solid red; }
.galleryContainer .galleryList:last-child {
margin-right: 0; }
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0; }
.galleryContainer .galleryList li {
float: left;
padding: 0;
margin: 0;
width: 20%;
padding: 0px; }
#media screen and (min-width: 1338px) {
.galleryContainer .galleryList li {
width: 10%; } }
.galleryContainer .galleryList img {
width: 100%;
height: 100%; }
you can check out the problem here in my demo page here DEMO
Please tell me where i am doing it wrong.
thanks.
It would appear that the float: left that you have set is causing the issue when resizing. Using li elements in this instance I would adopt a display-inline block approach. You will need to add three declarations to the parent in order to remove the margin associated with inline-block elements.
You CSS
.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%;
padding: 0px;
font-size: 0px;
}
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px; <-- add this
letter-spacing: 0px; <-- add this
word-spacing: 0px; <-- add this
}