HTML CSS and DOM with PHP

HTML & CSS
#1

Hello, i am exhausted working on my website. I need someone to help me get a better understanding of html, css and dom relations with php.

i was always a table guy. i never learned css 2 and css 3 until last year. I started making my website with tables again. I decided to try to understand divs and site layout. I made a decent layout that i was happy with. However, i use nested divs to contain my content in a middle section of the page. I like this layout but the browser doesn’t scroll when the div content is greater than the height of the window. So i created a div just after the body tag that acts as a css body tag. I used overflow hidden on the body tag and overflow-y scroll on my div. It seems to work. My site looks fine until yesterday.

i am trying to make template files which are php include files. include, header, content, footer which is all html code. My files are typically the same except for content and breadcrumb titles/links. I tried to make the templates work but now my pages are falling to pieces. My copyright div is now overlapping the scroll bar and my javascript is not functioning. I see a ‘dom is no longet attached’ message from edge browser, thus i think that my javascript is not attached to the dom. I think that this may happen when i break up my html into included parts using php. Still, maybe my html/css design is not valid or i am not doing something correctly.

any thoughts about this problem? i don’t want to redesign my site. I have spent six months getting it made. My biggest problem is the css body and the scroll bar not appearing, plus the php inclusion is breaking my dom and javascript. I could use some advice about this subject.

Thank you.

#2

well i found the problem with the scroll bar not appearing: i specified a height 100% in my css body. I just finished rebuilding my page step by step until it worked without the cs body which led to discovering the problem with the layout.

now i need to solve the javascript problem. I need to paint a clearer pictur, so maybe someone can offer a css resolution:

i made an “overlay” for important links: about page, copyright data, privacy policy etc. The overlay is set to be 100% of the width and height of the window and positioned as absolute. At first, i tried css but i cannot target the div to open like an overlay menu should open: onclick. I turned to javascript to change the display property from none to block and vice versa when closing. I love this menu but the javascript creates a problem. what if the user has javascript disabled? i use a noscript tag to show a standard link but it doesn’t hide the javascript driven menu link. Thus, i decided to give this menu an id, then use javascript to set the display to block when the document is loaded. I do this because if javascript is disabled, then the menu will carry a display value of none (as specified in the css.) Is there a way to launch this menu with only css3 or can someone explain how to use AJAX to send a message to the server when javascript is disabled?

#3

so after four hours of rebuilding my page layout, i have figured out why i set the width and height on the body and on my css body: the overlay refuses to snap into the window without a scrollbar and it also refuses to cover the window without controlling the width and height of each component that it covers.

the real problem, then, is how can i make an overlay that fills the screen like a new webpage without a scroll bar? i think that i originally used javascript to change the position of the body to absolute. The problems that i ran into along the way are perplexing. For example, if overflow is hidden on the body and the overlay content exceeds the window, then one cannot scroll. I have yet to see an overlay that solves this problem. Any ideas? i’d like to solve this matter because php does not like my current design when the code is included in parts.

#4

CSS is perfectly fine for its use. The only problem is that we’re trying to shoehorn in layout that makes no sense for a regular document, in fact people these days make “front end web apps” that we somehow have to hack together using a system designed to create something completely different

I suggest you look up flexbox and grid. Two very powerful CSS concepts that may make your life a bit easier.

(you may like other resources better)

1 Like
#5

Hello and thank you, Jim.

I am more than angry about web design today. I feel like we’re still in the browser wars with Tim Berners-Lee and company trying to flatten our creativity. I’ve decided to redesign my site and drop the overlay.

My new site will be all forms, database driven with PHP to handle everything else. I’m getting rid of all javascript, all hover effects and all hyperlinks. I’m making everything a form with an input. I will have complete power over my pages. I’m sick of wasting time on front ends. I’d rather make a million regex expressions to process data and have a flat black-and-white front end that loads very quickly. So, yes, i’m removing colors from everything as well. I suppose my site will look Google without hyperlinks.

I’m off to complete the new design…

#6

How hard this sucks on bookmarks, won’t read and won’t (can’t?) share.

Breaking the internet… Again? The wet dreams of article 13 supporters.

#7

Hello Christian or Guten Abend,

yes, deep-link bookmarks are no longer possible through the browser. However, i all ready have pseudo code written for a bookmarking system within my site. I thought of bookmarks last year. You may not be aware of my project but it is not to be a free website. I am creating a subscription based nature website. I work as much as 16 hours per day when i am photographing nature. I’ve discovered a first record for Germany two years ago (which still needs to be published.) Anyway, i wanted to remove this power from browsers to begin with. Thus, i created a bookmarking system, which will only hold 25 bookmarks at first. I cannot support heavy database usage as a small business. Anyway, i would build my own browser specifically for my site if i could do so. Maybe i can become successful enough with my site to hire a solid programmer.

i started designing the header and the breadcrumb links as inputs and i am loving it! i made the buttons black and the site looks so good. This new design makes the site look and feel like an app. Actually, my buttons look like something on a dvd player. I really like this idea. But for every freedom that i remove from browsers and usability, then i will replace it with some sort of in-house functionality. I am all for freedom of internet and allowing the www to be a neutral and boundless resource. I don’t think that the web should be the wild west but freedom is a good thing. My form design removes some functionality but i restore it via good coding practices. Plus, my privacy policy disallows tracking, so i will not have any idea what you bookmark. I only track page views, bakground image selections, photos viewed, audio played and videos watched. I just like to know what is popular. I have no desire to see bookmarks or track them.

Sponsor our Newsletter | Privacy Policy | Terms of Service