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...
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 would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
Got another question open on this problem, but I'll make it more specific here, and may be if I get a right solution here, it will help to fix the rest.
Live link here
http://soloveich.com/pr6/blog/
So, I have a background div for date. For some reason, it only displays correctly on narrow screens, and styling of it doesn't even show in source code on wider ones. The styling is there. Checked it in wp admin panel theme editor.
html
<div class="date3">
<div class="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
css
.date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #7E7E7E;
color: #fff;
text-align: center;
}
#media screen and (max-width: 530px) {
.date3 {
width:100px;
height: 100px;
border-radius: 60px;
}
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
Also, tried to cheat and set up mediaquery for larger resolution. No luck.
p.s.
all of that started happening after posting a youtube video with post breaker in text
The css for .date3 only exists in media queries that's why it works on lower resolution screens. Try putting it above all the media queries. Should work
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.
In the code below, $row['site'] is an URL. In Chrome and IE8, it displays fine. In Firefox 3.0.11, it only displays everything up until the second forward slash. So "en.wikipedia.org/wiki/Miami" is only displayed as "en.wikipedia.org/wiki".
I believe this is because of the CSS that I am using, but I can't quite figure out how to fix it. Any ideas?
Thanks in advance,
John
Here is the code:
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".''.$row['site'].''."</td>";
Here is the CSS:
table.navbar {
margin-left:44px;
margin-top:0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
}
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
}
table.navbar td a{
padding: 3px;
display: block;
}
.sitename { width: 535px;
overflow:hidden;
}
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
}
This is the "culprit":
.sitename {
width: 535px;
overflow:hidden;
}
You are setting any element with a class of .sitename to have a specific width and hiding any overflow.
In addition to that, this is also part of the reason:
a.links2:link {
...
width: 10px;
...
}
Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.
The code you pasted minus the above width declaration gives me what you want on Firefox.
This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:
print <<<EOT
<table class="navbar">
<tr>
<td class='sitename'>
{$row['site']}
</td>
EOT;
Much better, right?
to test this try
.sitename { width: 535px;
overflow:visible;
}
if you see scrollbars try changing the width to an "em" based number