dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Help w/images on homepage

  1. #1
    Join Date
    Aug 2017
    Posts
    6

    Help w/images on homepage

    Hi,

    I am relatively new to coding and am creating a sports blog. I am too prideful to use wix or wordpress and wanted to learn HTML, CSS and JavaScript. I am having issues with text staying on the same line as my pictures as opposed to the text starting from the bottom.

    Here is my html:

    <div id="main_block">
    <div class="header-article"><a href="mywebpage.html"><img src="myimage.jpeg"></div>
    <h1>Story title</h1>
    <h2 class="author">Author</h2></a>
    </div>

    <div id="sidebar">
    <div class="top_pic">
    <div class="header-article"> <a href="myarticle2.html"><img src="image2.jpg"></div><h1>Story title 2</h1>
    <h2 class="author">Author</h2></a>
    </div>
    <hr>
    <div class="bottom_pic">
    <div class="header-article"><a href="myarticle3.html"><img src="image3.jpeg"></div><h1>Story title 3</h1>
    <h2 class="author">Author</h2></a>
    </div>

    Here is the css:
    #main_block {
    display: block;
    float: left;
    width: 65%;
    box-sizing: border-box;
    text-align: center;
    }

    #main_block img {
    height: 750px;
    width: 750px;
    display: block;
    }

    .header-article {
    display: block;
    text-align: center;
    color: transparent;

    }

    #sidebar {
    float: right;
    width: 35%;
    background-color: #333;
    color: #fff;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    height: 750px;
    border: 10px black solid;

    }

    #sidebar img {
    width: 300px;
    height: 200px;

    }

    .top_pic {
    padding: 10px;
    margin-bottom: 25px;
    }

    .bottom_pic {
    padding: 10px;
    margin-top: 25px;
    }

    On Chrome, the text in the H1 tags start on a new line, but on firefox the text in the third article starts on the same line as the image. I thought H1 was a block element and always started on a new line.

    Also when on my mobile site the H1 element starts on the same line as the image as well.

    Can someone help me understand how to fix this?

    Much appreciated!

  2. #2
    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    17
    Your HTML code is incorrect. Put it here and see the errors: https://validator.w3.org/
    For example you are closing a DIV tag inside an A tag that hasn't even been opened there. It is a mess.

  3. #3
    Join Date
    Aug 2017
    Posts
    6
    Quote Originally Posted by nikolaydev View Post
    Your HTML code is incorrect. Put it here and see the errors: https://validator.w3.org/
    For example you are closing a DIV tag inside an A tag that hasn't even been opened there. It is a mess.
    Do I need two A tags to have the img and the H1 tags to link?

  4. #4
    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    17
    Quote Originally Posted by jgwianecki View Post
    Do I need two A tags to have the img and the H1 tags to link?
    Yes. Also you have 6 closing div tags and 9 opening tags.

  5. #5
    Join Date
    Dec 2012
    Posts
    1,391
    I recommend using a HTML beautifier in order to make the code clear and readable, e. g.
    http://www.cleancss.com/html-beautify/
    Result:
    HTML Code:
    <div id="main_block">
        <div class="header-article">
            <a href="mywebpage.html"><img src="myimage.jpeg">
        </div>
        <h1>Story title</h1>
        <h2 class="author">Author</h2>
        </a>
    </div>
    
    <div id="sidebar">
        <div class="top_pic">
            <div class="header-article">
                <a href="myarticle2.html"><img src="image2.jpg">
            </div>
            <h1>Story title 2</h1>
            <h2 class="author">Author</h2>
            </a>
        </div>
        <hr>
        <div class="bottom_pic">
            <div class="header-article">
                <a href="myarticle3.html"><img src="image3.jpeg">
            </div>
            <h1>Story title 3</h1>
            <h2 class="author">Author</h2>
            </a>
        </div>
    It is visible at once that a closing </div> is missing. However wrong nesting is not displayed.

    Using an editor that features highlighting of syntax- and validation errors make this more comfortable. Komodo (light weight) or Visual Studio (requires a lot of space) are recommendable.

  6. #6
    Join Date
    Aug 2017
    Posts
    6
    Quote Originally Posted by nikolaydev View Post
    Yes. Also you have 6 closing div tags and 9 opening tags.
    I really appreciate your help. I did not know I had to use a different A tag for each element. It does make sense though. I counted the 7 open divs and 6 closed, but after looking at my code I just didn't copy and paste the last one from brackets.

  7. #7
    Join Date
    Aug 2017
    Posts
    6
    Quote Originally Posted by Sempervivum View Post
    I recommend using a HTML beautifier in order to make the code clear and readable, e. g.
    http://www.cleancss.com/html-beautify/
    Result:
    HTML Code:
    <div id="main_block">
        <div class="header-article">
            <a href="mywebpage.html"><img src="myimage.jpeg">
        </div>
        <h1>Story title</h1>
        <h2 class="author">Author</h2>
        </a>
    </div>
    
    <div id="sidebar">
        <div class="top_pic">
            <div class="header-article">
                <a href="myarticle2.html"><img src="image2.jpg">
            </div>
            <h1>Story title 2</h1>
            <h2 class="author">Author</h2>
            </a>
        </div>
        <hr>
        <div class="bottom_pic">
            <div class="header-article">
                <a href="myarticle3.html"><img src="image3.jpeg">
            </div>
            <h1>Story title 3</h1>
            <h2 class="author">Author</h2>
            </a>
        </div>
    It is visible at once that a closing </div> is missing. However wrong nesting is not displayed.

    Using an editor that features highlighting of syntax- and validation errors make this more comfortable. Komodo (light weight) or Visual Studio (requires a lot of space) are recommendable.
    I use brackets for my coding. Thank you for the link, it will definitely come in handy as I continue to learn to code more.

  8. #8
    Join Date
    Dec 2012
    Posts
    1,391
    I assumed that brackets is a very good editor and I'm surprised that it doesn't highlight such errors and that it doesn't automatically indent the code.

    I did not know I had to use a different A tag for each element. It does make sense though.
    I'm really not shure about this. This code validates and works fine:
    https://pastebin.com/Aq6Y9KYB
    Both, clicking on the text and clicking on the image, leads to a new page.
    (AArgh, the forum refused my code, to have to view it at pastebin)

  9. #9
    Join Date
    Aug 2017
    Posts
    6
    Quote Originally Posted by Sempervivum View Post
    I assumed that brackets is a very good editor and I'm surprised that it doesn't highlight such errors and that it doesn't automatically indent the code.

    I'm really not shure about this. This code validates and works fine:
    https://pastebin.com/Aq6Y9KYB
    Both, clicking on the text and clicking on the image, leads to a new page.
    (AArgh, the forum refused my code, to have to view it at pastebin)
    I had the H1 tag under the IMG but the text within the H1 tag didn't always automatically go to the next line, sometimes it appeared next to the IMG. That was why I created the div class="header-article".

  10. #10
    Join Date
    Aug 2017
    Location
    Bulgaria
    Posts
    17
    Quote Originally Posted by Sempervivum View Post
    I assumed that brackets is a very good editor and I'm surprised that it doesn't highlight such errors and that it doesn't automatically indent the code.

    I'm really not shure about this. This code validates and works fine:
    https://pastebin.com/Aq6Y9KYB
    Both, clicking on the text and clicking on the image, leads to a new page.
    (AArgh, the forum refused my code, to have to view it at pastebin)
    I am not really sure about it too. I was talking more about the current case, not in general. I don't think it is a problem in general, but maybe only here because there is a div tag involved. I guess just test it and see.

  11. #11
    Join Date
    Aug 2017
    Posts
    6
    Quote Originally Posted by nikolaydev View Post
    I am not really sure about it too. I was talking more about the current case, not in general. I don't think it is a problem in general, but maybe only here because there is a div tag involved. I guess just test it and see.
    I only added the first div because the H1 text was starting on the same line as the IMG. I originally thought if I put an H1 tag after an IMG it would automatically go under the image. But since it did not I added the div with the hopes that the text would start a new line after the div. It seems to be working now, thank you for your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles