I have a webpage with with some hyperlink buttons next to some text. I coded it the other day and it was just fine. It is giving me nuts.
However, today when I went back to it the button was bumping out of its div, and had a dimension at least five times the supposed one.
Being unable to locate the piece of css where the problem resides, I have copied the relevant HTML area and uploaded the resulting page at url http://prova.webuda.com/biglietti.html.
The problematic element is the huge green button on the right of the page.
If all was working properly the page should display two lines of 50px height of with match information, now one line is taking up the whole screenview ...
What am I doing wrong?
your .buttonDiv class has the folowing settings:
width: 15px;
max-width: 15px;
float: right;
white-space: pre-wrap;
that is doing most of what you describe.. it doesnt look perfect but removing those results in this:
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I created a div in my a web site so that the text on the page is neatly contained to a set width. I've also implemented CKEditor5 and am using it's CodeSnippet plugin. When there is too much code on a line, it creates a scrollable box with the text overflowing in that scrollable part (behaviour that I actually desire!). However, the background does not exert that same behaviour so that it looks quite unreadable as you can see in the picture below.
I am quite new to building websites so I don't actually know where to start, Should look into the HTML or do I need to set some configuration in CKEdtior?
https://i.imgur.com/X5FXyGU.png
Cheers,
I found that the issue only arises when I apply a custom style like monokai-sublime.css.
adding
overflow-x: auto;
to
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
in monokai-sublime.css fixes the issue for me.
I have been trying to display a sequence of text/image/text in the same line in my HTML document and after hours I still haven't deciphered the problem. As of right now my html page looks like:Webpage
I wanted the page to have text/image/text on the same line though as I stated. I tried making the div they are in float: left; and also display: inline; . Furthermore, I also tried display: inline-block; but that still didn't work.
Here is the css code I am working with: css code
If anyone could give me some insight that would be very helpful, thanks.
Basically you need to set display:inline-block; to each element you want to appear inline (h2,div, and any others).
Lastly, you want to set the percentage width of each element such that the total is 99% or less (TBH I can't tell you why this is, it's just been my experience).
I have a website with a table and for some reason that I cannot find for the love of god, the last item of the table row is wider than previous items. Here is a link to see what I mean. However, it only does that on some pages. Most pages are completely fine. Here is an example of what its supposed to look like this.
The code is the same on every page and I do not quite understand why it does that because the 'inspect element' gives me that the width of the table element is the same. However, it clearly is not. Please check it out and let me know where to start looking.
The below content in one of the bottom rows is causing the issue -
СК-201(М),231(М),251(М),351(М),501(М)
Its in the 5th row from bottom.
Add space after comma to solve the issue.
some time data come from data store and you cant hanld this with adding space in the table when long words comes in then td width should extend its simple to solve this issue in css add this line for you td css
word-break: break-all;
your css will be look like
.catalog_items_blocks td {
padding: 10px 0 38px 41px;
width: 179px;
word-break: break-all;
}
now words breaks when cross the td width
thanks
My page is here. The section I am on about starts with CANVAS FINE ART WRAPS, you will notice between the first and second paragraph there is a big gap. I have looked at it on chrome (osx), safari(osx) and firefox(windows)
There's nothing in the markup to suggest the reason for it. Inspecting it shows no margin or anything causing it.
It sounds like Wordpress is sticking in something it shouldn't be. My suggestion would be:
Go into html view
Cut out all of the code
Paste it into notepad
Save the page as completely empty
Copy back the elements one by one into your html view and save.
Add display: inline-block; to the .box p selector. It should work after this.
the p has a margin - which should be reduced
also , the box class should reduce its line height.
edit
Also - ive edited your text to : 1111 and 2222 and it was fine
you probably pasted the text which contains some bad chars
The main issue I see is on line 199/200 of your normalise.css file:
it has:
p, pre {
margin: 1em 0;
}
If I remove this, the big gap is removed.