I was trying to put text in front of an image and what happened is that the text makes an paragraph without my order.
The code in HTML i'm using is:
<div id="userminidata">
<div id="userminiinfo"><img id="userminipic" src="images/minipic.png">
<span>(User name)</span> <span class="separadorverde">|</span> <span>Definições de Conta</span> <span class="separadorverde">|</span> <span>Sair</span>
</div>
</div>
The CSS code:
#userminidata{
float:right;
margin: center;
height: 50px;
width: 250px;
margin-top: 13px;
}
#userminipic {
width: 30px;
height: 30px;
vertical-align: middle;
}
#userminiinfo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #8b8b8b;
font-style:normal;
}
.separadorverde{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #93b55a;
font-weight:bold;
}
At least the screenshot of what is happening: http://www.imgftw.net/img/692260808.jpg
Width of #userminidata is only 250px and that isn't enought.
Try
#userminidata
{
width:300px; /*or more*/
}
I'm not entirely sure that I understand your question - but I think your source order is wrong. If you want the text to appear before the image, the image shouldn't be the first item in the <div>.
The picture looks like the normal behavior of your html and css. I don't see something like a paragraph anywhere.
Related
I'm currently working on a simple COVID-19 site where some info gathered from some flask code is shown in s, with some CSS making the backgrounds into white boxes. However, I am not completely sure how I can add a "cases" right underneath the number while still being in the box. I'm sorry if my question is slightly unclear. I will show my code below.
HTML I am attempting to use:
<div class="boxed">{{data}}</div>
<div><p>cases</p></div>
CSS I am attempting to use:
.boxed {
font-size: 800%;
width: 700px;
text-align: center;
padding: 80px;
background: whitesmoke;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-weight: bold;
color: rgb(49,74,128);
margin: 2% auto;
border-radius: 60px;
}
Right now, the "cases" text shows under the box with the number in it, instead of being inside of it.
I apologize if it is kind of a bad or simple question- I am a beginner in making websites. Any help would be greatly appreciated!
Just move the p tag inside div.boxed and add separate CSS for title and cases
.boxed {
font-size: 800%;
width: 700px;
text-align: center;
padding: 80px;
background: whitesmoke;
color: rgb(49,74,128);
margin: 2% auto;
border-radius: 60px;
}
.title {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-weight: bold;
}
.body {
/* your body styling */
}
<div class="boxed">
<div class="title">{{data}}</div>
<p class="body">cases</p>
</div>
You can move <p>cases</p> inside your .boxed div.
<div class="boxed">
{{data}}
<p>cases</p>
</div>
Then add the styling below to your css.
.boxed p {
font-size: 32px;
}
Testing: https://jsfiddle.net/z3acqfjg/1/
I have a design below which I have to replicate in HTML/CSS.
The above design is basically a text with arrow button at the left.
I have replicated the text in fiddle (which is extremely simple). I am wondering how can I put the arrow left to the text ?
I tried following this tutorial from w3schools but somehow I wasn't able to replicate the same arrow.
The CSS code for the text (which I have used in the fiddle):
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
Please try the following code. The unicode arrow is not precisely the way you mocked-up but close. If you need the arrow to be precise, you can switch the .share::before rule to use a background image.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share::before {
content: "\27A6";
color:#000;
padding-right:8px;
}
<div class="share">Share This Article</div>
Based on the other answer, this one lays the font entity out right.
As discussed in your comments above, the arrow is not the same exact one you are looking for. You need to cut it out and create an image to add to the image tag, or find the source of the image in text form.
.share {
padding-left: 6%;
padding-top: 5%;
font-family: Roboto-Regular;
font-size: 16px;
color: #4676F2;
}
.share p::before {
content: "\27A6";
color:#000;
padding-right:8px;
font-size: 25px;
vertical-align: middle;
}
.share p {
vertical-align: middle;
}
<div class="share">
<p>Share This Article</p>
</div>
<div class="share">
<p><img src=""/>Share This Article</p>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So can anyone tell what's wrong with my code? So I'm trying to add a blue dashed 'block', but somewhy it doesn't get displayed (it seems like the font gets changed, but the box still doesn't appear). I had an similar problem before, but I don't know what's wrong this time. Am I missing a semicolon somewhere or just wrote something wrong?
When I launch the code in JSFiddle, it seems to work fine, but when I'm opening the SAME code with the .html file, everything still seems not to work (pic: http://i.imgur.com/VT7vR3m.png). I'm Anyone got ideas why (the css file is in right location)?
https://jsfiddle.net/j31dgz70/1/
#info {
color: blue;
background: silver;
}
.welcome {
color: purple;
font-size: 20px;
background-color: aqua;
text-shadow: 1px 1px silver;
}
#tab {
background-color: blue;
}
code {
font-family:"Comic Sans MS", cursive, sans-serif;
display: inline-block;
height: 20px;
width: auto;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<!DOCTYPE html>
<body>
<p id="tab"><b>About page</b>
</p>
<article>
<code class="box">
Contact: Email me
</code>
<br>Return to homepage.
</article>
</body>
It's the <br/> that is causing the problem.
It forces a line break but the height restricts what is visible.
Remove the break tag. If you want spacing, use margins or padding...that's what they are for.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: Email me
</code>
<code class="box">
Contact: Email me<br/>
</code>
Alternate Options if you wanted the 'box' to have two lines
Option 1: Retain the break tag but move it. (Not optimal but ok)
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: <br/>Email me
</code>
Option 2: Make the link a block
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
.box a {
display: block;
}
<code class="box">
Contact: Email me
</code>
Just add width: 160px; for responsive use width: 40% or any value according to screen
.box {
width: 160px;
border: 1px dashed #540CE8;
}
Here is link JS FIDDLE
The bordered box is showing fine here, however everything seems broken as its trying to fit inside 'code' which is only 40px wide.
If you remove the width it seems to render fine.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: block;
height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
http://codepen.io/tomdurkin/pen/vOeLVb
This is how it comes out to me on fiddle: http://jsfiddle.net/jimmynewbs/j31dgz70/
see fiddle
The code you have specified as 40px wide, so the text is too big for that section.
I would suggest making the width larger, or removing the width and floating the element so that it will take the width of it's content...
I'm trying to make a headers for the chapters in my short story using a collapsible div. I use two different fonts / styles and three layers of divs to make it look the way I want it to. Unfortunately the text is several pixels too low, and it hurts my eyes when I see it.
I know that inline display doesn't really allow for vertical align (my paddings are ignored). I tried using "inline-block" to no avail. I tried top-padding the left ">" symbol, but that makes the entire construction move downwards. I've been hammering at this for the past 2 hours, I give up :D.
Here is my HTML markup as well as the CSS.
<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
<div class="ShortStoryHeaderCenterDiv">
<div id="h1L" class="ShortStoryHeaderDivLeft">></div>
<div class="ShortStoryHeaderText">Must... align... text</div>
<div id="h1R" class="ShortStoryHeaderDivRight"><</div>
</div>
</div>
CSS:
.ShortStoryHeaderDiv
{
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: 3em;
text-align: center;
background-color: #DDD;
cursor: pointer;
}
.ShortStoryHeaderCenterDiv
{
padding-top:0.2em;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ShortStoryHeaderDivLeft
{
display:inline-block;
padding-right: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderDivRight
{
display:inline-block;
padding-left: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderText
{
display:inline;
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
text-align: center;
text-decoration: underline;
color: #00F;
}
You could try and use display:table-cell to vertically-align:middle
or set a height and then set the line height to the same.
e.g. height: 40px; line-height:40px;
Managed to make it work by using this in ShortStoryHeaderText CSS class, thanks to SkelDave for reminding me about vertical align. It is awkward that the padding-top ONLY started to work once that vertical-align: top was specified. It is ignored otherwise.
display:inline-block;
padding-top:3px;
vertical-align:top;
I want the "values" to be right-aligned. This is my HTML:
<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>
...and my CSS:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
}
.values {
color: white;
text-align:right;
display: inline-block;
}
What do I need to do to get the values to hug the right edge?
jsfiddle is here: http://jsfiddle.net/clayshannon/wvuQz/1/
Not sure if I understood your question correctly. But if you add a width then you can have the text right aligned to the box like below:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
width: 200px;
}
.values {
color: white;
text-align:right;
width: 100px;
display: inline-block;
}
Working Demo
Note: This is not for aligning the text to the right edge of the screen. This is for making the text within the .values element right align within the box.
You are using display: inline-block; which will make the element inline, it is no more a block level element, hence there is no space for the text to align to the left or to the right.
Just wrap the elements inside a div and than float the element to the right.
Demo
Also am using
.wrap {
overflow: hidden; /* This will clear floats */
}
For a better clearfix, you can also use the below snippet and call the class on parent element.
.clear:after {
clear: both;
display: table;
content: "";
}
You can also assign width to the .wrap here, so that elements stay inside boundaries.
A block parent container should have the text align to work. In your case it's the body, itself.. DEMO
body {
background-color: orange;
text-align:right;
}
Try this:)
.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
}
.values {
color: white;
text-align:right;
}
fiddle: http://jsfiddle.net/wvuQz/5/
The semantic approach:
<div>
<p class="blueBold">Existing Building</p>
<p class="values pull-right">19,322 sf</p>
</div>
<div>
<p class="blueBold">Acreage</p>
<p class="values pull-right">3</p>
</div>
CSS:
.pull-right {
float: right;
}
Demo: http://jsfiddle.net/wvuQz/7/
More Info:
http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/