I am currently in learning CSS and it seems I have a hard time understanding the box model. I have a very simple page layout:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/simpleimagebrowser.css">
</head>
<body>
<menu type="toolbar">
<ul>
<li>prev</li>
<li>next</li>
</ul>
</menu>
<div class="imagecontainer">
<img src="images/awsome.jpg">
</div>
</body>
</html>
and a very simple css:
body
{
margin: 0;
padding: 0;
}
menu
{
padding: 0;
margin: 0;
background: green;
}
ul
{
padding: 0;
margin: 0;
}
li
{
display: inline;
}
img
{
padding: 0;
margin: 0;
}
.imagecontainer
{
background: yellow;
padding: 0;
margin: 0;
}
Why is does my yellow <div> have this little margin or gap at the bottom?
I noticed that when I set the font-size to 0 that margin goes away. Can someone explain conceptually what's going on from a css/boxmodel perspective? It seems as if the browser is adding a blank text line below the image or something ...
Add display: block; to your image
img {
display: block;
}
The white space is due to the image being an inline element. I suppose it's the equivalent of line-heightwhich adds white space around text.
This is because all inline elements are expected to fit the 'contains text' model of a span tag, where space is reserved for the tails on letters like g, q, j, etc.
If non, this extra-space is used for 'link underlining' by default browser settings on inline level elements. Meaning, it reserves space for a link hover underline.
tail (n: tel)
Of a letter, the part that extends below the baseline and to the
right, as gjqy. Of the capital letters, Q and R have tails, though
they need not extend below the baseline.
Indeed, adding "display: block;" to your img rule will make the problem go away. This is most likely due to images being treated as "inline" or "inline-block" by default. Thus the browser is very likely attempting to work your image into the line-height of the parent element.
Related
I am asking about this behavior. Elements inside a flexbox assume certain width according to their contents. So if we put an element (let’s call this the “child”) inside an element (and let’s call this the “parent”) put in a flexbox (we’ll just refer to this as the “flexbox”) and give the child a padding in pixels ,then the parent will be upsized according to the increase in the content of the child element. But surprisingly this is not the case when we use padding in percentages (we see the parent width stays the same and the child is pushed of the parent, it is like the padding is put on the inside of the parent element like we have used the rule of (box-sizing: border-box) and determined the width of the parent, but we didn’t). Why is this the case???
This is the HTML:
<div class="flexbox">
<div class="parent">
<div class="child">Hello World!</div>
</div>
</div>
This is the CSS:
.flexbox {
background: #EEE;
display: flex;
}
.parent {
background-color: red;
color: white;
}
.child {
padding: 5%;
}
Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-attr" attributes="width" noscript>
<template>
<style>
#host {
:scope {
display: block;
width: {{width}}px;
height: 100px;
background-color: black;
}
}
</style>
<content></content>
</template>
</polymer-element>
<test-attr width="100">Hello</test-attr>
EDIT : edited to remove obvious typos
There are a couple of things that need changing in your example:
<content> needs to be within the outer </template>
You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.
With the changes: http://jsbin.com/ODEGika/3/edit
That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270
Goal:
When the width and height of the window are both small, the div should be the same size as the window;
When the width of the window is too big (>max-width), the div should keep its width as max-width, and be horizontally centered.
When the height of the window is too big (>max-height), the div should keep its height as max-height, and be vertically centered.
The example below has achieved everything, except for the last point.
How to center this div vertically in the window? I.e., I want the red areas to behave like the green ones, but just vertically instead of horizontally.
(This design is intended for a responsive design for mobile devices' screens. No JS involvement if possible.)
<!doctype html>
<html>
<head>
<style>
body,html{
height:100%;
margin:0px;
background:green;
}
#t1{
position:relative;
height:100%;
max-width:640px;
margin:0 auto;
background-color:red;
}
#t1-1{
position:absolute;
height:100%;
max-height:640px;
width:100%;
background-color:#dddddd;
overflow:hidden;/*demo purpose*/
}
/*the following stuff are for demo only*/
img{
position:absolute;
opacity:0.5;
}
img.w{
width:100%;
}
img.h{
height:100%;
}
</style>
</head>
<body>
<div id="t1">
<div id="t1-1">
<img class="h" src="http://www.google.com/images/srpr/logo3w.png" />
<img class="w" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
</div>
</body>
</html>
P.S. In this example, some desktop browsers internally set a min-width value to the whole thing (e.g. 400px in Chrome), unabling the div to keep shrinking horizontally.
You may need a little javascript to make it work:
First of all, you need an <div> element to layout, so I called it mask:
<div id="mask"></div>
Then, style it to fill the entire document, and give a max-width and max-height:
<style>
#mask {
position: fixed;
height: 100%;
max-height: 400px;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background: red;
}
</style>
This style do not perform the centering work, so you need your javascript to do it, we have a layoutMask function to determine if the div should be centered or not:
var mask = document.getElementById('mask');
function layoutMask() {
// here 400 is the same as the max-width style property
if (window.innerWidth >= 400) {
mask.style.left = '50%';
// to ensure centering, this sould be (max-width / 2)
mask.style.marginLeft = '-200px';
}
else {
mask.style.left = '';
mask.style.marginLeft = '';
}
// the same as width
if (window.innerHeight >= 400) {
mask.style.top = '50%';
mask.style.marginTop = '-200px';
}
else {
mask.style.top = '';
mask.style.marginTop = '';
}
}
At last, assign this function to the resize event, and execute immediately to ensure the <div> got layed correctly on first load:
if (window.addEventListener) {
window.addEventListener('resize', layoutMask);
}
else {
window.attachEvent('onresize', layoutMask);
}
layoutMask();
I tried this on my chrome, but I'm sure it does not work under IE6 since IE6 doesn't support the position: fixed; style, but it should work in most browsers.
I've made a jsfiddle for test.
As per my knowledge, with height:100% it is not possible. You need to use <center> to keep it in center horizontally and vertically. You may need to use margins also. Like:
margin-top:18%;
margin-left:40%;
You can add a #media query to achieve this effect
#media (min-height: 640px) {
#t1-1 {
top: 50%;
margin-top: -320px;
}
}
See JSFiddle for testing.
I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.
So I hope find my answer here, I want to change layout,
The default interface is look like this:
What I want is (I made this using firebug) :
How I can do that?? or in another word from where I can start to do that?
leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.
Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.
take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.
Cheers
I solved my issue, there was a little mistake from my side, and I did some modification;
In CSS file:
#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
display: inline; */ /*Removed*/
...
}
/*Added*/
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
In templates :
At appbar.ftl , or appbarOpen.ftl :
<div id="container"> <!-- This is the Line that I Added -->
<#if userLogin?has_content>
...
And in footer.ftl :
</div> <!-- This is the Line that I Added -->
<div id="footer">
...
Simply :)
I'm trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.
The map div must have width and height declared, otherwise it doesn't work.
I was trying to find a width 100% minus X pixels solution but no of them is working in this case.
Does anyone has an idea how to do it?
Thanks.
I tried this, but it looks that it doesn't apply to the map canvas div:
$(document).ready(function(){
$(window).width();
$(document).width();
var width1 = $(document).width();
var width2 = $("#left").width();
var canvas_width = width1 – width2 + "px";
$('#map_canvas').width = canvas_width;
});
I had exactly the same problem, but managed to fix it.
For example, if your sidebar div is 200px wide set an extra div container around the div in which Google Maps writes its content.
For that div-container set
position: absolute;
left: 200px;
right: 0;
height: 100%
Works like a charm, also when resizing. Let me know if this solution doesn't match your situation.
I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).
Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value):
How to set width of a div in percent in JavaScript?
The styles:
#sideBar {
float: left;
width: 27.5%;
min-width: 275px;
height: 100%;
z-index: 0;
}
#sideBarLocation div {
display: inline;
}
#mapCanvas
{
width: 72.5%;
min-width: 725px;
height: 100%;
float: left;
z-index: 0;
}
with HTML:
<div id="sideBar">
<!-- tab location starts here -->
<table id="sideBarLocation" class="sideBarStandard">
...
</table>
</div>
....
<!-- side bar ends here -->
<div id="mapCanvas"></div>