I have some text and then I have some larger text I want to be able wrap the text around the larger text. Not sure what attribute I would use.
Heres an eample of what i want but put the image into a block of text:
Heres my current css:
.message h1{
font-family: 'Audiowide', cursive;
font-size: 76px;
position: absolute;
left: 106px;
top: 120px;
color: white;
float: left;
}
.text p{
opacity: .7;
position: absolute;
font-family: 'Abril Fatface', cursive;
font-size: 36px;
left: 108px;
width: 1080px;
height: 421px;
top: 117px;
color: white;
}
and my html code:
<div class="message">
<h1 align="left">Hello there is<br>Some text here</br></h1></div>
<div class="text">
<p>and Some more text here</p>
</div>
so let me summarize what im asking. I have some large text and i want to make the smaller text wrap around the larger text. I've looked around and found you can wrap around pictures but i'm not 100% sure about other text.
You need to use float: left or float: right.
http://jsfiddle.net/74Z9d/
When I run your code I get this:
And I believe you want this?
Then just do this to your HTML:
<body>
<div class="message">
<div class="text">
<p>Some more text here
<h1 align="left">Hello there is<br>Some text here</br></h1></div>
and Some more text here</p>
</div>
</body>
</html>
Ah, I see what you're asking now. I think the others answered your question for you :)
it is really hard to understand what you want based on your explanation, anyhow I just "refactor" you code, probably this is what you want. jsfiddle
.message {
background: blue;
width: 100%;
padding: 10px;
}
img {
float: right;
padding: 10px;
/*optional*/
max-width: 40%;
}
<div class="message">
<h1>Hello there is Some text here</h1>
<img src="http://i.stack.imgur.com/kJbY7.jpg">
<p>and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here </p>
</div>
Short anwswer:
I'd just put everything in one div, and put <br /> tags whereever are appropiate.
Long answer:
So first thing, I'd replace the <h1> element with a <span class='larger'><span>
Let's say you have the following:
<div class='message'>
<span class='larger'>Here is some text</span> followed by smaller text
</div>
If you put styles on the <div class='message'> class to have smaller text (since it's a container.. or parent of the span class) it has styles of small text by default. Until it hits the <span class='larger'> child element of <div class='message'> then the text becomes larger and overrides any of the styles.
To have it conform with messages, I'd sprinkly <br /> wherever appropiate.
Here's a jsfiddle you can demo and view here:
http://jsfiddle.net/m4bHJ/
Related
I am trying to align a text to the right but when the text is to long, it should make a line break and align it to the left of the text. It's hard for me to explain, that's why I have an image of what I'm trying to do:
As you can see, the text is aligned to the right of this small div. But when a line break occurs, it is logically also aligned to the right.
I tried to wrap it in a div, where the parent is aligned to the right and the child with the text to the left. The thing is I get a result like this:
which is still wrong, since the text isn't aligned to the right then, when it breaks. Is there a way to do that?
And I don't wanna have a max width or something for the text, since if there is enough space, it should take the whole width that is available for a line.
body {
background: #cccccc;
}
.parentDiv {
width: 100px;
height: 100px;
background-color: white;
display: flex;
flex-direction: column;
}
.alignRight {
margin-left: auto;
}
.alignLeft {
text-align: left;
padding-bottom: 5px;
}
<div class="parentDiv">
<div class="alignRight">
<div class="alignLeft">
bla
</div>
</div>
<div class="alignRight">
<div class="alignLeft">
testing cool text
</div>
</div>
</div>
First Answer:
p.para{
text-indent: 30px;
padding-left:15px;
}
<p class="para">
Hello this is my text. This story is awesome. hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
</p>
Edit:
Or break your text like this..where you can play with first line and rest para anyhow you like.
div.para>p:first-child{
text-align:right;
margin-bottom:0px;
}
div.para>p:last-child{
margin-top:0px;
text-align:left;
padding-left:10px;
}
<div class="para">
<p>This is first line</p>
<p>
Rest of Lines... this is my text. This story is awesome. hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This
story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
</p>
</div>
Even if this is not your intention then look at
HTML/CSS: how to put text both right and left aligned in a paragraph
You may need padding.
body {
background: #cccccc;
}
.parentDiv {
width: 200px;
height: 100px;
background-color: white;
display: flex;
flex-direction: column;
}
.alignRight {
padding-right:50px;
padding-left:50px;
margin-left: auto;
}
.alignLeft {
text-align: left;
padding-bottom: 5px;
}
<div class="parentDiv">
<div class="alignRight">
<div class="alignLeft">
bla
</div>
</div>
<div class="alignRight">
<div class="alignLeft">
testing cool text
</div>
</div>
</div>
I hope that helps! This is a very, very, very late answer.
Tip: Use the padding to help you get what you want.
I'm a bit of an amateur when it comes to CSS/HTML web stuff but I feel I am learning a lot and am grateful of all the help offered in all the stack overflow questions. I have run into a problem and been searching for a solution for hours already, apologies if this is a duplicate but I honestly couldn't find one.
Basically, I have created a simpler version of what I am working on that demonstrates my issue:
http://jsfiddle.net/qoqq39ss/
.full {
width: 100%;
height: 100px;
background-color: yellow;
}
.mainWide {
width: 80%;
margin: 0px auto;
background-color: grey;
}
#imageBox {
display: inline-block;
width: 35%;
background-color: orange;
}
#image {
width: 80%;
height: 190px;
vertical-align: middle;
}
#textContainer {
display: inline-block;
vertical-align: middle;
width: 65%;
background-color: blue;
}
<div class="full">
</div>
<div class="mainWide">
<div id="imageBox">
<div id="image"></div>
</div><!--
--><div id="textContainer">
<h2>heading</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div><!--
--></div>
<div class="full">
</div>
Hopefully that works, first time making my own. I made them different colours to try and highlight the different divs.
The thing is, where the #image is, there would be an image, not a div. The sibling div with text in, as it varies in height due to the width of the window it can be either taller or shorter than the image. When it is taller, I need the image to be vertically centred in relation to the text, when the text is smaller I'd need the text to be vertically centred in relation to the image.
Through my searches I have seen some solutions with using a helper element of height 100% to centre elements in relation to it, though I find when I try that, it makes the helper element 100% of the height of the window as the parent element is of variable height, or maybe I am doing something wrong?
I have also seen there is an option of using tables, though I am not sure if/how that would work as I am planning of using some #media to change the image and text from being inline-blocks to blocks on top of each other for smaller screens if you get what I mean.
Apologies for the long question and if my explanation is a little off.
Many thanks in advance for any help
Since both #imageBox and #textContainer are inline-block elements, you can use
#imageBox, #textContainer {
vertical-align: middle;
}
Currently you are using it on #image, but it has no effect because #image is a block element. You should use it on #imageBox instead.
.full {
width: 100%;
height: 100px;
background-color: yellow;
}
.mainWide {
width: 80%;
margin: 0px auto;
background-color: grey;
}
#imageBox {
display: inline-block;
width: 35%;
background-color: orange;
vertical-align: middle;
}
#image {
width: 80%;
height: 100px;
}
#textContainer {
display: inline-block;
vertical-align: middle;
width: 65%;
background-color: blue;
}
<div class="full">
</div>
<div class="mainWide">
<div id="imageBox">
<div id="image"></div>
</div><!--
--><div id="textContainer">
<h2>heading</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div><!--
--></div>
<div class="full">
</div>
Here is what I try to achieve:
With the following HTML:
<div id="my1">
<p> some text </p>
<div id="wrap">Awesome content</div>
</div>
Having this:
text text text text text text text text text text text text text text
text text text text text div id="wrap" text text text text text
text text text text text text text text text text text text text text
Floating divs didn't help me reaching this result so far... (considering height and width for both my1 and wrap are known)?
A fiddle where the text starts from the right side of the wrapped div, when I wish it starts from the left of "my1" div, breaks around "wrap" div.
http://jsfiddle.net/matmat/dxV4X/
Looks like you want something like float:center ? Well, the problem is that this property doesn't exist.
Here are 2 alternatives:
1) Fake it with pseudo elements - FIDDLE - See this css-tricks article
Set up markup like so:
<div>
<div id="wrap">Awesome content</div>
<div id="l">
<p>left text here</p>
</div>
<div id="r">
<p>right text here</p>
</div>
</div>
With CSS
#wrap {
width:250px;
height: 250px;
background: yellow;
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#l {
float: left;
}
#r {
float: right;
}
#l, #r {
width: 49%;
}
#l:before, #r:before {
content:"";
width: 125px;
height: 250px;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
Alternative #2 (IE 10+ only): CSS Exclusions - FIDDLE
Markup
<div class="container">
<div class="exclusion">Awesome content which floats in the center</div>
<div class="dummy_text">all the text here</div>
</div>
CSS
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
background-color: lime;
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
left:0;right:0;
top:0;bottom:0;
width: 150px;
height: 100px;
background: yellow;
margin: auto;
}
For more info about CSS exclusion browser support and further resources see my answer here.
<div id="my1">
<p>some text some text
<span id="wrap">wrapped text</span>
some text some text</p>
</div>
Should work if I am reading the question correctly? A <div> is a block level element which is breaking, a <span> is inline like what you want.
Fiddle here: http://jsfiddle.net/YbuuH/2/
Use css as below:
wrap { word-wrap:break-word; }
This css should work to wrap the text in a line and to continue on next.
I have a repeatable wrapper element with children elements: content element, with left and right elements, all divs.
I want to add some text (ie, "Retired"), rotated by few degrees, like a watermark in the background of content. This can't be a background image, because this text shall be localized (and for maintenance purpose, easier to change a text instead of an image).
Next image shows a disposition of text "Retired" (without showing left and right elements):
Here's the basic HTML layout of this element, it might be useful:
<div class="wrapper">
<div class="leftcolumn">Left column</div>
<div class="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="rightcolumn">Right column</div>
</div>
And CSS:
.wrapper {
margin: 0 auto;
width: 450px;
display:block;
background-color:#222222;
border-radius: 5px;
}
.content {
float: left;
width: 318px;
padding-left: 5px;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
Here is a working code:
Html
<div id="wrapper">
<div id="leftcolumn">Left column</div>
<div id="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="rightcolumn">Right column</div>
</div>
<div id="textwatermark">
<p>Retired</p>
</div>
CSS
#textwatermark {
color: #d0d0d0;
font-size: 50pt;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:170px;
top:-100px;
}
Check the demo here:http://jsfiddle.net/x6FwG/
You could use transform:rotate(). Check this out http://www.w3schools.com/cssref/css3_pr_transform.asp . You'll have to put an Element inside an Element to get the effect you want.
Note: This won't work in older Browsers, so you may want to just use something like:
background-image:url('location.png');
I have a float left image with a title and a small text on it's right. My question is if there is a better way of writing it. I made a jsFiddle for this at http://jsfiddle.net/GjKTG/1/
this is the code without css
<div style="float: left;">
<div id="image">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
</div>
<p class="title">Here goes a title</p>
<div id="text">here goes two or more lines for content
</div>
</div>
Thank you
You'll probably get some varying answers. What you have isn't terrible, but I made an attempt at cleaning it up some: http://jsfiddle.net/GjKTG/18/. Some of this boils down to personal preference.
HTML
<div class="imageholder">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h3>Here goes a title</h3>
<p>here goes two or more lines for content</p>
</div>
CSS
.imageholder {float:left;}
.imageholder img { float: left; width: 50px; }
.imageholder h3 {color:#2D101F;font-family: georgia;}
.imageholder p { font-size: 11px; line-height: 13px;}
Changes:
Made the title into an h3 to give it some context. If something is a title, treat it like so.
Gave it one class and removed extra classes. Handling the rest with inheritance
Took out the inline styling
Got rid of the image wrapper div and handled that with CSS.
You'd possibly have some issues with the floats if you have multiples of these after another, but that's hard to say.
how about this:
html:
<div class="box">
<h1 class="title">Here goes a title</h1>
<div class="text">here goes two or more lines for content
</div>
</div>
css:
.title {
margin: 0;
color: #2D101F;
font-family: Georgia;
padding-bottom: 20px;
}
.text {
font-size: 11px;
line-height: 13px;
margin-top: -17px;
}
.box {
background: url("http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png") no-repeat top left;
padding-left: 40px; /* the width of the image */
min-height: 80px; /* the height of the image */
}
http://jsfiddle.net/ZYY9q/
and also remember, use ids as css selector is not a good idea actually.
Something like this perhaps? http://jsfiddle.net/SHFEb/
<div class="side-content">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" />
<h2>Here goes a title</h2>
<p>here goes two or more lines for content</p>
</div>
.side-content{float:left}
.side-content img{float:left}
.side-content h2{color:#2D101F;font-family:georgia}
.side-content p{padding-bottom:20px;font-size:11px;line-height:13px}
Something more semantic:
<article>
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" alt="">
<h1>Here goes a title</h1>
<p>here goes two or more lines for content</p>
</article>
Which would be appropriate if you're using HTML5, since you didn't provide more context I assumed <article> would be the tag to use, but that depends on what your html-code represents in context.
updated jsFiddle: http://jsfiddle.net/nils_r/GjKTG/8/ … but you propably have to adjust it to suite more your needs.
If you wanted your markup to be a bit more semantic you could drop some of the divs as they're not really needed and use a header tag instead of a p tag for the title.
<div style="float: left;">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h2>Here goes a title</h2>
<p>here goes two or more lines for content</p>
</div>
You can then apply styles directly these elements:
div img {float:left;width:50px;}
div h2 {
color:#2D101F;
font-family: georgia;
}
div p {
font-size: 11px;
line-height: 13px;
}