Problem: img {Overflow: hidden;} isn't working as expected.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
.container-fluid {
background-color: #092876;
color: white;
overflow:hidden; <!-- change visible to hidden to see effect -->
margin: 1% 5% 1% 5%;
max-width: 100%;
}
</style>
<html>
<div class="container-fluid"> <!-- container-fluid-->
<div class="about-me" id="about-me"> <!-- ABOUT ME SECTION-->
<h1 class=about-me_h1>Lee Yang </h1>
<img src="http://res.cloudinary.com/dsy2w1n70/image/upload/c_scale,h_461,w_450/v1492552203/p3_2_d3xydb.jpg" alt="Profile Picture"
align=left>
<p class=about-me_p1>If i remove hidden the picture renders outside of the element. But if i use hidden, the element expands to capture the picture</p>
</div> <!--END of ABOUT ME SECTION-->
</html>
The element and the image are within a container-fluid.
If i remove overflow (default then set to visible), the image renders outside of the elements box; as expected. But once I add overflow:hidden, the the element expands to cover the whole image. This is what I want, but i stumbled upon this by accident fully expecting overflow:hidden to hide the latter part of the image.
Related
I have a tabs component (b-tabs) in my page. The component is wrapped inside a parent div with specific height.
I want the tabs's content to get full remaining height of parent component.
This is a basic skeleton of my tabs, nothing fancy:
<div class="h-100">
<b-tabs content-class="mt-3 h-100">
<b-tab title="First" active>
<div class="tab-content">I'm the first tab</div>
</b-tab>
<b-tab title="Second">
<div class="tab-content">I'm the second tab</div>
</b-tab>
<b-tab title="Third">
<div class="tab-content">I'm the third tab!</div>
</b-tab>
</b-tabs>
</div>
After inspecting the DOM, I have tried setting height: 100% to the following classes:
.tabs, .tab-pane, .tab-content, .my-tab-content {
height: 100%;
}
This produces an overflow of content cause it is sibling to the tabs bar (thus, it gets 100% of parent container and the overflow equals the height of the tabs bar).
I have thought of calculating the height of the tabs bar and set the height of content using height: calc(100% - **px) but I suppose there could be a more elegant solution.
Check codesandbox: https://codesandbox.io/s/optimistic-thunder-nwmzu
I'd suggest using display: flex on the tabs, and then using the flex-grow-1 utility class, which will fill out all remaining space inside the flex container.
new Vue({
el: '#app'
})
.tabs-container {
height: 400px;
background: #d8d8d8;
}
.tab-pane {
height: 100%;
}
.my-tab-content {
min-height: 100%;
background: rgba(80, 10, 10, 0.5);
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-3">
<div class="tabs-container">
<b-tabs class="h-100 d-flex flex-column" content-class="mt-3 flex-grow-1">
<b-tab title="First" active>
<div class="my-tab-content">
See at the bottom: The content of tabs overflows container
</div>
</b-tab>
<b-tab title="Second">
<div class="my-tab-content">I'm the second tab</div>
</b-tab>
<b-tab title="Third">
<div class="my-tab-content">I'm the third tab!</div>
</b-tab>
</b-tabs>
</div>
</div>
My webpage have 4 background images, each of them needs to be a full screen. On each background, I have some labels and texts. Here is the CSS code, I will address the issue after the code section.
html{
height:100%;
}
body{
font-family:'Roboto', sans-serif;
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:100%;
}
.section{
background-attachment:inherit;
background: no-repeat center center fixed;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
By using this style. All background images can take full screen. However, when I resize the browser window to a small height, my labels $ text on background 1 starts to across background 1 and background 2.
If I delete the "height:100%" or using "min-height:100%" instead. Each background image will never get to full screen but I will not get my labels & text across two consecutive background images when I resize the browser window to a smaller height. Please help
Here is my HTML for the first two image background. I need each image background to take full screen on any device, with my text fields look good on each background. Here my issue is, when I shrink the height of the browser, some text will disappear (covered by the next background) due to the height of the text field > height of browser
<!-- Page Top Section -->
<div id="page-top" class="section" data-background-image="/images/background/page-top.jpg" style='background-image: url("/images/background/page-top.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h1 class="site-title">
hello I am site title
</h1><!-- /.site-title -->
<h2 class="section-title">
hello I am section-1
</h2>
<div class="next-section">
<a class="go-to-about"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</div><!-- /#page-top -->
<!-- Page Top Section End -->
<!-- About Us Section -->
<section id="about" class="section" data-background-image="/images/background/about-us.jpg" style='background-image: url("/images/background/about-us.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h3 class="section-name">
<span>
SECTION NAME
</span>
</h3><!-- /.section-name -->
<h2 class="section-title">
SECTION TITLE
</h2><!-- /.Section-title -->
<p class="section-description">
FJDKLASJLKFJASDKLJFLKSJFLKDJSAKLFJDLKSAJ
</p><!-- /.section-description -->
<div class="next-section">
<a class="go-to-subscribe"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</section><!-- /#about -->
<!-- About Us Section End -->
section title css:
.section-title{
text-align:center;
text-transform:uppercase;
font-weight:300;
font-size:80px;
}
If you want four divs with 100% screen size in width and height with different backgrounds that can accept any HTML inside and will fit all screen sizes, there is traditional way to do so:
Preview: http://codepen.io/kunokdev/pen/LRPPdO
HTML:
<section>
<div>Any HTML inside a first div w/ background</div>
<div>Any HTML inside a second div w/ background</div>
<div>Third is here too!</div>
<div>
<h1>Forth</h1>
<p>Forth has even more than that!</p>
</div>
</section>
CSS:
html, body {
height: 100%;
}
section {
height: 100%;
}
div {
height: 100%;
background-size: cover;
}
div:nth-child(1){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(2){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
div:nth-child(3){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(4){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
or else with viewport units:
HTML:
<div></div>
<div></div>
<div></div>
<div></div>
CSS:
div {
height: 100vh;
}
So I think you need background-size: cover; and maybe a little bit of background-position property too. In case your content overflows, consider using overflow: auto.
Additionally:
If your viewport height and width are smaller than the html inside containers, consider using media queries.
For example if your content overflows when height is 500px use query such as
media only screen and (max-width: 500px){
div {
height: auto;
}
}
Consider using Mozilla Firefox responsive design view when testing. Similar feature exists in Chrome too.
Then your contents will no longer be 100% after viewport max-width of 500px, instead they will be as large as contents inside.
On a responsive page, I need to add a white container as shown on image below: the white container is on top of the slider, but doesn't go further right to the right edge of the "container" class.
It's hard to explain but hopefully with the image and Fiddle below, my problem should be understandable.
How to place this white container so that it remains always in this location, against the right edge of class "container", and against the bottom of the slider, even when reducing window size?
See Fiddle
Markup:
<div id="div1">
<div class="container">
content
<br />content
<br />content
</div>
</div>
<div id="slider">
<img src="http://lorempixel.com/1000/300/sports/" />
</div>
CSS:
.container {
max-width: 600px;
margin: 0 auto;
background: rgba(0,0,0,0.2)
}
#div1 {
background: yellow;
}
I am trying to style the layout I will use as a template for my site and after a lot of reading I came up with this:
HTML:
<body>
<link rel="stylesheet" type="text/css" href="style/login.css" />
<div id="wrapper">
<div id="header">
Header
</div>
<div id="main">
Main
</div>
<div id="footer">
Footer
</div>
</div>
</body>
CSS:
html{
height: 100%;
}
body{
height: 100%;
}
#wrapper{
height: 100%;
}
#header{
height: 100px;
width: 100%;
}
#main{
height: 100%;
width: 100%;
}
#footer{
width: 100%;
height: 50px;
text-align: center;
position: relative;
}
Seems to be working but for some reason the wrapper and the main div seem to take the exact same height and this makes the page grow larger than the window and scrolling down is needed to see the footer.
I tried a lot of stuff to fix this including CSS absolute positioning and I have been using different browsers to test it.
Any Ideas?
it is because you set height:100%; in your #main set is to 100px or something else and it will work
I would really like to suggest you look at using something like bootstrap grid..
It will make you layout life so much easier across all browsers..
you just create a container with rows, and add divs with certain spans in them and it aligns everything perfect.
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="container">
<div class="row" id="header">
</div>
<div class="row" id="body">
</div>
<div class="row" id="footer">
</div>
</div>
done :)
Further reading, takes like 10-15 min to figure out, then say goodbye to css nightmare..
http://www.revillwebdesign.com/twitter-bootstrap-tutorial/
http://twitter.github.io/bootstrap/scaffolding.html
First, put the link tag in the head section of the HTML document not in the body section.
As far as the css, I would not set heights on elements. Instead, only set the height if absolutely necessary. Let the content, padding and margin push the footer down to the appropriate height.
I'm trying to create the following layout using CSS:
Gray Rectangle = Container
Blue Rectangle = Image
White Rectangle = Content
Unfortunately the best I've been able to manage is this:
I have two problems with the content div:
How to make the content div sit to the right of the image without hard coding the width.
How to make the content div expand vertically to fill the container.
Apologies if a similar question has already been asked. I've read similar questions here but they all seem to relate to other layout concerns.
HTML:
<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="solid">
<img id="snapshot" src="page.jpg">
<div class="content" style="margin-left: 165px;">
Test
</div>
<br style="clear:both"/>
</div>
</body>
</html>
CSS:
#snapshot {
float: left;
}
div.solid {
padding: 5px;
border: 1px solid black;
background-color: #E8E8FF;
}
div.content {
border: 1px solid black;
background-color: #FFFFFF;
}
If you know the width of the image, you can do something like this: http://jsfiddle.net/EeLjd/
Use position: absolute on the content, and set the left to the width of the image, plus the padding. Use float: left on the image.
Equal height columns are always a pain. If the image width is fixed, perhaps the easiest way is to put the image inside the content div and then push it back to the left with a negative margin:
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="solid">
<div class="content" style="margin-left: 165px">
<img id="snapshot" src="page.jpg" style="margin-left: -165px;">
Test
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>