Need help with boxes/div containers

Hi, I’m trying to make a simple page with newspaper teasers in containers similar tothis one.
What I have so far is not what it’s supposed to look like at all.
The links to images work in my code editor (I’m using Brackets), but they aren’t shown.
The class .BildBox seems to not get the reference to the style sheet . at least Brackets claims there isn’t one:

Text isn’t stayin in its box and so on and so on. I can’t tell if this is actually a CSS problem or HTML, I’m just tentatively posting it in this section for a start. Here’s the code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">

  <title>Boxmodell</title>
  <style type="text/css">
      * { margin:0px; padding:0px; border:0px}
      #main { background-color:#e3f3db; border-style:groove; border-color:#4ecdec; margin:20px; padding: 30px; }
      .ArtikelBox { margin:20px; border-style:ridge ; border-color: aliceblue; background-color: white; padding:10px; font-family:DejaVu,Liberation,Nimbus; }
      .BildBox { width:100px; margin: 5px; float: left; }
      .TextBox { float:right; font-size:1em;}
      h1.TextBox { font-size:2em; font-style: italic; color:darkslategray}
      p.TextBox { font-size:2em; font-style: normal; color:#4ecdec}
  </style>
</head>
<body>
    <div id="main">
      <div class="ArtikelBox">
        <div class="Bildbox">
        <img URL(grafiken/alice-1.png)>
        </div>
        <div class="TextBox">
          <h1>Überschrift 1</h1>
          <p>One thing was certain, that the WHITE kitten had had nothing to do with it:--it was the black kitten’s fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it COULDN’T have had any hand in the mischief.  The way Dinah washed her children’s faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr--no doubt feeling that it was all meant for its good.</p>
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="Bildbox">
        <img URL(grafiken/alice-2.png)>
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="Bildbox">
        <img URL(grafiken/alice-3.png)>
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="Bildbox">
        <img URL(grafiken/alice-4.png)>
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
    </div>
    <p><br>
    </p>
</body>
</html>

unfortunately I can’t publish this at the moment, as I’m having connection issues to my ftp server.
Any clues are greatly appreciated.

If you want your images to display you need to use the correct syntax,

<img src="your url here" alt="text in case it doesn't show" />

3 Likes

Thanks you, that’s one of the problems solved (any idea what syntax I might have confused this with? Where did I get the idea with this URL(pathtofile.png) syntax?)!
Now I have the images appearing below the text.
I am guessing to have them next to each other, I need to fit the width of the textbox to be less then the total of the row when added to the 100px of the image box—?
But to begin with, I don’t know how many pixels there are in a row. How can I find that out?

1 Like

next problem solved: borders weren’t visible because I had them set to 0px with the universal selector (to override browser defaults)

* { margin:0px; padding:0px; border:0px}

but failed to set the actual value in the .ArtikelBox class. I gave it border:2px;

Solved problem of elements of class=“Bildbox” not finding their CSS rule:
there was a typo, 2nd b in “Bildbox” was lower case

This is what I have now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <title>Boxmodell</title>
  <style type="text/css">
      * { margin:0px; padding:0px; border:0px}
      #main { background-color:#e3f3db; border-style:groove; border-color:#4ecdec; margin:20px; padding: 30px; }
      .ArtikelBox { margin:20px; border:2px; border-style:ridge ; border-color:aliceblue; background-color:white; padding:10px; font-family:DejaVu,Liberation,Nimbus; }
      .BildBox { width:100px; margin: 5px; float: left; }
      .TextBox { position:relative; left:20px; margin:10px; padding:10px; width:950px; border:2px; border-style:solid; font-size:1em; float:right;}
      h1.TextBox { font-size:2em; font-style:italic; color:darkslategray}
      p.TextBox { font-size:1em; font-style:normal; color:#4ecdec}
  </style>
</head>
<body>
    <div id="main">
      <div class="ArtikelBox">
        <div class="BildBox">
          <img src="grafiken/alice-1.png">
        </div>
        <div class="TextBox">
          <h1>Überschrift 1</h1>
          <p>One thing was certain, that the WHITE kitten had had nothing to do with it:--it was the black kitten’s fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it COULDN’T have had any hand in the mischief.  The way Dinah washed her children’s faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr--no doubt feeling that it was all meant for its good.</p>
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="BildBox">
        <img src="grafiken/alice-2.png">
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="BildBox">
        <img src="grafiken/alice-3.png">
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
      <div class="ArtikelBox">
        <div class="BildBox">
        <img src="grafiken/alice-4.png">
        </div>
        <div class="TextBox">
          <h1></h1>
            
        </div>  
      </div>
    </div>
    <p><br>
    </p>
</body>
</html>

problems left:

  1. the text should be to the right of the pictures
  2. the text should remain within the borders of the boxes.

I now tried to achieve 1. with
.TextBox { position:relative; left:20px;
According to my course materials, this should ensure that the box’s left margin starts 20px to the previous element (which is the image box here).
However, in my preview, the text is still below the image.

2 Likes

Could you give us a screenshot of the example that you provided. I don’t have an account, and I couldn’t figure out how to make one. I could you help you more that way.

I somewhat see that. The problem is I can’t see your pictures through the code. Probably because the pictures aren’t done so everyone can see them.

Please take what I said into consideration, and I can help you more once you read this.

2 Likes

Hi, I finally managed to upload the page:
https://www.benopp.eu/boxmodell.html
Here’s what it looks like in my Opera browser now:


This is Firefox:

1 Like

This question seems of the first importance for getting the pictures and text aligned next to each other.

1 Like