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.
Related
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>
I'm not sure if this has been asked to death already. But I can't find a way to grow content upwards.
You know how content behaves normally, extends downward, pushing content after down as the content above extends. Is there a way you can do this, but upwards?
Right now the code is ordered like this:
H1 - Title: needs to adjust if it breaks into two lines
p - Tags: needs to adjust height if it breaks to two lines and move the H1 up
p - Text: same as tags but move both tags and title upwards
p - Number: doesn't grow much, but needs to stick to the corner
p - Button: Never grows and needs to stick to the corner
edit 1: better image, yellow arrows show which ways content need to be able to grow, red shows space between each section.
edit 2: clarified question.
edit 3: edited image to signify that all elements stick to bottom and NOT top.
edit 4: added what I'm trying to avoid to image.
You can use Flexbox to achieve this. Make sure the height of the container is correct and then you can align all the elements to the bottom with flexbox. As the content grows, the container will fill upwards.
Here's another good resource on flexbox: CSS Tricks
--
Specifically in this example, if you set the container to be display: flex; with a flex-direction: column; then it will allow you to align the child elements vertically instead of horizontally like you do with floats.
Setting justify-content to flex-end is what aligns everything to the bottom. That's where the magic happens.
HTML
<body>
<div class="container">
<h1 class="title">TITLE</h1>
<p class="tags">Tags, Things, Stuff, More Stuff</p>
<p class="text">Non via nia sex praemissae spectentur contingere respondeam.
Has scriptis usu corporis physicae. Existentia lor perspicuum sub mutationum
agnoscerem vis advertatur. Multo in entis ad rebus tactu oculi ad. Ii in
innatis viderer me hominem at ipsemet. Vitro errem im is anima famam se istas.
Mea credendas ero persuasum sanguinem vox. Sequeretur uti aut frequenter vul
commendare describere. Ex superare aeternum ob connivet ac earumque co.
Physicae fenestra obturabo ii is se.</p>
<div class="bottom">
<p>Number</p>
<p>Button</p>
</div>
</div>
</body>
CSS
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.text, .bottom {
width: 100%;
}
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
width: 100%;
height: 100%;
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
You have to position the elements at the bottom of the page. Here is my solution:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
html,
body {
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
padding: 2rem;
font: 1.6rem/1.4 Roboto, monospace;
}
#number,
#button {
position: absolute;
bottom: 2rem;
background-color: #4caf50;
color: #eee;
padding: 1rem;
}
#number {
left: 2rem;
}
#button {
right: 2rem;
}
#topWrapper {
position: absolute;
bottom: 7.24rem;
width: calc(100% - 4rem);
max-height: calc(100vh - 9.24rem);
overflow: auto;
}
#text,
#tags,
h1 {
background-color: #f44336;
color: #eee;
padding: 1rem;
}
#tags,
#title {
margin-bottom: 1rem;
}
#tags {
background-color: #2196F3;
}
#title {
background-color: #FF9800;
}
<div id="topWrapper">
<h1 id="title">Title</h1>
<p id="tags">Tag, Tag, Tag, Tag, Tag</p>
<p id="text">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>
<p id="number">100,000</p>
<p id="button">Button</p>
You can also view it in this fiddle. Moreover, see how it behaves if the title is longer or if the tag list is longer. If the content becomes to much, a vertical scrollbar is added.
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>
I'm using TYPO3 with a calendar extension (cal). It creates events and shows them as a list. Currently, it looks like that:
Now I want to have a border around the date, but just as big as the text.
This is the extension's template:
<div class="col-md-3 text-center" style="text-align:center;">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
</div>
<div class="image">###IMAGE###</div>
</div>
<div class="text-wrapper">
<div class="time">###STARTTIME######ENDTIME###</div>
<h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
<p>###DESCRIPTION###</p>
</div>
</div>
</div>
Div with class "date" is the relevant part.
This template creates this code:
<div class="col-md-3 text-center" style="text-align:center">
<div class="event-wrapper">
<div class="img-wrapper">
<div class="date-wrapper">
<div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
</div>
<div class="image"></div>
</div>
<div class="text-wrapper">
<div class="time">21:00 Uhr - 23:00 Uhr</div>
<h3>Frankfurt/Main</h3>
<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 takim</p>
</div>
</div>
</div>
I tried to give the class "borderspan" a border, but this didn't worked and looked like this afterwards:
How can I have a border around the date?
You could try using ::before and ::after like so:
.date-wrapper {
max-width: 200px;
background: orange;
text-align: center;
}
.date::before,
.date::after {
content: "";
width: 1px;
height: 25px;
background: black;
display: block;
margin: 0 auto;
}
.date {
margin: 25px 0;
}
<div class="date-wrapper">
<div class="date" title="###MICROFORMAT_START###">
<span class="borderspan">###STARTDATE###</span>
</div>
</div>
Also notice (like #Banzay mentions) don't use class="" twice per element.
Your date is a <div> element which is block element by default. Means it take up whole width available. We need to make it inline-block, so the width will be content related. Plus add some padding to make some space between the text and a border. I set the border width equal to your text-line width and color to match the text color. Take a look:
.date {
display: inline-block;
padding: 7px;
border: 7px solid #ea644f;
}
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;
}