I am trying to build a module of span8 width and varying height. There is an image which will define the height of the div, and text that is positioned on top of the image. I am having trouble trying to figure out how prevent part of my image from being cropped when Bootstrap resizes the div.
In addition, I'm having trouble figuring out how to position my text boxes. I am trying to have two text boxes - one positioned at 0% vertical, and the second at 50% vertical.
<div class="row">
<div class="span12 promo">
<div class="content">
<div class="row-fluid">
<div class="topText span24">
Text positioned on the top half
</div>
</div>
<div class="row-fluid">
<div class="botText span24">
Text positioned on the bottom half
</div>
</div>
</div>
</div>
</div>
.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }
.promo .content .row-fluid { height: 50px; }
Have you tried setting a min-height property? This will set a minimum height so your image won't be cut off.
I would try setting both divs to height:50%;, this should give you the right effect.
Related
How to create a layout that allows having a logo image(yellow) that spans 3 vertical div elements and does not change its location(center) when the page gets minimized. I'm using Bootstrap 4. Initially, I have found 2 solutions but they do not work when the page is resized by minimizing its size.
Using CSS style position: absolute and topY/offset - does not work because logo image(yellow) change its position..gray div goes under the pink div as a result the logo image overlaps the gray's div text content
Splitting the logo image horizontally into 3 images, the problem is that between the second(middle) image and the bottom image appears a lot of space when minimizing the page
NOTE: when the page gets minimized, the gray div goes under the pink div, and the green div goes under the gray div, as a result, the second row becomes twice taller. No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div
Place the 3 divs inside a wrapper
<style>
.wrapper{
background-image:url("image.jpg");
background-size:cover;
}
</style>
<div class="wrapper">
// three divs go here
</div>
This is possible through margin: negativevalue 0 -- but without actual code I can't give exact values. If standard Bootstrap 4, adding the class my-n5 (taking advantage of Bootstrap 4's spacing utility) to the logo element will make its box-model overlap others.
You need to use position: absolute, top: 50% and transform: translateY(-50%) to the logo to make it work
First, the position: absolute and top: 50% will make the logo position fixed in it's relative parent and make the top of the logo itself positioned in the center it's parent
Then the transform: translateY(-50%) will move the logo from the current position negatively for half of the logo height
Here's the working example
.c1 {
background: pink;
overflow: visible;
}
.c2 {
background: gray;
}
.c3 {
background: lightblue;
}
.logo {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
1 DIV
</div>
</div>
<div class='row'>
<div class='col-md-4 c1'>
Left Content Logo
<img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
</div>
<div class='col-md-3 c2'>
Mid Content
</div>
<div class='col-md-5 c3'>
Right Content
</div>
</div>
<div class='row'>
<div class='col-md-3' style='background: blue;'>
LEFT
</div>
<div class='col-md-6'>
MID
</div>
<div class='col-md-3'>
RIGHT
</div>
</div>
</div>
Note: You can try to resize either the div or the logo to see that it will still centered in it's relative parent container
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I am looking for a way to align a nested div to the bottom of the parent div.
I do not want to use position: absolut:
#child {
position: absolute;
bottom: 0px;
}
This breaks my responsive design as content will start to overlap if the screen is resized. The paren container looks like this:
CSS
#parent {
position: relative;
}
HTML
<header id="parent" class="container-fluid">
<div id="overlapped-content" class="row">
... some regular content ...
</div>
<div id="child" class="row">
<div id="lower-intro" class="container-fluid">
... to lower content
</div>
</div>
</header>
If the screen is resized the overlapped-content will be overlaped by the child content.
Is there any alternative?
You can use min-height on overlapped-content or You can set it's height.
Lets say I have a 980px centered content area but there's a background element that expands all the way from the left of the screen to 80% of the content area. How do you accomplish this without JavaScript intervention or using a background image on the body?
EDIT:
Here's a visual concept for guidance: http://i.imgur.com/36tCm.jpg. The yellow header expands to the left of the window, outside of the content box area.
You can get the overhang effect with a div element before the 980px container and give positioning to match where the header element is
jsfiddle example or fullscreen example
in the screenshot you've got an orange overhang on the left and black on the right so here's the HTML structure (alternatively you could do the overhang with a single div and css gradients to create an orange color up to 50% then black the other 50%)
<div class="container-outer">
<div class="header-overhang header-left"></div>
<div class="header-overhang header-right"></div>
<div class="container">
<div class="sidebar">
sidebar area
</div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
content text
</div>
</div>
</div>
CSS:
.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}
.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}
You Handle this issue by css
#inner{
background:#fff;
width:80%;
position:absolute;
left:0;
top:0;
}
And you should set for its parents this style
#parent{
position:relative;
}
For example :
<div id="parent">
<div id="inner"></div>
</div>
You could accomplish this with a bit of visual trickery--namely, by using two yellow divs to create the visual effect of the #pageheader element.
Here's a JSFiddle illustrating the effect.
Here's some sample HTML:
<body>
<div id="yellowBar">
<div id="content">
<div id="pageHeader">
<!--the rest of your HTML...-->
Then, your CSS:
#yellowBar {
height: (set appropriate height here);
background: yellow (set appropriate hex code here);
position: absolute;
top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
width: 50%;
left: 0px;
}
#pageHeader {
height: (same height as #yellowBar);
background: (same color as yellowBar);
width: 80%;
/*any other CSS rules*/
}
I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}