What would be the best and most clean way to do this layout with html/css?
What I have so far is https://codepen.io/sigug/pen/VxWJoJ
But that is 1) convoluted / not "clean" and 2) doesn't really work because it already looks different here than on codepen.
Thanks for any help..
body { background: #ff00c6; width: 100vw; height: 100vh; }
#icons { margin: auto auto; height: 10vh; border: 1px solid white; text-align: center; }
.icon {
float: left;
}
.small { width: 1vw; p}
.large { width: 2vw; }
<div id="icons">
<div class="icon" style="position: relative; left: 85px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon" style="position: relative; left: 105px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon" style="position: relative; left: 125px; top: -10px;"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
</div>
Try to keep your code extensible and readable, so if you later want to add for example more rows, you easily can, by only changing the HTML markup. Maybe my solution is not 100% accurate, but I'll try to give you an idea on how to implement this layout.
var rows = document.getElementsByClassName('row');
for(var i = 1; i < rows.length; i++) {
rows[i].style.transform='translate(0,-' + i + 'vw)';
}
body {background:#ff00c6;width:100vw;height:100vh;}
#icons {border:1px solid white;}
.icon {float:left;width:2vw;height:2vw;background:url('https://image.ibb.co/jDaNTn/icon_notice.png') center center no-repeat;background-size:contain;}
.row {width:100%;height:2vw;}
.small .icon {background-size:50%}
.small .icon:first-child {margin-left:1vw;}
/* EDIT: JS solution
.row:nth-child(2) {transform:translate(0,-1vw);}
.row:nth-child(3) {transform:translate(0,-2vw);}
... */
<div id="icons">
<div class="small row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<div class="big row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<div class="small row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
EDIT:
Edited the post, using transforms you can get the desired effect.
However this way you need to edit the CSS as well, because you need to
add some more translation to each row (-1vw, -2vw, -3vw, and so
on...). It's maybe better to calculate these with javascript or php.
Provided JS solution
Related
I have a website. And a logo which is always on the top of the screen. When you scroll down is still there, the top of the screen, you still see it. This is fine. On the top the logo image have a link, but when you scroll down, you lose it. I want the link to go with the image. I hope i was clear.
Here is the html:
<div class="col-md-12" id="menu">
<div class="col-xs-3 col-sm-2 col-md-2" id="logoparent">
<div id="logo">
<!--<h3>LOGO</h3>-->
<img src="Logo.png" id="thelogo">
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-6 space">
<!-- empty -->
</div>
<div class="col-xs-8 col-sm-2 col-md-1 menuitem" id="home">
<h3>Home</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="gallery">
<h3>Gallery</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="about">
<h3>About</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="contact">
<h3>Contact</h3>
</div>
</div>
And the css:
#logo{
position: fixed;
z-index: 99;
height: 60px;
width: auto;
overflow: hidden;
margin-left: auto !important;
margin-right: auto !important;
}
#logoa{
position: relative;
z-index: 99;
}
#thelogo{
position: fixed;
z-index: 99;
height: 50px;
width: auto;
margin-top: 5px;
}
#menu{
position: relative;
z-index: 5;
}
#content-all{
position: relative;
z-index: 5; /*which is everything under the menu*/
}
I would suggest you to add a link to that logo by itself so when you click to the logo you go to the appropriate link, always if that logo has something to do with the link, otherwise add use nested DOM to style it.
You can put all menu tags in main tag and set css style for main tag like this
#menu1{
position: fixed;
top:10px;
left:10px;
height: 60px;
width:50px;
}
Check this
JSFiddle
I am working on the below reference image work on responsiveness using css media query and images. I am trying to avoid position I am not getting the excact output which I required.
Here is my Fiddle link
Here is my HTML Code
<div class="container-fluid">
<div class="row-fluid">
<div class="flw_width">
<label class="pull-left flw_text green_prog_text">Basic Information</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_green">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="green_prog">
</div>
</div>
<label class="pull-left flw_text cst_text">Education & Health</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="grey_prog">
</div>
</div>
<label class="pull-left flw_text cst_text">Attach & Declaration</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<div class="grey_prog">
</div>
</div>
<label class="pull-left flw_text pay_text">Payment</label>
<div class="col-xs-4 col-sm-4 col-md-1">
<div class="flw_circle_grey">
</div>
</div>
</div>
</div>
</div>
My CSS Code
.flw_width{
width: 480px;
margin: 0px auto;
padding-top:45px;
padding-bottom: 60px;
}
.flw_text{
font-size: 13px;
color: #ced3d0;
font-family: 'Open Sans', sans-serif;
width: 0px;
white-space: nowrap;
margin-top: -35px;
margin-left: -45px;
border:0px;
}
.flw_text, .cst_text{
margin-left: -46px !important;
}
.pay_text{
padding-left:26px;
}
.flw_circle_grey{
background: url(../images/grey_Circle.jpg) no-repeat;
width: 20px;
height: 20px;
margin-left: -35px;
margin-top: -7px;
}
.flw_circle_green{
background: url(../images/green_Circle.jpg) no-repeat;
width: 20px;
height: 20px;
margin-top: -6px;
margin-left: 0px;
}
.grey_prog{
background-color: #ced3d0;
height: 6px;
margin-left: -24px;
border: 1px solid #bdbdbd;
}
.green_prog_text{
color: #84bd00;
}
.green_prog{
background-color: #84bd00;
height: 6px;
margin-left: -24px;
}
My current output was like this.
Here is the reference image. Kindly help me I was struggling like anything.
Please do the needful.
You have selected the column grid wrongly, I think For the class which are representing the font awesome circle (green dot) fa fa-circle flw_circle_green can be changed to single grid where you have defined a 4 column grid.
Try updating the four column grid to one column 1 column and use the
I've included a screen shot of what I currently have and how I want it fixed here: http://i.imgur.com/urAI4UF.png
Here is the simplified HTML code for my project (I have 19 images that I'm building in a complex grid and so I'm only including the trouble images since the others are playing nice together):
<div class="wrapper">
<div class="images">
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
</div>
<div class="col col-1-3 clear">
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>
<div class="col col-1-3">
<div class="module" id="img-12">
<img src="img/pic_12.png">
</div>
</div>
<div class="col col-1-3">
<div class="module" id="img-13">
<img src="img/pic_13.png">
</div>
</div>
</div><!--.images -->
</div><!--.wrapper -->
Img 11 has a clear so that it will tuck itself under image 10, but then I can't get img 12 and 13 to go level with image 10. If I don't do the clear on img-11, it will be side by side with img-10.
Here is my CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box:
}
.wrapper {
width: 1000px;
margin:0 auto;
}
.grid {
overflow: hidden;
}
.col{
float: left;
}
.col-1-5 {
width: 20%;
}
.col-1-3 {
width: 33.3333%;
}
.col-2-5 {
width: 40%;
}
.col-2-3 {
width: 66.6666%;
}
.col-3-5 {
width: 60%;
}
.module img {
width: 100%;
height: 100%;
padding: 3px;
}
#img-10 {
height: 194px;
width: 333.33px;
}
#img-11 {
height: 194px;
width: 333.33px;
}
#img-12,
#img-13 {
height: 388px;
width: 333.33px;
}
.clear {
clear: both;
}
UPDATE: I got help from a friend on a different site and using this code instead works:
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>
UPDATE: I got help from a friend on a different site and using this code instead works:
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>
I dont understand why I have a large gap between the second picture and the text to its right. I've attached a fiddle for the code. How do I close this gap?
http://jsfiddle.net/7Qchr/
.main {
-webkit-column-gap: 1em;
-webkit-column-rule: 2px;
-webkit-columns: 2;
}
#image {
max-width: 100%;
}
<div class="main">
<p id="text_l">
“ The best selection of cheese I've ever seen! Cannot wait for our next order!”
<p>
<img src="img/cheese1.jpg" alt="Picture of cheese" id="image">
</div>
<div class="main">
<img src="img/cheese2.jpg" alt="Picture of cheese" id="image">
<p id="text_r">
“ Wow,amazing cheese selection and fast delivery! I highly recommed you try!”
<p>
</div>
You'll have to rewrite your code a bit... Try something like this:
HTML
<div class="main">
<div>
<p id="text_l">blah</p>
</div>
<div>
<img src="cheese1.jpg" class="image">
</div>
</div>
<div class="main">
<div>
<img src="cheese2.jpg" class="image odd">
</div>
<div>
<p id="text_r">blah</p>
</div>
</div>
CSS
.main div{
width: 48%;
display: inline-block;
vertical-align: top;
}
.image {
max-width: 100%;
padding: 0 10px;
}
.image.odd {float: right;}
http://jsfiddle.net/7Qchr/6/
Updated Demo
The following CSS was added (none of the existing HTML or CSS was changed).
.main + .main {
text-align: right;
}
p {
text-align: left;
}
Hello guys I'm trying to centre some images. They keep on floating to the left,I've tried text-aligning but it doesn't seem to work. THe jsfiddle is here. http://jsfiddle.net/E7Ydz/2/ P.S. I could probably do this when I've had some sleep, it's 5:56 in London :(
[HTML]
<div id="portfolio" style="height: 3020px;">
<div id="project" class="cms design html-css " data-col="1" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry1" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail275.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="design illustration html-css " data-col="2" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry2" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail2.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="app database design " data-col="0" data-row="1" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry3" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/pgtips_thumb37.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
[css]
#project{
float:left;
position:relative;
padding: 0px 0px 0px 2px;
height:200px;
width:309px;
display: inline;
}
.workEntry{
width:310px;
overflow:hidden;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
float:left;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}
Hope I understand your question well. You should use margin-left: auto; and margin-right: auto; to make a div (or in a better word, a block position element) center.
For instance you should change your css code to something like:
#inThumb{
margin-left: auto;
margin-right: auto;
}
See this jsFiddle: http://jsfiddle.net/E7Ydz/4/