• Welcome to Autism Forums, a friendly forum to discuss Aspergers Syndrome, Autism, High Functioning Autism and related conditions.

    Your voice is missing! You will need to register to get access to the following site features:
    • Reply to discussions and create your own threads.
    • Our modern chat room. No add-ons or extensions required, just login and start chatting!
    • Private Member only forums for more serious discussions that you may wish to not have guests or search engines access to.
    • Your very own blog. Write about anything you like on your own individual blog.

    We hope to see you as a part of our community soon! Please also check us out @ https://www.twitter.com/aspiescentral

Anyone understand websites html css ?

The mighty Boosh

Well-Known Member
Hey guys

Sorry for the two part question but places like stack exchange where alittle too much for a casual hobbyist . Would anyone know of a website that a beginner would be welcome to ask simple programming questions ?

My issue html , css

I've followed this tutorial Fixed Header with html and css | Collapsing Header Tutorial

It looks and works grate on a desktop but the content-area and sometimes the header throw a wobbler when tested on tablets and phones . Tho it's mainly the content area that fails to stretch the width of the screen .

HTML

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fixed Header with html and css | Collapsing Header Tutorial</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="box-area">
        <header>
            <div class="wrapper">
                <div class="logo">
                    <a href="#">MouriThemes</a>
                </div>
                <nav>
                    <a href="#">home</a> <a href="#">about</a> <a href="#">portfolio</a> <a href="#">services</a> <a href="#">contact</a>
                </nav>
            </div>
        </header>
        <div class="banner-area">
            <h2>this is banner</h2>
        </div>
        <div class="content-area">
            <div class="wrapper">
                <h2>content area</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, esse est iste magni reprehenderit saepe sint! Assumenda consectetur fugit sit tempore. Architecto blanditiis deleniti, est fuga iusto perspiciatis suscipit voluptatibus! Ad alias assumenda autem deleniti esse est excepturi hic itaque, magnam magni nam officia provident quae recusandae reiciendis rem sed. Adipisci animi aut autem deserunt dolore, ea eius error ex facilis inventore ipsum minus modi nihil nostrum nulla, obcaecati porro reprehenderit repudiandae sed sint sunt tempore vero. At dolores doloribus, dolorum ea eaque hic ipsa iusto libero minus natus neque nisi nobis nostrum odio optio pariatur perspiciatis praesentium rerum sapiente.</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

Code:
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
}
.wrapper {
    width: 1170px;
    margin: 0 auto;
}
header {
    height: 100px;
    background: #262626;
    width: 100%;
    z-index: 10;
    position: fixed;
}
.logo {
    width: 30%;
    float: left;
    line-height: 100px;
}
.logo a {
    text-decoration: none;
    font-size: 30px;
    font-family: poppins;
    color: #fff;
    letter-spacing: 5px;
}
nav {
    float: right;
    line-height: 100px;
}
nav a {
    text-decoration: none;
    font-family: poppins;
    letter-spacing: 4px;
    font-size: 20px;
    margin: 0 10px;
    color: #fff;
}
.banner-area {
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background-image: url(https://i.postimg.cc/T3B3WFcv/2.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}
.banner-area h2 {
    padding-top: 8%;
    font-size: 70px;
    font-family: poppins;
    text-transform: uppercase;
    color: #fff;
}
.content-area {
    width: 100%;
    position: relative;
    top: 450px;
    background: #ebebeb;
    height: 1500px;
}
.content-area h2 {
    font-family: poppins;
    letter-spacing: 4px;
    padding-top: 30px;
    font-size: 40px;
    margin: 0;
}
.content-area p {
    padding: 2% 0px;
    font-family: poppins;
    line-height: 30px;
}

Have poked around but feel it's something that needs adding rather then alterd - just unsure what to call things when looking other then responsive .
 
Hello and sorry for the delay .

@Suzette Thank you for the link . I had to shrink down or get rid of the image but will have another crack at this tomorrow.

@Yeshuasdaughter Everyone I ask about websites tells me to just use Word-press or Odoo but not looked at Odoo . Sounds like it was fun - should hopefully be starting collage soon so will have many many people to annoy with questions :D

Umm just incase anyone else is intresed I found another way to do this in one file but again the image needs fixing .

Tryit Editor v3.7

Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}
</style>
</head>
<body>

<div class="top-container">
  <h1>Scroll Down</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

<div class="content">
  <h3>On Scroll Sticky Header</h3>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
  <p>I'm a fish</p>
</div>

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

</body>
</html>
 
In your first code, is there a reason why the width of .wrapper is set to 1770px? The content-area does stretch the whole screen, but it has wrapper inside with a fixed width, so on mobile content area will take the 100% (and you can see that it does because it has the gray background), but whatever is inside the wrapper extends on because of its fixed with. Try setting the width of .wrapper to 100%, and the delete the height of .content-area because it's causing a lot of unused space at the bottom.

Moreover, the navbar needs to be fixed. It doesn't work for mobile. I've found useful to use flexbox to create elastic designs for navbars, and also use a media query to give specific code for mobile.
 
Last edited:
Again sorry for delay - Been AFK

@rach3rd This is is alot of help thank you for pointing it out as would never have found it :blush: Will look at IRC when I get an hour . Would it be the same as MIRC....? freind used to use it in school but last I checked you had to pay for that one ? Had a look after getting sick of FB .

@Trophonius Not sure why the wrapper was set to 1770px and wasn't too sure what everything was doing till people started pointing things out and doing blank copy paste till it works \ brakes night . It was the gray background that would mess up and didn't spot the Nav not working on phones - Have to ask next door to test site on phone .

Thank you for the amazing responces , super chilled and colorful had alot of fun and lernt afew new things :D
 
Will look at IRC when I get an hour . Would it be the same as MIRC....? freind used to use it in school but last I checked you had to pay for that one ? Had a look after getting sick of FB .

@Trophonius Not sure why the wrapper was set to 1770px and wasn't too sure what everything was doing till people started pointing things out and doing blank copy paste till it works \ brakes night . It was the gray background that would mess up and didn't spot the Nav not working on phones - Have to ask next door to test site on phone .

Thank you for the amazing responces , super chilled and colorful had alot of fun and lernt afew new things :D

IRC is an Internet-based real-time messaging system. MIRC is simply a chat client. A freeware program I once used to access IRC. Kind of like Usenet and "Newsgroups", IRC is going the way of the dinosaur. Haven't used it in years and can't say I can recommend it to much of anyone given various security concerns.

In a nutshell, think of IRC as Facebook in real-time. :eek::eek::eek:

Internet Relay Chat - Wikipedia
 
Last edited:
Will be away for a few days so might be slower to responde then usual.

@Judge I remember him using Mirc alot in the 90s \ 00s TBF I'm looking at going back to land line for social calls .

@Trophonius Life saver and will safe next door some headaches.

Little tangent but don't wanna start another question.
would you say all browsers are so similar that comparing them would be nit picking and just pick one ?

I'm also reading that anti virus are becoming useless with some people not using them and falling back on defender ?
 
Little tangent but don't wanna start another question.
would you say all browsers are so similar that comparing them would be nit picking and just pick one ?

It's not nitpicking. You should check the site looks ok in different browsers. Each browser has it's own code to draw the website on the screen from the source code, because of this differences are to be expected. Most of the time they're not such that affect the site functionality when using code with a long history (thinking about old css rules for example), however you often need to add specific code for each browser when implementing novel features (things in css3 for example) due to the fact that these come from w3c drafts and the development team for each browser decides what code and how it should be display until a new version of css with the specific "official" instructions is released.

For more info, read
Why do we need to user -webkit in css?
How to Create Browser Specific CSS Code | BrowserStack
 
@Trophonius
Don't quite understand some things they bring up in the links.
The take away was it's safe to stick with simple and old code for websites as they've become standerd for most browsers. The issues are as you said everyone has their own way to work with newer code.

Sorry been away and lost my place .

Thank you for all the input guys and pointing out issues :D feel silly for asking now but was a little lost .
 

New Threads

Top Bottom