Live site.
After testing a site I'm working on, I've discovered a weird break that occurs only in Chrome and Safari. Everything looks fine in Firefox.
Welcome to BodywoRx
<div class="banner-image">
<img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
</div><!-- end banner-image -->
<p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy. In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself. We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
<div class="bio">
<img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
<p>Bridgett suffered from chronic neck, back, and shoulder pain for many years. She went to many doctors, specialists, had many MRI's, but no one knew what was causing the pain. She had been prescribed countless medications to help ease discomfort, but nothing to address the cause. Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties. Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
</div><!-- end bio -->
</div><!-- end about -->
I'm sure it's something minor, I just can't quite figure it out. Any ideas? Thank you.
Try using float on the second image.
.bio img {
float: left;
}
JS Fiddle: http://jsfiddle.net/J4MK4/2/
Is the text suposed to be to the right of the image?
If so, you need to float the image.
img {
float: left;
}
Related
I have uploaded all the files to my web server (I use NameCheap, cPanel).
This is my webpage: www.gloriachen.me
In the landing page, my html and css are:
<!-- Landing Page -->
<div class="container-fluid">
<img src="assets/landing-page.JPG" class="img-fluid" alt="Responsive image" style="width:100%;">
<div class="top-left">
<p> <span>Hi, </span>I am Gloria Chen. I am currently a recent graduate from Australian National University (ANU)
with a master’s degree in computer science. As an enthusiastic fan of front-end development
at the moment, I am keen to look for a job on Web/App front-end development.
</p>
<p> This is my personal blog website. Initially I developed this site for practicing my
front-end skills, especially in programming. I used HTML, CSS, BootStrap 4, JavaScript
as the main languages for building my site, and would like to use Vue.js or Angular.js
for front-end framework building.
</p>
<p> It’s not easy for me to look for jobs right now at the moment, one reason is because
I just finished a surgery of a chest wall tumour removal on this September. For almost
about one and a half month, I was in the process of recovering from the treatment and
procedure. Luckily, my pathology report of the removed tumour is positive, which means
I can still be alive :). I thank God for his preserving. But now I really need to gradually
restore my mind, emotion, will and motivation, and really devote myself into working again.
</p>
<p> Things are not always easy, but I believe I will get a suitable one soon :) </p>
</div>
</div>
/* Text CSS */
.container {
position: relative;
text-align: center;
color: white;
}
.top-left{
width: 50%;
position: absolute;
top: 150px;
left: 70px;
line-height: 2;
}
The text is supposed to be on the top of the image. I tried on my local, and it was successful, like this:
After I upload all my files to the NameCheap cPanel. However, it doesn't work in Safari. If I open the site using Safari, the text won't be on the top of the image. The landing page would be like this:
Anyone knows what is the reason of it and how can I solve the problem here?
Thanks in advance!
It looks correct for me when clicking your click.
Try clearing your browser cache, or holding Shift while clicking the refresh button to perform a hard-refresh, which should force new css to load.
Check the path to your CSS file. your path to the CSS file might not be correct.
I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community.
I have an image I'm trying to center in bootstrap. It's in a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is .img-responsive. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.
The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that.
I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my src, that the image is a .jpg, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the <img...> from the container and row, and assigning ... class="centered-block" .... Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning.
PS - totally unrelated, but my <a ...></a> tags don't seem to be clickable. If anyone has any ideas there, that would be great too.
It turns out the basic issue is that CodePen relies on Bootstrap 4, not (as I had assumed) Bootstrap 3.
You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.
Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.
Working Example:
#media (max-width: 480px) {
h1 {
font-size: 5vmax;
}
h2 {
font-size: 3.5vmax;
}
h3 {
font-size: 2.5vmax;
}
li {
font-size: 2.5vmax;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<h1 class="text-primary">Dr. Clair Cameron Patterson</h1>
<h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
</div>
</div>
</div>
<h3>Academics</h3>
<ul>
<li>Undergraduate, Grinnell College</li>
<li>PhD, University of Chicago</li>
<li>Researcher, California Institute of Technology</li>
</ul>
<h3>Brief Timeline</h3>
<ul>
<li><strong>1956</strong>: found the earth to be 4.55 Billion years old using lead-lead dating and
a fragment of a metorite that fell in Arizona. This calculation has been largely undisturbed since.</li>
<li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
<li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
systems.
</li>
<li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
is likely he was a major antecedant of this change.</li>
</ul>
</div>
Not sure I worded the title optimally, but here's a simple explanation of my problem.
I have an HTML structure like so:
<div class="media-container" style="float: left">
<img src="..." />
<p class="caption">Here is a long caption that will extend beyond the width of the image.</p>
</div>
This is what it ends up looking like:
I want the caption text to line-break once it hits the width of the image so it instead looks like this:
I can get it the way I want by setting a fixed with on the container div, but I don't know that width ahead of time, so there's no way.
Are there any solutions to this problem I'm overlooking that are possible in pure CSS without involving JavaScript?
Use display: table;
.media-container {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
<div class="media-container" style="float: left">
<img width="100" src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" />
<p class="caption">Here is a long caption that will extend beyond the width of the image.</p>
</div>
Fiddle: https://jsfiddle.net/4pL4wm9h/
Add the following to the parent element:
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
Details on min-content can be found here
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
figure {
float: left;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
</style>
</head>
<body>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by
arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
<figure>
<img src="http://i.imgur.com/sbxyLKX.png">
<figcaption>Here is a long caption that will extend beyond the width of the image.</figcaption>
</figure>
<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had
recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then
turned to look out the window at the dull weather. Drops</p>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so
happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When,
while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the
trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel
the presence of the Almighty, who formed us in his own image, and the breath</p>
</body>
</html>
In my div container, many <p> elements take up so much space, that they leak out of my 'position: fixed;' div element. This is expected, so I want to implement a scroll bar on the right of the div element to help readers scroll down the text.
However, I have no idea how to implement that.
here's what I have:
#rdiv2
{
left:20%;
right:20%;
width:60%;
height:80%;
top:15%;
position:fixed;
}
<div id="rdiv2">
<article id="article1">
<h1>Resume</h1>
<p>Adan Ramirez</p>
<p>Summary</p>
<p>Highly dependable, experienced employee and enthusiastic team player dedicated to deliver the</p>
<p>most out of my employment. Fluent in English and Spanish.</p>
<p>Highlights:</p>
<p>Computer hardware troubleshooting</p>
<p>1 Year IT Level 1 help desk support</p>
<p>Network configuring/troubleshooting</p>
<p>Team Player</p>
<p>Sociable and willing to work with just about everyone</p>
<p>CompTIA Security+ Certified-AS in Information Technology 2014</p>
<p>Windows 7, Dell-OptiPlex Desktops, MS Office, Adobe/Java support</p>
<p>Experience:</p>
<p>Spent many years working with technology at home as a passion.</p>
<p>Currently employed at Oxnard College as IT specialist.</p>
<p>I get to work with many people in Oxnard College, social skills is what I have.</p>
<p>I do just about everything in Level 1-2 Tech support</p>
<p>School internship-Cooperative Work Experience 1.0 Credits, 60 hours were completed:</p>
<p>I got to install switches and routers in their racks.</p>
<p>Then we installed power supplies for our switches and routers.</p>
<p>We also made wall configurations to hang our Ethernet cables.</p>
<p>Did basic maintenance of the room, such as cleaning, organizing.</p>
<p>I made RJ-45 cables, tested them, and deployed them.</p>
<p>I bypassed cisco switches/routers and basic configurations.</p>
<p>I installed a new image on a PC.</p>
<p>I installed PSU’s, did some basic maintenance.</p>
<p>Education</p>
<p>Oxnard College:</p>
<p>Associate of Science: Computer Network IT 2014</p>
<p>Cisco Certificate of Achievement 2014</p>
<p>Certifications:</p>
<p>CompTIA Security+</p>
</article>
</div>
Add overflow-y: scroll; to the CSS for #rdiv2. The <div> will be then only be as high as the height that you set.
In your CSS, simply add
overflow-x:scroll;
overflow-y:scroll;
Note: this question is no longer relevant. The site has been moved to a new host and the the code on the site no longer applies.
Thanks.
I am trying to help out a client. The site is almost ready to go, but there are a series of images that simply disappear in IE7.
The click on the Leadership tab and the whole block of content vanishes.
Here is the html for that section:
<div id="leadership-content" class="content">
<p class="intro">Leadership for every company is important in the daily management and growth as a business matures. At Moving Simplified we feel that offering our employees career-oriented paths gives them a more sincere desire to provide outstanding customer service. All employees have the option to "climb the ladder" to eventually own a franchise of their own.</p>
<div class="profile">
<h3>Eric M. Snider<img class="flt-right" src="_images/Eric_Snider_Logo_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" /></h3>
<h4>Founder / Chief Executive Officer</h4>
<p>Eric founded Moving Simplified in 2007 as a professional services company with a new concept to assist people during one of the most stressful times of their lives: moving. His vision was to build a new type of moving services company - a company that would include every service that a customer would need during their move. Bringing it all together in one company offering is the key differentiating factor with Moving Simplified. "We are changing the face and perception of the moving company stereotype one move at a time," says Snider. "We do this everyday by holding ourselves to a higher standard of service, people skills and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Ben_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Ben Simmons</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Ben joined Moving Simplified in 2009 as one of the first management team members. Ben's entrepreneurial spirit and physical fitness background makes him an excellent team player and role model. "We're working hard everyday to help change the perception and face of the moving business," says Simmons. "It can only be accomplished through discipline, desire and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Tim_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Timothy Browne</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Tim joined Moving Simplified in 2009 as a team leader and manager. Tim has a professional service background that was a natural catapult into Moving Simplified. "As a crew leader and senior manager, I have a responsibility to ensure that our customers are 100% satisfied with our moving team's presentation, ability and performance," says Browne. "Our goal is to be the area's top moving services provider and we strive to deliver that top-tier level of service with every customer."
</p>
</div>
Here is the css:
.profile { width: 630px; padding-bottom: 20px; }
#mainContent .profile h3 { margin-top: 10px; }
#mainContent .profile p { float: left; width: 350px; }
.profile img { float: right; }
.gray-line { clear: both; }
It shows up fine in Safari and Firefox but in IE7 it is nowhere to be seen.
Thanks for any help!
Are the images that don't show all in the same folder? Try renaming the folders to a name without an underscore _ at the start.
By the way, the images don't show in my Firefox nor IE8.