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.
Related
I'm a bit confused with this task that I have: I need to write a dom representation of these selectors:
Currently I have written this html markup:
<div class="red well">
<div id="loop">
<ul>
<li class="active">
<a href="">
<img src="" alt="">
</a>
</li>
</ul>
</div>
</div>
I have tryied this code but it seems that I have made some kind of logical mistake. Any advise why my html markup does not get the properties from the image above?
The DOM representation should be
<div class="red well">
<div id="loop">
<ul>
<li class="active">
...
<!-- 0 or more nodes here -->
<img src="" alt="" />
</li>
</ul>
</div>
</div>
The image is a following sibling (~) - not necessarily an immediate sibling - of the link, not a child.
~ is the "general sibling selector".
<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'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;
}
I have a grid layout consisting of 4 rows in Twitter Bootstrap.
I would like each row to be even in height, with equal padding between the content of each row.
However the padding on the rows are currently unequal.
For example the space at the foot of the li items in 'Technologies' and the hr line is significantly narrower than the space at the foot of 'Education'.
I cannot see in my CSS where I am going wrong, but how can I apply equal padding throughout? Thanks in advance
Here is the link to my website where the issue is.
<div class="container">
<div id="greeting">
<p>
My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
</p>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Technologies</h2>
</div>
<div class="col-md-4">
<h2 class="tech-header">Comfortable</h2>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Bootstrap</li>
<li> Adobe PhotoShop</li>
</ul>
</div>
<div class="col-md-4">
<h2 class="tech-header">Finding my feet</h2>
<ul>
<li> JavaScript</li>
<li> JQuery</li>
<li> PHP</li>
<li> SQL</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Experience</h2>
</div>
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Education</h2>
</div>
<div class="col-md-8">
<h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
<ul>
<li> BA(Hons) Social Science (2:1)</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-12" id="button">
View my full CV
</div>
</div>
Here is your specific code :
HTML :
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2>
<br> <----- REMOVE THIS
<h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
Css:
#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
top: -60px; <----- REMOVE THIS
position: relative;
}
If you remove the <br/> and the top:60px; every thing returns to the normal.
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.