Forum:

HTML Pages with CSS and JavaScript

Position problem with flexbox

Greenhorn

Posts: 2

posted 3 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello,

I can not place items on my page with flexbox.
I have to put "Welcome to CEFiI Golf!" next to the block "events" and put "our services" and "has one!" below "Welcome to CEFii Golf!" as on the picture, with flexbox. I do not understand, I tried everything, but nothing works. How to do ?

here is my HTML5 code:

<!DOCTYPE html>
<html>

<header>
            <nav>
                <ul>
                    <li class="home-menu"><a href="index.html" title="home"><i class="fas fa-home"></i> Home</a></li>
                    <li class="hole-menu"><a href="#" title="hole"><i class="fas fa-map-marker"></i> hole</a></li>
                    <li class="domain-menu"><a href="#" title="domain"><i class="fas fa-tree"></i> The domain</a>
                        <ul class="submenu">
                            <li><a href="#" title="park"> The park</a></li>
                            <li><a href="#" title="hotel"> Hotel</a></li>
                            <li><a href="#" title="restaurant"> Restaurant</a></li>
                        </ul>
                    </li>
                    <li class="tournament-menu"><a href="#" title="tournaments"><i class="far fa-clock"></i> The Tournaments</a></li>
                    <li class="contact-menu"><a href="contact.html" title="contact"><i class="far fa-envelope"> Contact</i></a></li>
                </ul>
            </nav>

</header>

<main>
            <aside>
                <div class="picture_1">
                   <h1 class="bold">The events</h1>
                    <img src="images/events.jpg" alt="Golf" />
                    <p class="bold">08/07/14 - Amélia Island</p>
                    <p class="bold">16/09/14 - Kentucky USA</p>
                    <p>The Ryder Cup is the most prestigious golf event in the world with the presence of all the best golfers in the world and a fabulous atmosphere.</p>
                </div>
                <a href="#" title="registration"><i class="fas fa-envelope-square"></i> Register!</a>
            </aside>

<section>
                <div class="golf_panorama">
                    <h1>Welcome to the CEFiI Golf!</h1>
                </div>

<article>
                    <h2>OUR SERVICES</h2>
                    <div class="picture_2"></div>
                    <img src="picture/picture_3.jpg" alt="The services" />
                    <div id="small_list">
                        <ul>
                            <li><a href="#" title="Your license">Your license</a></li>
                            <li><a href="#" title="Your rights">Your rights</a></li>
                            <li><a href="#" title="Your experience">Your experience</a></li>
                            <li><a href="#" title="Your evenings">Your evenings</a></li>
                            <li><a href="#" title="Learn more">Learn more</a></li>
                        </ul>
                    </div>
                </article>
                <article>
                    <h2>TO THE ONE!</h2>
                    <p>This summer, the news channels give pride of place to golf. </p>
                </article>
            </section>
        </main>

<footer>
            <div class="description_panorama">
                © Copyright 2014 | Internal production | ® All rights reserved
            </div>
        </footer>
    </div>
</body>

</html>

And here is my code css3:

body
{
    font-family: K2D;
    background: url(picture/background.jpg);
}

#block_page
{
    width: 1280px;
    margin: auto;
}

nav > ul {
    margin: 0px;
    padding: 0px;
}

nav > ul::after {
    content: "";
    display: block;
    clear: both;
}

nav > ul > li {
    float: left;
    position: relative;
    background: black;
    width: 20%;
    text-align: center;
}

nav > ul > li > a {
    padding: 15px 30px;
    color: white;
}

nav li {
    list-style-type: none;
}

.submenu {
    display: none;
}

nav a {
    display: inline-block;
    text-decoration: none;
}

nav li:hover .submenu {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0;
}

.submenu li {
    
    background: black;
    margin: 2px 0px 2px 0;
}

.submenu li a {
    padding: 10px 20px;
    width: 250px;
    color: white;
}

aside
{
    text-align: justify;
}

section
{
    display: flex;
    margin: 20px;
    width: 600px;
    height: 200px;
}

.golf_panorama
{
    background: url(picture/welcome.jpg) no-repeat;
}

.golf_panorama .picture_2
{
    flex-direction: row;
}

article
{
    flex-direction: column;
}

.golf_panorama
{
    justify-content: center;
}

.picture_2
{
    justify-content: space-around;
}

article
{
    justify-content: space-evenly;
}

.golf_panorama
{
    align-items: flex-end;
}

.picture_2
{
    align-items: center;
}

article
{
    align-items: center;
}

.golf_panorama
{
    align-self: flex-start
}

main
{
    background: #18391E;
    color: white;
}

aside .picture_1
{
    margin: 0px;
    background: white;
    color: black;
    width: 400px;
    text-align: center;
}

.bold
{
    font-weight: bold;
}

aside a
{
    color:white;
    font-size: 1.2em;
}

h2
{
    background: black;
}

#mini_liste ul
{
    list-style-image: url(picture/arrow.gif);
}

#mini_liste a
{
    color: white;
}

footer
{
    height: 80px;
    padding: 0px;
}

.description_panorama
{
    padding: 10px;
    text-align: center;
    color: white;
    background: black;
}

Bear Bibeault

Sheriff

Posts: 67642

173

I like...

posted 3 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

That's a lot of code and CSS to wade through, but it occurs to me that your layout might be better suited to grid rather than flex.

Also, I see some floats in there. Flex and floats often don't mix well. I would favor one over the other.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

john kaldwin

Greenhorn

Posts: 2

posted 3 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:That's a lot of code and CSS to wade through, but it occurs to me that your layout might be better suited to grid rather than flex.

Also, I see some floats in there. Flex and floats often don't mix well. I would favor one over the other.

thank you for your answer, but how to make it?
I will try to make it shorter

Bear Bibeault

Sheriff

Posts: 67642

173

I like...