I'm reading a book (Agile Web Development With Rails) and I'm encountering a problem on page 96.
I've stuck to the code in the book exactly, but I get this.
I know another way to approach this is to use a table, but I want to know if there is another solution first.
I would organize these comments using divs. The first div to house the image and comment. The second div to house the image. And the third to house the comment.
The html:
<div class="comment-container">
<div class="comment-img">
<!whatever code you use to pull images from the database>
</div><!ENDcomment-img>
<div class="comment-field">
<!whatever code you use to pull comment content from the database>
</div><!ENDcomment-field>
</div><!ENDcomment-container>
The CSS:
.comment-container{
padding: 5px;
border-bottom: 1px dashed #009fe4;
margin: 2px 0 5px 0;
}
.comment-img{
float: left;
width: 80px;
height: auto;
}
.comment-field{
width: 700px;
height: auto;
padding: 0 0 0 10px;
}
I hope this helps out.
#subm0ral
It's the position: absolute; in the rule img of your CSS that make the image above the text. See help
Related
I was inspecting facebook's comment box and it was surprising to me that there is no input tag, just a lot of nested div.
Anyone with the knowledge on how it's being implemented and why is that a better approach than a simple input tag?
here the screen screenshot of me inspecting the comment box
thank you in advance
Hopefully its contenteditable, Obviously with some script, validations, programming ...
div {
width: 100%;
max-width: 250px;
padding: 5px 10px;
border: 1px solid #666;
outline: 0;
border-radius: 10px;
}
<div contenteditable="true">Am I a input ???</div>
#box1 {
background-color: black;
float: top;
width: 300px;
height: 100px;
}
#box2 {
background-color: red;
float: top;
width: 300px;
height: 100px;
}
#box3 {
background-color: #807880;
float: top;
width: 300px;
height: 100px;
}
#box4 {
background-color: silver;
width: 300px;
height: 100px;
}
#box5 {
background-color: purple;
float: top;
width: 300px;
height: 100px;
}
#box6 {
background-color: #28807d;
float: top;
width: 300px;
height: 100px;
}
#box7 {
background-color: #198003;
float: top;
width: 300px;
height: 100px;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
I need to create this piece of art in HTML and I'm only allowed to use HTML and CSS.
How can I recreate this picture in HTML?
This is what I've tried so far:
[1] https://pastebin.com/9h3nyrEj
Outcome:
As you noted this is like the 3rd time touching HTML, I will explain you what to do step by step. But it will require some time to achieve your goal. I could simply paste the results, but this way you will not learn how to use it. You learn by DOING! Of course, when you are stuck; whole stackoverflow wants to help you!
Just to be sure; https://getbootstrap.com/docs/4.3/about/license/ Bootstrap is 'Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes'.
Step 1:
Read and study the Introduction of Bootstrap. You will probably forget atleast 90% from everything you read, but that is okay. It's just to give you a head-up on the use of Bootstrap. While using bootstrap you will learn how to implement every feature and more important how to use it.:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Step 2:
Create a file called index.html in your root.
Step 3:
Within index.html make sure you include bootstrap, just like step 1 which is the very first you read. 'Quick start' -> 'CSS' -> 'JS'. Or just copy & paste the 'Starter template'.
Step 4:
Read this link: https://getbootstrap.com/docs/4.3/layout/grid/ and from here on goodluck! :-). It is quite easy once you've done this part. Look into the different examples Bootstrap provide and design your own layout.
Really, this is all you need to get what you need.
Honestly, I am curious about your results. Do you mind to tag me or give a comment once you're done? :-)
Bootstrap is one of the most used frameworks now a days. Many website's use it, thousands (maybe more?) templates which can be downloaded or purchased are based on bootstrap. For example: https://themes.getbootstrap.com/. Personally I love using Bootstrap for my websites.
If you have any questions, feel free to ask!
Best regards
I switched over last year from cargocollective to squarespace. I'm happy with a lot of the things sqaurespace allows for. But not having access to the actual code makes customization so much more confusing for me as a novice. I tired inserting a bunch of different things into the custom CSS with no luck.
I've been playing around in the inspector element and was able stretch the gallery across the screen however I've had no luck actually accomplishing it through squarespace!
Any help in achieving this would be greatly appreciated! http://www.vernacularstudio.com/work/
I ended up fixing it by inserting this into the custom CSS in the Design section
The difficult part was just isolating out what the actual div element I wanted changed was I suppose.
#block-yui_3_17_2_17_1431527054679_7625 .sqs-gallery-block-grid element.style {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
}
.content-inner {
background-color: #fff;
max-width: 100%;
margin: 0 auto;
padding: 100px 8%;
padding-left: 0px;
padding-right: 0px;
}
I believe this is a pretty basic question for someone who knows CSS language (not my case lol). I'm using this code hosted at jsfiddle to make some speech balloons in my website. The problem came when the message inside the balloon is little. For example, in the code posted above, change the code from "bubble you" balloon to something like:
<div class="bubble you">Hi.</div>
You will see that the balloon stay on the same horizontal line as the previous balloon, and this is ugly and strange. I want the balloons to stay one after another (one below another) even when the message is small like a simple 'Hi'... What properties should I change or add in the balloons classes to get this?
Add clear: both to .bubble.
Demo here:
http://jsfiddle.net/sifriday/mek5Z/1957/
.bubble{
background-color: #F2F2F2;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 10px 18px;
position: relative;
vertical-align: top;
clear: both
}
So, im trying my hands on some html/css/js/jquery coding, and having been searching around for answers some days now. Im trying to make a clean website, and was basically wondering how to do this:
What my amazing paint skill are trying to explain is how to do the "border/background" around/behind the content. Not the blue white background but the light grey one. Been trying to use and use css border/width/height etc. But cant seem to get anything to work properly. Like it should scale automatically with a menubar, as seen in the image. Appreciate any input.
Try this:
fiddle: http://jsfiddle.net/CGqa5/1/
CSS
.outer{
width: 200px;
height: 200px;
background: #999999;
border-radius: 10px;
padding: 10px;
}
.inner{
width: 100%;
height: 100%;
background: #ffffff;
}
HTML
<div class="outer">
<div class="inner">
CONTENT
</div>
</div>
Using box-shadow you just need to add one line to your css!
box-shadow: 0px 0px 5px 5px #888888;
Fiddle: http://jsfiddle.net/3vVZQ/