I made formulas with div and span, which contain some special symbols, but why can't they be displayed on the same line. I want them to show up like this -->[enter image description here], But they are displayed line by line.[enter image description here]
Please tell me what I am doing wrong!
<p>
<sub>n</sub>C<sub>r</sub> =
<div class="top"><sub>n</sub>P<sub>r</sub></div>
<div> r!</div> =
<div class="top">n!</div>
<div> r!(n-r)!</div>
</p>
<br>
<p>
<span>∫</span>
<div class="top">tan x</div>
<div>sec<sup>4</sup>x</div> dx =
<span>∫</span>
<div class="top">tan xsec x</div>
<div>sec<sup>5</sup>x</div> dx
</p>
Currenly you are not using float:left or not using display:flex css to make element in one line.
Try below code. You will get expected result.
<div style="display: flex;align-items: center;text-align: center;">
<div style="margin-right: 10px">
<sub>n</sub>C<sub>r</sub> =
</div>
<div style="margin-right: 10px">
<div class = "top"><sub>n</sub>P<sub>r</sub></div>
<hr>
<div> r!</div>
</div>
<div style="margin-right: 10px">=</div>
<div>
<div class = "top">n!</div>
<hr>
<div> r!(n-r)!</div>
</div>
</div>
Related
I am currently teaching myself HTML / CSS. After some tutorials I am now building my first own project. I try to structure three images and three texts on my page using CSS.
The structure should look like this:
Text - Image
Image - Text
Text - Image.
I tried to position the images with float: right and float: left respectively. But all three images are positioned on the right again and again.
Can you help me? Thank you very much.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div>
<img src=speise.jpg alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div>
<img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div>
<img src="dj.jpg" alt="DJ legt auf" style="float: right">
</div>
</div>
You've floated your images inside divs, by themselves. That's like trying to move to the right inside your clothing. Floated images should have the same parent as the content you want to flow around them.
So just combine the divs. You may even want your images inside the paragraphs.
Also, be sure to use a good editor (or at least run your code through an HTML validator). Either will make structural and semantic mistakes obvious.
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
<img src="https://via.placeholder.com/100" alt="Speise" style="float: right">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
<img src="https://via.placeholder.com/100" alt="Weinregal" style="float: left">
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
<img src="https://via.placeholder.com/100" alt="DJ legt auf" style="float: right">
</div>
</div>
This is happening because you are styling the image while your image resides inside a new div.
Try this code instead
<div class="Food">
<div>
<p class="Foodtext">
fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
</p>
</div>
<div style="float: right">
<img src=speise.jpg alt="Speise">
</div>
</div>
<h3>Wine</h3>
<div class="Wine">
<p class="Winetext">
fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
</p>
</div>
<div style="float: left">
<img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
<div>
<p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
</div>
<div style="float: right">
<img src="dj.jpg" alt="DJ legt auf">
</div>
</div>
do this and it should work you might need to specify the max-width of the divs as well and apply 100% width to the image in case you apply max-width, rest this should be working!
I want to align my button horizontally with text area,like this image
Currrent code:
<div class="container">
<div class='row'>
<div class="col-sm-1">
<img style="border-radius:50%;width:70px;height:70px;" src="https://images.discordapp.net/avatars/<%=user.id%>/<%=user.avatar%>.png?size=512">
</div>
<div class="col-sm-11">
<textarea style='width:70%;height:100%' placeholder='Leave a review for this shop'></textarea>
</div>
<div style="margin-top:5px;margin-bottom:5px;width:70%;display: flex;justify-content: space-between">
<div>
<span class="review" data-rating="0"></span>
<br>
Please make sure to check our review guidelines before posting.
</div>
<button class="button_div" style="width:auto;display:block;margin-left: auto;margin-right: 0;" >Post Review</button>
</div>
</div>
</div>
The total screen size is 12. you gave the image col-sm-1, and you gave the textfield col-sm-11 that takes up the entire column, you have to reduce col-sm-11 for the textfield to something else so that the preview bottom can fit.
Or
You can add the preview button into the same div as the textfield.
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]
The following is my HTML:
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
My css is the following (along with bootstrap):
.profile-picture
{
max-width: 200px;
max-height: 200px;
}
.center
{
margin: 0 auto;
float: none;
}
This produces the following output:
The way I want it to display is as shown below:
How can I achieve this? Shouldn't they get displayed on the SAME line seeing as they are part of the same row? Each has a length of 6 so why don't they horizontally align?
The problem is you're removing the necessary float on the columns (by setting float:none to .center). Remove that .center class altogether, it's not needed. You are also missing row divs...
Note, I added a row around the the h2 tag as well. For ease-of-use and proper formatting, that tag needs to be wrapped as well. Helps keep the formatting in check. ;)
Also, you shouldn't have two <h3> tags one after another like that. Use <p> instead of the second h3 - or better yet, just use one <h3> tag and use <br /> to break the one h3 into two lines (see below).
<div class=container">
<div class="row">
<h2 class="text-center">Enter your name below</h2>
</div>
<div class="row">
<div class="col-md-6">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6">
<h3>Profile name: N/A <br />
Status: Waiting for user input</h3>
</div>
</div>
</div>
Never apply any styles or classes to elements with grid classes, if you're not really know what you are doing. Use a nested div instead if you need to change something:
<div class=container">
<h2 class="text-center">Enter your name below</h2>
<div class ="row">
<div class="col-md-6">
<div class ="center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
</div>
<div class="col-md-6">
<div class ="center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
</div>
</div>
With Bootstrap, you have to include a div with an class of row, so something like this:
<div class="row">
<div class="col-md-6 center">
<img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
</div>
<div class="col-md-6 center">
<h3>Profile name: N/A</h3>
<h3>Status: Waiting for user input</h3>
</div>
</div>
See Bootstrap's documentation on their grid system.