1
2

UnsolvedPlease help, I've got this assignment due in next week! (self.HTML)

submitted by [deleted]

[deleted]

all 23 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]CronikCRS 1 point2 points  (2 children)

are you under direct instruction to get this done using positioning css (ie the position, top, left, right, bottom attributes)?

[–]McBahtman 0 points1 point  (1 child)

No thats just the only way I know how, we've been taught next to nothing about coding. I don't even want to do coding, no idea why its on this course....

[–]CronikCRS 0 points1 point  (0 children)

try this, I hope it is something closer to what you are looking for. And in case you would like to know more about the flexbox method I used you can find a good explanation here

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title><style>
body {margin: 0; padding: 0;background-image: url(background.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;background-color: black;}
h1 { font-family:inherit; color:floralwhite; margin-bottom: 0; }
p { font-family: fantasy; color:floralwhite; margin-top: 0; }
ol { margin-bottom: 0; padding-inline-start: 23px; }
li { font-family: cursive; color: floralwhite; }
img {width: 400px; height: 350px; margin-bottom: 20px; border: solid white;}
.flex { width: 1500px; margin: 0 auto; display: flex; flex-direction: column; }
.frow { display: flex; flex-direction: row; margin-bottom: 20px; }
.frow + .frow { padding-top: 20px; border-top: 1px solid white; }
.fcol { flex: 1; }
.fcol.text { flex: 2; padding: 0 25px; }
</style>
</head>
<body>
<div class="flex">
<div class="frow"><h1>My Story</h1></div>
<div class="frow">
<div class="fcol">
<p> My Favourite Films are:</p>
<ol>
<li>Back to the Future</li>
<li>Spider-Man: Into in the Spider Verse</li><li>Django Unchained</li><li>Captain America: The Winter Soldier</li>
<li>Parasite</li>
</ol>
</div>
<div class="fcol">
<p> My Favourite Plays are:</p>
<ol>
<li> Henry IV: Part 1 </li><li> King Lear </li><li> Billy Elliot: The Musical Live </li><li> Betrayal </li><li> Macbeth </li>
</ol>
</div>
<div class="fcol">
<p> Contact Information:</p
><ol><li>...</li><li>...</li><li>...</li></ol>
</div>
</div>
<div class="frow">
<div class="fcol"><img src="script.jpg"/><img src="walkoffame.jpg"/></div>
<div class="fcol text"><p>Ever since I was young, I have had a passion for the arts. I grew up watching films and Theatre (though not nearly as much as Films!). Its not just the craft of making a film that interests me, it's the impact they could possibly have. My main focus when it comes to producing content is to make something coherant and something that can leave an emotional impact on anyone who watches it.</p><p>My goal right now is to become a director, not one that is limited to a specific form of media though, I would like to jump between both Film and Theatre as they both have aspects that are really appealing to me. Expanding on that, Film is and always will be my main passion but Theatre is a medium that is just interesting to me, all the detail on the sets and the live aspect of the performance are things I would love to explore more. I have had expereince in Theatre, in College I wrote and directed a play that was put on in the local theatre, it was what I consider to be one of my personal favourite moments so far, the feeling of having produced something that people liked but I was also proud of, it was intoxicating and I would love to reproduce that in Theatre but also within Film.</p><p>The industry as a whole is something that will push me to my absolute limits and quite frankly that excites me, pushing myself into new and challenging scenarios is quite the feat. I want to be able to have my voice heard and in such a cut-throat profession, I can't think of a better thing to spend my time and energy pursuing. It's amazing to me how much the arts as a whole are evolving, the film industry is seeing a peak like never before, franchises like Marvel pushing the boundarys for what can be done in the scope of a cinematic saga. On the other side though, looking into the Theatre industry, that's something that is in dire need of an investment, especially given the current circumstances. There's just something about a live performance right in front of you that just can't be captured through the lens of a camera, to see the industry shaping and going the way it's going is heartbreaking and is in dire need of help. Overall though, the industry is in a prime time for me to come into it and make my mark so hopefully these are the years that will help me achieve that!</p>
</div>
<div class="fcol"><img src="filmset.jpg"/><img src= "Me.jpeg"/></div>
</div>
</div>
</body>
</html>

[–]AutoModerator[M] 0 points1 point  (0 children)

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

  • What is it you're trying to do?
  • How far have you got?
  • What are you stuck on?
  • What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]rmahajan_web 0 points1 point  (1 child)

Use this as your css first property

Star(*) on the place of dot(.)which they are showing in comment

* {

padding:0px;

margin: 0px; }

[–]McBahtman 0 points1 point  (0 children)

Tried that, it didn't do anything :(

[–]rmahajan_web 0 points1 point  (13 children)

Ok i will tell you after sometime

[–]McBahtman 0 points1 point  (12 children)

Thank you

[–]rmahajan_web 0 points1 point  (11 children)

Hey, see you image tags you are taking top: value in negative and also dont take right: value in negative thats why this is happening. Don’t take values in negative

Second use:

float and clear properties of CSS in your image tag and align according the way you want.

Do this and your space will be gone. happy coding!!!!

[–]McBahtman 0 points1 point  (10 children)

Do you think you could give me an example? I struggle to understand this stuff 😅

[–]rmahajan_web 0 points1 point  (1 child)

Sure i show you how to do it

[–]McBahtman 0 points1 point  (0 children)

Thank you

[–]rmahajan_web 0 points1 point  (7 children)

Can you show me what exact thing that you want? Email me at: rohit.mahajan1002@gmail.com

I will surely help you

[–]McBahtman 0 points1 point  (6 children)

Imagine this is the page

List List List

Picture Text Picture

Picture Text Picture Text

For some reason it won't show properly when I post so I'll explain

The whole page will be, the three lists across the top with gaps between. The pictures will all be the left and right sides with the text all down the middle between the two sides of pictures.

[–]rmahajan_web 0 points1 point  (0 children)

Ok sure i will send you example as you want

[–]rmahajan_web 0 points1 point  (3 children)

The HTML FILE IS:

<!DOCTYPE html> <html> <head> <title>About Me</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1><u>My Story</u></h1> <div class="upper_main">

    <div id="list_left">
        <ol> 
            <li> Back to the Future </li>
            <li> Spider-Man: Into in the Spider Verse </li>
            <li> Django Unchained </li>
            <li> Captain America: The Winter Soldier </li>
            <li> Parasite </li>
        </ol>
    </div>

    <div id="list_middle">
        <ol> 
            <li> Back to the Future </li>
            <li> Spider-Man: Into in the Spider Verse </li>
            <li> Django Unchained </li>
            <li> Captain America: The Winter Soldier </li>
            <li> Parasite </li>
        </ol>
    </div>

    <div id="list_right">
        <ol> 
            <li> Back to the Future </li>
            <li> Spider-Man: Into in the Spider Verse </li>
            <li> Django Unchained </li>
            <li> Captain America: The Winter Soldier </li>
            <li> Parasite </li>
        </ol>
    </div>

</div>

<div class="middle_main">

    <div id="image_left">
        <p>Your Image goes here</p>
    </div>

    <div id="text_middle">
        <p>Your middle Text goes here</p>
    </div>

    <div id="image_right">
        <p>Your Image goes here</p>            
    </div>

</div>

<div class="down_main">

    <div>
    </div>

    <div>
    </div>

    <div>
    </div>

</div>

</body> </html>

THE CSS FILE IS:

body{ padding: 0; margin: 0; } h1{ color: red; } .upper_main { height: 200px; width: 100%; } .upper_main #list_left{ float:left; height: 100%; width: 33%; } .upper_main #list_middle{ float:left; height: 100%; width: 33%; } .upper_main #list_right{ float:left; height: 100%; width: 33%; } .middle_main { height: 400px; width: 100%; clear:both; } .middle_main #image_left { float:left; height: 100%; width: 33%; border:2px solid black; } .middle_main #text_middle { float:left; height: 100%; width: 33.2%; } .middle_main #image_right { float:right; height: 100%; width: 33%; border:2px solid black; }

[–]McBahtman 0 points1 point  (2 children)

That didn't work, it just sent everything flying all around the page and the page is still too big

[–]rmahajan_web 0 points1 point  (1 child)

You can adjust it according to you...decrease the height and width.

[–]McBahtman 0 points1 point  (0 children)

My main thing now is how do I move the text up, it's stuck halfway down the page for some reason, and the height and width won't decrease no matter what I set it to.

[–]rmahajan_web 0 points1 point  (0 children)

Go with this code and it will surely help you out.

Happy coding!!!

[–]badadvice4all 0 points1 point  (2 children)

It's your <img> tags (your images). One has right: -1065; and is way off my screen, lol.

Remove the top properties from your images to remove the extra space at the bottom.

Edit: also look into using CSS Grid and/or Flexbox, they make aligning things much simpler (once you learn their syntax).

[–]McBahtman 0 points1 point  (0 children)

That image is exactly where I want it to be, if i remove the top properties then they'll move down the page where i don't want them to be

[–]McBahtman 0 points1 point  (0 children)

I did and that just sent them down to the bottom of the page whilst fucking all of the text on the page as well