I have two main divs service-display-box and service-contact.
service-contact is not setting properly after service-display-box, which has floated divs inside of it.
Let me first state that I am using clear: both; after the floated div. In addition, service-contact is reading the margin, but it is starting it halfway into the service-display-box.
I am not sure what I am doing wrong. It works in the snippet, but not on my page.
What am I doing wrong?
#service-display-box {
background: #FFF;
color: #000;
width: 100%;
padding: 15px 0;
}
#service-display-box-container {
padding: 135px 15%;
}
.service-item-box-img-container {
width: 80%;
margin: 50px 10%;
}
.service-item-box-img {
margin: 50px 0;
width: 40%;
height: auto;
vertical-align: top;
box-shadow: 8px 8px 4px #BEBEBE;
}
.service-item-box-img.left {
float: left;
}
.service-item-box-img.right {
float: right;
}
#service-contact {
margin: 225px auto 75px auto;
text-align: center;
clear: both;
}
#service-contact a {
text-decoration: none;
}
#service-contact-button {
border: 1px solid #578570;
background: #578570;
color: #FFF;
padding: 20px 40px;
font-size: 1.5em;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<h1 class="service-item-title">DEMOLITION</h1>
<h2 class="service-item-description">
<p>We continues to build a strong legacy in the dismantlement industry because of our proven ability to complete projects ranging in nearly any size”</p>
<p>We have played a valuable role in the demolition of numerous industrial facilities throughout the region including chemical, steel mills, energy generation, tire, and automotive. These structures demand skillful understanding along with proper tools and equipment to be safely brought down.</p>
<p>Commercial demolition is essential in the redevelopment process. The region has allowed us to complete numerous commercial projects. We are able to perform interior, selective, and full demolition services to our clients.</p>
<p>Residential demolition is a fundamental ability. We provides turnkey services to the public, the government, and development entities.</p>
</h2>
<div class="service-item-box-img-container">
<img src="images/service/demo/demo1.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img left">
<img src="images/service/demo/demo2.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img right">
</div>
</div>
<div style="clear:both;"></div>
<div id="service-contact"><span id="service-contact-button">CONTACT US</span>
</div>
You're not clearing the floats correctly:
The easiest way to expand an element with floated elements inside him is to add overflow: hidden;. So go ahead and give
.service-item-box-img-container {
overflow: hidden;
}
Your issue is in the jQuery in this line:
$('#service'+item_number).show().siblings().hide();
Which making your <div class="clear"></div> to be styled as display:none due to be a siblling of your .service-item-box divs,
To fix this is saying that the divs with class .service-item-box are the only one to be affected, so will be like this:
$('#service'+item_number).show().siblings('.service-item-box').hide();
Your div that was setting clear: both also has display: none which essentially renders it useless. Getting rid of the display: none moved the button down 225px for me
hope i understood the question.
add { float:left;width:100%} to .service-contact and the margin will be calculated correctly
also add { float:left;width:100%} to .service-top
Related
I currently have a 'working' layout for my site which features a style I really like where I have a content offset and overlaying an image. It's almost where I want it - currently the images are all centred perfectly and each alternate text box overlaps either the right or left side like so:
However, I'd like to make it so that each alternating row has the image pulled either to the left or right and the text box still overlapping on the opposite side like this:
I'm sort of at a loss here, what is the best way to achieve this?
Pen: https://codepen.io/anon/pen/XLeGNN
.image-block-container {
font-family: Arial;
}
.image-block-container img {
display: block;
margin:0 auto;
width: 100%;
}
.text-block-right {
position:relative;
box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
line-height: 28px;
font-weight: 100;
text-align: left;
background: rgb(255, 255, 255);
color: black;
padding:20px;
bottom: 35%;
max-width: 300px;
margin-top: -120px !important;
word-wrap:break-word;
margin:0 auto;
line-height:35px;
}
.text-block-left {
position:relative;
box-shadow: rgba(0, 0, 0, 0.09) 0px 0px 12px 4px;
line-height: 28px;
font-weight: 100;
text-align: left;
background: rgb(255, 255, 255);
color: black;
padding:20px;
bottom: 35%;
max-width: 300px;
margin-top: -120px !important;
word-wrap:break-word;
margin:0 auto;
line-height:35px;
}
#media (min-width: 768px){
.image-block-container {
position: relative;
}
.image-block-container img {
width: 65%;
margin:0 auto;
}
.text-block-right {
position: absolute;
bottom: 20%;
right: 5%;
max-width:550px;
}
.text-block-left {
position: absolute;
bottom: 20%;
left: 5%;
max-width:550px;
}
}
<div class="image-block-container">
<img src="http://via.placeholder.com/1280x900" alt="about_us" />
<div class="text-block-right">
<h1>About Us</h1>
We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic
Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and
-- we offer a concierge service (management and patient referral service) for doctors that specializes in
converting "insurance" practices to the "membership" model.
</div>
</div>
<div class="image-block-container">
<img src="http://via.placeholder.com/1280x900" alt="about_us" />
<div class="text-block-left">
<h1>About Us</h1>
We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic
Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and
-- we offer a concierge service (management and patient referral service) for doctors that specializes in
converting "insurance" practices to the "membership" model.
</div>
</div>
One approach would be to use flex box on the .image-block-container element. This enables simpler and more robust row alignment of elements, with vertical centring (ie via align-items:center).
By using flex-box in this way, you can then achieve the overlap of the text-block by translating it via a CSS transform. In the snippet below, I translate the text-block by 50% along the x axis to centre the text block on the edge of the image.
Finally, the left-overlap "modifier" CSS class is introduced to modify the ordering an layout of elements at the .image-block-container level - this enables the placement of the text-block and ordering of flex box elements to be adjusted for the left-overlap case:
.image-block-container {
font-family: Arial;
margin-bottom: 1rem;
/* Use flex box with row orrientation */
display: flex;
flex-direction: row;
/* Vertically center children */
align-items: center;
}
.text-block {
/* Cause text block to tranlate by half width to
overlap the image */
transform: translateX(-50%);
max-width: 25rem;
background: pink;
padding: 1rem;
}
.left-overlap img {
/* If left overlap case, then change the ordering
of the img to set it after the adjacent text block */
order: 1;
}
.left-overlap .text-block {
/* Translate text block in opposite direction for
left overlap case */
transform: translateX(50%);
}
/* Mobile */
#media (max-width: 768px) {
.image-block-container {
flex-direction: column;
}
.text-block {
width:75%;
}
.left-overlap img {
order: 0;
}
.left-overlap .text-block, .text-block {
transform: translateY(-50%);
}
}
<div class="image-block-container right-overlap">
<img src="http://via.placeholder.com/1280x500" alt="about_us" />
<div class="text-block">
<h1>About Us</h1>
We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and -- we offer a concierge service
(management and patient referral service) for doctors that specializes in converting "insurance" practices to the "membership" model.
</div>
</div>
<div class="image-block-container left-overlap">
<img src="http://via.placeholder.com/1280x500" alt="about_us" />
<div class="text-block">
<h1>About Us</h1>
We are building a first of a kind network of doctors who offer Direct Primary Care and Anti-Aging (Cosmetic Dermatology) medical memberships for patients who want optimum healthcare driven by the latest in technology and -- we offer a concierge service
(management and patient referral service) for doctors that specializes in converting "insurance" practices to the "membership" model.
</div>
</div>
Hope this is of some help!
I am trying to make an about page, I have text at the top and I want to have two images next to each other at the bottom, the problem I keep having is I can't figure out how to get them next to each other, they are at the bottom but they are on top of each other. I want them to be equal size both taking up 50% of the width of the Div box. I am a beginner at HTML and this is my first big project.
Here is my code
h1 {
color: white;
font-size: 50px;
font-family: ultra;
}
p {
color: white;
}
h2 {
color: white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color: #252525;
background-attachment: fixed;
background-position: 50% 50%;
background-repeat: no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
img.img-1 {
float: left;
}
img.img-2 {
float: right;
}
.article {
display: inline-block;
width: 60%;
}
img {
margin-right: 10px;
width: 100%;
height: 50%;
}
.clear {
clear: both;
}
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div>
<div class="main">
<div class="rcorners1">
<div>Parapsychologists Peter Venkman, Raymond Stantz, and Egon Spengler were scientists working for Columbia University. After being called to the New York Public Library to investigate the recent paranormal activity, they encounterd a full-fledged ghost
but she frightend them away. They lost their jobs at the university after that, so the trio established the Ghostbusters, a paranormal investigation and elimination service. They developed high-tech equipment to capture ghosts and they opened
their business in a disused, run-down firehouse. In their first outing, Egon warns them never to cross the energy streams of their proton pack weapons, as this could cause a catastrophic explosion, and they captured their first ghost, Slimer,
depositing it in a specially built containment unit in the firehouse basement. As the paranormal activity increased in New York City, they hired a fourth member, Winston Zeddemore, to cope with demand.</div>
<div>The Ghostbusters were then called by cellist Dana Barrett, whose apartment was haunted by a demonic spirit, Zuul, a demigod worshipped as a servant to Gozer the Gozerian, a shape-shifting god of destruction and chaos. As the Ghostbusters investigated,
Dana was possessed by Zuul, which declared itself the "Gatekeeper", and Louis was also possessed by a similar demon, Vinz Clortho, the "Keymaster". Both demons speaked of the coming of the destructive Gozer and the release of the imprisoned ghosts.
The Ghostbusters took steps to keep the two apart.</div>
Walter Peck, a lawyer representing the Environmental Protection Agency, had the Ghostbusters arrested for operating as unlicensed waste handlers and he orderd their ghost containment system deactivated, causing the explosion that released the ghosts and
Louis/Vinz. The ghosts wreaked havoc throughout the city while Louis/Vinz advanced toward Dana/Zuul's apartment. After consulting blueprints of Dana's apartment building, the Ghostbusters learned that mad doctor and cult leader Ivo Shandor, declared
humanity too sick to deserve existing after World War I, designed the building as a gateway to summon Gozer and bring about the end of the world.
<div>The Ghostbusters were released from custody to combat the supernatural crisis. On the apartment building roof, Zuul and Vinz opened the gate between dimensions and they transformed into supernatural hellhounds. Gozer, in the form of a woman, is
subdued by the team, disappearing entirely, as her voice echoes that the "destructor" will follow, taking a form chosen by the team; Ray inadvertently recalls a beloved corporate mascot from his childhood "something that could never, ever possibly
destroy us" and the destructor arrived in the form of a giant Stay Puft Marshmallow Man that attacked the city. The Ghostbusters crossed their proton pack energy streams and fire them at Gozer's portal; the explosion closed the gate, destroys
Stay Puft/Gozer, and frees Dana and Louis. The Ghostbusters were welcomed on the street as heroes. After these events we changed our company name to Bust A Ghost and we continued to work catching ghosts, and we still are today. Also these events
were made in a documentry about us ca
</div>
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt="" /></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt="" /></div>
</div>
<div class="clear"></div>
</div>
</div>
You are having this issue because you assigned width: 60% to each div and that makes more than 100% for both together. You have to make them 50% and instead of display:inline-block, make them float:left followed with a clear:both. Try this code.
<div class="article">
<img src="Our Gadgets.jpg" class="img-1" alt=""/></div>
<div class="article">
<img src="Trap.jpg" class="img-2" alt=""/>
</div>
<div class="clear"></div>
.article {
float:left;
width: 50%;
height: 100px;
overflow: hidden;
}
img {
width: 100%;
height: 50%;
}
Use
.article{
width: 50%;
float: left;
}
For instance, you can't have white spaces in image source (src="Our Gadgets.jpg"). User slash or underline instead.
HTML
<div class="images">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
<img src="http://www.modafinilsale.com/data/out/789/231770955-random-desktop-wallpaper.jpg" alt="">
</div>
CSS
.images img {
display: block;
width: 50%;
float: left;
}
The above link is the html and css for a tribute page I am creating for a FCC challenge. I have been having trouble adding padding to my .life and .work divs.
Also as you can see at the minute my text is not contained to the div. I have been googling this problem for a couple of hours now and all the solutions have not worked for me.
Can anyone help me out?
Ideally I would like those grey divs slightly rounded off, centered, with the text confined to the div.
codepen
Are you looking for something like this?
body {
margin-top: 60px;
}
img {
border-radius: 10%;
max-width: 50%;
display: block;
margin: auto auto 30px auto;
}
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
border-radius: 25%;
padding: 25px 50px;
}
.work {
background: darkgrey;
max-width: 90%;
margin: 20px auto;
padding: 25px 50px;
}
.wiki {
margin-top: 50px;
}
<div class="container">
<div class="jumbotron">
<h1 class="text-center">Zach Braff</h1>
<h2 class="text-center"><em>Actor Director Writer Producer</em></h2>
<img src="https://pbs.twimg.com/profile_images/588958455370625025/xm8yowKs.jpg" alt="Zach Braff">
<div class="life">
<h3 class="text-center">His life (summarised)</h3>
<p>Born in 1975, Zach Braff grew up in New Jersey and began acting at an early age. He got his first acting job on a TV pilot at age 14, with his first film role coming a few years later. After graduating from Northwestern University's film school,
Braff returned to acting, appearing in several small movies. His big break came in 2001 when he landed one of the lead roles on the TV comedy Scrubs. The show was a hit, and Braff became a household name. This success led to others, such as his
writing, directing and starring in Garden State, a critically acclaimed indie film, and landing a role in 2013's big-budget movie Oz the Great and Powerful.</p>
</div>
<div class="work">
<h3>His Work (some of)</h3>
<ul>
<li>Scrubs</li>
<li>Garden State</li>
<li>Oz the Great and Powerful</li>
<li>Wish I Was Here</li>
<li>Going In Style</li>
</ul>
</div>
<p class="text-center wiki"><em>Read more about Zach Braffs life and work here</em></p>
</div>
</div>
<footer>
<p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p>
</footer>
Do you want something like this?
Solution
Changes:
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
padding:4em;
border-radius: 25%;
}
.work {
background: darkgrey;
max-width: 90%;
padding:4em;
margin: auto;
}
I just added padding to both the classes and it worked!
I have a <h2 class="landing-panel-title> with a <span class="landing-panel-icon-right ion-ios-search-strong> nested inside. The second class on the span comes from a custom icons font called ionicons and is probably not relevant.
This is a header accompanied by an icon. I want to put a margin between the icon and the title (I want the icon on the far right when after text, and the text on the far right when the icon is on the left of the text), that auto expands as much as it can. I tried achieving this with text-align, but so far haven't been able to get it to work.
http://jsfiddle.net/eakfsLr3/
HTML:
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
CSS:
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
width: 100%;
}
.landing-panel-icon-right, .landing-panel-icon-left {
color: #913D88;
font-size: 3em;
}
.landing-panel-icon-right {
text-align: right;
}
.landing-panel-icon-left {
text-align: left;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
Any help is appreciated.
If I understood correctly, you want this? http://jsfiddle.net/sergdenisov/yv2xazjh/1/
.landing-panel {
background-color: #d5f5e3;
padding: 0.5em;
margin-bottom: 0.5em;
}
.landing-panel-title {
display: table-cell;
width: 100%;
}
.landing-panel-icon {
display: table-cell;
color: #913D88;
font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
margin: 0;
padding: 0;
}
.landing-panel-icon + .landing-panel-title {
text-align: right;
}
<div class="landing-panel">
<h2 class="landing-panel-title">Site Reviews</h2>
<span class="landing-panel-icon ion-ios-search-strong">Icon</span>
<p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
<span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
<h2 class="landing-panel-title">Methodical Approach</h2>
<p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
<h2 class="landing-panel-title">Results</h2>
<span class="landing-panel-icon ion-clipboard">Icon</span>
<p class="landing-panel-text">We won't serve you bullshit, we give you relevant information that our staff has deemed legit and working. Enjoy the read!</p>
</div>
Make your span class as display:inline-block
span {
display:inline-block; /*this enables margins to work*/
margin: 0 10px;
}
Try
.landing-panel-title>span{
width:..px /*set as much required */
display:inline-block;
text-align:center;/* left/right */
}
or if You just want a small margin between them, then put before span element
or if you just want icon to be on the right of the header then-
.landing-panel-title>span{
position:absolute;
right:0;
/* This would make icon always at right */
}
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul