I want to put the company header on the front page of our CHM manuals. Because users are able to scale the CHM, the header should scale with the width of the manual. The height should not scale.
The problem is that both the left and right side of the header must remain intact, so only the center of the header should scale. The left side has a cut-off corner of which the angle must not change. The right side contains an image.
Image:
Is it possible to do this with CSS or HTML, with either an image or a table?
EDIT:
I still have 2 issues with it that I cannot fix. Hopefully you can help a bit more. The background color on the header_center also gives a small underline after compiled into a CHM file. It have made it red for visability. Also when I scale the CHM window, white space appears between header_left and header_center and I have no idea why. This is solved if I give all 3 headers a background color, but I do not want a line under header_right because of the image. Any ideas?
These images are the result at this stage:
You know, CHM is like a ZIP format and may contain HTML as well as CSS. Below I have shown one of the possibilities using images. Try it and change for your needs (see HTML below). The background colors in <colgroup> are only used for demonstration purposes. If there is text in the middle, the corresponding color from the company banner has to be set as background color.
The images I used:
Make sure an external CSS file e.g. design.css is inside you project level structure and added to the [FILES] section of your HHP project file. You can open this *.hhp file with e.g. Notepad++ to add files.
If the files are listed in the [FILES] section the compiler includes them to the CHM file.
[FILES]
welcome.htm
design.css
How_to_extend\extend_menu.htm
How_to_extend\power_function.htm
images\gui_screenshot.jpg
HTML and CSS:
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental)" />
<title></title>
<style>
.header {
width: 100%;
border-collapse: collapse;
/*border: 1px solid black;*/
}
.header_left{
width: 81px;
}
.header_center{
/*background-image: url("help-info-de-right-part.png");*/
/*background-color: #ff33cc;*/
background-color: #e0e0e0;
text-align: center;
}
.header_right{
width: 82px;
}
.header td {
padding: 0;
}
</style>
</head>
<body>
<table class="header">
<colgroup>
<col style="background-color:green;" />
<col style="background-color:red;" />
<col style="background-color:yellow;" />
</colgroup>
<tr>
<td class="header_left">
<img src="help-info-de-left-part.png" />
</td>
<td class="header_center">
<img src="help-info-de-center-part.png" />
</td>
<td class="header_right">
<img src="help-info-de-right-part.png" />
</td>
</tr>
</table>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
Related
I am working on an assignment on Angular.
The requirement of the assignment: display the message in a single line, trim all unnecessary part with "...".
I manage to make the message into a single line by adding "white-space: nowrap" in tag, but the multiple lines will become a single line which overflows. Now comes the part the puzzles me. I am supposed to trim the line and add "..." to the overflowing part. Though I have added features such as "text-overflow: ellipsis; overflow: hidden; display: inline-block" to my description class, the line is not trimmed and no "..." appears. Instead, an ugly horizontal scrollbar emerges, and though I manage to get rid of it by adding "overflow-x: hidden" in tag in "index.html", it still doesn't meet the requirement.
.description {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
</style>
<img matListAvatar src={{leader.image}} alt={{leader.designation}}>
<p matline>
<span>{{leader.name}}<br></span>
<span>{{leader.designation}}<br></span>
<span class="description"> {{leader.description}}</span>
</p>
I want the message to be delivered in a single line, trimmed and added "..." according to the screen size but not according to pixels. Can anyone help me out?
Edit:
The sample in the answer below works just fine. But it is not the situation of my app.
I have checked this project with Edge and Chrome on win 10. Doesn't work.
Link to GitHub: https://github.com/Z-Richard/Practice-Angular-Project.git
Please kindly inform me whether this project works or not on your computer.
I downloaded your code and checked the issue is your parent <p> class does not have width defined so subclass not able to calculate width correctly. So my solution is I basically added <p matline class="contact-info"> class and give it width:98% then everything worked as expected. Here is the the working code for about.component.html
<mat-list-item>
<style> .mat-list-item {
min-height: 100px;
}
.contact-info{
width:98%;
}
.description {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
</style>
<img matListAvatar src={{leader.image}} alt={{leader.designation}}>
<p matline class="contact-info">
<span>{{leader.name}}<br></span>
<span>{{leader.designation}}<br></span>
<span class="description"> {{leader.description}}</span>
</p>
</mat-list-item>
Let me know if you have any question.
Your code works like a charm for me. I do not think it has anything to do with the styles of your span.
I checked in all major browsers, seems to be ok: https://codepen.io/Sixl/pen/gZRxYR
.description {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
background-color: yellow;
}
<p>
<span>Lorem ipsum.</span><br>
<span>dolor sit amet</span><br>
<span class="description">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
</p>
I need to display an image and some dynamic text inline within a Div.
The problem is when this text is too long the next line text start from the begibning of the Div rather than keeping left alignment of text same.
I want something like this. Thanks
I love to use the css background feature for this kind of task.
padding-left makes space for the image, so make sure to adjust that to your needs. Also you can control the image size with background-size.
.icon-box{
padding: 25px;
padding-left: 75px;
background-repeat: no-repeat;
background-image: url(https://www.gravatar.com/avatar/f087769399da5144ae10c892ae279490?s=32&d=identicon&r=PG);
background-position: 25px center;
background-color: #dedede;
}
<div class="icon-box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="flex-container">
<div class="flex-item">
<img />
</div>
<div class="flex-item">
<p>This is the short or long text. Longer than shorter. Maybe.</p>
</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
align-self: center;
}
You can display an image and some dynamic text inline within a Div by use below code:
div.main{
border:solid black 1px;
display:table;
padding:5px;
width:100%;
margin:5px 0; /* you can change/remove margin */
}
div.main .image{
vertical-align:middle;
display:table-cell;
padding-right:5px;
width:50px; /* you can change width */
}
div.image img{
width:100%;
height:50px; /* you can change height */
vertical-align:middle;
}
div.your-text{
vertical-align:middle;
display:table-cell;
text-align:justify;
}
<div class="main">
<div class="image"><img src="your_iamge_link" /></div>
<div class="your-text">Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here. Type your text here.</div>
</div>
This is not a very complicated problem, but I can't figure out an answer or find something on the web.
I have two elements within on parent <div>:
an image (contained in a separate div with float:left or float:right)
text
The width of the parent div is fixed to 600px.
The height is variable.
I want the size of the height of the image to match the height of the text block. The full-size image is usually larger than the text block.
To match two divs I usually use a wrapper div and adapt the height of the wrapped divs using "100%". This does, however, adjust the size to the size of the bigger one of the inner divs. In my case, the div with the image would, in most cases, be bigger than the text block, so a wrapper div is no option. Using a fixed height or max-height is also no option.
<div>
<div style="float:left;"><img src="..." /></div>
<div><p>some text probably smaller than the full-sized image</p></div>
</div>
tl;dr: I need to adjust the height of the first inner div containing the image to the height of the second inner div containing the text no matter if the text is bigger or smaller than the full-sized image.
JsFiddle: https://jsfiddle.net/5Lf1gmor/1/
By the way, the text does not HAVE to be contained in a separate div. The <p> is enough, but I think a container is required to solve this problem.
I would put the image as a background-image for the containing div and get rid of the div with the img inside it.
The .container would get padding-left: 50%; to keep the text inside it on the right side, and background-size: 50% 100% so the background image will take 50% of its width, and 100% of its height (determined by the text block...)
here is how:
https://jsfiddle.net/ronency/hxcdd5az/
HTML
<div class="container">
<div class="text-container">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
CSS
.container {
background: url("https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg") left top no-repeat;
font-size: 1.1em;
border: 1px solid black;
padding-left: 50%;
background-size: 50% 100%;
}
.text-container {
background-color: white;
}
I am trying to obtain this design:
I just have no idea how to start on this. It doesn't make sense in my head on how I can obtain this.
Can someone help me? Maybe do a quick jsFiddle, just with the basics. I want to learn how I can make layouts like this, where the left menu bar's bg (or just height) is the same as "DIV#2"' content.
Update:
I tried #Josh Davies answer like this:
<div class="container">
<div class="row">
<div id="wrapper">
<div class="leftt">left content</div>
<div class="rightt">right content</div>
</div>
</div>
</div><!-- end container -->
#wrapper{background-color:blue;width:100%;}
.leftt{float:left;width:29%;}
.rightt{float:left;width:69%;}
Unfortunately, I only get the left sidebar, and the right content. Not the top bar, nor the little menu at the bottom of the left menu.
Just create a wrapper and give the wrapper a background colour of the left div. Then position the left and right div and give the right div a colour of your choice. That way when the page expands the wrapper will also expand.
Hope this helps!
There's a couple of ways to achieve this. You can use the <table/> tag of course although some frown on that. Google do it in Drive though.
In 'modern' browsers, you can also use the "table-cell" CSS property to make your DIVs act like TABLEs, but that's not widely supported on legacy browsers, and IMHO a worse hack than using a table on balance.
You can do it all in DIVs though, cross browser, in pure CSS which requires forcing it to full screen height. There's an answer here and jsFiddle example that should help you with this;
https://stackoverflow.com/questions/12861847/100-height-div-using-jquery/12862033#12862033 (my answer does NOT require jQuery, despite the title).
Another thing you might want to consider is grabbing a grid library, which will have all the cross browser stuff worked out for you. Twitter bootstrap contains a good grid library, but I prefer this http://responsive.gs/ which is much simpler to configure for your table like layout above. You may need to combine the two in order to get a full-screen height but let the grid do the width layout for you.
Try something like:
demo: http://jsfiddle.net/sEKtU/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#top {
background: lightblue;
}
#inner-wrapper {
position: relative;
}
#main {
margin-left: 200px;
}
#main-inner {
background: lightsteelblue;
padding: 1px 0;
}
#left {
background: lightSeaGreen;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
}
#left-menu {
background: lightPink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
top
</div>
<div id="inner-wrapper">
<div id="left">
<div id="left-content">
left
</div>
<div id="left-menu">
menu
</div>
</div>
<div id="main">
<div id="main-inner">
<h1>Lorem ipsum dolor sit amet,</h1>
<p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
</html>
There is no such thing as max width or max height. At the very most you can get the screen width/height and use it as if that was the max width/height.
On the other site, you're looking for some kind of layout system. Maybe have a look at http://www.bramstein.com/projects/jlayout/
I'd start with this structure:
<div class="containter">
<div class="top-bar">
...
</div>
<div class="div1>
...
<div class="bottom-menu">
...
</div>
</div>
<div class="div2">
...
</div>
</div>
Then you're CSS this would be the starting point:
.container { position: relative; }
.top-bar { position: absolute; top: 0; z-index: 5;}
.div1 { height: 100%; position: relative; }
.bottom-menu { position: absolute; bottom: 0; }
That would be a very basic starting point and you would still have to do the styling for it. Sense it sounds like Div2 is going to set the height by being the bigger element Div1 should inherit the overall height of the parent container div.
Setting the Div position to relative will allow you to set the bottom-menu class to an absolute position of bottom 0 so that it will stay on the bottom of the div no matter the height.
i'm new to web developement and i have a problem .. and a (bad) solution :
i want to navigate in my page. The pages have the same layout. The only difference is an div container.
Sample code :
home.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
<div id="outer" >
<div id="inner">
<div id="left" >
<div id="menu3">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
<div id="content" ><h2>Startseite</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div><!-- end content -->
</div><!-- end inner -->
</div><!-- end outer -->
</div><!-- end container -->
</body>
</html>
about.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en >
<head>
<title>Sample</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" >
<div id="outer" >
<div id="inner">
<div id="left" >
<div id="menu3">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
<div id="content" ><h2>Startseite</h2>
<p>
**OTHER CONTENT**
</p>
</div><!-- end content -->
</div><!-- end inner -->
</div><!-- end outer -->
</div><!-- end container -->
</body>
</html>
This works fine.
But there is a lot of code duplication which can get me into trouble when i have 15 pages :D
So.. what is the usual way to do it ?
Maybe some Ajax voodo ?!
Please Help
Use Server Side Includes (SSI)
There is no need to install additional software on your server if you do not need all its functionality. PHP doesn't come standard with any web-server.
Personally, using PHP to reduce HTML-repetition is the equivalent of shooting down a mosquito with a M198 howitzer.
On the other hand, SSI is supported in the two most widely use web-server software (Apache, IIS) and its usage is rather simple.
Simply use the extension .shtml or .shtm for your file. Put your comment contents in separate files, and then, in your page file, use the following to include the different parts:
<!--#include virtual="common/header.part.shtm" -->
<h2>Startseite</h2>
<p>
**OTHER CONTENT**
</p>
<!--#include virtual="common/footer.part.shtm" -->
Again, this is supported by all major web-server software available and requires no additional CGI modules to be installed, unlike PHP.
Note: Apache requires mod_include to be enabled on the web-server. Its binaries are included in every binary Apache distribution.
You definitely do not want to use AJAX for a situation like this for the following reasons:
Your page will be unreadable for people using browsers without JavaScript support (embedded devices, desktop computers in high-security workplaces, etc.)
Search engines cannot (as of yet) interpret JavaScript DOM changes properly and won't be able to crawl your pages properly.
SSI is the simplest way of doing this server-side.
Use PHP
You might what to try using a language that supports includes, like php. Even thought php is slow if your doing a lot of data crunching its great for a beginner.
<?php include('nav.php'); ?>
This will insert the nav.php file into your current page.
The nav.php file doen't need <html> or body just use the include as if it is inserting the code directly. By inserting an include into your file you can edit data from a single location, your include file.
To get php working try this tutorial http://inteldesigner.com/2009/getting-started/setting-up-a-testing-server