• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text, kombiniert mit Bildern

mansonfreak79

Neues Mitglied
Hallo!

Ich habe folgendes Problem:

Ich möchte eine HTML Seite folgendermaßen aufbauen ...

http://www.msc-eisenerz.com/screenshot.jpg

Links Text, rechts Bilder ... also genau so wie bei meinem Beispiel ...

Nur habe ich keine Ahnung wie ich das lösen soll ... wie man das professionell anstellt ... Tabellen soll man dazu ja nicht nehmen, was ich so gelesen hab ...

Wäre super wenn mir jemand weiterhelfen könnte :-)

Danke und lg
 
Werbung:
Na auf den ersten Blick könnte man auf die Idee kommen, da gibt es drei Bereiche
1) Oben die Überschrift und darunter dann
2a) Links den Text und 2b) rechts die Bilder
Also könnte man mal zwei div machen für oben und unten,
dann das unten noch in links und rechts aufteilen (wieder 2 div mit float anordnen).

In etwa dann so
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#oben   { width:500px; height:100px; background-color:yellow}
#unten  { width:500px; background-color:red}
#links  { width:300px; float:left; background-color:blue ; height:300px; }
#rechts { width:200px; float:left; background-color:green; height:300px;}
</style>
<title>Die Codierung einer Tabelle</title>
</head>
<body>
<div id="oben"></div>
<div id="unten">
<div id="links"></div><div id="rechts"></div>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Na auf den ersten Blick könnte man auf die Idee kommen, da gibt es drei Bereiche
1) Oben die Überschrift und darunter dann
2a) Links den Text und 2b) rechts die Bilder
Also könnte man mal zwei div machen für oben und unten,
dann das unten noch in links und rechts aufteilen (wieder 2 div mit float anordnen).

Man könnte es aber auch gleich richtig machen und den oberen Bereich als Überschrift statt als Div auszuzeichnen :-)
 
Werbung:
ich muss allerdings sagen, dass das foto SEHR wenig vielversprechend aussieht, wenn die seite hinterher wenigstens keinen grauton hat, bin ich vollauf zufrieden :-)

und noch was: warum nicht einfach <header> und <footer> benutzen?
 
Falls das eine statische Seite werden soll, würde ich sie eher so strukturieren und Texte u. Bilder dann floaten.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2>Jobbörse. Online bewerben</h2>
    <hr />
    <div id=oben>
        <div class=text></div>
        <div class=bild></div>
    </div>
    <div id=mitte>
        <div class=text></div>
        <div class=bild></div>
    </div>
    <div id=unten>
        <div class=text></div>
        <div class=bild></div>
    </div>
</body>
</html>
 
Werbung:
Falls das eine statische Seite werden soll, würde ich sie eher so strukturieren und Texte u. Bilder dann floaten.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h2>Jobbörse. Online bewerben</h2>
    <hr />
    <div id=oben>
        <div class=text></div>
        <div class=bild></div>
    </div>
    <div id=mitte>
        <div class=text></div>
        <div class=bild></div>
    </div>
    <div id=unten>
        <div class=text></div>
        <div class=bild></div>
    </div>
</body>
</html>

Man könnte natürlich auch ganz einfach auf die ganzen divs verzichten und die Seite mit HTML richtig auszeichnen.

@TO: Schau dir mal die CSS Eigenschaft float an.

Gruss
Elroy
 
Zurück
Oben