I'm just playing around with a html webpage. Can any of you guys help me understand why my image is extending the container boundaries to the right?
https://codepen.io/Braindead16/pen/gRPZxe
click link for full code and to see what I mean about the image.
<div class="container">
<div class="jumbotron">
<h1 class="text-center"><em>Title</em></h1>
<div class="text-center image-box">
<img class="text-center img-responsive border"
src="https://www.sitebuilderreport.com/assets/facebook-stock-up-
446fff24fb11820517c520c4a5a4c032.jpg" alt="whatever">
<h2 class="image-text">this text decribes the image</h2>
</div>
I have tried applying a class to the image that has display: block; and margin: 0 auto;
I've also tried applying bootstrap columns to the image and its div, but nothing has made the image central.
By default img width and height are set to auto and using the true width/height of the image
Solution:
set the width to 100% (which is 100% of the parent width) will scale
the image to fit into the div container.
body {
margin-top: 30px;
}
.title-img {
width: 100%;
}
.image-text {
color: grey;
font-style: italic;
font-size: 20px;
}
.border {
border-style: solid;
border-color: grey;
border-width: 2px;
border-radius: 5px;
}
.image-box {
background-color: rgb(170, 170, 256);
padding: 10px;
border-radius: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="jumbotron">
<h1 class="text-center"><em>Title</em></h1>
<div class="text-center image-box">
<img class="text-center img-responsive border title-img" src="https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg" alt="whatever">
<h2 class="image-text">this text decribes the image</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h3>time-line or info</h3>
<ul>
<li>point 1</li>
<li>point 2</li>
<li>point 3</li>
<li>point 4</li>
<li>Depending on how much writing I have in these points effects how much I'd offset them. For points around this length this offset works.</li>
<div class="col-xs-12 col-sm-6 offset-sm-3 col-md-4 offset-md-4">
<li>Shorter Points</li>
<li>More central</li>
</ul>
</div>
<p>Wow, what a load of useless info. If you want more click here
</div>
</div>
</div>
</body>
<p class="text-center">dis page is coded by me</p>
Related
I'm trying to make special title treatment Div go over a little bit or give the illusion of going out of its parent div like in the second picture I have tried many things but I need someone who can help me I'm too dumb in this case scenario :(
What I want:
What I have:
The current code:
<header class="bgg">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="card text-white border-light bg-dark col-lg-3">
<div class="cattitle">
<center><a href="<?php echo URL; ?>forsale" class="cata">
FOR SALE</a></center>
</div>
<div class="card-body">
<ul class="">
<li>Automobiles</li>
<li>Appliances</li>
<li>Baby & Kids</li>
<li>Books & Magazines</li>
<li>Cell Phones & Tablets</li>
<li>Computers</li>
<li>Electronics</li>
<li>Furniture</li>
<li>Motorcycles</li>
<li>Tools</li>
</ul>
</div>
More
</div>
<div class="card text-center col-lg-12 mt-4 selectionbox">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
Go somewhere
</div>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
Here is a demo of how it can be done. In between the top div (.bgBlue) and the bottom div (.theCards), I added a .flyover div that sits atop the other two divs, as you requested.
The magic is to style the middle (flyOver) div as follows:
z-index: 1 ==> raises the flyover div up above the other two divs (which both have the default z-index value of 0)
float: left ==> this takes it out of the flow, allowing the bottom .theCards div to nestle up against the top div
top: -50px ==> moves up the flyOver div by 50px (overlapping the top div)
height: 50px ==> this is important. The div INSIDE this one (.flyIn) is 100px - so it will spill out of this div by 50px, overlapping the bottom div by 50px. Since this div already was moved up 50px (to overlap the top div), and the inner div (.flyIn) is 50px longer than this div, the over-all effect is as you requested.
* {position: relative;}
span{display:inline-block;width:90vw;color:white;text-align:right;padding-right:30px;border:1px solid yellow;}
.flex-parent{
display:flex;
width: 85%;
margin:0 auto;
}
.bgBlue{
height:250px;
background: rgb(0,92,93);
background: linear-gradient(0deg, rgba(0,92,93,1) 0%, rgba(9,9,121,1) 150%);
}
.inline-box{
width:21.25vw;
height:200px;
border: 1px solid #ccc;
background:darkblue;
}
.thecards{
background: pink;
text-align:center;
}
.inline-card{
width: 18vw;
height: 100px;
margin: 0 2vw;
text-align: center;
color: white;
border: 1px solid #ccc;
background: grey;
}
.flyover{
z-index:1;
top: -50px;
float:left;
height: 50px; /* <=== 50px less than the .inFly div */
width: 100vw;
border: 1px solid green;
}
.inFly{
width: 85vw;
height: 100px; /*<== overflows the parent .flyover div by 50px */
margin: 0 7.5vw;
background:red;
border:1px solid purple;
color:white;
}
.centerText{
display:flex;
align-items: center;
justify-content: center;
}
<div class="bgBlue"><span>Click FULL PAGE at top right...</span>
<div class="flex-parent">
<div class="inline-box"></div>
<div class="inline-box"></div>
<div class="inline-box"></div>
<div class="inline-box"></div>
</div>
</div>
<div class="flyover"><div class="inFly centerText">Flyover Div</div></div>
<div class="thecards">Cards DIV
<div class="flex-parent">
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
<div class="inline-card">Image Here</div>
</div>
</div>
I have the following four inner div container (small picture - text - small picture - text):
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
The CSS for components-circle and inner-component:
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
The problem is, that components-circle and inner-component are overlapping the text which is on the right side of them when I resize the browser, that means the template is not responsive.
How could I insert a line break when the browser is resized or make components-circle and inner-component responsive, so that they do not overlap the corrsponding text on the right side?
Is the content of the "col-sm-12" div overlapping the content of the page, or the text next to the image that is overlapping?
Anyway, you can fix both of these issues in this way, using a "container" or "row" div and adding a css for page resizing.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
height: 115px;
width: 115px;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(http://...) no-repeat;
background-position: 20px 15px;
}
.center-text{
text-align: left;
}
#media (max-width: 765px) {
.center-text{
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4 center-text">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</div>
You are already using row class so just setting the width of components-circle to 100% (rather than making it static) will work (as bootstrap will handle rest of the responsive stuff).
To keep the aspect ratio of height-width you have to remove height from components-circle and use padding-top. Have a look here to see how it works. (padding-top: 100% gives 1:1 aspect ratio)
Open the below snippet in full-page view and resize to see the effect :)
Though there can be other methods to achieve the same, IMO this one is quite simple and understandable.
.components-circle {
display: block;
margin: 0 auto;
background-repeat: no-repeat;
padding-top: 100%;
width: 100%;
border-radius: 100%;
border: 2px solid #e0e0eb;
}
.inner-component {
background: url(https://i.ebayimg.com/images/g/eiMAAOSwH3haAlKl/s-l300.png) no-repeat;
background-size: contain;
}
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="col-md-12">
<div class="row">
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
<div class="col-sm-2">
<div class="components-circle inner-component"></div>
</div>
<div class="col-sm-4">
<h3>Title</h3>
<p class="description">
Some ... long ... text
</p>
</div>
</div>
</div>
</body>
</html>
Update: To keep the inner image at the centre during resize, you have to set it's position to 0px 0px (which is default) and add background-size: contain to the inner-component. This will scale the image to fit the parent. See the updated snippet above!
To make a breakpoint that is hidden on larger viewports, you can use these CSS classes with the line break:
.d-md-none To make it invisible on anything larger than md sized screens.
.d-sm-none To hide it on anything larger than sm sized screens.
You may also need to put the row inside a container.
This is what it would look like: <br class="d-md-none">
If you want a line break without using a <br> element, check out this guide.
On the Page: jerkydirect.com/base/opportunity - There are 3 boxes within the container with the picture. However, when viewed on a Large Screen - the last box sticks over the right side.
It looks great in a smaller window or mobile but not on a larger screen.
How do i get this to align correctly?
Here is the code:
<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$19.75</span></li>
<li><span>Retail Price:</span><span>$21.75</span></li>
<li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>family Pack <span></span></h3>
<p>4 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$39.50</span></li>
<li><span>Retail Price:</span><span>$41.50</span></li>
<li><span>Commission Payout:</span><span>$10</span></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>Party Pack <span></span></h3>
<p>10 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$79.75</span></li>
<li><span>Retail Price:</span><span>$87.75</span></li>
<li><span>Commission Payout:</span><span>$15</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Your HTML code is fine.
Problem lies with your CSS
.package {
width: 350px;
height: 230px;
background-color: rgba(0,0,0,0.6);
border: 15px solid rgba(52,53,48,0.6);
margin: 50px 0 0;
padding: 25px 20px;
}
You shouldn't hard code the width with some pixel value rather remove the pixel value.
Hope this will help you.
Remove the <div class="container"></div> you already have one right after .inner-container.
And Content should be placed within columns, and only columns may be immediate children of rows.
Remove width: 350px from .package div from css.
#service-one .package {
width: auto !important;
}
Or add this style on css files
I am making a webpage in HTML and CSS which have to be replicated exactly like this image.
At this moment, I am able to get this in fiddle.
The problem with the fiddle is: it (text and a rectangle(with some text)) is getting aligned at the left-side and right-side center of page whereas I want to bring them at the center of a page (with some distance between the two) as shown in the image. The HTML code which I am using is:
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer Qualifications Go here</div>
</div>
</div>
I am wondering whether do I need to .col-lg-6 class as I have used above to replicate an image ?
If not then do I need to use col-lg-offset-1 in my HTML code in order to replicate an image ?
At least for the size of screen that you're doing it col-lg you can get it to work by using justify-content-center in the wrapping <div>. What this does is that it moves the empty space to the sides of both elements, bring in them together to the center. I used col-lg-4 in my case, but if that is too small for you you can adjust it to your needs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="sections">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 left-side"> Development & Design</div>
<div class="col-lg-3 right-side">
Web Designer
<!-- list requested in the comments Here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
You can find more info on Bootstrap Doc
Run this below Snippet :
.sections{
width: 100%;
}
.sections .row {
padding-top: 100px;
}
.sections .left-side {
font-style: italic;
float:left;
width:45%;
}
.sections .right-side {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
max-width: 320px !important;
height: 100px;
font-style: italic;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 10px;
float: right;
width:50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Homesail</title>
<link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer
<ul>
<a href=''><li>Qualification</li></a>
<a href=''><li>Go here</li></a>
</ul></div>
</div>
</div>
</div>
</body>
</html>
I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?
HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB
THE HTML
</head>
<body>
<!--
==============================
LOGO HEADER
==============================
-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-6"></div>
</div>
</div>
</section>
<!--==============================
SLIDING BANNEER
==============================-->
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
</div>
</section>
<!--==============================
MENU BAR
==============================-->
<section>
<div class="container">
<div class="col-md-12">
<nav>
<ul>
<li>Home</li>
<li>Codepen.io</li>
<li>A longer button</li>
<li>This is my really long button</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</section>
<!--==============================
MAIN CONTENT
==============================-->
<section>
<div class="container" id="MainPage">
<div class="row">
<div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this? </div>
<div class="col-md-2">I AM IN THE BANNER SECTION </div>
</div>
</div>
</section>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
THE CSS
body {
background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
list-style: none;
overflow: hidden;
height: 47px;
}
nav ul li a {
color: #F9F7F7;
background-image: linear-gradient(to top, #ff6351, #ffcc6e);
padding: 8px 22px 8px 22px;
display: block;
text-align: center;
font-size: 22px;
float: left;
margin-right: 5px;
color: rgb(255, 255, 255);
background-color: rgb(120, 120, 120);
text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
margin: 15px;
}
#MainPage
{
background-color: white;
}
.midText
{
text-align:center
}
.MainContent
{
margin: 33px;
}
this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
</div>
</section>
You should take advantage of the column system to help center your divs.
If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.
So...
<section>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-4"></div>
</div>
Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.
In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/
As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.
display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;
For the logo...
<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
.Logo {
display: block;
margin: 15px auto;}
Quick solution for you.