Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I apologize for the vague title, but my issue is fairly specific. I'm currently converting our site to use Bootstrap, and I've come across a small thing that bugs me with the header (jumbotron). When viewed on mobile, or with a xsmall/small screen size, the words "Service" and "Agency" will force down to the next line and display underneath our tree logo (shown in pictures)
EDIT: Forgot to mention, I cannot just simply split the tree logo and words into two different columns, as this forces them to appear on opposite ends of the screen when viewed on desktop.
Small Screen
XSmall Screen
Desktop Screen
Instead, I'd like for the words "Human", "Service", and "Agency" all to display stacked on top of one another, next to the tree, when viewed on small or xsmall screens. Any ideas on how to approach this?
HTML:
<html>
<head>
<title>HSA - Community Support Provider</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="We offer case management, psychiatric care, counseling to people with mental illness and additctions, and services for people with developmental disabilities." />
<meta name="keywords" content="counselor, mental illness, disabilities, Watertown, SD, psychiatrist, counseling, mental health, addiction, services, developmentally disabled, detoxification, half-way house" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<link rel="shortcut icon" href="/images/hsa.ico" type="image/hsa-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
h4 {
font-size: 18px !important;
}
#media only screen and (max-width: 480px) {
#heading_title {
display: inline-block;
}
}
</style>
</head>
<body>
<div class="jumbotron text-left" style="padding-top:10px;padding-bottom:0;margin-bottom:0;background-color:white">
<div class="row">
<div class="col">
<h1 id="heading">
<img src="images/HSA-tree-logo.gif" alt="HSA's Tree Logo"/>
<span id="heading_title">Human Service Agency</span>
</h1>
</div>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light" style="border-bottom:1px solid #000;">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="mhstaff.html">Counselors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jobs.html">Career Opportunities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="foundation.html">Foundation/Donations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bod.html">Board of Directors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About/Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="justify-content-center" style="background-color:#f8f9fa;color:#7c7c7d;">
<div class="row">
<div class="col">
<p id="addressbar">123 19th Street NE, Watertown, SD (605) 886-0123</p>
</div>
</div>
</div>
<div class="deptcards">
<div class="row">
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="addictions.html" title="Addiction Services" accesskey="A" target="_self">
<div align="center"><img class="deptimg" src="images/group_counseling.jpg" alt="Group Counseling">
<div class="deptcontainerone"></div>
<p><b>Addictions</b></p>
</div>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="mh.html" title="Mental Health Services" accesskey="M" target="_self">
<div align="center"><img class="deptimg" src="images/mh.jpg" alt="Mental Health" >
<div class="deptcontainertwo"></div>
<p><b>Behavioral Health</b></p>
</div>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="serenityhills.html" title="Serenity Hills" accesskey="S" target="_self">
<div align="center"><img class="deptimg" src="images/serenity_hills.jpg" alt="Serenity Hills" >
<div class="deptcontainerthree"></div>
<p><b>Serenity Hills</b></p>
</div>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="nh.html" title="New Horizons" accesskey="N" target="_self">
<div align="center"><img class="deptimg" src="images/new_horizons.jpg" alt="New Horizons">
<div class="deptcontainerfour"></div>
<p><b>New Horizons</b></p>
</div>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="Employment Services/index.html" title="Employment Services" accesskey="E" target="_self">
<div align="center"><img class="deptimg" src="images/employment_connections.jpg" alt="Employment Connections" >
<div class="deptcontainerfive"></div>
<p><b>Job Services</b></p>
</div>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-6">
<div class="deptcard">
<a href="care.html" title="CARE" accesskey="C" target="_self">
<div align="center"><img class="deptimg" src="images/care.jpg" alt="C.A.R.E." >
<div class="deptcontainersix"></div>
<p><b>C.A.R.E.</b></p>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="layoutdimsend"></div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-12" id="columnside">
<h3 align="center">Links</h3>
<p align="center"><img src="images/neprc_logo_sm.jpg" alt="NEPRC"/></p>
<p align="center"><img src="images/why_logo_sm.jpg" alt="WHY" /></p>
<p align="center"><img src="images/facebook_link.jpg" alt="Facebook Link"/></p>
<p align="center"><h2 align="center"><img src="images/umbrella.jpg" alt="Umbrella Newsletter Link"/></h2></p>
<div class="stylegray">
<p align="center"><img src="images/nami.jpg" alt="NAMI SD Link"/></p>
<div align="center">
<img class="columnimage" src="images/amazon_smile.jpg" alt="Amazon Smile" />
</div>
<p align="center" class="stylegray">Sign up at smile.amazon.com</p>
<p class="stylenorm">Amazon will donate 0.5% of the price of your eligible AmazonSmile purchases to the Human Service Agency if you have signed up to participate. AmazonSmile is the same as Amazon. Same products, prices, and service.</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12" id="columnmid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div align="center">
<h1>Remembrance Ceremony</h1>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/kxXfHuuJQJg" frameborder="0" alt="Slide 1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Glacial Lakes SAFE (Suicide Awareness for Everyone) hosted their 6th annual Remembrance Ceremony on September 2, 2020. With the assistance of Prairie Lakes Healthcare System, SAFE was able to host this year's event virtually. September is Suicide Awareness month, and we are encouraging those who have lost a loved one to suicide to do something to honor them and to help raise awareness of the impact of suicide. We want you to know that there is HOPE; there is healing; and there are many resources and services available to help 24/7. You are not alone.</p>
</div>
</div>
<div class="carousel-item">
<div align="center">
<h1>Stakeholders Give HSA High Marks</h1>
<img src="images\stakeholders.png" style="width:100%" alt="Slide 2">
<p>A recent stakeholder survey of HSA gave high ratings to the agency across the board. A few of the comments made included, "Our community is a better place because of the fine men and women of HSA!", "HSA is a community leader in promoting holistic health," "Clients attending treatment state the services offered are informative, they are challenged to invest themselves in the provided treatment," "There is a strong partnership between HSA and Law Enforcement. Every referral I have ever made was met with nothing but professional courtesy," "The on call service is available day or night," and "HSA is very accommodating to the needs of our high school students."</p>
</div>
</div>
<div class="carousel-item">
<div align="center">
<h1>Employment Connections/Employment Services</h1>
<img src="images\landscaping.jpg" style="width:100%" alt="Slide 3">
<p>Pictured: Anthony Kinsinger enjoys his new positon with Professional Landscaping. Anthony is the inventory/plant caretaker and takes care of animals on the property. Community Services helps people find jobs in the community. They work closely with the local Vocational Rehabilitation office and businesses in town. New Horizons also provides Project Skills, a job program for students with disabilities. New Horizons also provides job class for students. We have so many success stories and examples of the benefits available to employers when they hire people with disabilities. Read more about it on our employment services page.</p>
</div>
</div>
<div class="carousel-item">
<div align="center">
<h1>HSA Foundation: Making Dreams Come True</h1>
<img src="images\mt_olympus.jpg" style="width:100%" alt="Slide 4">
<p>The Human Service Agency Foundation raises money and accepts donations to help with special projects for people served. This summer Sandy Tierney was able to go to Wisconsin with the help of ‘Making Dreams Come True’and funding from the HSA Foundation. </p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-12" id="columnside">
<h3 align="center">Resources</h3>
<p><h4>Crisis line:</h4></p>
<div class = "stylenorm" align="left">
<p>Call 605-886-0123 <strong>24 Hours/Day</strong></p>
<p>In Sisseton, call 605-698-7688</p>
</div>
<h4>Counseling Appointments<br /> and Addiction Services:</h4>
<div class = "stylenorm" align="left">
<p>Call 605-886-0123</p>
<p>Monday-Thursday 8 AM-8 PM, Fridays 8 AM-5PM</p>
<p>In Sisseton, call 605-698-7688</p>
<p>In Milbank, call 605-886-0123</p>
</div>
<h4>Alcoholics Anonymous Meetings</h4>
<h4>Prevention Resource Library</h4>
<h4>Watertown Family Resource Directory</h4>
<h4>Watertown Family Resource Directory - Online</h4>
<h4>Watertown Community Foundation</h4>
<p align="left" class="stylenorm">Apply to Serenity Hills</p>
<p align="left" class="stylenorm">Hire People with Disabilities</p>
<p align="left" class="stylenorm">Request CARE/NE Payee Services</p>
<p align="left" class="stylenorm">Conflict Free Case Management Services</p></br>
<h3 align="center">Forms</h3>
<p align="left" class="stylenorm">Release of Information</p></br>
<p align="left" class="stylenorm">Intake Questionnaire</p>
<p align="left" class="stylenorm">Adult Questionnaire</p>
<p align="left" class="stylenorm">Child Questionnaire</p>
</div>
</div>
</div>
<div id="footer">
<p class="footerlinks" text-align="center" ><a class="footerlinks" Href="TermsAndConditions.html">Terms and Conditions</a><a class="footerlinks" href="privacystatement.html">Privacy Statement</a><a class="footerlinks" href="privacypractices.html">Privacy of Health Information</a></p>
<p class="footerstyle1" text-align="center"><span class="style5">Human Service Agency is an equal opportunity employer and provider</span></p>
<p align="center"> <img src="images\united_way.gif" alt="United Way" style="max-height:40px" /> <img src="images\accredited.jpg" alt="Accredited by CQL" style="max-height:40px" /> <img src="images\eho.bmp" alt="Equal Housing Opportunity" style="max-height:40px"/></p>
<p class="footerstyle6">The Human Service Agency provides services for anyone seeking assessment, treatment & aftercare for any substance abuse/dependency. We do not discriminate on the basis of race, color, religion, gender, gender expression, age, national origin, disability, marital status, sexual orientation, military status, familial status, or any other classification protected by applicable federal, state or local law. We do prioritize services for pregnant women or women with dependent children. We also prioritize treatment for individuals using intravenous drugs as the lethality of such use is severe and life threatening. <br />We seek to provide services for these priority groups by publicizing this notice in our agencies as well as on our website. Pregnant women who also use intravenous drugs are of highest priority. In the event the individual in any priority population is waiting for a residential bed in a residential facility elsewhere, he/she will be allowed participation in HSA Intensive Outpatient Treatment Program until placement is made. </p>
<p class="footerstyle6"><span class="footerstyle7">Policy: The Human Service Agency provides safeguards designed to protect the personal information of its personnel and clients. These safeguards include efforts to keep personal information confidential, limits access to only those personnel who need this information, prevents the unlawful disclosure of this information, and effectively disposes of this information in a manner that ensures that it is not retrievable after disposal. The Human Service Agency continually works to comply with all federal and state law regarding the protection of personal information. Any Human Service Agency staff member who violates this policy may be subject to civil or criminal penalties and the breach of confidentiality could lead to disciplinary action (up to and including termination of employment). Personal Information is defined as: non-public information which is associated with a specfiic individual through one or more identifiers. Examples include Social Security numbers, drivers' license numbers, credit or debit card numbers and health insurance identification numbers.<br />Copyright © 2017 Human Service Agency</span></p>
<p></p>
</div>
</body>
</html>
CSS
.container {
background-color: #FFFFFF;
}
p {
margin: 0;
}
a {
color: #003366;
}
a:hover {
color: #fff;
background: #CCCCCC;
text-decoration: none;
}
a:link {
color:#003399;
}
a:visited {
color: #003399;
}
img {
margin: 10px 0 5px;
}
h1, h2, h3 {
color: #369;
}
.header {
border-bottom: 1px solid #000;
}
.header ul {
list-style: none;
text-align: center;
clear: left;
float: left;
width: 100%;
margin: 10px 0 0 0;
padding: 0;
text-align: center;
left: 50%;
}
.header ul li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
right: 50%;
}
.header ul li a {
display: block;
float: left;
margin: 0 0 0 1px;
padding: 3px 10px;
text-align: center;
background: #eee;
color: #000;
text-decoration: none;
position: relative;
left: 15px;
line-height: 1.3em;
}
.header ul li a:hover {
background:#369;
color:#fff;
}
.header ul li a.active,
.header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
.header ul li a span {
display:block;
}
#addressbar{
clear:both;
color:#FFFFFF;
background-color: #004000;
margin:0;
padding:6px 15px !important;
text-align:center;
}
#layoutdimsend{
clear:both;
color: #FFFFFF;
border-top:4px solid #004000;
margin:0;
padding:2px 5px !important;
text-align:center;
}
.deptcard {
transition: 0.3s;
border-radius: 3px;
float: left;
padding: 10px;
text-decoration: none;
}
.deptcard:hover {
box-shadow: 0 12px 20px 0 rgba(0,0,0,0.8);
text-decoration: none;
}
.deptimg {
border-radius: 5px 5px 0 0;
}
.deptcontainerone {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#008000;
}
.deptcontainertwo {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#003399;
}
.deptcontainerthree {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#1E90FF;
}
.deptcontainerfour {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#800000;
}
.deptcontainerfive {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#800080;
}
.deptcontainersix {
margin: 7px;
padding-top: 2px;
padding-right: 16px;
padding-bottom: 2px;
padding-left: 16px;
background-color:#FF1493;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
background:#00400;
}
#footer p {
padding:10px;
margin:0;
background-color: #004000;
}
.footerstyle1 {
color: #FFFFFF;
text-align:center;
}
.footerstyle4 {
color: #FFFFFF;
font-size: 10;
}
.footerstyle5 {
font-size: 14px;
font-weight: bold;
}
.footerstyle6 {
color: #FFFFFF;
font-size: x-small;
text-align:center;
}
.footerstyle7 {
font-size: x-small;
text-align: center;
}
#footer .footerlinks {
color: #FFFF99;
text-align: center;
}
- For the slide show -
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
clear: both;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Number text (1/3 etc) OR Header*/
.numbertext {
background-color: rgba(33,66,88,0.8);
font-weight: bold;
color: #f2f2f2;
font-size: 18px;
padding: 8px 18px;
position: absolute;
bottom: 85px;
width: 100%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(33,66,88,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
- End for the slide show -.rowtwo
/*Here we have the options for the side navigation that is off canvas - the complete listing of services */
/* The drop down button menu */
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color:#666666;
padding: 8px;
font-size: 10px;
border:thin;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 240px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 6px 8px;
text-decoration: none;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color:#3e8e41}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} .columnimage {
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3366CC;
border-right-color: #3366CC;
border-bottom-color: #3366CC;
border-left-color: #3366CC;
}
.stylegray {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#333333;
}
.stylenorm {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
#columnside {
background-color: #eee;
}
table, th, td {
border: 1px solid black;
}
.labels {
font-size: 10px;
}
#heading {
color: black;
}
.carousel-item {
background-color: white;
}
ol li {
color: black;
background-color; black;
}
Replace this:
<div class="row">
<div class="col">
<h1 id="heading">
<img src="images/HSA-tree-logo.gif" alt="HSA's Tree Logo"/>
<span id="heading_title">Human Service Agency</span>
</h1>
</div>
</div>
With this:
<div class="row align-items-center">
<div class="col-6 col-sm-4 col-lg-2">
<img src="images/HSA-tree-logo.gif" class="img-fluid" alt="HSA's Tree Logo">
</div>
<div class="col">
<h1 id="heading">
<span id="heading_title">Human Service Agency</span>
</h1>
</div>
</div>
Related
I wanted to make my right dark column fixed and sidebar fixed, but the problem is that they both overlap, I have tried a lot of other methods and none of them worked, I tried to style with fixed parameters, but it didnt work either. I want class content-c to be fixed (thats the dark column) and sidebar to be fixed without overlapping eachother or another column which is in middle for main content
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont{
height: 100vh;
}
.ind{
}
.cont-t{
font-size: 11px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 4px;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
/* Code snippet style for output.html*/
#dvid{
z-index: 0;
position: absolute;
}
#dvid1{
z-index: 1;
position: absolute;
}
#dvid2{
z-index: 2;
position: absolute;
}
#dvid3{
z-index: 3;
position: absolute;
}
#dvid4{
z-index: 4;
position: absolute;
}
#dvid5{
z-index: 5;
position: absolute;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 0.9em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.7em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content-c {
height: 100vh;
}
.content-m{
height: 100vh;
}
.linknav {
padding-left: 74px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
.navbar{
width: auto;
}
.content-c{
width: 30%;
}
.content-m{
width: 50%;
}
.content-cf{
width: 25%;
}
.content-mf{
width: 55%;
}
.sidebar{
width: auto;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-1.8.3.js" integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="../css/style.css" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="../index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="../index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="../input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar" style="position: fixed;">
<ul class="list-unstyled components">
<li>
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled stay-open" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex content-m col-5">
<!--main page-->
<div class="cont">
<span id = "othdiv"></span>
<h3>Expected Output</h3>
<p>On a valid request, the system will return a value between 0 - 1 (inclusive) of how likely the given IP is a proxy. On error, a negative value will be returned. If <span class="label label-default">format=json</span> is used, a valid JSON format will be returned with extra information, see below for details.</p>
<br>
<br>
<span id = "othdiv1"></span>
<h3>Interpretation of the Results</h3>
<p>If a value of 0.50 is returned, then it is as good as flipping a 2 sided fair coin, which implies it's not very accurate. From my personal experience, values > 0.95 should be looked at and values > 0.99 are most likely proxies. Anything below the value of 0.90 is considered as "low risk". Since a real value is returned, different levels of protection can be implemented. It is best for a system admin to test some sample datasets with this system and adjust implementation accordingly. <b>I only recommend automated action on high values ( > 0.99 or even > 0.995 )</b> but it's always best to manually review IPs that return high values. For example, mark an order as "under manual review" and don't automatically provision the product for high proxy values. <b>Be sure to experiment with the results of this system before you use it live on your projects.</b> If you believe the result is wrong, don't hesitate to contact me, I can tell you why. If it's an error on my end, I'll correct it. If you email me, expect a reply within 12 hours.
</p>
<br>
<br>
<span id = "othdiv2"></span>
<h3>Variations of Implementation</h3>
<h6 class="ind">Use Dynamic Ban List Only (Skip Dynamic Check and Bad IP Checks)</h6>
<p class="ind">If you get a value between 0 - 1, exclusive (like 0.99, 0.99999, 0.97), these values are generated by dynamic checks which looks for <b>characteristics</b> of the given IP. IPs that are either manually banned or seen on a public proxy site will return a value of 1. If you only want manually banned or public proxies, then in your code just look for the value "1". However, there are many IPs that haven't gone through manual review and IPs can change behavior very frequently (which is why dynamic checks exist in the first place). If you <b>only</b> look for the value of "1", then expect to have more proxy / VPN / bad IPs go through your system, however, false positives are less likely if you use the dynamic ban list option.</p>
<br>
<p class="ind">If you wish to use only manually banned & public proxy IPs, append the parameter <span class="label label-default"><span class="label label-default">&flags=m</span></span>, the system will only return a result of 0 or 1. <b>This option is the best to start off with that will have a noticeable impact in bot / proxy / VPN traffic, especially if you don't have any data sets to test with the system.</b> The query should look something like</p>
<p class="ind alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=m</p>
<p class="ind">This option is the fastest. </p>
<br>
<br>
<span id = "othdiv3"></span>
<h6> Use Dynamic Ban List and Dynamic Checks Only (Skip Some of the Bad IP Checks)</h6>
<p class="ind">In this scenario, you want to use dynamic checks as well but you want to skip additional checks to see if the IP is a bad ip (see What do you mean by "Bad IP"?). In this mode, some bad IPs are still detected but the system does not attempt to go through the full bad IPs check because the time for the extra checks vary wildly (between an extra 200ms to 2 seconds). In this mode, false positives are more likely than dynamic ban lists only. Scores are lower compared to the full IP check (without any flag options) because less attributes are considered.</p>
<br>
<p class="ind">If you wish to use dynamic ban list and dynamic checks only, append the parameter <span class="label label-default">&flags=b</span>.This option is the best if dynamic ban lists isn't catching enough IPs but you don't want to run the full check because it takes too long and/or you want to have a predictable execution time. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=b</p>
<p>This option is slower than dynamic ban lists only, but much faster than the full check (no flags in query). This option is good if you only want proxy / VPN detection and you do not care about bad IPs, but <span class="label label-default">&flags=m</span> is not catching enough proxy / VPN IPs. </p>
<br>
<br>
<span id = "othdiv4"></span>
<h6>Default Lookup</h6>
<p class="ind"> This is the default lookup with no flags. Since the system is designed to work with real-time systems (return a result as fast as possible), some time consuming checks are put into a background process. This allows the system to return a result much faster. If those time consuming checks reveal that the returned result was not accurate (which is rare), the system will adjust the values. However, you must query the service again with the same IP to obtain the new result. Typically, the background jobs take no longer than 5 seconds to complete. If you want to force the system to do a full lookup (no background processes), use <span class="label label-default">&flags=f</span> option. </p>
<span id = "othdiv5"></span>
<br>
<br>
<br>
<h6>Force Full Lookup</h6>
<p> If you don't mind waiting up to 5 seconds for a result and you want the system to do a full lookup with one query, then use <span class="label label-default">&flags=m</span> option. The query should look something like </p>
<p class="alert alert-info">http://check.getipintel.net/check.php?ip=IPHere&contact=SomeEmailAddressHere&flags=f</p>
<p style="padding-bottom: 500px;">This option is the slowest and should only be used on non-real-time applications. </p>
</div>
</div>
<div class="container-flex content-c col-4 bg-dark task-column" style="position: fixed;">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id="dvid">
<code>Code 0</code>
</div>
<div id="dvid1">
<code>Code 1</code>
</div>
<div id="dvid2">
<code>Code 2</code>
</div>
<div id="dvid3">
<code>Code 3</code>
</div>
<div id="dvid4">
<code>Code 4</code>
</div>
<div id="dvid5">
<code>Code 5</code>
</div>
</div>
</div>
</div>
</body>
</html>
give the two position:fixed ; right:0px; and left:0px;
I can't click on my links anywhere. They are not inside of the div that seems to be blocking my ability to click on them. They are also not supposed to be opaque because they are not inside of that div. They are in their own divs. Anyone see what I'm missing here? How do I change this so that I can click on my links again? I was messing with the background image for awhile. I just don't know what's going on. This is my cheezy website I'm making for school. I just need help so I can turn this in! Thank you!
<!DOCTYPE html>
<!--
LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017
-->
<html>
<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
max-height: 100%;
margin: 0 auto;
}
#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#heading
{
text-align: center;
}
#emailAddressLink
{
color: white;
}
#topBox
{
margin-top: 50px;
}
h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}
ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;
}
.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}
.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;
}
.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;
}
.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}
#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}
#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}
#owlImage
{
float: right;
width: 300px;
height: 200px;
}
#lastBox
{
line-height: 6em;
}
</style>
</head>
<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:HeatherSmithx#gmail.com" target="_blank">
Heather's Email
</a>
</address>
</div>
<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>
<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>
</ul>
</div>
<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>
<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>
</ul>
</div>
<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>
<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>
<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>
</body>
</html>
The issue is with the .boxContents class. The margin-top selector is pulling everything off. If you remove it, your links should function as expected. Also, just on a side-note, it's worth avoiding using lots of z-indexes in your CSS if they aren't required. It can lead to issues and content being hidden all too easily.
You've got a lot of z-index action going on there. I would be careful about how you are using the z-index. Refer to this great article on the CSS z-index which also higlights some of the pitfalls of using z-index. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Change the class .link to have z-index:5; and then test it. It will put it in front of your other <divs>.
Just make sure you keep that class with a higher z-index than your other classes / IDs.
See page (front.html)
Codepen
What the page should look like (Ignore the div highlighting, its structure is not being used)
No matter what or how I try, the "Read More" image (line 61) refuses to center horizontally AND responsively. As in, it's responding to pixel measurements, but not % measurements.
I've looked at around 15 articles by now, and I can't afford to spend any more time fruitlessly. Does anyone have a solution to the fact that the Read More image refuses to center? It should be responsive too. The only reason I can think of as to why it's not centering is because of bootstrap, but I doubt that.
The image is currently in a link tag inside a div that class="read-more". The image seems to ignore the margin-left and margin-right properties entirely.
.read-more img{
display:inline-block;
padding-left:auto;
margin-right:auto;
height:10%;
width:20%;
}
An image should not be centered using the approach you are using. Simply add:
text-align:center;
To the block level container element's CSS rule (not the image's CSS rule).
Text alignment is an inherited CSS property and you use it by applying it to the parent BLOCK LEVEL element (container) of the element that needs alignment. In your case, since you have the image inside of a div, the CSS rule should be applied to the div.
A width of 100% for the container and text-align:center should do:
.read-more img {
height: 10%;
width: 20%;
}
.read-more {
width: 100%;
text-align: center;
}
Updated codepen: http://codepen.io/anon/pen/EKmmMZ
You can apply text-align: center to read-more div to make image to center. Make Sure that the link and image must not have float property used.
Here is the code you exactly need.
Updated codepen: http://codepen.io/anuragscsit/pen/YqVVmv
body {
background-image: url("graphics/Website_background_2,_100_dpi.jpg");
}
body a {
color: rgb(241, 90, 34);
}
body a:hover {
color: rgb(208, 78, 29);
}
body a:visited {
color: rgb(144, 14, 0);
}
.row {
overflow: hidden;
}
[class*="xs-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color: rgba(255, 255, 255, 0.8);
padding-top: 40px;
}
.row1-imgs img {
height: 60%;
width: 100%;
/*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.read-more{text-align:center;}
.read-more img {
display: inline-block;
padding-left: auto;
margin-right: auto;
height: 10%;
width: 20%;
}
.read-more div {
background-color: green;
margin-left: 20px;
}
.row1 p {
text-align: justify;
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
.row2 {
text-align: center;
}
#row3 img {
height: 60%;
width: 100%;
}
[class*="title-"] {
text-shadow: 4px 4px 5px rgb(63, 63, 63);
font-weight: bold;
color: white;
font-family: Serif;
letter-spacing: 2px;
font-size: 130%;
text-align: center;
}
.title-blue,
.blue-border,
.title-orange,
.orange-border {
box-shadow: 5px 5px 7px rgb(117, 117, 117);
}
.title-blue {
background-color: rgb(0, 102, 179);
}
.title-orange {
background-color: rgb(208, 78, 29);
}
.blue-border {
border: 4px solid rgb(0, 102, 179);
}
.orange-border {
border: 4px solid rgb(208, 78, 29);
}
#post1 {
width: 85%;
margin-left: auto;
margin-right: auto;
}
#post1 p {
text-align: justify;
}
#post2 {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.event {
padding-top: 3%;
}
.event p {
font-size: 110%;
}
.eventitle {
font-size: 120%;
font-weight: bold;
}
#post1 .eventitle {
color: rgb(0, 102, 179);
}
#post2 .eventitle {
color: rgb(208, 78, 29);
}
* {
/*border: 1px dotted green;*/
}
/*line 13-21 taken from http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height
*/
<html lang="en">
<head>
<link rel="stylesheet" href="front.css" />
<meta name="" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="icon" href="graphics/Liger head for website masthead.ico" />
<title>Ligerbots</title>
</head>
<body>
<header>
</header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display...Ross you decide whether this is important or not -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://sonexdjco.com/" target="_blank">
<img id="brand-image" src="img/bg9.png" alt="Check us out!">
</a>
</div>
<!-- Collect the nav links-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://www.google.com/maps/dir//MONROE+Restaurant,+450+Massachusetts+Avenue,+Cambridge,+MA+02139/#42.3751756,-71.1304011,10.44z/data=!4m9!4m8!1m0!1m5!1m1!1s0x89e37754659a60b7:0xdf11b00d94f15ff9!2m2!1d-71.1012446!2d42.36351!3e0?hl=en-US"
target="_blank">Get Directions!<span class="sr-only">(current)</span></a></li>
<li><a href="https://sonexdjco.yapsody.com/event/index/34100/spring-fever" target=_blank>Buy Tickets!</a></li>
<li>Overview</li>
<li>Links</li>
<li>Map</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div style="background-color:rgba(255,255,255,0.8)" class="col-xs-5 col-xs-offset-1">
<div>
<div class="row1">
<div class="title-orange">
LIGERBUILD BLOG
</div>
<span class="row1-imgs"><img class="orange-border" src="graphics/row1col1.gif"/></span>
<p>Work has already begun on the chassis for the 2016 Stronghold robot. Five working groups are preparing the team to hit the ground running on January 9. We have students working on mechanical, electrical, programming and several fixing the road
kill. . . .</p>
</div>
<div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row1">
<div class="title-blue">
LIGERBUISNESS BLOG
</div>
<span class="row1-imgs"><img class="blue-border" src="graphics/row1col2.jpg"/></span>
<p>FRC alumnus Ian from Dash Electric visited with his awesome electric longboard in December and told us how he started his company. Students got to ride his board and ask him lots of questions. <a>Read and see more. . .</a></p>
</div>
</div>
</div>
</div>
<div class="read-more">
<img src="graphics/Read_more_button_outlines.gif" />
</div>
<div class="row">
<div style="background-color:rgba(255,255,255,0.8);" class="col-xs-5 col-xs-offset-1">
<div class="row2">
<div class="title-blue">
ANNOUNCMENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="blue-border">
<div id="post1">
<div class="event">
<span class="eventitle">Team Dinners Needed During Build</span>
<p>Please sign up to make team dinners during build season. We eat together as a team on Friday nights at 6:00. Several families can do this together. Please see the signup here.
</div>
<div class="event">
<span class="eventitle">Carpool Drivers Needed</span>
<p>Please sign up to drive carpools from North to South and back, Mondays through Saturdays during build season. Please see details on our carpool page, here.</p>
</div>
<div class="event">
<span class="eventitle">STIMMS Signup Required</span>
<p>All Students must sign up on STIMMS or theey will not be able to attend competitions. Please see details here.</p>
</div>
<div class="event">
<span class="eventitle">No Team Meeting 12/24</span>
<p>There will be no team meeting 12/24 due to Christmas. Team meetings will resume on 1/4/16.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="row2">
<div class="title-orange">
UPCOMING EVENTS
</div>
<div style="background-color:rgba(255,255,255,0.8)" class="orange-border">
<div id="post2">
<div class="event">
<span class="eventitle">Visit the Waban Cub Scouts</span>
<p>January 13, 2016, 7-8 p.m.<br/> Waban Library Center</p>
</div>
<div class="event">
<span class="eventitle">Visit to Danger Awesome!</span>
<p>January 23, 2016, 4-6 p.m.<br/> 215 Ranham St. Melrose, MA</p>
</div>
<div class="event">
<span class="eventitle">Whole Foods Fundraiser</span>
<p>Feb. 1-28 10 a.m.-10 p.m.<br/> Whole Foods, Newton Four Corners</p>
</div>
<div class="event">
<span class="eventitle">FRC Competition at WPI</span>
<p>March 11-12, 2016, 9 a.m.-5 p.m.<br/> Worcester Polytechnic Institute<br/> Link to FIRST Livestream here</p>
</div>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div id="row3">
<div class="blue-border">
<img src="graphics/row3col1.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
You need to alter the css line 42 to this
.read-more {
text-align: center;
}
Please use "margin" property to bring it center.It will align the image in order of -Top,Right,Bottom and Left.
.read-more img {
display: inline-block;
float:center;
padding-left: auto;
margin: 0 0 0 40%;
height: 10%;
width: 20%;
}
try this perhaps
.read-more {
margin: 0 20% 0 20%;
}
or any value of percentage that you'd like
I have created a child theme of Twenty Thirteen and am doing some updates to it. I have a dev site that is pretty much a copy of the live site. The only thing that I changed in the footer area is the widget title styles but I can't get the 3 widgets to line up. I currently have 2 on the first line and 1 down below. It doesn't seem to matter if I change the container width.
Here is the new version of the site: http://dev.unitedconstruction.com/
Here is the old site that still works:http://unitedconstruction.com/
Can anyone see where my problem is?
CSS (most of what pertains to the footer)
/* FOOTER */
.site-footer .sidebar-container, .site-footer {
background-color: #fff; /*#C6C6C7;*/
}
.site-footer .sidebar-container {
min-height: 335px;
padding: 20px 0 0;
border-top: 0 solid #0069AA;
}
.site-footer .widget{
width: 100% !important;
max-width: 333px !important;
border-bottom: 5px solid #0069AA;
background-color: #fff;
min-height: 358px;
float:left;
font-size: 14px;
margin: 0 0 24px;
padding: 0 0 10px 0;
word-wrap: break-word;
color: #333;
}
.widget .widget-title {
font: normal 24px Arial, Helvetica, sans-serif;
margin: 0;
}
.site-footer .widget-title, .site-footer .widget-title a, .site-footer .wp-caption-text {
font: normal 24px 'Open Sans', Arial, Helvetica, sans-serif;
color: #000;
background-color: transparent;
margin: 0;
padding: 5px 0;
border-bottom:2px solid #FDFDFD;
word-spacing:0;
text-transform: capitalize;
}
.site-footer .widget-title span{
color: #000;
font-weight:normal;
}
.site-footer .widget li {
padding:0 0 10px;
}
HTML
<footer role="contentinfo" class="site-footer" id="colophon">
<div role="complementary" class="sidebar-container" id="secondary">
<div class="widget-area masonry" style="position: relative; height: 399px;">
<aside class="widget widget_flexible-recent-posts-widget masonry-brick" id="flexible-recent-posts-widget-3" style="position: absolute; left: 0px; top: 0px;"><div class="frp-widget-wrapper frp-widget-">
<div class="frp-clear"></div>
<ul class="frp-widget">
<li class="frp-news">
<h3 class="widget-title"><span>united</span> news</h3>
<div class="frp-clear"></div>
<div class="frp-left">
<img width="333" height="200" alt="United Construction" class="attachment-333x333 wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/12/featured-image-Phase-II-Groundbreaking.jpg">
</div>
<div class="news-widget-info">
<div class="news-widget-title">
<a class="news-widget-link" href="http://unitedconstruction.com/united-celebrates-groundbreaking-for-new-1-6-million-sf-business-park/">United Celebrates Groundbreaking for New 1.6 Million SF Industrial Park</a>
</div>
<div class="arpw-summary">UC breaks ground on new industrial park in North Reno. The first tenant, Jarden Technical Apparel, consisting of Marmot and ExOfficio, is pre-leasing 270,000 SF</div>
</div>
<div class="frp-clear"></div>
</li>
</ul>
<div class="frp-all-category-news frp-all-category-news-footer">read more >></div>
</div>
</aside><aside class="widget arpw_widget random-posts masonry-brick" id="arpw_widget-2" style="position: absolute; left: 353px; top: 0px;">
<h3 class="widget-title"><span>united</span> projects</h3>
<div class="arpw-block">
<ul>
<li class="arpw-clearfix">
<a rel="bookmark" title="Permalink to Lake Washington Partners – SanMar Distribution Center" href="http://unitedconstruction.com/otw-portfolio/lake-washington-partners-sanmar-distribution-center-showroom/">
<img width="333" height="200" title="Lake Washington Partners – SanMar Distribution Center" alt="Lake Washington Partners – SanMar Distribution Center" class="arpw-alignleft wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/06/featured-image-sanmar.jpg"> </a>
<h3 class="arpw-title">
<a rel="bookmark" title="Permalink to Lake Washington Partners – SanMar Distribution Center" href="http://unitedconstruction.com/otw-portfolio/lake-washington-partners-sanmar-distribution-center-showroom/">Lake Washington Partners – SanMar Distribution Center</a>
</h3>
<div class="arpw-summary">621,738 SFt build-to-suit distribution center features automated…</div>
</li>
</ul>
<div class="frp-all-category-news frp-all-category-news-footer"> <a title="See More United Construction Projects" href="?page_id=32">read more >></a> </div>
</div><!-- .arpw-block - http://wordpress.org/plugins/advanced-random-posts-widget/ -->
</aside><aside class="widget widget_flexible-recent-posts-widget masonry-brick" id="flexible-recent-posts-widget-2" style="position: absolute; left: 706px; top: 0px;"><div class="frp-widget-wrapper frp-widget-">
<div class="frp-clear"></div>
<ul class="frp-widget">
<li class="frp-news">
<h3 class="widget-title"><span>united</span> community</h3>
<div class="frp-clear"></div>
<div class="frp-left">
<img width="333" height="200" alt="Thank You STEP2" class="attachment-333x333 wp-post-image" src="http://unitedconstruction.com/wp-content/uploads/2015/12/featured-image-STEP2-Thank-you.jpg">
</div>
<div class="news-widget-info">
<div class="news-widget-title">
<a class="news-widget-link" href="http://unitedconstruction.com/honored-by-step2-recognition/">Honored by STEP2 Recognition</a>
</div>
<div class="arpw-summary">United Construction is honored by STEP2's acknowledgement during the recent Homes For The Holiday event.</div>
</div>
<div class="frp-clear"></div>
</li>
</ul>
<div class="frp-all-category-news frp-all-category-news-footer">read more >></div>
</div>
</aside> </div><!-- .widget-area -->
</div><!-- #secondary -->
</footer>
One major difference I'm noticing is that the height on your widget area div (class="widget-area masonry") is different.
The broken site has div height of height: 764px while the functioning site has height: 382px.
This is giving the three divs room to stack ontop of each other.
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>