I have 100% width and height background image as a home page, and 100% wide subpages below it with different height.
Each of those subpages has two columns - one to the left is 100% height fixed image, and one to the right is the content. Scrolling the content does not move the image until I begin moving to another subpage below it.
I hope you do understand what I mean, it's pretty common web design as far as I know.
The problem is that I can't get it working - fixed column is always at the top of the whole website, I can't position them one below another.
How could I do this?
<div class="row">
<div class="col-xs-8" style="background-color: #a9a8a8; min-height: 100%;">Content goes here...</div>
<div class="col-xs-3 col-xs-offset-1" style="position: relative;">
<div class="col-xs-3" style="position: fixed; top: 0; height: 100%;">
<img src="/assets/image/fixedImage.png">
</div>
</div>
</div>
This is the fiddle: https://jsfiddle.net/eL12rydd/
And this is the effect I want to obtain more or less (scroll down): http://ostro.tv
Related
I want my background image to be responsive so changed the size to 100% and auto but now the texts that I have inside my section is overflowing out of the image. This wouldn't happen if my image size was cover. How do prevent the text to overflow from the image.
.section1{
height: 600px;
background: url("img/Rectangle 1.jpg") no-repeat center;
background-size: cover;
}
html
<section class="section1">
<div class="container info">
<div class="row">
<div class="col-lg-12 " align="center">
Make Future Visible <span>™</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 info2" align="center">
Real-time predictive analytics for refining equipment eliminate accidents<br>
and fires, increases refinery uptime, decreases downtime and drastically<br>
reduces maintenance costs.
</div>
</div>
</div>
</section>
If you set the background position css to top center it will make the rectangle image start from the top of <section> element.
If you want the image 100% width, centred, and responsive, then a rectangle image will not work on a mobile.
See demo here https://jsfiddle.net/joshmoto/tfesu0cx/1/
I want the panel and image to be at a fixed height so that it is not larger than the page and there is no scrollbar. How would I archive this?
<div class="container">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">Panel</div>
<div class="panel-body">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/16864258_1261558947267706_6364934376555931917_n.jpg?oh=99e2734014dbdc9080048e0c6022e132&oe=5973503B" width="100%" height="100%">
</div>
</div>
</div>
</div>
https://jsfiddle.net/58br0n1g/
There are several ways you can tackle this problem.
Firstly you want to constrain the height of the panel, using max-height: 100vh; this sets the max height of the panel to 100 viewport height units, which 100% of the height.
Secondly we need to handle the image, Since you've set the image to 100% 100%, the image might overflow the container. Thus you need to decide how the image will be display. You have several options here:
Add overflow: hidden; to the panel, meaning any excess image will just not be shown.
Use background-image: url(/path/to/image.jpg); in CSS instead of an inline image element. This means you can take advantage of the various background-size properties, for example background-size: cover; will make sure the image always fills 100% of the background. Worth doing some research around this.
Hope that helps.
I am using Boostrap 3 and have split my website up into sections where each DIV is 100% height of the browser window. Now I am using the generic grids and columns in Bootstrap 3 but I want an image with height 100% and width 30% of the div on left of content
I am really struggling to understand where the code goes?
![<div id='imgDiv2'>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default" style=" border: 0; box-shadow: none;">
<div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
</div>
<div class="panel panel-default" style=" border: 0; box-shadow: none;">
<div class="panel-body" style="font-size: 30px;font-weight: 300;">about me</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" style=" border: 0; box-shadow: none;">
<div class="panel-body" style="font-size: 30px;font-weight: 300;"></div>
</div>
</div>
</div>
So in the example the content on the right would still need to sit in the col-md-8 or whatever the width I need it to be.
I think you have a misunderstanding of how % heights work in css.
An element is always 100% high, the 100% refers to the elements's own height, not the parent elements height.
Also, html doesnt do columns properly yet, which is a common metaphor in the print world.
To do what you need, you probably need some jquery / other javascript to detect which of the two divs has the greater height, and set the height of the lesser to the height of the greater.
You then have two options for the image: css background or html img tag in the left area (col-md-4 in this case)
On another note, the markup you provided isnt like the image underneath (the markup gives a left area thats twice the size of the right area)
I'm using cssgrid.net which is a 12col 1140px responsive fluid framework and I'm having trouble centering things.
My website has a "background-size: cover;" image and I have a logo that I want to center horizontally within the browser, even when it's resizing.
This is the HTML I have:
<div class="container">
<div class="row">
<div class="fourcol"></div>
<div class="fourcol">
<div class="logo"></div>
</div>
<div class="fourcol last"></div>
</div>
And the CSS:
.logo {
background: url(../images/logo_retina.png) no-repeat;
background-size: 175px 175px;
}
This is what the top portion of my site looks like:
The logo starts in the second set of 4 columns like it should, but how do I make it centered within that set of 4 columns, even when resizing?
Please keep in mind coding is just a hobby.
Assuming that each div.fourcol has the same fixed width I think that background: url(../images/logo_retina.png) no-repeat center middle; should help. If they are floating one another with width set to auto then it will be problem as div.row may be wider than the cumulative width of div.fourcol.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):