SitePoint Forums » HTML & CSS
332 FOLLOWERS
SitePoint is one of the largest online communities of web professionals. This section is for discussions and questions relating to page structure and layout, from HTML5 and the proper use of elements to styling issues, browser bugs, media queries, and responsive design.
SitePoint Forums » HTML & CSS
11h ago
So if I have:
And on hover, I want it to fill in whole border starting from bottom to up, until it touches right, making a full circle.
But, I don’t have that transition effect, nor was I able to make it a circle with just 50% of the bottom and right border (as I don’t know how to make it work with the transition as well).
9 posts - 4 participants
Read full topic ..read more
SitePoint Forums » HTML & CSS
23h ago
Regarding. Device detection
I would like to automatic detect device, and redirect to a particular URL, depending on the following device information:
Device (IOS, Andorid, Windows, MacOS, Linux)
Browser (Chrome, Firefox, Safari, Edge)
How to do this the best way, and do i have to chose PHP or Javascript ?
#######################################
2 posts - 2 participants
Read full topic ..read more
SitePoint Forums » HTML & CSS
3d ago
Hi there,
I am trying to get a dropdown/megamenu to show. I have it working on this site:
https://modelindex.co.uk/
I have copied across the CSS and HTML structure, but for some reason, the megamenus are not appearing. I don’t think there is any JS involved, so not sure what I am missing.
This is the site that isn’t working:
Banstead Local Home - Banstead Local
Discover great places in London Find awesome places, bars, restaurants and activities in London Discover places around London Filter by category Explore places Nightlife Cinema Restaurants Gym & Fitness Art & History Outdoor act ..read more
SitePoint Forums » HTML & CSS
3d ago
I have the following JSFiddle where there is a grid layout and when you hit Map Options on the Grid button, it puts the content of blue square in those squares. I want to reduce the size of the all the squares since the text content is not big. I am looking to reduce it to something of this size as shown in the Jsfiddle
Such that user won’t have to scroll all the way down to view everything. On a big 27 inch monitor, I can only see the square until Row C as shown below:
I was looking at this part of the CSS:
.grid {
margin: auto;
display: grid;
flex: 1 0 ..read more
SitePoint Forums » HTML & CSS
6d ago
It’s been decades since I last coded a list of URI anchors and I’d appreciate help putting it all together under a <nav> element. In the example below I have 12 menu items called “POST ##”. As you can see I want these under <h3> tags:
<h3>./SVG_TABLE.html#POST 84</h3>
<h3>./SVG_TABLE.html#POST 85</h3>
<h3>./SVG_TABLE.html#POST 90</h3>
<h3>./SVG_TABLE.html#POST 93</h3>
<h3>./SVG_TABLE.html#POST 101</h3>
<h3>./SVG_TABLE.html#POST 110</h3>
<h3>./SVG_TABLE.html#POST 155</h3>
<h3>./SVG_TABLE.html ..read more
SitePoint Forums » HTML & CSS
1w ago
Using CSS flex, how do I get two items horizontal with each other at the top of a page, one aligned left, the other aligned center vertically?
I have margin left 0 for the first item. If I use margin auto for the other, the left edge of the item centers vertically, not the item itself.
6 posts - 3 participants
Read full topic ..read more
SitePoint Forums » HTML & CSS
1w ago
I have got a strange issue with the / character, using Gordita font, that is not being displayed correctly. I haven’t seen any other issue with others. The print screen below is taken from this page.
Any clue?
4 posts - 3 participants
Read full topic ..read more
SitePoint Forums » HTML & CSS
1w ago
How to manage SVG border like attached image?
2 posts - 2 participants
Read full topic ..read more
SitePoint Forums » HTML & CSS
1w ago
Hi everybody. I’m working on the SVG Cheatsheet for my SVG thread and I must have spent hours trying to understand why the table doesn’t fill 100% of the width of the screen. This is a basic 2-Column table in which the first column is a number and the second is the actual code. I’ve severely cut this down to a size that’s manageable for the demo.
Any help much appreciated.
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<lin ..read more
SitePoint Forums » HTML & CSS
1w ago
How do I code CSS for WordPress to display the latest posts with list items (LI) that have circled numbers inside a post image Like the one shown in the attached image? Its CSS class is .lates-posts. I want each latest post to feature a number inside a circle, positioned within the post image, and I’m looking for code help on how to achieve this effect using CSS. Could you provide specific CSS code snippets and any necessary HTML structure modifications to implement this design? Any tips on ensuring cross-browser compatibility and responsive design would be greatly appreciated.
2 posts - 2 pa ..read more