I am starting an application that will use HTML / CSS. While I'm fairly familiar with the two technologies, I am having problems creating my default layout. Basically, I want the following:
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
| |
| |
| This section will take up the remaining available space. |
| No matter what. If more space is required, scroll only this |
| content. |
| |
| |
|-------------------------------------------------------------|
| |
| This section will be as large as the content that it holds |
| |
|-------------------------------------------------------------|
How do I use HTML / CSS to acomplish this?
This ought to do it: http://jsfiddle.net/ratbum/TUytU/4/
Using HTML5 and CSS, we will call the top section <header> and the bottom, <footer>, for semantic reference. We will also call the center section of your content <article>.
If you set both the <header> AND <footer> to position: fixed; only the center section or <article> will scroll. Check out my result in the jsfiddle linked below. Easy peasy!
Example:
http://jsfiddle.net/codesushi156/5wc25/4/
Related
I am using mpdf to convert html page. I have added code like below.
$html=$this->load->view('client_admin/test_poepdf',$data, true);
$pdfFilePath ="Test_".$task_id.'_'.$startdate.'.pdf';
$pdf = $this->m_pdf->load();
$stylesheet ='';
$stylesheet .= file_get_contents(base_url().'assets/css/bootstrap.min.css'); // external css
$stylesheet .= file_get_contents(base_url().'assets/css/icons.css'); // external css
$pdf->WriteHTML($stylesheet,1);
$pdf->WriteHTML($html,2);
$pdf->Output($pdfFilePath, "D");
$pdf->Output($destination2, "F");
I added one image in mpdf page and added width for it like below:
<td style="width:100%;"><img src="<?php echo base_url();?>assets/poeimages/<?php echo $filename;?>" class="side_logos" id="poeid" style="width:1300px;height:auto;"></td>
</tr>
but image width is not applying if i open in browser it is applying. Please help me.
When mPDF generates your PDF it puts nearly all your content inside the "print area". The print area is calculated as: page box minus margins.
______________________________
| | |<- sheet
| |<--+-- crop marks
| ______________________|___|
| | A | |
| | ______________ |<--+-- page box
| | | HEADER | | |
| | D | | B | |
| | | | | |
| | | |<--+---+-- page box minus margins = printed area
| | | | | |
| | | | | |
| | | | | |
| | |___FOOTER_____| | | A: margin-top
| | C | | B: margin-right
| |______________________| | C: margin-bottom
| | D: margin-left
|_____________________________|
Ref: http://mpdf.github.io/paging/using-page.html
From your example, I see you've got your image inside a <table> tag. If the table width (not the <td>) isn't set to 100% then that would further restrict the total width of your image.
You've a couple of options here. You can set the page margins to zero and your table to 100%:
<style>
#page {
margin: 0;
}
table {
width: 100%;
}
</style>
Doing this will mean you need to add left and right margins / padding back into the elements you don't want to have a 100% width though.
Or you can extract your image from the table and place it in a top-level <div> tag which you absolute position on the page:
<div style="position: absolute; left: 0; width: 100%; >
<img src="" />
</div>
Absolute positioning will mean you don't have to mess with the page margins, but you take the image out of the document flow which could cause display problems if you aren't careful.
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>
I have a list that looks like this
--------------------
| | |
| 1 | 2 |
| | |
| 3 | 4 |
| | |
| 5 | 6 |
| | |
--------------------
(it's a simple <ul> with <li>'s)
the container of this list, let's call it div.wrap has a fixed width like 400 pixels, and the list items are floated to left with 50% width.
How can I add a 10 pixel spacing between the left and right list items, without screwing up the layout?
Note that I have no control over the HTML from within the list, so I can't add any classes to these list items :(
I tried with margin-right: 10px on the <li>'s and margin-right: -10px on the <ul> but that doesn't work :)
An example with margin-right.
edit
If you want to hide second margin, you can make ul a little bit bigger than its wrap and hide overflow:
http://jsfiddle.net/YBy2K/3/
Not terribly elegant, but simple enough.
Unfortunately I have to support IE7 (and preferably IE6)
In IE8, Safari, Firefox, Chrome, I get a perfectly good layout ujsing an outer div to enlose two boxes.
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | |
| | | | | |
| -------------- ----------- |
| |
------------------------------------
I'm using inline-block to style A and B. A is floated left, B right. Both boxes have internal divs and other elements.
However, when I use IE6 and IE7 I get this monstrosity.
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
Any definitive answers to what is going on and how to solve it?
Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
with:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)
IE block level element inline-block hack: this may be useful for you