I've recently designed a website and have realised that some of the background of the content, when you scroll down is transparent and so the fixed div that is beneath the content displays on IE and Firefox. Please see my website for a live view of the problem. The HTML is below. Please see below an image of my problem as you can see the text "Get In Touch" is being displayed. I want the background of the content to be above this. Please find attached the fiddle.
<body>
<div class="overlay overlay-hugeinc">
<button type=button class=overlay-close></button>
<img src=http://kadeem.london/Image/Transparent-Kadeem-min.png class="fixed-Me scaling">
<nav>
<ul>
<li><a href=http://kadeem.london>Home</a></li>
<li><a href=papers.html>Papers</a></li>
<li><a href=events.html>Events</a></li>
<li><a href=designs.html>Designs</a></li>
</ul>
</nav>
</div>
<div id=trigger-overlay>
<div class=menubutton>
<h3 class=menubuttontext>MENU</h3></div></div>
<div class=high-container>
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4"/>
</video>
<div class=Kadeem-Logo>
<img src=http://kadeem.london/Image/KL-LOGO.png>
</div>
</div>
</div>
</div>
<div class=content-container>
<div class=row>
<div class="border red"></div>
<h1 class=title-role>
I'm Kadeem
</h1>
</div>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<br>
<p>I go by the name of <a href=https://www.linkedin.com/pub/kadeem-laurie/57/277/9b5>Kadeem Laurie</a>. I am an events graduate currently developing an events marketing start-up. This website was created from scratch using HTML5, CSS3,jQuery & responsive design. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design. <p> Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I am currently working as an event organiser at <a href=https://en.wikipedia.org/wiki/Spire_Healthcare>Spire Healthcare</a>. I hope to integrate events within marketing strategy more. I like to ask the <a href=http://stackoverflow.com/users/1923610/kadeem-laurie target=_blank>right questions</a> and find solutions from different perspectives. My academic interests lie in the regions of city branding and <a href=https://www.academia.edu/14690454/The_Commercial_and_Political_Implications_of_Events>events management.</a> <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
<p>
</p>
</div>
</div>
</div>
<div class=other-contain>
<div class=My-Gems>
<div id=effect-6 class="effects clearfix">
<div class=img>
<img src=https://alchetron.com/cdn/zeebra-5e766eb1-964a-49c5-b888-c05effa9354-resize-750.jpeg style=height:100% alt>
<div class=overlay5>
<a class=expand>Bone & Joint Launch</a>
</div>
</div>
<div class=img>
<img src=http://kadeem.london/Image/Money-Matters-Logo.png alt>
<div class=overlay5>
<a href=designs.html class=expand>Money Matters</a>
</div>
</div></div>
</div>
</div>
<div class=eee>
<div class=row>
<section id=activities class=pane>
<div class=pane-content>
<div class=pane-row>
<div class=summary>
<p>POSTS</p>
</div>
</div>
<div class="pane-row d">
<div class=activity-col>
<h4>city branding</h4>
<ul>
<li><a>The Impact of City Branding in The Perceived Image of Cities: The Case of New York City</a></li>
</ul>
<h4>Urban Regeneration</h4>
<ul>
<li>The Role of Events in Urban Regeneration</li>
<li>Hacknified</li>
</ul>
</div>
<div class=activity-col>
<h4>Marketing Strategy</h4>
<ul>
<li>Marketing Strategy: British Airways vs. Air France</li>
<li>The Marketing Strategies of Startup Brands</li>
</ul>
<h4>Events Management</h4>
<ul>
<li>The Political & Commerical Implications of Events</li>
</ul>
</div>
<div class=activity-col>
<h4>Events Marketing</h4>
<ul>
<li>Marketing Events Online</li>
<li>The Role of City Branding in Urban Tourism</li>
</ul>
<h4>Digital Marketing</h4>
<ul>
<li>Digital Content</li>
<li>Post Purchase Behaviour of Hotel Guests</li>
</ul>
</div>
</div>
</div>
</section>
<footer class=goodbye>
<div class="border red4"></div>
<div class=block>
<div class=centered>
<h2 class=text-go>GET IN TOUCH</h2>
</div>
</div>
</footer>
<footer class=goodbye4>
<div class=block6>
<div class=centered6>
If you would like to find out more about me you can <a href=mailto:kadeemlaurie#gmail.com>message me</a>.
</div>
</div>
</footer>
<footer class=goodbye5>
<div class=container1>
<footer class=footer>
<div class=container1>
<div class=flex-item>© 2015 KADEEM</div>
</div>
</footer>
</div>
</div>
You have an empty P tag inside your post-container that is causing this gap. Remove it and it will fix everything accross all browsers. Also, once the empty tag is removed, you could give the last P element (with the "My favourite book" text) a padding-bottom of 45px to push the container down correctly.
<div class="post-container">
<div class="Biographical-Content hidden visible animated fadeInUpBig">
<div style="height: 407px;" class="step out-view active"></div>
<br>
<p>I go by the name of [...]</p>
<p> Freedom of thought [...]</p>
<p>My favourite book [...]</p>
<p></p> --> Empty P tag
</div>
</div>
If for any reason you can't avoid having that "extra" <p> in your html; add this to your css
p:last-child {
display: none;
}
Related
<footer id="colophon" class="site-footer">
<div class="site-footer__form-container widget-area">
<div id="footer-sidebar1">
<?php if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
</div>
<div class="site-footer__nav-container">
<div class="site-footer__events">
<h3 class="site-footer__title">Events</h3>
<ul class="site-footer__nav-list">
<li class="site-footer__list-item">
Parade Of Lights
</li>
<li class="site-footer__list-item">
SeaFair
</li>
<li class="site-footer__list-item">
Burials At Sea
</li>
</ul>
</div>
<div class="site-footer__about">
<h3 class="site-footer__title">About us</h3>
<ul class="site-footer__nav-list">
<li class="site-footer__list-item">
Owners
</li>
<li class="site-footer__list-item">
Blog
</li>
</ul>
</div>
<div class="site-footer__contact">
<h3 class="site-footer__title">Weddings</h3>
<ul class="site-footer__nav-list">
<li class="site-footer__list-item">
Wedding Info
</li>
<li class="site-footer__list-item">
Wedding Menus
</li>
</ul>
</div>
</div>
<div class="site-footer__contact-container">
<p class="site-footer__phone">(206) 123-4567</p>
<p class="site-footer__address">
1234 Water St. Seattle, WA 98107
</p>
<div class="site-footer__icons-container">
<div class="site-footer__facebook"></div>
<div class="site-footer__instagram"></div>
<div class="site-footer__twitter"></div>
</div>
</div>
<div class="site-footer__copyright-container">
<p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
</div>
</footer>
Here I am trying to write the HTML for a footer of a website, and I am wondering if I am correctly following the BEM methodology/style guide. It's pretty confusing to me. I'm never sure if I should create more 'blocks' or not. Would this be correct? Thanks for any insight.
Your code is OK for the BEM syntax. But monolithic, too semantic, and nothing is reusable. I suggest to use the following hierarchy of blocks:
site-footer
widget-area
multi-columns
titled-list (events)
titled-list (about)
titled-list (contact)
contact-box
icon (facebook)
icon (instagram)
icon (twitter)
The HTML code:
<footer id="colophon" class="site-footer">
<div class="site-footer__form-container widget-area">
...
</div>
<div class="site-footer__nav-container multi-columns">
<div class="multi-columns__col titled-list">
<h3 class="titled-list__title">Events</h3>
<ul class="titled-list__ul">
<li class="titled-list-li">
Parade Of Lights
</li>
<li class="titled-list-li">
SeaFair
</li>
<li class="titled-list-li">
Burials At Sea
</li>
</ul>
</div>
<div class="multi-columns__col titled-list">
...
</div>
<div class="multi-columns__col titled-list">
...
</div>
</div>
<div class="site-footer__contact-container contact-box">
<p class="contact-box__phone">(206) 123-4567</p>
<p class="contact-box__address">
1234 Water St. Seattle, WA 98107
</p>
<div class="contact-box__icons-container">
<div class="icon icon--facebook"></div>
<div class="icon icon--instagram"></div>
<div class="icon icon--twitter"></div>
</div>
</div>
<div class="site-footer__copyright-container">
<p class="site-footer__copywrite">Copyright © 2017 Friendship Charters. All Rights Reserved.</p>
</div>
</footer>
Each block is a context. Each element is related to its block context. That means a block is not aware where it is positioned. Only elements can be positioned, related to the parent block. In your example, the elements .site-footer__form-container, .site-footer__nav-container, etc. are responsible for positioning the child blocks .widget-area, .multi-columns, etc. inside the parent block .site-footer.
If a pattern is repeated, remember to reuse the same blocks (.icon) or elements (.multi-columns__col) and add modifiers for possible differences.
Always think how to make your CSS classes reusable in the rest of the Web page (maybe you could use .multi-columns or .icon elsewhere?).
If something could be a block but is small and not reusable elsewhere (the copyright container), then you can keep it as an element in the parent block just because it is simpler.
I have problem: first section - header is attachment fixed, and when I reduce the browser window, the background only covers a small portion of the section, the rest of the content is under another section, or completely out of the background. As you will see, only opening this page to the full screen resolves the problem and the sections look correct. By contrast, reducing the window causes the section to fall apart and jump one over the other. Can the cause be lack of clearfixes, or the problem is due to lack of positioning of each section?
https://codepen.io/tubaris/pen/YQQewB/
`<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Omnifood">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnifood</title>
<link rel="stylesheet" type="text/css" href="vendors/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="https://image.ibb.co/bY2jyQ/logo_white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
I’m hungry
Show me more
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast – not fast food.</h2>
<p class="text-about">Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="feature-col">
<i class="ion-clock icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="feature-col">
<i class="ion-jet icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="feature-col">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% Organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="feature-col">
<i class="ion-card icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</section>
<section class="section-meals">
<div class="row">
<h2>Omnifood meals showcase</h2>
<p class="text-about">Selected Omnifood meals offered by our company</p>
</div>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/eTtwCk/1.jpg" alt="egg with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/iFpgdQ/2.jpg" alt="california rolls sushi">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/igwGCk/3.jpg" alt="asparagus with carrots and meat">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/h74sk5/4.jpg" alt="carrot soup with nuts">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/j4MuyQ/5.jpg" alt="steak with green beans">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/m8twCk/6.jpg" alt="roll with egg, rucola and radish">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/bBjEyQ/7.jpg" alt="healthy burger">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/fNWisk/8.jpg" alt="oatmeal with strawberries and cherries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works – Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="steps-col1">
<img src="https://image.ibb.co/hHoeXk/app_i_Phone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="steps-col2">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<img src="https://image.ibb.co/gyPxJQ/download_app.png" alt="app store button">
<img src="https://image.ibb.co/jZWYsk/download_app_android.png" alt="play store button">
</div>
</div>
</section>
</body>
`
I assume what you are asking is why your .features-col div's are cut off.
The reason is, the .features-col divs are taken out of the main flow of the document and are not expanding .section-features div. This is due to the float: left property. When you remove that property, you can instantly see that those columns expand the parent div.
Another way to have the columns aligned to the left side of the page is to have the .row class set to 100% of the window width, then set text-align: left.
Make the .meal-photo class float left.
i.e add float:left to the .meal-photo class in your CSS code.
I am currently trying to figure out how to stop slider section content from disappearing. I tried to remove the "data-hide-transition" & "data-hide-delay" from the code, but still no luck.
Below I have included code for the slider section. I would really appreciate, if some could let me know what the problem & solution could be.
<section class="section-header-slider">
<div class="slider-pro-init vertical-slider" data-orientation="vertical" data-buttons-control="true" data-arrows-control="false">
<div class="sp-slides">
<div class="slide-item dark sp-slide">
<div class="slide-image">
<img src="img/sections/section-11.jpg" alt="" />
</div>
<div class="slide-content right-slide-content dark-content">
<div class="above-title sp-layer" data-show-transition="left" data-hide-transition="" data-show-delay="400" data-hide-delay="" >we are CreativeBrick.</div>
<h1 class="sp-layer" data-show-transition="right" data-show-delay="500" >Real Estate Marketing</h1>
<p class="sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="600" data-hide-delay="5100">With over a decade of experience, we have helped our clients all over the world <br />
to create eye-catching and beautiful solutions for their business.</p>
<div class="slider-buttons sp-layer" data-show-transition="up" data-hide-transition="up" data-show-delay="800" data-hide-delay="5100">
get started
purchase
</div>
</div>
</div>
</div>
</div>
</section>
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
In the below code unordered list bullet symbols are not displaying. Can any one help me.
expected output:
Smart class (Digital Technology) as a part of classroom teaching.
html
<section class="container">
<div class="row">
<!-- main content -->
<section class="col-sm-8 maincontent">
<h3>Our Facilities</h3>
<img src="assets/images/about.jpg" alt="" class="img-rounded pull-right" width="300" />
<ul>
<li>Smart class (Digital Technology) as a part of classroom teaching.</li>
<li>Karate Classes</li>
<li>Well equipped, Compute Lab and Science Lab.</li>
<li>CET classes,</li>
<li>Sports Academy.</li>
<li>Eco and Environment Club,Adventure Club.</li>
</ul>
</div>
</div>
</section>
</div>
</section>
Check your CSS. Make sure it contains something similar to ul {list-style-type: circle;}.
For other style types, see the reference.