Make Image overflow the hero element and align to the bottom-right - html

My Code: https://jsfiddle.net/jqno1x6p/
I have this code, at the top, I have a hero element where I would like to place an image at the bottom-right section of the hero element and then overflow into the next section. I am not sure how to accomplish this.
Here is how my Hero element is set up:
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>

Not sure what do you mean by overflow into the next section... you can set the overflow:hidden on hero-image class, to hide the overflown portion of the image:
.hero-image {
overflow:hidden; // <-- hide the overflow
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>
A different approach (and perhaps better one) would be to fit the image to your page, by setting the image width equal to your page width - the height would be adjusted:
img {
width: 100%;
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar">
<span class="brand">tensys</span>
<ul class="nav-list">
<li class="nav-link left">Home</li>
<li class="nav-link left">Our Story</li>
<li class="nav-link right">Services</li>
<li class="nav-link right">Client Portal</li>
</ul>
</nav>
<div class="hero-image" style="overflow:hidden">
<img src="https://www.communityled.org/wp-content/uploads/2017/09/community-hero.png" alt="bg-hero" />
<div class="hero-text">
<h1>Tennant management, <span class="emphasize">innovated.</span></h1>
</div>
</div>
</body>
</html>

Related

Bootstrap side white space

So for a school project im making a website but whenever I use container and container-fluid no matter what I use i have these empty spaces on the side and I have no clue how to fix them so i came here for help.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="nav">
<div class="row">
<div class="col-xl-12">
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
I do hope I can find help here and thanks in advance!
Bootstrap adds in some spacing by default to container and container-fluid classes. To remove these, you can specify you want no padding / margin on each item by adding a class using the format {property}{sides}-{size} where size is 0.
For example, to remove padding you can add a p-0 class. You can also remove a specific side:
pt-0 top
pr-0 right
pb-0 bottom
pb-0 left
Similarly, to remove margin you can add a m-0 class.
For more info on spacing, check out: https://getbootstrap.com/docs/4.0/utilities/spacing/
To remove these default spacing use bootstrap grid classes can be removed with .no-gutters.
Here is an example
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
For more information: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Not sure what you mean by white spaces, you might want to define with an image. If you mean that your body doesn't fill the page, the problem is nested containers. See comments below.
<body>
<!-- This container is going to "add space" to your sides. -->
<div class="container" id="nav">
<div class="row">
<!-- This will fill all 12 columns on XL viewport,
but the columns are inside the parent container. -->
<div class="col-xl-12">
<!-- This will go to the limits of the parent container above. -->
<div class="container-fluid" id="nav1">
<header class="nav-inverse">
<ul class="nav justify-content-center">
<div class="row">
<div class="col-xs-2">
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Domov</a>
</li>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Življenjepis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Obdobje</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.stps-trbovlje.si/">Nagrade</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="https://www.stps-trbovlje.si/">Vizitka</a>
</li>
</ul>
</header>
</div>
</div>
</div>
</div>
<div class="container" id="body">
<div class="row">
<div class="col-xl-2">
<div class="container fluid" id="body1">
<h1 id="Header1">Hello</h1>
</div>
</div>
</div>
</div>
</body>

Make img appear in Jumbotron div only

I am new to bootstrap and I am wondering why the image is overlapping the jumbotron, I need the image to stay in the Jumbotron class only.
Here is the image:
Image overlapping the class Jumbotron
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Coffee Cafe</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="icon" href="Images/Free-Coffee-Logo-1-999x999.png">
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand active" href="#">
<img src="Images/Free-Coffee-Logo-1-999x999.png" width="30" height="30" class="d-inline-block align-top" alt="">
Insta Coffee
</a>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Who We Are</a></li>
<li class="nav-item"><a class="nav-link" href="#">What We Do</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="jumbotron text-center">
<img class=" rounded float-left" src="Images/pexels-photo-437716.jpeg" alt="Coffee for front page">
<div class="page-header">
<h1>The More You Sip, the More You'll Love</h1>
</div>
<p>Lifes pleasurable moments is just one sip away!</p>
</div>
<div>
<p class="text-center">Who We Are</p>
<p>
We are a team of coffee makers dedicated to give you the best coffee.
Our team composes of people with 10 years of experience making coffee
</p>
</div>
<div>
<p class="text-center">What We Do</p>
<p>
We specialize with some of the most popular coffee in the market such as:
</p>
<ul>
<li>Caffè Americano</li>
<li>Café Latte</li>
<li>Cappuccino</li>
<li>Espresso</li>
<li>Flat White</li>
<li>Flat White</li>
</ul>
</div>
<div>
<p class="text-center">Contact Us</p>
</div>
</body>
</html>
Also, I am planning to do a website similar to this theme : https://blackrockdigital.github.io/startbootstrap-freelancer/
In this theme, Notice how the "portfolio" , "About" and "Contact"
is like the size of the browser.
I want my "Who We Are" "What We Do" and "Contact Us" to be like this. What class should I put?
You should give overflow:hidden to jumbotron class and manage css of img according to necessity
Make the parent anchor tag of image a block element using display:block;

Content disappearing after zooming in too much

I am trying to do a headbar
the problem is that when I zoom in after a while the list of buttons disappears from screen.
<html>
<head>
<link type="text/css" href="css/css.css" rel="stylesheet">
</head>
<body>
<div id="headbar">
<img src="http://opensource.org/files/osi_symbol.png" style="height:100%;float:left;"/>
<ul>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
<li> <a class="linkheaderbar"></a> </li>
</ul>
</div>
<div id="bodypage">
</div>
<div id="footer">
</div>
</body>
CSS code and how the page looks:http://codepen.io/overclock351/pen/qdyoBq
#isherwood was correct.
By removing the overflow:hidden from the #headbar your buttons will show when zoomed in. I got to 500% in Chrome with no problems.

bootstrap z-index issue with dropdown button in header

I use bootstrap in my website, i create a new dropdown button and I added in the header, my problem is when I click on dropdown that menu is appear under the others elements, I will add here an image to see what is the problem , I think the problem is z-index:
here is my html code:
<div class="page">
<div class="header-container">
<div class="container">
<div class="row">
<div class="header">
<div class="col-md-4 col-md-offset-0">
<div class="dropdown">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is with the wrapper. It has a property overflow: hidden which hides anything that is outside its area. Remove this and it will work. Not a z-index problem.
.wrapper {
overflow: hidden; // Remove
width: 100%;
}
Try it This Code in your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dropdowns within Navs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Cannot view any content beneath my header div

I am not sure why I can't view content beneath my navbar.All I get is blank in my in place of the <h1>Hello</h1>. Would appreciate some guidance for this code in particular, but also any resources to learn more about how to avoid this problem in the future.
<!DOCTYPE html>
<html>
<head>
<title>A random title piece.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../static/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="divider-vertical"></li>
<li>
<form class="form-search">
<div class="input- append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">
Search
</button>
</div>
</form>
</li>
<li>
<a id="swatch-link" href="../popular">Example 1</a>
</li>
<li>
<a id="swatch-link" href="../sold">Example 2</a>
</li>
<li>
<a id="swatch-link" href="../new">Example 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Hello</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/json2.js"></script>
</body>
The content is hidden beneath your header .Wrap your content with a div with class container and than let us know .
Here is a jsfiddle
Jsfiddle with padding
<div class=".container">
<h1>Hellow world</h1>
</div>
And add the followingin your css
.container > h1
{
margin-top:70px;
}
Or you can use the following , I suggest using this one :
.container > h1{
padding-top:70px;
}