I am working on an online composition notebook. Students would be able to use this without "losing" their notebook before a check... I need various elements aligned, but can't figure out how...
Link to project: https://drive.google.com/drive/folders/15YrZ5XkcyoyuAsVE29BSA-UEa67GmyBf?usp=sharing
What I wanted to happen is roughly created in Microsoft paint, but it is the basic gist of what the final UI, (Excluding the Title bar, and other stuff), should look like.
I tried using style="float:left" for the textbox inputs, and style="float:right" for the image, but it didn't work.
Thinking about it though, I still have a lot to learn, an example being of how I would be able to overlay the text over the image... I just thought it would be good enough of basic code to get some sort of help...
EDIT: Now that I have researched what this program does, the more I realize that so many more programs do it so efficiently... I have, in the end, decided to abandon the project.
It was the display: inline-block; that wouldn't let you align it. Simply align it like below.
<div style="text-align: left;">Left</div>
<div style="text-align: center; display: inline-block;">Center</div>
<div style="text-align: center;">Center</div>
<div style="text-align: right;">Right</div>
Related
I do hate to keep asking questions. I have been trying to add code to my website. No matter what code I add, none of it works. I have changed the names of the CSS names thinking that would work but it fails.
Currently I am trying to add in some image gallery blocks. I am on w3 schools and it works.
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery
I bring the CSS and code to my website and it looks like this:
https://postimg.cc/image/ifn4dsqrr/
I have tried so many card and block codes and they all either mess up my homepage or ruin the css and I have to revert back to the previous version.
Over the last 2 days I have spent 6 hours trying to get 4 little responsive blocks with image background and text overlay to simply work in between 2 banners.
Here is a link to my test store where I am building out a homepage:
http://newdev-vitavibe-com.3dcartstores.com/
I am determined to learn why. I opened up a request to pay someone to build this homepage for me. I had lots of offers but I really want to learn how myself.
If you are willing to use bootstrap you could put them in containers, I linked below the documentation for this. Bootstrap will make your life a lot easier when it comes to grids, saved my butt plenty of times.
https://getbootstrap.com/docs/4.0/layout/grid/
Inspecting the html of your site, a saw that what you want could be accomplished with the following html structure
<div id="fullWidthBlock" class="fullWidthBlock2">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div class="gall">...</div>
<div id="fullWidthBlock">...</div> <!-- all the div.gall where here -->
Note that the <br/> between the two div#fullWidthBlock where removed.
And dont repeat the id attribute it is meant to be unique in each html document.
Thats the page with the changes:
Take a look at "!important" keyword in CSS. You should use it like that:
#smth { color: red !important; }
This sounds like it'd be incredibly simple but I'm struggling to figure it out for some reason and surprisingly my searches haven't found an exact answer, though I did see what I want in an old tutorial (where the results were a screen shot -.-" ) but it did not actually give me the desired results. What I am trying to do is wrap a heading tag with it's sibling paragraph around an image, though my results have been what looks like a two column layout where the text is on one side and the image on another, and a two row layout where the text ends up below the image, instead of the actual wrap I am aiming for.
My html has been a variety of
<div class="container">
<div class="image">
<img />
</div>
<div class="text">
<h3> Heading </h3>
<p> Lorem ipsum.... </p>
</div>
</div>
I've tried removing the container around the text, removing the container from the image, and removing both containers at the same time, none with the desired results.
My css has been pretty much what ever i could throw together from what I could find online after my initial styles didn't work.
I am floating .container to the left (as well as the image when I've removed the container), have stripped clear: from the heading, etc.
This does work when I put the heading outside of the initial container and just wrap the paragraph, but my goal is to align the top of the image to the top of the h3 with the pargraph following it.
I would not be surprised if this was a duplicate, so I apologize in advance if so, because my mind tells me this has to be done 5,000 times a day for the last decade. To my surprise I've never done this, nor can I find a specific resource to what I need. Thanks in advance for the help.
EDIT
Here is a mockup of what I am trying to do.
You want to float your image left within the container:
.image {
float: left;
margin-top: 4px;
margin-right: 4px;
}
h3 {
color: red;
font-size: 200%;
}
.text {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 80%;
}
<div class="container">
<div class="image">
<img src="https://www.gravatar.com/avatar/960a96a88892064995fd5b11ec160dfa?s=32&d=identicon&r=PG&f=1" height="150px" width="150px" />
</div>
<div class="text">
<h3> Title Text </h3>
<p>How to create a Minimal, Complete, and Verifiable example When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… …Minimal – Use
as little code as possible that still produces the same problem …Complete – Provide all parts needed to reproduce the problem …Verifiable - Test the code you're about to provide to make sure it reproduces the problem Minimal The more code there
is to go through, the less likely people can find your problem. Streamline your example in one of two ways: Restart from scratch. Create a new program, adding in only what is needed to see the problem. This can be faster for vast systems where you
think you already know the source of the problem. Also useful if you can't post the original code publicly for legal or ethical reasons. Divide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear,
start removing code a bit at a time until the problem disappears – then add the last part back. Minimal and readable Minimal does not mean terse - don't sacrifice communication to brevity. Use consistent naming and indentation, and include comments
if needed to explain portions of the code. Most code editors have a shortcut for formatting code - find it, and use it! Also, don't use tabs - they may look good in your editor, but they'll just make a mess on Stack Overflow. Complete Make sure
all information necessary to reproduce the problem is included: Some people might be prepared to load the parts up, and actually try them to test the answer they're about to post. The problem might not be in the part you suspect it is, but another
part entirely. If the problem requires some server-side code as well as an XML-based configuration file, include them both. If a web page problem requires HTML, some JavaScript and a stylesheet, include all three. Verifiable To help you solve your
problem, others will need to verify that it exists: Describe the problem. "It doesn't work" is not a problem statement. Tell us what the expected behavior should be. Tell us what the exact wording of the error message is, and which line of code
is producing it. Put a brief summary of the problem in the title of your question. Eliminate any issues that aren't relevant to the problem. If your question isn’t about a compiler error, ensure that there are no compile-time errors. Use a program
such as JSLint to validate interpreted languages. Validate any HTML or XML. Ensure that the example actually reproduces the problem! If you inadvertently fixed the problem while composing the example but didn't test it again, you'd want to know
that before asking someone else to help. It might help to shut the system down and restart it, or transport the example to a fresh machine to confirm it really does provide an example of the problem. For more information on how to debug your program
so you can create a minimal example, Eric Lippert has a fantastic blog post on the subject: How to debug small programs.</p>
</div>
</div>
The margins may need to be adjusted.
On my site I am happy with the home page except for a paragraph that is too wide to read easily. Is there any way I can restrict the width of this (say 500) and still have it display centrally aligned? It's on wordpress and I'm not great at programing so you may need to explain it very simply for me in practical terms. Site is www.explainedwell.com many thanks, Steven
PS if you could also show me how to get the QR code and Impact graphics central that would be great (I put them in a table). Thanks
Ideally you would want to restructure your page somewhat in order to be able to style it more easily, or at least give these specific elements that you mention certain classes so that you can target them in an external css file.
If you are just looking for a quick fix though, you can apply the following inline css styles (to do that you need to go into the page you are editing in WordPress and switch to the text mode there):
<p style="padding-left: 0px; text-align: justify; margin: 0 auto; width: 500px;">...</p>
<table class=" aligncenter" border="0" align="center" style="margin: 0 auto;">...</table>
I would advise against this though and look for a better way of targeting these elements (as described above).
find the image attachment,
image will showing the my article markup,
how to build the html wire frame, same like image attachment,
want to show image in the top left corner and article should start in the mid of the image,
and length of the article should continue and show the below of the article, same like what i
attached, which way is the best and suitable for my requirement, DIV/Table,
i guess with table not able to complete, DIV is the suitable one, but really i dont have where to start this,
is there any sample markup, please refer that link,
Just add style="float: left;" or align="left" to your image. So your markup should look like this:
<img src="..." style="float: left;" />
<p>josh</p>
<p>It is a long es......</p>
Using style="float: left;" is considered better practice now because it uses CSS rather than DOM attributes. Make sure your image is above your text.
You need to understand some basic html and css first. Its not a very good practice to rely on tables for everything. Tables must be used only when they really make sense. And it advised to use divs in other scenarios. Take a look at this, this might be the kind of output you are expecting.
I'm building a website for someone and they wanted the text and bulk of the information to be centered on the page. Problem is I can get everything contained in a tag and then assign the class, but I can't get the whole thing to center. It always hangs to the left even if I apply centering to the div class.
I guess you could say that it is stuck on the left side of the page when I want everything to be centered. I would just make everything format larger but they want some space left in the background for the color and maybe some imagery later on. They haven't made up their minds.
If you want to take a look here is the link where I'm building or testing stuff. I know the header and such needs to be re proportioned to fit with everything, but just as a frame of reference. Don't worry about the header, just know that I want the white text information area with the purple border to stay the same size, but just move to the center and if some one could tell me how to do that I would appreciate it greatly.
just add margin: 0 auto; to that class CSS, for this to work, that object needs to have a width
<div align="center" class="stylex" style="margin:0 auto;width:606px">
<span class="heading"><strong>About The Book</strong></span><br>
<span class="stylez">Mable's Magic Spell</span> Features 28<br>
of the most commonly misspelled words by children.<br>
<br>
Through rhyming, a visual clue, or a word association,<br>
<span class="stylez">Mable</span> and her dog <span class="stylez">Mixie</span> take a close look at these words.<br><img src="http://new-wav.com/mable/MableBookCover_small.jpg" class="img" width="457" height="550" align="middle"><br>
<span class="stylez">Mable's Magic Spell</span> is a book children should read many times.<br> Through repetition, children can succeed at spelling these everyday words.<p></p>
</div>
For your div set the css margin: auto;