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.
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?
<!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:
the text should be to the right of the pictures
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.
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.
