I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.
Due to the web host I am having to use inline css to style the site.
(trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)
Normally I would use bootstrap to achieve this but as noted that is not an option.
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
What I'm getting:
What I want:
All you need to do is apply float: left to image
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
1. Apply a maximum width to sibling element:
Apply a maximum width to the sibling element (#texts) of #image, e.g:
<div id="texts" style="float:right; max-width: 80%;">
Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.
As it is now, it contains enough text/content to occupy the whole horizontal width.
2. Declare the display type of first nested element or float left
Declare the first nested element (#image) as either an inline-block, e.g:
<div id="image" style="margin-left: 10px;display: inline-block;">
Or float it left, e.g:
<div id="image" style="margin-left: 10px;float: left;">
Note: this float may need to be cleared on the containing parent element.
As it is now, this element (div) is a block element by default, block elements will occupy the full available width of a containing element.
Code Snippet Demonstration:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; display: inline-block;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right; max-width: 80%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting
to read here other than some typo's.</p>
</div>
You can remove float: right from the #texts div and add float: left to the #image div:
<div style="display:inline-block; color:black; border:3px solid #ffd800; margin-bottom:25px; border-radius:10px; background-color: #FFF1AD; box-shadow:13px 15px 6px #2b2626; border-top:30px solid #ffd800;">
<h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold">
This is a title
</h1>
<div id="image" style="margin-left:10px; float:left">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1>
<div style="display: flex;">
<div id="image" style="margin-left: 10px;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.</p>
</div>
<div>
</div>
With this you need to add another div around the image and text content and set it to display: flex;
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="">
<p>
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;float:left;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;width:90%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
Related
(If there is a simpler solution to this problem, please tell me)
I want this website to have 2 sections of text, one on each side of the screen.
I did this successfully. I used text align and translate3d to move the text to the right, then up.
The only problem was that the width of the the text on the right blocked the text on the left from being interacted with.
I decided to change the width of the text on the right side, and when I did, the text alignment wasn't working, because of the margins (the inspect said margins).
I decided to change the margins to 0, and nothing happened.
I have no idea why, but here is some code:
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:150px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
I later added this, but still nothing happened:
#calculator{
margin: 0 !important;
}
So, is there any possible way to have text on both sides of the screen at the same time, with them being separate from each other?
Or is there a way to COMPLETELY remove margins?
.mid {
margin: 0;
font-family: myfont;
font-size: 50px;
float: left;
width: 50%;
}
.mid:nth-child(even) {
text-align: right;
}
<div id="midwlink">
<p id="games" class="mid">Games</p>
<p id="calculators" class="mid">Calculators</p>
<p id="animations" class="mid">Animations</p>
<p id="pictures" class="mid">Pictures</p>
</div>
There are many ways to achive side by side layouts in HTML. One of the simplest is to use two divs side by side, as in this snippet.
div {
width: 49%;
display: inline-block;
}
div.right {
text-align: right
}
<div class="left">
Hello left
</div>
<div class="right">
Hello right
</div>
Could it be the wrong <div> tag in the beginning? You have started with a closing div tag.
If you fix that, then you get what you want it to do.
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:50px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
<div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
I would like to ask for help with this task:
I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears.
Where am I wrong?
Here is the JsFiddle:
https://jsfiddle.net/cj7Lp1vy/9/
HTML
<div id="parent">
<div id="child">
<!-- some content -->
<div class="cl">
<img src="obrazky/plocha.png"> Plocha: 11 m<sup>2</sup>
<img src="obrazky/pocet_pokoju.png"> Pokoje: 2
<img src="obrazky/rekonstrukce.png"> Rekonstrukce: ne
<img src="obrazky/okna.png"> Okna: stará
<img src="obrazky/topeni.png"> Topení: dřevo
<img src="obrazky/typ_stavby.png"> Typ stavby: dřevo
</div>
</div>
</div>
CSS
#parent {
width:235px;
min-height:110px;
border:1px solid #CCCCCC;
padding:15px 10px 10px 10px;
margin:0px 12px 24px 12px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#child {
position:relative;
}
.cl {
clear:both;
}
img {
border:1px solid red;
width:16px;
}
You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.
To work around this, wrap the <img> and the in a span and give the span the styling white-space:nowrap;
I want to customize the appearance of questions when they are in answer posts in my theme, which is based on the Minimal theme. I tried adding things from my previous template, which had asks formatted the way I want, but it didn't work.
Here's what I added:
A div with classes "question" and "bubble" around the {Question} element:
<div class="question bubble">
{Question}
</div>
CSS for the bubble:
.bubble {
color: #9f6f6f;
font-size: 13px;
line-height: 20px;
background: #f5f5f5;
border: 1px solid #d5d5d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 8px 12px;
position: relative;
display: block;
}
This looked right when I open just that HTML/CSS as a snippet, but it didn't seem to have any effect at all on the theme. Nothing changed when I added it.
Furthermore, I wasn't able to find a {Question} hiding anywhere already in the Minimal theme.
How can I customize my {Question} display?
{Question} is one of the blocks that doesn't work unless it's inside a top-level block, in this case {block:Answer}. There's an example on http://www.tumblr.com/docs/en/custom_themes:
{block:Answer}
<div class="question">
<div class="asker">{Asker}</div>
<div class="asker-question">{Question}</div>
<img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
</div>
{block:Answerer}
<div class="answer">
<div class="answerer">{Answerer}</div>
<div class="answerer-answer">{Answer}</div>
<img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
</div>
{/block:Answerer}
<div class="replies">
{Replies}
</div>
{/block:Answer}
...however this didn't do exactly what I wanted either. What I ended up doing was putting the following markup into my theme right after the line containing {/block:Text}:
{block:Answer}
<div class="bubble">
<div class="asker">{Asker}</div> asked: <div class="question">{Question}</div>
</div>
<div class="answer">
{Answer}
</div>
{/block:Answer}
and then adding this CSS at the bottom, just before the line containing {CustomCSS}:
/* Answer Posts */
.bubble {
color: #6f6f6f;
font-size: 13px;
line-height: 20px;
background: #f5f5f5;
border: 1px solid #d5d5d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 8px 12px;
position: relative;
display: block;
margin-bottom: 1em;
}
.asker {
display:inline;
font-weight:bold;
}
.question {
display:inline;
}
and for good measure I added {block:Answer}post-type-answer{/block:Answer} after {block:Audio}post-type-audio{/block:Audio} and {block:Answer}Answer{/block:Answer} after the audio block end as well, in the class name assignments for {block:Posts}.
and this gave me what I wanted:
I am constructing a vertical navigation bar unable to format the text next to the image as I'd like. I can manipulate the image using the margin. I've got it where I want it. Now, I try to manipulate the text margin and it has no effect. It appears like so....
HTML:
<div class="content_nav">
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
</div>
CSS:
.content_nav{
margin:45px 0px 45px 48px;
padding:0px;
width:232px;
height:467px;
background-color:#82c738;
box-shadow:inset 0px 0px 10px #578e30;
float:left;
}
.content_nav_item {
margin:0px 10px 0px 10px;
padding:0px;
height:115px;
}
.content_nav_hr {
margin:0px 10px 0px 10px;
padding:0px;
height:1px;
width:202px;
background-color:#A0DF5C;
}
.content_nav_item_text {
margin:10px 0px 10px 0px;
padding:0px;
}
.content_nav_item img {
margin:28px 10px 0px 20px;
padding:0px;
display:inline;
}
Any thoughts as to why I can't position that span?
Text is kindof a weird bird in CSS, it's not handled how you'd think or want it to be. Here's a good article explaining the idiosyncrasies of vertical text alignment
The text is between span tags. This tags is between the a tag and the div tag.
You need to separate them. They are stacking the text and they prevent the text to move.
You need to "end" the img tag