Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Please help, beginner.

R

Rocketkilo32

New Coder
Hey I was wondering if someone could help me. I wanted to add a simple picture grid into the section titled project. I then wanted to add another section titled contact underneath. However as you can see in the image attached the contact section has become part of the images, which I don't want. I have put coloured boxes around the sections to make it easier to understand what I'm on about. Any help with this would be greatly appreciated, as I am a total coding beginner. I have copied the relevant HTML below:

<section class="projects" id="projects">
<h2>Projects</h2>
<div class="responsive">
<div class="gallery">
<a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
<img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="600" height="400">
</a>
<div class="desc">Kernowfornia</div>
</div>
</div>


<div class="responsive">
<div class="gallery">
<a target="_blank" class="project project-tile" href="https://i.postimg.cc/SxL6jMqh/Lines-rolling-in.jpg">
<img src="https://i.postimg.cc/SxL6jMqh/Lines-rolling-in.jpg" alt="Godrevy lighthouse" width="600" height="400">
</a>
<div class="desc">Swell lines</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" class="project project-tile" href="https://i.postimg.cc/c18X06Ks/Windswept-beauty.jpg">
<img src="https://i.postimg.cc/c18X06Ks/Windswept-beauty.jpg" alt="Coast path" width="600" height="400">
</a>
<div class="desc">Rugged</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
<a target="_blank" class="project project-tile" href="https://i.postimg.cc/26SFs8sf/Chimney-sunset.jpg">
<img src="https://i.postimg.cc/26SFs8sf/Chimney-sunset.jpg" alt="Sundown" width="600" height="400">
</a>
<div class="desc">Golden sunset</div>
</div>
</div>
</section>

<section class="contact">
<h2>Hello</h2>
</section>
 

Attachments

  • Screengrab.jpg
    Screengrab.jpg
    719.7 KB · Views: 3
Sort by date Sort by votes
you have listed all your classes but not your css dents, how can someone like that help you? Also, it looks right on the screenshot and not the way you describe it in the text.

Besides, why don't you use the BBCode for code, then they could read your code too.
The title is again so inconclusive that I have no desire to answer it. Why do people find it so difficult to summarize their request in one title?
 
Last edited:
Upvote 0 Downvote
Hey Tealk, fair enough. I did not word my title very well or include the CSS. For that I apoligise. I have attached the related CSS below. What is BBCode? Sorry I am really new to all of this.

div.gallery:hover {
border: 2px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

* {
box-sizing: border-box;
}

.responsive {
padding: 0 5px;
float: left;
width: 25%;
}

@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

.projects {
border: 5px solid blue;
}

.responsive {
border: 2px solid red;
}

.contact {
border: 5px dashed green;
}
 
Upvote 0 Downvote
I want the 4 pictures to be part of the section that is named projects and the contact to be a new section below, which I will then put more content into. As it stands the title Content moves below the pictures and doesn't seem to be a separate section. Hopefully that makes more sense.
 
Upvote 0 Downvote
Ok you want to program html but have problems with BBCodes in forums, doesn't sound like a good prerequisite to me. Take a look here: https://codeforum.org/help/bb-codes/

To make such a listing with pictures flexbox is the best choice.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-16">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>
            #gallery {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
            }
            #gallery article {
                padding: 5px;
                width: 200px;
                height: 150px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="projects" id="projects">

            <header id="header">
                <h1>header</h1>
            </header>

            <main>
                <div id="gallery">
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                </div>

                <article id="contact">
                    contact
                </article>
            </main>

            <footer id="footer">
                footer
            </footer>
        </div>
    </body>
</html>
 
Upvote 0 Downvote
Tealk said:
Ok you want to program html but have problems with BBCodes in forums, doesn't sound like a good prerequisite to me. Take a look here: https://codeforum.org/help/bb-codes/

To make such a listing with pictures flexbox is the best choice.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-16">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>
            #gallery {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
            }
            #gallery article {
                padding: 5px;
                width: 200px;
                height: 150px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="projects" id="projects">

            <header id="header">
                <h1>header</h1>
            </header>

            <main>
                <div id="gallery">
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                    <article>
                        <a target="_blank" class="project project-tile" href="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg">
                            <img src="https://i.postimg.cc/W3vxgrqw/50-shades-of-blue.jpg" alt="Hayle River" width="200">
                        </a>
                        <lable class="desc">Kernowfornia</lable>
                    </article>
                </div>

                <article id="contact">
                    contact
                </article>
            </main>

            <footer id="footer">
                footer
            </footer>
        </div>
    </body>
</html>
Click to expand...
Please be respectful @Tealk. We all start from somewhere.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom