Totally new to HTML/CSS. I've got the top image/logo done, and the header. How do i get that text formatted like in the picture (3 columns)?
I only tried using table with 3 columns. However i think its harder to style it considering its a table. Like max column width/height etc.
Thanks in advance!
Click for the image
perhaps the easiest way to do this is with the css columns attribute:
div{
column-count:3;
column-gap:100px;
}
<div>this is some random text we want to enter into our html page
</div>
but the better way to do this is with flex
#container{
display:flex;
justify-content:space-between;
}
<div id = 'container'>
<div class='cols'>this is some text</div>
<div class='cols'>we want to add</div>
<div class='cols'>to our html page</div>
</div>
if you want to add a header and a footer you can try:
#container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#cols{
display:flex;
justify-content:space-between;
width:100%;
}
<div id='container'>
<div id = "header">my Header</div>
<div id='cols'>
<div>some random</div>
<div> we want to add</div>
<div>to out html page</div>
</div>
<div id ='footer'>my Footer</div>
</div>
For the three text sections, you need three child divisions in one parent division.
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Style it this way:
.parent{
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
}
.child{
display: inline-block;
width: 30%;
height: auto;
margin: 0px auto;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#media only screen and (max-width: 768px) {
.child{
width: 100%;
}
}
The media query is there to make the divisions stack on one another on mobile screens.
Simply input this style
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
And put this code below your image code,
<div class="column">
<p>It occurs in a wide range in sub-Saharan Africa</p>
</div>
<div class="column">
<p>The Indian subcontinent to Southeast and East Asia..</p>
</div>
<div class="column">
<p>The leopard is one of the five extant </p>
</div>
I would suggest that you stay semantically correct and not use DIV tags for everything under the sun. The text in question is paragraph text thus deserves to be in a P tag.
This works for the three-column part of your question. It has the advantage of being correct semantic use of HTML tags, and using CSS to produce table-like formatting without needing to commit the sin of actually using a table like we used to do back in the 90s.
Edit: one other note. You will find that the CSS float property has its uses. However, as you use it, you will also find that overuse of it can complicate the heck out of your layout and cause you to starting pulling hair out in the end. The display table type properties are what I prefer after some years of front end work in my not-so-distant past.
<html>
<head>
<style type="text/css">
.row {
display: table-row;
}
.cell{
display: table-cell;
vertical-align: top;
width: 33.33%;
}
</style>
</head>
<body>
<div class="row">
<p class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus blandit neque dapibus volutpat. Donec et dapibus leo. Ut at sodales magna, quis varius lacus. Ut sapien enim, fermentum eu egestas sed, pretium vel dolor. Nullam congue odio ut sem volutpat, ac dictum mi mattis. Quisque in purus sollicitudin nisl dapibus bibendum a a quam. Sed tristique augue nisi, quis interdum odio aliquet in. Aliquam tristique, dolor sed suscipit lobortis, eros enim mattis purus, vitae consectetur ante est nec libero. Aenean semper, ipsum eget venenatis eleifend, erat erat dignissim mi, non lacinia justo lorem at tortor. Aenean et erat suscipit velit porta placerat nec sit amet augue. Nulla non sem non tellus pellentesque ornare. Vivamus volutpat eget lacus eu dignissim. Sed venenatis euismod tempus. </p>
<p class="cell">Integer euismod felis et elit dapibus laoreet. Pellentesque et massa vitae orci pharetra imperdiet. Proin ultricies velit erat, a semper arcu volutpat eu. Morbi feugiat sapien non nisi faucibus elementum. Curabitur sed justo et enim maximus tempus. Donec posuere gravida justo sit amet dignissim. Etiam vestibulum mauris eros, vitae blandit justo pellentesque nec. Ut varius mattis volutpat. </p>
<p class="cell">Nulla vulputate ipsum leo, ut ornare massa malesuada et. Donec metus enim, viverra id diam a, luctus sagittis turpis. Etiam euismod, ex id convallis tristique, odio tellus placerat nunc, in dapibus risus massa non nulla. In placerat lectus tortor, vel gravida leo pharetra eget. Donec mollis facilisis pharetra. Nulla commodo quam tellus, eget hendrerit nisi aliquet id. Duis sagittis enim eu sodales bibendum. Maecenas tincidunt id mauris vitae ultricies. </pclass="inline">
</div>
</body>
</html>
Related
I have a flexbox and in it, I have an image and text. For some reason, there is a big area of the flexbox where I can't place content in. It is like there is padding there and it won't let it go past it. I'm not too sure why the content can't go in this area.
The part highlighted in yellow is where I can't place anything. If it goes over this area, it will just go to the next line.
What I want it for it to stretch across because right now, the text looks too close together. how can I achieve this?
/*Header for picture, and description*/
#display {
padding-top: 2em;
border: solid .125em black;
display: flex;
flex-flow: wrap;
background-color: white;
opacity: 0.9;
}
#display > * {
flex: 1 1 5%;
padding: 1em;
}
article{
margin-right:20em;
}
article h1{
font-size: 2em;
text-align: center;
}
article p{
padding-top: 2em;
}
<section id="display">
<figure id="headshot">
<img src="images/GM05.png" alt="headshot"/>
</figure>
<article>
<h1>Name Goes Here</h1>
<p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
</article>
</section>
Removing the margin-right in the article tag fixes the issue, but now they aren't aligned correctly.
You must note that you have set a margin on the article.
The problem might be here:
article{
margin-right:20em;
}
This pushes your article 20em's away from the right end of your display. Just remove the margin and run the code.
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I don't want to just place text within an image. I want the text it to begin over the bottom-center of the image and to be able to run to the right, outside of the image.
Think of the stackoverflow site image above (if the text wasn't actually part of the image).
Consider if the orange bars continued till it was over the 'K'
Here is a crude example (# represents the image).
#################
#################
#####
##### TEXT GOES HERE
#####
I hope that I was able to adequately explain.
It would be impractical to list everything that I have tried, maainly because I didn't keep track of every single thing I have tried (sfd).
<td valign="left">
<div style="float:left;">
<img src="image.png" />
</div>
<div style="float:left;vertical-align:bottom; margin-right:100px">
<asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
</div>
</td>
i'm not 100% on the solution you want, but i imagine it's something like this?
http://jsfiddle.net/ujL4pwx9/1/
HTML
<div class="foo">
<img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
}
img{
width:300px;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
make the div containing both the img and text relative then you can make the text absolute and decide where the edge will reach. as shown in the jsfiddle above.
is this what you meant?
but personally i'd not use img and instead use a background-image
http://jsfiddle.net/9ka1fq2j/3/
HTML
<div class="foo">
<p> this is my text and it goes outside of the image when needed </p>
</div>
CSS
div.foo{
position:relative;
width: 300px;
height:300px;
background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
background-size:cover;
}
p{
position:absolute;
width:100%;
right:-50%;
bottom:0;
margin:0;
background:white;
border:solid 1px black;
}
When the size of the image is known, this is relatively simple: just give the text a background color (otherwise it is transparent by default) and a negative left margin of half the image's width.
span {
background: white;
margin-left: -70px;
}
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
That's it. For cosmetic purposes, you could wrap it in a div so that it can placed on its own. Secondly, the above solution aligns the bottom of the image with the baseline of the text instead of the bottom of the text. If you want both fixed as well, then use this slightly more complex solution:
div {
float: left;
}
img {
vertical-align: bottom;
}
span {
background: white;
margin-left: -70px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>
The z-index css property would be a good tool to use also in situations like this, just center the text using margin values.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
There is a z-index property, you should increase it by 1 and that should help you. You can make some methods that will increas/decrease it in case you would like to hide it and then let it show up back again.
More about z-index in here and here.
I have a bit of a problem placing a footer. It's supposed to float above 2 side by side columns (http://imgur.com/dfiT1). Now the problem is, it needs to be aligned well so that the border of the 2 columns is aligned with the border of the 2 parts of the footer, AND, it needs to have a minimum margin of say 100px on both columns, so that the footer doesn't float above the content of either of the columns when a page has very little or a lot of content.
I've tried resolving this with a coworker by using an extra wrapper, a clearfix, jquery for height adjustment but we can't seem to find a solution.
so in short: Footer needs to stick to the same position in big and small resolutions, minimal margin-top on both columns
Try do add min-height: 100%; to both columns, and put them in the same div.
The best solution, in my opinion, would be to place the footer outside of the two columns. But I know that sometimes there are constraints that you can't change, so a possible solution would be:
HTML
<div class="wrapper"><div id="column1" class="column">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
</div>
<div class="footer">
Donec facilisis accumsan nisl
</div>
</div><div id="column2" class="column">
<div class="content">
Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
</div>
<div class="footer">
Pellentesque malesuada ligula eget justo
</div>
</div>
</div>
CSS
html, body, .wrapper {
margin:0;
border:0;
outline:0;
}
.column {
display:inline-block;
margin:0;
padding:0;
vertical-align:top;
}
#column1 {
width: 30%;
background-color:teal;
}
#column2{
width: 70%;
background-color:coral;
}
.wrapper{
position: relative;
background-color: black;
padding-bottom: 200px;
}
.footer {
position: absolute;
bottom: 50px;
background-color: silver;
}
#column1 .footer {
right: 70%;
}
#column2 .footer {
left: 30%;
}
live demo
There would be other solutions, but this one seems the easiest to me, as lond as the footer's height is constant.
What I would like to reach is the following design:
Two text blocks with some gaps inbetween aligned around the page midline (see the picture).
I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.
EDIT:
I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.
You could do it like this
<div id="wrapper"> <!-- wrapper will be in the middle of the page -->
<div id="box1"></div> <!-- Your First Box -->
<div id="box2"></div> <!-- Second Box -->
</div>
#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.
Something like this?
HTML:
<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>
CSS:
body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
For the left block, set the left margin to auto. For the right block, set the right. Like this:
#leftBlock {
margin-left: auto;
}
#rightBlock {
margin-right: auto;
}
This puts them back to back in the center of the screen.
To add space in between the blocks, set the other margin to some defined amount:
#leftBlock {
margin-left: auto;
margin-right: 5%;
}
#rightBlock {
margin-right: auto;
margin-left: 5%;
}