Hi there I am not sure how to go about a particular problem so here it is.
Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.
So far I have tried this:
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
I use a separate stylesheet
and have tried such things as display inline with no luck.
I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.
Thank you.
You need another set of containers indie your container:
<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )
You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)
#container {
display: flex;
}
For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.
And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies
If I understand what you're wanting to do. You could give the tag a class/style and do float:right in the CSS. Which would look like this:
<p style="float:right;"><img src="image.jpg" /></p>
Do yo want text flow around image? If yes then it is something like this:
http://jsfiddle.net/2FMPf/1/
If you want separate column for image, then it is something like this:
http://jsfiddle.net/2FMPf/2/
Related
I am trying to style a page header within our application using flex display.
Where I'm having trouble is how to set my class device-name-test to float right on my dashboard header.
<div class="diagnosis-header" [class.disabled]="headerIsDisabled">
<div class="either-toggle diagnosis-title">My Dashboard</div>
<div> more elements here in between... </div>
<!-- Here is my final dev which should be floated all the way right -->
<div class="device-name-test">Device Name here !</div>
</div>
Looking at my online project here, you'll that my text Device Name Here! text is the final div - which should float all the way right (flex-end?)
https://angular-9-dashboard-flex-example.stackblitz.io/
I am trying to get a strong grasp of using flex display but some details are not clear.
thanks in advance.
Bob
I got it to work by removing flex:1 and adding margin-left:auto to the last div. Like this:
.device-name-test {
/* flex: 1; */
margin-left: auto;
}
It's exlained here: https://medium.com/#iamryanyu/how-to-align-last-flex-item-to-right-73512e4e5912.
I would like to re-order some div using only CSS if possible.
Here is the HTML sample I want to re-order:
<div class="block1">
Block1
</div>
<div class="block2">
<div class="subblock1">S-Block1</div>
<div class="subblock2">S-Block2</div>
<div class="subblock3">S-Block3</div>
</div>
And this is the graphical result I want:
S-Block1
S-Block2
Block1
S-Block3
I already tried playing with display: flex; and order: X but with no success. The main problem lays in the fact that I want to split the block2 before and after the block1. The flex display only allow me to change order of block of the same "level".
I would really like to have a solution that doesn't not use JavaScript to re-write the DOM (by taking subblock3 and putting it elsewhere to please my CSS) if possible.
It appears this is not possible and javascript is not an option for my problem.
Here is the sample code I used (jQuery needed).
$(".subblock2").prependTo(".form-wrapper");
$(".subblock1").prependTo(".form-wrapper");
I am using the bootstrap jumbotron but the header wont wrap in next line when long text is used. any way to fix it?
This is what I am using in my html
<div class="jumbotron">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<p class="lead">Help visualize leadership networks in the Upper Midwest</p>
</div>
Try the following on the text that you want to wrap on to the next line.
h1 {
word-wrap:break-word;
}
This will break up the long word at any character though. See the links below for more information.
mdn doc for word-break
css-tricks
So I've done a lot of research before asking this question. I already know how to use the if/else and conditional tags to make certain code applicable to only certain pages, BUT, I noticed that there isn't a single guide or question-answer out there addressing my question on only styling the first/most recent post in my blogger.
The closest I got to finding the solution (other than codes that I didn't have the skill to implement), was this one: http://helplogger.blogspot.ro/2014/01/create-magazine-style-layout-for-blogger-posts.html
Sample site from that tutorial: http://helploggertestblog.blogspot.com/
The problem with the above script is that was made to be too automated, and I don't need a post-summary or thumbnail for my other posts-- I'm only trying to change the look for the first post. I love that the first post's width was increased, bordered, color-changed, and what not.
Does anyone have any ideas on how I might isolate what I'm looking for, point me towards the right direction, or even hand me a general container so that I can get on with my life?
Without seeing any of your code it's kinda guessing, but I'll give it a try anyway.
I'm guessing that you have the posts in a div or other parent element. Something like this:
<div class="container">
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
<div>
<h3>Title</h3>
<p>Content of the post ... </p>
</div>
</div>
To style only the first div inside the container, you can use:
.container > div:nth-first-child {
/* your specific style here */
}
With your code, it would be easier to help...
EDIT
Use:
.blog-posts > .post-outer:first-child {
background: green;
}
There is a conditional tag available for 1st post
<b:if cond='data:post.isFirstPost'>
Your custom css only for the 1st post here
</b:if>
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this