melahi
-
Posts
19 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by melahi
-
-
Have you looked at w3.css ?
-
It's not clear what you are trying to achieve.
The main reason for limiting width of things is that it's tiring to read long lines. There are several practical solutions: When the screen gets wider you can select column-count which is how news papers used to tackle this issue. A simpler solution is to set a max-width, but an alternative might be to specify font-sizes in vw units (vertical width) thus simply making the text bigger.
Can you explain what you are trying to solve?
-
Sorry... wrong link. it's here: http://ngaro.online/z.html
On 2/17/2021 at 7:46 PM, melahi said:do...view source and save it, then edit that and add a style section at the end of head
I added the following to a clone of this page:
<style> body { max-width:600px; color:red; background-color:#404020; margin:auto; } </style>
and this is the result:
feel free to ask if it's not clear what I did!
(note: test-pc, is my offline server) - my bad! 😳
-
do...view source and save it, then edit that and add a style section at the end of head
I added the following to a clone of this page:
<style> body { max-width:600px; color:red; background-color:#404020; margin:auto; } </style>
and this is the result:
feel free to ask if it's not clear what I did!
-
I'm not entirely sure what you are trying to do, but there are several errors in your HTML.
Here is how I would rewrite it. Feel free to ask for explanations if you don't understand. Also you can submit your HTML to the w3 validator... it's here: https://validator.w3.org/nu/#textarea
<!DOCTYPE html> <html style="background-color:#C0C0C0;padding:0;margin:0" lang="en"><head> <style> body { margin:20px auto 20px auto; color:red; max-width:40em; } #boxes { height:auto; overflow:auto; background-color:white; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; } </style> <title>HTML test</title> </head><body><section id="boxes"> <div class="container"> <div class="box"> <img src="9.jpg" alt=""> <h3>html5 markup</h3> <p>this is some random text:</p> </div> <div class="box"> <img src="9.jpg" alt=""> <h3>css 3</h3> <p>what am i really tring to do here? ><:</p> </div> <div class="box"> <img src="9.jpg" alt=""> <h3>graphic design</h3> <p>I'm not so great with this html stuff</p> </div> </div> </section></body></html>
-
I think in Wordpress, you have to select "publish" before it becomes active/
-
IDK what options you have available, but you might try the following:
background:inherit; /* use the parent's background definition */
or you could try:
background-color: rgba(0,0,0,0); /* transparent */
p.s. it might not be a background issue. Maybe you have a margin or border.
You could try
border:none; margin:0;
-
That's very nice. I would like to do that on my site too where at the moment I just have a script to generate a drop down of all the h2 headers of the current page, but without any highlighting.
-
On 2/5/2021 at 12:00 AM, Il Domandatore said:
How can I space the writings in the menu and that they are of equal distance? I have the menu with the language. Also, if I zoom out of the browser, the page is not responsive.
I think what you need is style="text-align:justify" but I don't know my way round teh Wordpress engine so I can't say where to put it.
-
the tag you need is
<abbr title="test to appear on hover">thing to hover over</abbr>
-
1
-
-
On 1/31/2021 at 11:06 PM, dsonesuk said:
Identify width from side, then with calc() subtract this width from total 100% width.
I was as yet unaware of vars and the calc function (there is a lot to learn with this css malarkey and I really appreciate the help I have received on these forums).
I found calc() and var() vastly more flexible than the php I had been using to generate my css.
Just for the record: I've implemented my color schemes with css vars now and also the menus are working great... some of it still needs tweaking but prototype demo is here: http://ngaro.online
-
After reading various tutorials I implemented drop down menus for my site and all appeared OK(ish) until I looked at it on my cell phone. Now I'm trying to figure out a neat way to get round the layout problem and hope someone can suggest a neat way to solve it...
- menu 3 shows a drop down menu using hover attribute (forgive the colors, it's garish to help me see what is what).
- alas menu 2 is too wide because I had set white-space:nowrap for the menu options and so it gets truncated on the narrow screen.
- taking off the nowrap, it's wrapping on every word and I don't really want to force it to be be width 100% because then menus with only short entries look terrible.
I tried max-width, but that didn't help. I am confident someone somewhere will have solved exactly this problem and I'm hoping to do it in without resorting to javascript.
Thanks in advance for suggestions.
-
1 hour ago, Ingolme said:
It is exactly the space left for hanging letters. This space appears beneath all inline and inline-block elements. Horizontal space to the left or right of inline elements is just the browser representing whitespace.
Actually struggling with another problem and it's possible I can solve it using this as a feature but at the moment it's giving the wrong priority to spacing vs word wrap. I'll ask it in another if that's OK as this one is currently doing what I want.
-
3 hours ago, dsonesuk said:
its a vertical-align issue, of all the ones to give it, they give it one that give a space at bottom. many ways to fix it, change default vertical-align, display: block, for img, font-size: 0; line-height: 0; for parent.
Thank you ever so much!
I used vertical-align:text-top; on my container class and now it works with videos as well!
Once you explained I did indeed say "Doh!": That space was there for potential character descenders (am I right)?
I kept the font size and line height normal as I overlay captions on my images and if anyone wants to see the web theme engine I'm developing, it gets tested online here: http://ngaro.online/
-
On 1/1/2021 at 3:55 AM, Monster RA said:
Hi All,
I've seen that in PHP you can include a require or include function which saves you from having to add the entire code for headers and footers for each page. Does a similar things exist in HTML? If so, please direct me.
Thanks in advance
Russell
Actually you can use server side includes in straight HTML, but you have to enable it.
I've never used it myself as I just use PhP, but I saw a tutorial for it here: https://www.yourhtmlsource.com/sitemanagement/includes.html
-
On 1/12/2021 at 7:30 AM, lokudolem said:
The first slash is directory root for more subfolders before images folder.
It's the http root which is not the same as your file system root. This is because you don't want to put your entire file system online. It is configurable on your file server. And the first part of the URL is handled by a DNS lookup, so that vistor to your site are directed to your computer at whatever IP address it has been registered.
So say you are using Apache on a server running Linux then there will be a file called /etc/httpd/conf/httpd.conf
In that (text) file will be a line saying something like:
DocumentRoot "/srv/http"The actual file that visitors access thus will be /srv/http/images/picture.jpg but your web pages can reference them as /images/picture.jpg
-
1
-
-
On 1/15/2021 at 12:30 AM, Bev20 said:
<video controls width="620">
<source src="https://www.youtube.com/embed/7-OAyM_LNLc&t=13s?autoplay=1&controls=0"
type="video/webm"><source src="https://www.youtube.com/embed/7-OAyM_LNLc&t=13s?autoplay=1&controls=0"
type="video/mp4"><source src="https://www.youtube.com/embed/7-OAyM_LNLc&t=13s?autoplay=1&controls=0"
type="video/ogg"><source src="https://www.youtube.com/embed/7-OAyM_LNLc&t=13s?autoplay=1&controls=0"
type="video/avi">Sorry, your browser doesn't support embedded videos.
</video>Really appreciate some help on this:)
MT
Click the share link in Youtube and choose <> (embed) You get this code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/7-OAyM_LNLc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
They evidently don't use the video tag but instead host their own player in an iframe. By sheer coincidence I've been playing with embedding portrait orientation videos from both Youtube and Bitchute and managed to make them scale with the page. You can try it here and use "view source" to see the code my php generated.
http://ngaro.online/angelica.php/home2 (youtube)
-
I am getting inexplicable bottom margin under all my images. Developer Tools didn't associate it with anything and I spent ages looking for a logical explanation, but to no avail.
No doubt once I find out, I will slap my head and say DOH! Simpson style, but at the moment I'm baffled.
By pure coincidence I made a typo and suddenly it disappeared. The mystery margin is associated with having a <!DOCTYPE html> statement and now I'm forced to leave that out to make my site work. I'm hoping someone can shed light on this.
Here is a screen shot, one with and one without the DOCTYPE: notice the golden bar under the image in the first one.
I whittled the page right down to just a few lines and you can see it here:
http://ngaro.online/mp.html - the mystery padding due to DOCTYPE
http://ngaro.online/mpok.html - the mystery padding vanishes without DOCTYPE
IDK if it's worth me posting the trivial code as you can just click on "view source" to see it.
Thanks in advance for any suggestions 🙂
Question about html and css
in HTML/XHTML
Posted
It works fine for me, but I suspect you may have tried it a few times and the likely problem is as follows:
css files are cached by your browser, so when you update it, the browser carries on using it's out-of-date copy.
You have to go into your browser toolbox and find the option to clear the cache then when you reload it will get the new version, but keep in mind it will carry on using that until you clear the cache again!