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/
Related
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.
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).
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">
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help