Let's make a long story, short.
I want the text in this...
To look more like this...
And I mean the alignment of it when I type. In the layout I have, the first line is longer, and the second is shorter. It looks pretty ugly with those dots there.
The site I'm using is very limited with the way their code works, which kinda sucks. But here's my code so far.
<div style="width:100%;height:550px;background:url(https://www.vizzed.com/smd/photo_album_pics/fullsize/35979-1555716669.gif) no-repeat;background-size:100% 100%;">
<div style="width:67%;height:25%;background-color:transparent;position:relative;left:135px;position:relative;top: 365px;border-style:hidden;overflow: auto;border-width:0px;padding: 5px">
<p style="font-size: 26pt;font-family: Arial Black;font-weight: bold;text-align: center;word-spacing: 10px;letter-spacing;6px;color: black; -webkit-text-fill-color: white; -webkit-text-stroke-width: 2.3px; -webkit-text-stroke-color: black; }">
</div>
</div>
I am not sure I understand exactly your problem, but if you just want to control where to cut the sentence, you could use the <br> tag.
Related
Why is my paragraph bigger than the div when its inside it. To me it doesn't make any sense. Can you guys explain why this is happening and how I can fix it.
CSS:
#whos{
font-size: 15px;
color: black;
}
HTML:
<div id="Text">
<b id="bold">Hello,my name is Navjeeven</b>
<p id="whos">
I am Currently enrolled at
Brampton Christian School
</p>
</div>
What it looks like right now?
You have another style: #inside p which overrides the font size.
https://css-tricks.com/specifics-on-css-specificity/
I am creating a calendar that contains tasks/events. When I add more events to the table row, I expect the row to re-size automatically to fit the contents but it is not. Instead, the contents spill out of the row.
If I remove my "events-wrapper" div, I can fix this problem but I need to wrap my events in this div so I can position them in the row so they do not overlap the date as more is added.
Here is the code below.
HTML
<tr class="week">
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td>
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr>
CSS
.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
.week .date{
position: absolute;
top: 4px;
right: 5px;
}
.events-wrapper{
position:absolute;
top:20px;
}
.event{
width: 95%;
height: 20px;
border: 1px solid blue;
background-color: lightblue;
display: inline-block;
top: 5px;
position:relative;
margin-bottom: 5px;
padding-left: 5px;
text-align: left;
}
.event .event-name{
display:inline;
font-weight:bold;
}
Any suggestions on how to fix this?
If I got you. You used position absolute to you code so the elemnt don't get any size. your td item cant get size for 2 absolute divs within hi,
so i cahnges the code and give you on fiddle:
https://jsfiddle.net/1tt63h85/
changes:
.event{
position: static;
}
.week .date{
position: static;
}
Welcome to StackOverflow!
The Main Deal: Don't do this.
There's quite a few foundational issues with what is going on here. Right off the bat, I'd strongly recommend having something that can easily have data written in with ease. Editing markup will be a terrible way of adding data to the calendar, and many unexpected/undesirable results may occur.
At any rate, I was compelled to spend a couple minutes and crack out something that I think would show you what you're trying to work towards. I made two examples for you: a simple calendar that has the dates running vertically (my assumption for what your goal was from the example) and another, much more robust calendar (Guy Ytzhak previously answered and assumed you were looking to have the dates run horizontally across the screen)
Neither calendar is complete in any way; they are simply working examples (that I've styled horribly) to show you how I'd structure such a frail system, if I was forced to go about it the way you currently are.
http://codepen.io/anon/pen/ZObOaR - Simple Vertical Date Example
http://codepen.io/anon/pen/oLjLoK - Robust Horizontal Date Example
Some Problems
Your original issue for layout and placement really came from the structure of your table. Your attempts at corrective styling have also further muddled up the issue:
<tr class="week"> <!-- This is a row -->
<td><div class="date">20</div></td> <!-- (1st 'td') First Item in the row -->
<td><div class="date">21</div></td> <!-- (2nd 'td') Sits to the right of the 1st 'td'-->
<td><div class="date">22</div></td> <!-- (3rd 'td') Sits to the right of the 2nd 'td' -->
<td> <!-- (4th 'td') Sits to the right of the 3rd item -->
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr> <!-- (Still the 4th 'td') Sits to the right of the 3rd item -->
The core table structural issue is shown above. (Assuming no additional code affects the placement & layout beyond what you've provided)
What's Supposed To Happen:
The way a table works (in a very crude & basic sense with a focus on <table>, <tr>, and <td> without worrying about the other pieces) is that it:
Establishes a... well, a table. (<table> tag) - Think of this like a containing box.
Establishes a row (<tr> tag) within said table.
Establishes any number of table cells (<td> tag) within said row.
Repeat steps 2 and 3 until no more <tr> and <td> tags are left
That's how it's supposed to work (mostly). Your code, however, attempts to force a row (<tr>) tag to display its contained cells (<td>) tags in a column, not a row, and I've seen you've tried to do this through absolute positioning. Not a good thing to do.
Some More Problems
Additionally, if you were to throw this into a codepen and inspect it (right click the the table you've created and click inspect), you'll find that the <td> tags and <tr> tags have been stripped away in the rendered result, which is why your below styling does not get applied:
.week td{
text-align: right;
position: relative;
font-size: 14px;
padding: 2px 5px;
width: 14.28%;
}
If you're confused and would like to verify this, feel free to click the following link. I've taken the liberty of throwing your original code into this codepen:
http://codepen.io/anon/pen/WxQXZO
Even More Problems (30% bonus issues completely FREE!)
Your table tags being stripped (along with everything I've said previously) aren't the only core issue. In fact, you'll find that it still has plenty of issues if you were to throw the entirety of your HTML into a set of table tags so it looks like the below code block:
<table>
<tr class="week">
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22</div></td>
<td>
<div class="date">23</div>
<div class="events-wrapper">
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
<div class="event">
<span class="fa fa-check-square-o"></span>
<p class="event-name">Test Event</p>
</div>
</div>
</td>
</tr>
</table>
This is why I've decided to make you two completely new examples. However, they're also very issue-riddled. I probably could have done them a bit better, but I'm doing this purely for example purposes.
The point is:
Could you make a calendar like this? Yes. You could probably make it work pretty well if you worked at it. With that said, I feel that HTML and CSS alone aren't fit to provide this solution with any form of reliability, especially if you want this thing to be interactive on the web. You'd need to take advantage of some javascript libraries, like jQuery, give you the functionality you need. Even then, however, maintaining this thing with new events, dates, etc. would be a total pain and take a lot of time for each edit.
Calendars are meant to quickly and easily provide a visual display of schedule data that can be changed/updated on the fly with ease. This does not do any of that.... and we're not even discussing browser support/device compatibility yet.
My Recommendation:
Grab a CMS (if you don't already use one) like Wordpress or Drupal and develop on there. You can easily download a plethora of beautiful calendars that work wonderfully (and some that don't work so well). A CMS would save you time, frustration, and you'll be able to create something better in the end.
Hope this helps and welcome to StackOverflow! :)
<div style="height: 100px; border: solid; border-width: 2px; border-color: #000">
Box 1
<p>A</p>
</div>
I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it.
Following code doesn't work. But that's the rough idea to my problem.
<a href="/x">
<div>
Box 1
<p>A
</p>
</div>
</a>
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).— W3C Documentation
The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!
You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.
I have found a useful jsfiddle for you that uses <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a> for the actual <div>'s link, and then has independent links within this.
Click here to see the jsfiddle
You can simply add display: block; and use the height you need it will do the trick !
DEMO
or you can use inline javascript as that
<div style="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;" onclick="window.location='/a'">
Box 1
<p>A
</p>
</div>
The following code is worked for me. But I don't know it's a valid one even with HTML5.
<a style="display:block" href="/a">
<div style="border: solid; border-width: 1px; border-color: #FFF">
<div>
<h3>Heading</h3>
</div>
B
C
</div>
</a>
I'm trying to make a simple progress bar using the width property of an HR representing percent complete. I did these years ago but for some reason I can't seem to make this one look right. The website uses tables so I am placing the bar within a table cell. I'm open to doing it with pure css but I would like this to be light as in a few lines of code as there is a lot of other stuff on this page that has to load quickly.
I can get the rule to display a nice solid bar.
<td width=200 style="border: 2px solid silver;padding:none"><hr style="color:#c00;background-color:#c00;height:15px; border:none;" align="left" width=50% /></td>
where the percentage complete is set on the server side with php. This is not a dynamic bar where polling is required. Just one that represents percentage of a profile that is complete.
Ideally, I'd like the bar to fill a percentage of the cell equal to that completed so that the solid bar shows what percent is done and the white space to the right what part remains. However, I can't get a nice looking rule around the whole cell for the bar to fill a portion of. Instead there is a lot of space around the bar. I've tried setting the padding to none but that doesn't seem to work.
Here is a jsfiddle.
http://jsfiddle.net/GqrnC/
Thanks for any suggestions.
You have to remove the margins from the <hr> (add margin: 0 to its styles) to get rid of the extra space: http://jsfiddle.net/GqrnC/1/
<table>
<tr>
<td width=200 style="border: 2px solid silver;padding:none">
<hr style="color:#c00;background-color:#c00;height:15px; border:none;
margin:0;" align="left" width=50% />
</td>
</tr>
</table>
However, I agree with the comments above, I don't see any reason to use an <hr> instead of a <div> for this. The <hr> has the semantics of a "separator", which is not the case here. A div has neutral meaning.
Does this fit your needs better: http://jsfiddle.net/GqrnC/16/
You should really use <div> instead of a <hr> since a <div> is a structural element.
HTML
<div class='outer'>
<div class='inner'>
</div>
</div>
CSS
.outer{
border: 2px solid silver;
width: 200px;
}
.inner{
background-color: #c00;
width: 50%;
height: 5px;
}
Alternatively, I would recommend looking into the jQuery UI progress bar. It is built exactly for this case and looks really great (plus if you want to later, you can update it using AJAX).
I am trying to send an html email with an image border as
<p align="center">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="border: 1px solid grey; padding:10px;" border="1"/>
</p>
However, the border just does not display in any of the email clients. How can i fix this?
Main problem is Microsoft Outlook, enclosing the image in a table seems to do the job.
It's a hassle to enclose every image, but dats em breaks:
<p align="center">
<table><tr><td style="border: 1px solid grey;">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="padding:10px;"/>
</td></tr></table>
</p>
To be honest your in for a hard time using "p" tags. Tables will 100% be the way to go in this situation. I know I know, tables blow, but for email clients that use word as their html render cough outlook cough and ones like hotmail and gmail running html 1 (this might be a little bit of a strech but its somewhere around there), you never really know how things are going to turn out.
As for an answer to your question, try display:block on your image. Generally you want to put display:block on all your images as well as heights and width to insure there are no weird gaps between image slices.
According to this: http://www.campaignmonitor.com/css/ border should be working properly.
I would try two things:
First add the following to the image, which will also help with Gmail rendering bugs
display:block;
And also, maybe try:
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
a little bit off topic but mailchimp has a great tool for translating a normal HTML layout with seperate CSS classes into an inline CSS version
http://beaker.mailchimp.com/inline-css
and also a great tutorial how to code HTML emails the right way
http://kb.mailchimp.com/article/how-to-code-html-emails/
and regarding your CSS problem.
Try wrapping the image in a table cell and give the cell the border.
Unfortunately with HTML E-mails, tables are your friend, yet again.
Have fun
try changing the color either to it's value, #808080 or it's properly spelled version 'gray'