Flex-box newbie kinda

I’m not sure why the flex-box is going up behind the header. I added 3px of dashed border to make it easier to see. and setting the height of the flexbox and its starting point are new to me.

To those that replied to my header issues of absolute and relative… thanks! I have a better understanding of it. still don’t have it “down,” but, I will mess with it more

I know this is also NOT the way to vertically space an item. I used numerous breaks in the united studios of self defense. I couldn’t change the width on either side. the right side has the words butted up next to the sides and looks like crap

<main>
    
        <section class="aboutussd">
            <h3>united<br>studios<br>of<br>self<br>defense</h3>
            
            <p>United Studios of Self Defense is the largest martial arts school in North America. Since 1968, our students have studied USSD's unique system of Kempo&ndash;style martial arts from the finest instructors in the United States. From the earliest beginnings nearly 2,000 years ago, the martial arts have been steeped in tradition. Nowhere else will you feel that sense of rich history than at a USSD studio.</p>
        </section>
               
    </main>
main {
    color: #000;
}

.aboutussd {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 928px;
    text-align: center;
}

.aboutussd h3 {
    flex: 1;
    padding-top: 370px;
    text-transform: uppercase;
    font-size: 4em;
    text-shadow: .1em .1em #000;
    /*opacity: .5;*/
    color: #E60000;
    background-color: #323232;
    border: 3px dashed yellow;
}

.aboutussd p {
    flex: 1;
    font-size: 1.75em;
    font-weight: bold;
    padding-top: 470px;
    justify-content: center;
    color: #323232;
    background-color: #e60000;
}

Hey Eric,

I am confused as to what you are trying to achieve? Is flex the way to go for with your design in mind?

Anyways a good way to understand flex-box a bit more is flexbox froggy :smiley:

1 Like

I’m believing flexbox is a good way to go

To clarify: with the above picture I sent, the gray box on the left with the words "UNITED STUDIOS OF SELF DEFENSE"actually extends up to the top of the viewport. if the header were removed, you’d then see the actual full height of that box. But, because the header is there, the header is in front of and covering up the full height of the flexed box. I assume its the same height with the red box with all the words in it

I don’t know how to make the box height to only go to the top of the bottom-border of the header, which is what im trying to figure out

Thanks Jannes!

Hey Eric,

Could you show me the code of the header, it may well have to do something with that. My suspicion is that you have used position fix for the header, am I correct?

In that case all you have to do really is to give the flexbox (.aboutussd) a margin-top equal to the height of the two top bars ;). This way it will push the flexbox down.

Hope this helps, if not, feel free to send me both your html and css so I can look into it ;).

Correct, for the entire header, I did use it as a fixed position

But, when I created the header, I did NOT use flexbox. the flexbox I used only for the content below the header. This site was my first time using flexbox when creating a site. ive only done tutorials with flexbox up until making this site

Coding (for me) is difficult. I have so many questions all the time

Here’s the code:

<header>    
        <section class="top"> <!-- PARENT -->     
            <p class="location">3218 Governor Dr. San Diego, CA. 92122</p> <!-- CHILDREN BELOW -->
            <p class="phone">Call today! (858) 550&ndash;9079</p>
            <h2>1 week free!</h2>
            <a href="mailto:ussduc1@gmail.com" title="Email Us">ussduc1&commat;gmail.com</a>
            <!--<p class="email">ussduc1&#64;gmail.com</p>-->
        </section>
     
        <section class="bottom"> <!-- PARENT -->
            <h1>USSD University City</h1> <!-- CHILDREN BELOW-->
            <nav>
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">programs</a></li>
                    <li><a href="#">schedule</a></li>
                    <li><a href="#">events</a></li>
                </ul>
            </nav>    
        </section> 
        
        <a href="https://ussd.com/" target="_blank" title="To USSD Headquarters"><img src="images/logo.jpg" alt="USSD Logo"></a>         
    </header>

I struggle with making the two sections. and I don’t know if that was the way to do it properly. whats driving me crazy is last night I noted that the “1 week free” isn’t perfectly centered. its a bit to the right by about 15 pixels

Hey Eric,

No worries, practice, trial and error will eventually get to where you want it to be :wink: .

Could you provide me with both the HTML and CSS code/files of you page so I can look into it? I don’t mind looking into it for you. Feel free to PM me if you don’t want the code for everyone to see.

Here’s the entire code:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Eric">
    <meta name="description" content="Martial Arts Dojo Website">
    <meta name="keywords" content="martial arts, karate, kempo, kenpo, shaolin, kung fu, self defense, self-defense, discipline, taekwondo, san diego, university city, california, fighting, weapons, training, united studios, ussd, mma, jujitsu, sparring">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
    <title>USSD University City Home</title>
</head>  

<!-- TO DO STILL: 

- ADD WHITE DOWN ARROW ON BOTTOM OF PAGE
- FIND OUT THE EXACT UNIT NUMBER FOR ADDRESS
- HAVE MAIN CONTENT PROPERLY SCALE VERTICALLY
- ADJUST LINE/WORD HEIGHT ON RED SECTION OF ABOUT USSD
- TESTIMONIALS PAGE
- HOVER ON IMAGE TURNS GRAYISH
- IS IT OK TO HAVE A SECOND H2 ELEMENT ON PAGE IF ITS IN A DIFFERENT SECTION?
- ADD FAVICON
- GRAY BACKGROUND BEHIND HOVERED LINKS
- SOCIAL ICONS IN FOOTER
- UNCOVER W3C VALIDATION

-->

<body>
        
    <header>    
        <section class="top"> <!-- PARENT -->     
            <p class="location">3218 Governor Dr. San Diego, CA. 92122</p> <!-- CHILDREN BELOW -->
            <p class="phone">Call today! (858) 550&ndash;9079</p>
            <h2>1 week free!</h2>
            <a href="mailto:ussduc1@gmail.com" title="Email Us">ussduc1&commat;gmail.com</a>
            <!--<p class="email">ussduc1&#64;gmail.com</p>-->
        </section>
     
        <section class="bottom"> <!-- PARENT -->
            <h1>USSD University City</h1> <!-- CHILDREN BELOW-->
            <nav>
                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">programs</a></li>
                    <li><a href="#">schedule</a></li>
                    <li><a href="#">events</a></li>
                </ul>
            </nav>    
        </section> 
        
        <a href="https://ussd.com/" target="_blank" title="To USSD Headquarters"><img src="images/logo.jpg" alt="USSD Logo"></a>         
    </header>
       
    <main>
        <section class="aboutussd">
            <h3>united<br>studios<br>of<br>self<br>defense</h3>
            
            <p>United Studios of Self Defense is the largest martial arts school in North America. Since 1968, our students have studied USSD's unique system of Kempo&ndash;style martial arts from the finest instructors in the United States. From the earliest beginnings nearly 2,000 years ago, the martial arts have been steeped in tradition. Nowhere else will you feel that sense of rich history than at a USSD studio.</p>
        </section>
    </main>
        
    <section class="sensei">
        <h2>Instructor</h2>
        
        <h3>Sensei Jarod Hicks<br>2nd Degree Black Belt</h3>
            
        <img src="images/senseijarod.jpg" alt="Sensei Jarod">
    
        <p>Sensei Jarod started training at age 8 and has loved the martial arts ever since. His first instructor, Greg Crouse, taught him the very basics of what it means to be a martial artist. Until sadly Mr. Greg Crouse was needed elsewhere in USSD. <q>I was only with Greg Crouse for a short time</q> said Sensei Jarod. His second instructor had the most influence in his time training was Brenden Turner who was the one responsible for making him grow into the instructor he is now. Further honing his understanding of the kempo system, enabling him to teach to children and adults of any, and every age. That didn't last long. Mr Turner very sadly passed away very early in his martial arts life. His third and one of his last instructor before he was sent to University City was Jonny Brookman who also had a great influence on his training and had further refined Sensei Jarod's skills in teaching as well as in the martial arts. After years of training in Shaolin Kempo Sensei Jarod thought it was time start teaching others the magic of Shaolin Kempo. Orignally from Costa Mesa (Orange County area) he has been training with some of the best instructors in United Studios of Self Defense from all over the country, and is a certified black belt instructor from the instructors academy. He has a deep understanding of Shaolin Kempo and is always willing and offering a helping hand whether in the arts or in everday life. He constantly seeks to improve not only himself but everyone around him. He knows that everyone can reach their true potential with just the right training and tools. <q>The greatest virtue is to follow nature. To see the simplicity. To realize one's true nature. To cast off selfishness. And temper desire.</q></p>   
    </section>
        
        
        
        
        
        
    
        
            
                
                    
                        
                                
        
        
</body>

</html>

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html, body {
    /*box-sizing: border-box;*/
    text-rendering: optimizeLegibility;
    height: 100%;
    font-size: 100%;
    font-family: 'Lato', sans-serif;
    background-color: #e9e9e9;
}


*:before, *:after {
        box-sizing: inherit;
}


/* COLOR PALETTE BELOW */
/* BLACK   #000    */
/* WHITE   #f2f2f2 */
/* MAROON  #890000 */
/* RED     #b70000 */
/* RED     #e60000 */
/* PINK    #ef667e */





/* ------------- */
/* HEADER STYLES */
/* ------------- */

header {
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 55px;
    left: 0;
    margin: 0 auto;
    height: 70px;
    text-align: center;
    padding: 20px;
    background-color: #000;
    border-bottom: 4px solid #737373;
}





/* ------------------------- */
/* HEADER TOP SECTION STYLES */
/* ------------------------- */

/* PARENT */
.top {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0 auto;
    height: 15px;
    text-align: center;
    padding: 20px;
    background-color: #e60000;
}

/* CHILDREN */

/* LOCATION STYLES */
.top .location {
    position: absolute;
    top: 12px;
    left: 6.5%;
    width: 325px;
    color: #000; 
    background-color: #e60000;
    border: none;
}

/* PHONE AND EMAIL STYLES */
.top p, .top a {
    width: 150px;
    top: 11px;
    padding: 3px 40px;
    font-size: 18px;
    font-weight: 400;
    border-radius: 50px;
    color: #e60000;
    background-color: #000;
    border: 2px solid #f2f2f2;
}

/* PHONE STYLES */
.top .phone {
    position: absolute;
    right: 375px;
    width: 240px;
}

/* EMAIL STYLES */
.top a {
    position: absolute;
    right: 100px;
    text-decoration: none;
}

/* BOX 2 1-WEEK FREE STYLES */
.top h2 {
    position: relative;
    margin: 0 auto;
    width: 200px;
    bottom: 7px;
    font-size: 22px;
    text-transform: uppercase;
}





/* ---------------------------- */
/* HEADER BOTTOM SECTION STYLES */
/* ---------------------------- */

/* CHILDREN */

/* SITE NAME STYLES*/
.bottom h1 {
    position: relative;
    top: 10px;
    left: 111px;
    width: 380px;
    font-size: 38px;
    text-transform: capitalize;
    color: #f2f2f2;
    text-shadow: 0px 2px 8px #f2f2f2;
    background-color: #000;
}

/* NAV BAR STYLES */
.bottom ul {
    position: absolute; 
    list-style-type: none;
    top: 25px;
    right: 5%;
    width: 750px;  
}

.bottom li {
    display: inline-block;
    margin: 10px 10px;
    padding: 5px 5px;
    font-size: 20px;
}

.bottom a {
    padding: 5px 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #e60000;
    /*border: 1px solid yellow;*/
}

nav a:visited {
    padding: 5px 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #e60000;    
}

nav a:hover {
    transition: all ease-in-out 250ms;
    color: #f2f2f2; 
    opacity: 1;
}

nav a:active {
    color: #ef667e;
    transition: .25ms;
}

/* USSD LOGO STYLES */
img {
    position: absolute;
    top: 14px;
    left: 50px;
    width: 80px;
    height: 80px; 
}





/* ------------------- */
/* MAIN CONTENT STYLES */
/* ------------------- */

main {
    color: #000;
}

.aboutussd {
    z-index: 75;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 928px;
    text-align: center;
    background-image: url(images/background.jpg);
}

.aboutussd h3 {
    flex: 1;
    padding-top: 370px;
    text-transform: uppercase;
    font-size: 4em;
    /*opacity: .5;*/
    color: #E60000;
    background-color: rgba(0, 0, 0, .5);
    text-shadow: 3px 3px #505050;
    
    /*background-color: #323232;*/
    /*border: 3px dashed yellow;*/
}

.aboutussd p {
    flex: 1;
    font-size: 1.75em;
    font-weight: bold;
    padding-top: 470px;
    justify-content: center;
    color: #323232;
    background-color: #e60000;
}





/* --------------------- */
/* SECTION SENSEI STYLES */
/* --------------------- */

/*
.sensei {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: ;
}

.sensei h2 {
    margin: 50px 0 25px 0;
    padding-top: 50px;
    font-size: 38px;
    border: 1px solid green;   
}
.sensei h3 {
    font-size: 28px;
    border: 1px solid purple
}

.sensei p {
    margin-left: 400px;
    padding-top: 30px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    font-size: 22px;
    border: 3px solid orange;
}


/* JAROD IMAGE STYLES 
.sensei img {
    position: relative;
    top: 138px;
    margin: 0 auto;
    width: 250px;
    height: 575px;
    box-shadow: 3px 3px 15px black;
}
*/












aboutussd starts at the top behind the header because it is the first element in the normal flow of the page. The header is an independent element. It’s been taken out of the flow in order to have a fixed position.

It helps me to think about the flow of a page and to position items based on the flow when working with css. The normal flow is how items are arranged to start with. For example if you have several block elements:

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

They will line up one after the other even without anything position-related in the css.
Flow
If an element is taken out of the flow – for example, if you assign position: fixed; to header – it becomes an independent element. It no longer lines up in the flow.
Change%20Flow
In this example, main and footer will now need to be adjusted relative to their positions in the flow.

That makes sense. I’ve since tried to “trick” my mind into thinking that everything automatically is being pulled upwards as if there’s a magnet at the top pulling on everything below it. Then, if I position an element as absolute or fixed, then that positioned element automatically is not affected by any pull at all. It instead is popped forwards towards me on its own new plane. After that, the remaining stuff “behind it” still is affected upwards by the magnet pull. This is pretty much what actually happens I know. Your explanation and visual representation were great! Thanks!

1 Like

This is a perfect description of what’s happening!