I'm working on a project that has a header and navigation. Like so:
I'm having a tough time with the layout. I can put it together just fine, but I'm shaky with the responsiveness (is that a word?). Right now, the pseudo code is something like:
<div class="container" style="width: 960px; overflow:hidden;">
<div class="nav">
<ul><li>...</li></ul>
</div>
<div class="image">
<img src="..." />
</div>
</div>
I was also considering using a background-image for the image and then creating strict breakpoints, but there has to be a better way.
I'm hoping to have the nav scrunch up to reflect the new height/width of the image, depending on the width of the viewport. When it's too thin to facilitate this, it will change to a mobile-friendly view (which is no problem for me).
Related
I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
original site.
http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
If background image isn't working for you here is a simple solution:
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
You can set background image for header and remove/hide the logo image.
#header-row {
background-image: url(../images/logo-company.png);
}
I building a web application using the Bootstrap grid system as my layout. So far everything was working great but got into this issue where I have a div row that has a large image (width 1280px by height 150 px) and when you resize the page the image overlaps over divs.
To fix that I put a fixed height (height 150px) on my div and it stopped resizing and overlapping but I introduced a new problem. This nows throws off my layout and adds a vertical scrolling bar and I need my web app to fit the entire page only.
I was thinking of maybe adding a overflow: hidden to my CSS but seems a bit hacky to me. Just looking for advice and maybe a different approach to my layout. It seems that Bootstrap dosent play nice with fixed heights.
https://jsfiddle.net/DTcHh/9847/
<div class="container-fluid row-fluid" style="height: 100%;">
<div class="row grey" style="height: 10%;"> title of the website here </div>
<div class="row yellow" style="height: 150px; text-align: center;">
<img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
</div>
<div class="row grey" style="height: 60%;"> main content area </div>
<div class="row grey" style="height: 10%;"> footer area </div>
</div>
The way you are using bootstrap is not correct. Your are not manipulating bootstrap grid system properly. Your have put your image in a row but not in a column. You know you should have minimum one column(e.g. col-md-12) in a row. Then Bootstrap will consider your image or content perfectly. Refactor your code and follow the way bootstrap told you to do. Besides, you can make your image responsive using bootstrap's img-responsive class. See here: http://getbootstrap.com/css/#images-responsive
I think what you are looking for is this. This basically applies max-width: 100%; height: auto; and display: block; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
You can read more at http://getbootstrap.com/css/#images-responsive
Sample here: https://jsfiddle.net/qxLtmhat/
First you know you should have minimum one column(e.g. col-md-12 in a row) - see the first answer from Imran and second you hard coded the width and height - remove them and add the img-responsive class on the img.
A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I am working on a website and I am trying to make use of the grid/column system provided in bootstrap. What I want to do is have a picture on the left side with the text beside it to the right. This is the html that I have written so far:
<div class="container">
<div class="row">
<div class="col-xs-4 circle-pic">
<!-- circle -->
</div>
<div class="col-xs-8">
words and stuff go here
</div>
</div>
</div>
and this is the css that I've written so far:
.circle-pic {
height: 150px;
width: 150px;
border-radius: 100%;
border: 2px solid black;
}
My problem is that the first div is not taking up 4 columns as I expect it too which is causing it these elements to be uncentered. I think the problem occurring because I specified the width and height for the circle and that is overwriting something in col-xs-4. Is that the case? If so, how would I go about centering these elements? If not then, Why is the circle not taking up 4 columns worth of space?
EDIT: I am using bootstrap 3.2.0. I have tested on safari and chrome and I do not have any custom rules for col-xs-4.
No, the border radius will not affect the table style.
The width will. It will force the div to be 150px wide on every resolution which will make it not responsive anymore.
Bootstrap has a feature for showing round pictures. You can doing that like this:
<img src="..." alt="My image" class="img-circle">