I have same css property but it looks different in chrome and mozila.
i want all those images to float left and with equal margin between them.
but the width of parent div of these images is 100%. and width of the images are also different. i want them to cover the complete area horizontally.
I don't know why it looks different in these browsers.
HTML
<div class="bottomLogoWrapper">
<h3>Lor separat existentie</h3>
<div class="logoContainer clearFix">
<div class="bottomLogo lfloat"><a><img src="images/fireFax.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/optus.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/toyota.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/theIconic.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/kogan.png"></a></div>
</div>
</div>
CSS
.bottomContent > .bottomLogoWrapper{
width: 100%;
padding: 50px 15px;
border-bottom: 3px solid #e5e5e5;
margin-bottom: 50px;
}
.bottomContent > .bottomLogoWrapper h3{
margin:0 auto 50px;
color: #3f3f40;
}
.bottomContent .logoContainer{
width: 100%;
display: inline-block;
}
.bottomContent .logoContainer .bottomLogo{
margin: 0 5%;
}
.bottomContent .logoContainer .bottomLogo:last-child{
margin: 0px;
}
.bottomContent .logoContainer .bottomLogo a{
cursor: pointer;
}
.bottomContent .logoContainer .bottomLogo img{
width: 70%
}
Chrome
Mozila
I think you can add vendor prefixes(webkit,-mos- etc) for the respective browsers in which you want to run your code
Related
I have a problem with the size of the cards. On the Desktop side are ok, but on a lower resolution begin to be no longer equal. How should I proceed in this situation? I'm not an expert in css, I work on the backend but I would like in the future to have a correct solution how I could solve something like.
html
<div class="proditem">
%PROMO%
<div class="proditem_cover">
%COVER%
%promo_period%
</div>
<h3 class="protitem_title">
%TITLE%
</h3>
<div class="protitem_price">
%PRICE% eur %price_euro%
</div>
<div class="detalils"><a class="button1" href="%LINK%">Details</a></div>
</div>
a {
text-decoration: none;
color: inherit;
font-size:16px;}
.list_prod .proditem {
height: auto;
max-height: initial;
float: none;
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
transition: 0.3s;
width: 40%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 2px 16px;
border: 0 !important;
border-radius: 1rem;
.proditem img {
width: 170px;
height: 170px;
max-width: 10vw;
max-height: 10vw;
/* object-fit: cover; */
}
image
As far as I can see, they decrease in size because they don't have the same information, depending on the text and image if they're not equal. How can I make them equal regardless of the information they have?
Maybe you can try to create wrapper class like :
<div style="width:100%; height:auto; display:flex; justify-content:flex-start;" class="wrapper">
<div style="width:50%; height:100%; " class="content"> <div/>
<div style="width:50%; height:100%; class="content"> <div/>
<div/>
This just a simple example to give you a some styling or aligning tricks. Try and write me if its not-proper code for you.
I wanted to make my text to make my text lower to make it to the center of the <div> tag. But I tried to use margin-top to make it lower a little bit but it just can't work. This is my code.
.loremipsum {
background-color: white;
height: 1060px;
}
.content {
font-family: 'Lato';
text-align: center;
}
h3 {
font-size: 75px;
}
.h3 {
border: 2px black solid;
width: 750px;
margin: auto;
margin-top: 100px;
}
<div class="loremipsum" id="loremipsum" >
<div class="h3">
<h3 class="content" >Why Choose Us?</h3>
</div>
<p class="content">We create the best front-end design.Each template cost only $5.</p>
</div>
I recommend you to look up a lot of web based tutorials before you go any further, as web based development is vast (esp for a complete beginner)
I've created a quick demo of margin and padding examples below, (I would post as a comment, although for demonstration purposes, this might be better)
html{background:gray;}
div {
height: 20px;
border: 1px solid black;
}
.right {
margin-right: 100px;
}
.left {
margin-left: 100px;
}
.top {
margin-top: 100px;
}
.bottom {
margin-bottom: 100px;
}
.left-padded{
padding-left:100px;
}
.right-padded{
padding-right:100px;
}
.top-padded{
padding-top:100px;
}
.bottom-padded{
padding-bottom:100px;
}
<div class="normal">I'm normal</div>
<div class="right">I'm margin-right</div>
<div class="left">I'm margin-left</div>
<div class="top">I'm margin-top</div>
<div class="bottom">I'm margin-bottom</div>
<div class="left-padded">I'm padded-left</div>
<div class="right-padded">I'm padded-right</div>
<div class="top-padded">I'm padded-top</div>
<div class="bottom-padded">I'm padded-bottom</div>
You can set property to important. so it will give priority
` .h3 {
border: 2px black solid;
width: 750px;
margin:auto;
margin-top:100px;
}
h3.content{padding:25px} `
Check it on fiddle : [http://jsfiddle.net/515zttfr/][1]
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
I have the following html/css code: http://jsfiddle.net/J3YZ8/4/
HTML:
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
html {
height: 100%;
}
body {
direction: rtl;
height: 100%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 75%;
}
#headerDiv {
height: 20%;
margin-bottom: 1%;
}
#footerDiv {
height: 10%;
margin-top: 1%;
}
#headerDiv,
#footerDiv {
clear: both;
background-color: #FF5500;
}
#bodyDiv {
height: 68%;
margin: 0% 2%;
}
#loginContainer {
background: green;
margin-bottom: 1%;
}
#menuContainer {
background: blue;
margin-top: 1%;
}
#loginContainer,
#menuContainer {
display: inline-block;
width: 29%;
margin-left: 1%;
height: 49%;
}
#contentContainer {
width: 69%;
height: 100%;
background: yellow;
float: left;
margin-right: 1%;
}
If you use this code on your browser (without jsfiddle) you will see there is no margin between the blue div (menuContainer) and the footer. In jsfiddle the margin is not equal to the margin between the yellow div (contentContainer) and the footer although it should be the same. How can I fix it?
More details:
this is image from jsfiddle result:
this is image from full screen result:
Does anyone knows how to fix it??
I do see a margin below the blue panel.
A height of 100% the html element does not mean "not higher than the window". If you don't want to scroll the page you could set overflow:hidden on the html. But then you won't see the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
</div>
<div id="footerDiv">FooterPanel</div>
One of the main problems is that you have a second closing div with no opening - this can through IE in quirks mode and also cause other issues when working with floats and clears in CSS.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div id="footerDiv">FooterPanel</div>
Above is corrected code that should fix it - at least a start.
Are you looking to build a fluid height and width layout?
Also you need to clear the floats before you start the footer.
<div id="headerDiv">HeaderPanel</div>
<div id="bodyDiv">
<div id="loginContainer">LoginPanel</div>
<div id="contentContainer">Content</div>
<div id="menuContainer">MenuPanel</div>
</div>
<div style="clear:both;"></div>
<div id="footerDiv">FooterPanel</div>
There is a working sample of the code maintaining your margin.