I have some text in html. About 2 paragraphs.
I want this to appear in the middle, I can do this using in html but I want it to be "in" on the sides, so it only fills the middle of the screen, away from the edges on the sides.
How to do this?
EDIT:
DESCRIPTION OF PAGE:
EMPTY SPACE |<------text here------>| EMPTY SPACE
There are various different ways of centering text in a page. For now I will assume you mean horizontal centering.
You haven't provided any code for anyone to work with, so I will assume the code goes as follows:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus sapien vitae ipsum semper sagittis porta odio tempor. Pellentesque porta mattis porta. Cras in condimentum tellus. Nam porta sapien vel felis aliquam id aliquam neque condimentum.</p>
<p>Mauris in tellus magna. Nam cursus dapibus diam, ut cursus risus placerat sed. Praesent volutpat elementum faucibus. Donec mi arcu, faucibus eget porta a, feugiat eu dui. Sed dapibus feugiat quam, vel venenatis neque venenatis ut. Ut condimentum tellus eget ipsum aliquam eu faucibus erat egestas. Pellentesque ut metus a elit suscipit vulputate id id magna. Praesent eu sem urna, eu fermentum enim.</p>
</body>
</html>
To center the paragraph text in the middle of the page, you need to add the following CSS (in a style element or an external .css file): first example
p
{
text-align: center;
}
This is probably not what you're after because it wont push the text away from the edges. If you would like the text to have a fluid width with some padding, use this CSS instead: second example
p
{
padding: 0 100px;
}
You can of course center the text using both methods to make the text centered and stay away from the edges.
If you would like a static width that stays centered, use this CSS instead of the padding: third example
p
{
margin: 0 auto;
width: 300px;
}
Think you've looking for margin: 0 auto; which will center your element.
So to achieve
EMPTY SPACE |<------text
here------>| EMPTY SPACE
You could do
<div>
<div style="margin: 0 auto; width:300px;">text here</div>
</div>
easiest way is to use a table
<table><tr>
<td style="width:15%"></td>
<td>
<------text here------>
</td>
<td style="width:15%"></td>
</tr></table>
Related
I have been reading many articles and posts and its been widely told to use display as inline-block instead of float
So i thought to give it a try.
But i am unable to replicate the exact output of float while using inline-block
I hope someone can help me regarding it
On secondary note , if someone can point few Scenarios ( if it exists ) where using float is still beneficial to be used today instead of inline block or flexbox , that would be quite helpful to remember for future reference
<h1>float Vs inline-block</h1>
<p>In this example, the image will float to the right in the text, and the text in the paragraph will wrap around the image.</p>
<p><img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
img {
float: left;
width: 170px;
height: 170px;
}
/*img {
display: inline-block;
width: 170px;
height: 170px;
}*/ please fix this part to make it work exactly
like float
Edit - Now it seems to me that display: inline-block can only align divs in single row but cant act exactly like float. Ie it can't wrap text around images like float can...
So many countless comparisons on internet between inline block and float made to believe we can exactly replicate float effect using inline-block ( as in like inline block is total replacement for float )
First thing first, your HTML isn't properly formated. For a better semantic, don't insert an image inside a p tag, as the last one should only contain text.
If you want and image and a caption use img and figcaption.
Also, if you want text to be side to side with the image, you should be using flex, that will easly put both elements side by side.
Here is a quick demo:
figure {
display: flex;
}
img {
width: 170px;
height: 170px;
}
<figure>
<img src="https://picsum.photos/id/1/200/300" alt="Pineapple">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</figcaption>
</figure>
Since I know there is no alternate for what you wanted with inline-block display property. This is not the exact thing you looking forward to but you can achieve such a thing with this approach provided in here.
As you know there are advantages of using inline-block over float and you can check these tho same question to more information about it:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Advantages of using display:inline-block vs float:left in CSS
But to implementing image and text side by side you can use flexbox as well and you can check this answer or answer that #PedroFigueiredo provided for more information.
The float and inline-block working different :
on float : element is removed from the normal flow of the page and places on the left or right side of its container but still remaining a part of the flow, this allow replicating
on inline-block : element dose not removed from the normal flow so theoretical can't replicating other elements around like float
think on inline-block as inline element added to it the control of [width - height - margin ..ect]
e.g if you have
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
the easiest way is to display list items side by side is by using inline-block rather than floating them
so in your example:
if you give inline-block to the image
image and the text are in the same flow = [paragraph]
if you floated the image
the image will leave the paragraph flow to the container flow
to give paragraph the ability to replicate around
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'd like to create a grid of squares in the background of my webpage which already has a lot of different elements carrying content. My trouble now is that the div squares I'm creating are intefereing with the layout of everything else. I've tried setting z-index of the parent div of my square divs to like -3, but that doesn't seem to really help. What's are some good css rules that can help me sort this out? Thanks
Create the tiles in Photoshop and then save it out as a *.PNG or *.GIF. These have the smallest file sizes.
Use this within your container or wrapper div:
.contentContainer {
background:url(images/image_background.png) top left no-repeat;
}
background:url set's the URL of the image.
top left sets the position. You can use just "top", "center", "bottom", etc. or "top left", "top bottom" to align it how you need it.
no-repeat makes it so the BG image doesn't "tile" over and over again as you might have experienced with say, your windows wallpaper. It looks tacky.
As already mentioned, it may be best to use an image for this situation. Regardless, here is a jsfiddle showing how to use absolute positioning on the wrapper for the background squares to take it out of the flow of the document: http://jsfiddle.net/eL1w7kdz/
HTML:
<div id="container">
<div id="background-squares">
<div>Square 1</div><div>Square 2</div><div>Square 3</div><div>Square 4</div><div>Square 5</div><div>Square 6</div><div>Square 7</div><div>Square 8</div><div>Square 9</div><div>Square 10</div><div>Square 11</div><div>Square 12</div>
</div>
<div id="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum neque a venenatis dictum. Donec fringilla euismod sodales.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo ipsum, aliquam sit amet ligula non, fringilla commodo diam. Vivamus tortor mi, blandit vel mi at, feugiat rhoncus libero. Donec volutpat, tellus nec sagittis tempor, leo dui sollicitudin turpis, et fringilla nisl metus ac libero. In augue mauris, malesuada id ipsum vel, hendrerit vulputate justo.</p><p>Morbi aliquam est non fringilla cursus. Sed at felis et magna vehicula egestas. Integer finibus lectus lorem, a commodo nulla rutrum eu. Sed eleifend condimentum tristique. Curabitur eu nisl mi. Etiam imperdiet nisl metus, at iaculis ex consequat eget. In non eros dolor.</p>
</div>
</div>
CSS:
#background-squares {
position: absolute;
z-index: -1;
}
#background-squares div {
background-color: lightblue;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
#main-content {
padding: 10px;
}
If i do:
<img src="" style="float:left"> SOME TEXT BLA BLA BLA BLA
It doesn't work because text goes down to the image when the image height stops. I mean:
it would do this:
http://img8.imageshack.us/img8/9379/senzatitolo1yt.jpg
While what i want to get is:
http://img28.imageshack.us/img28/606/senzatitolo2rd.jpg
I could use old good table (<td>img</td><td>text</td>) but in 2011 that doesnt' seem the way to go :)
Any easy cross-browser trick to do that?
Edit: I can't know the image-width
Thanks!
Use two div tags, float them both to left. Give a width of 30% to one of them and 70% to the other. Put the image in the first one, text in the second one.
Given the simplistic html:
<img src="path/to/img.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui odio, luctus ut viverra vitae, dignissim a mauris. Vestibulum vel massa at sapien tincidunt venenatis id sed purus. Ut quam libero, mollis a ullamcorper sed, gravida id ligula. Sed nec augue enim. Phasellus accumsan aliquet erat interdum ullamcorper. Cras tellus libero, tincidunt non placerat interdum, venenatis id arcu. Nulla facilisi. Maecenas malesuada vestibulum venenatis. Nam vel tellus arcu. Sed non dui urna. Proin fermentum aliquet lectus non fermentum. Donec aliquet purus et tortor lobortis gravida. Duis vehicula ligula nec enim consequat ut tempor diam molestie. Aenean egestas eros sem. Phasellus ullamcorper pretium nunc molestie luctus. Mauris semper ultricies nulla, at tempus purus eleifend vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac est nunc.</p>
The following CSS works:
p {
margin-left: 100px; /* width of image plus some padding for white-space */
}
img {
float: left;
width: 90px;
height: 90px;
}
JS Fiddle demo.
Surprisingly enough the following works, albeit only tested on Chromium 8/Ubuntu 10.10:
img {
width: 100px;
height: 100px;
background-color: #f90;
float: left;
margin: 0 10px 100% 0;
}
JS Fiddle demo (ignore the colours, they were just so's I could see where things were sitting).
Second (post-edit) JS Fiddle demo, featuring an img with non-specified dimensions.
There are multiple ways to realize that.
1) two divs. assign to both a width. float the image-div to the left, the text-div to the right.
2) use margins!
give it a shot and give me feedback.
I want to display a html page, with a classic design. Header, footer, content and bar to the right.
For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.
I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):
Content can be rendered while waiting for the "right" bar
On a mobile phone, the Div tags can be shown under each other, instead of side by side.
My test/debug html looks like this:
<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>
<p> </p>
<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</td><td valign="top" style="background-color:orange; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>
Output of this code is here:
(source: vantslot.be)
(Text does not matter, only the layout, so I have shrunken it a bit).
The top layout is using the divs : wrong
Bottom layout is using the table : good
My question / problem
How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?
What I actually want is the right pane appear on the right of the content, but when the browser is too small (< 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.
In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.
Edit
Thx for all the answers, this really helps me forward.
I see what is "wrong" here. I have put the right pane after the content pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content).
This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.
This will allow your right, fixed-width column to fit in the margin of your other column, and therefore be on the same line:
#right
{
float:right;
width:18em;
}
#body
{
margin-right: 20em; //IE calculates padding into the width, so you need a buffer unless you set body's padding to 0
}
Now the body's div, which defaults to 100% screen width, will be fluid, and your right column will be fixed width.
Add a clear:both to your right column. To manage the height of having a float at the bottom of your main content area use a clearfix. Also, since you want the right column to float underneath the left column, there's no need to float the left column?
Try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Пример</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
}
#header{
height:150px;
min-width:600px;
background:#FFEF97
}
#menu{
width:250px;
float:right;
background:#FFC597
}
#info{
min-width:350px;
background: red;
}
#footer{
height:20px;
min-width:600px;
background:#B9CC8A;
clear:both
}
#body{
width: expression(((document.documentElement.clientWidth
|| document.body.clientWidth) < 600)?
"600px" : "100%")
}
</style>
</head>
<body>
<div id="body">
<div id="header">HEADER</div>
<div id="menu">MENU (side bar)</div>
<div id="info">INFO (central pane)</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Not tested (yet), but I think I have found the solution to the problem.
http://www.alistapart.com/articles/holygrail/
This solutions allows to mix fixed and liquid layout (terms I learned from asking this question).
Try the following CSS snippet:
display: table;