bild neben text Text

kanufrosch · 19. März 2009

der titel ist zwar etwas irre führend aber mir viel nix besseres ein^^ .
ich möchte hochizontal gesehen hinter eine h2 überschrift ein bild haben das problem ist das dann im normalfall der text der darunter kommt auch nach uten rutsch und das soll nicht sein !

2.problem ich habe nicht die möglichkeit frames,js,php oder sonstigr sprachen zu verwenden nur html und css !

geht das irgendwie ???

mfg

Talwin · 19. März 2009

Hi,

hier kannst Du es nachlesen. Ist ganz einfach mit CSS. Beachte auch den Punkt danach mit background-repeat.

Gruß Talwin

kanufrosch · 19. März 2009

ok ich gucke mal danke im vorraus

kanufrosch · 20. März 2009

neee so meine ich das net ich meine das soll so aussehehn :

Code

schrift1schrift1schrift1schrift1schrift1      [#########]
schrift2schrift2schrift2schrift2schrift2      [#########]

so und so sieht es aber normal aus :

Code

schrift1schrift1schrift1schrift1schrift1[#########]
                                                                    [#########]
                                                                    [#########]
                                                                    [#########]
schrift2schrift2schrift2schrift2schrift2

lauras · 20. März 2009

das beispiel versteh ich nicht

willst du zwei bilder untereinander oder wie?

aso: wenn du nur html und css verwenden kannst, könntest du sehr wohl frames verwenden, da sie zu html gehören, aber sicherlich nciht die beste alternative sind.

LG
Laura

PS.: vllt solltest du erklären, was die einzelnen bestandteile bedeuten bei dir...

maulepan · 20. März 2009

du meinst die bilder so wie ich??

<a class="postlink" href="http://maulepan.bplaced.net/02">http://maulepan.bplaced.net/02</a>

Talwin · 20. März 2009

Bitte keine Frames!!!
Wahrscheinlich meinst Du mit 'hinter' 'rechts daneben', und nicht unten drunter, wie es im Moment dargestellt wird?

Das liegt am standardmäßigen Außenabstand (margin) von Blockelementen wie in diesem Fall <h2>. Du musst also den Außenabstand von <h2> mittels CSS verändern, eventuell auch von dem <img>.

siehe hier

Dazu ergänzend:

Klick

Bitte lesen und verstehen. Bei Verständnisfragen helfen wir gerne, aber probiere es erst mal selbst aus.

Gruß Talwin

kanufrosch · 20. März 2009

ja das beispiel war schei** nun meinte ich mit hinter rechts neben dem bildund !
nun hab mir das durchgelesen talwin abr damit kann ich mein problem irgendwie net lösen!
hab hier mal ein bild was es besser erklärt als meine dumme skizze !:
so solles aussehen
[Blockierte Grafik: http://www.d78.de/images/1237566569soo.JPG]
und so nicht :
[Blockierte Grafik: http://www.d78.de/images/1237566603soonicht.JPG]

kanufrosch · 20. März 2009

was soll mir da der seiten abstand helfen ??

maulepan · 20. März 2009

Tabelle oder float: right;

lauras · 20. März 2009

genau. tabelle ist mehr arbeit, daher würde ich dir float empfehlen. enweder du versetzt den absatz des taxtes mit einem

Code

float: left;

oder das bild mit einem

Code

float: right;

oder beides, um ein weiteres dahinterrutschen von anderem text zu vermeiden.

LG
Laura

kanufrosch · 20. März 2009

ok ich nehme das float das problem i das ich es n einem div bereich einschließe und bei float: left; rutscht das ganze irgendwie aus dem berich !kann ich das verhindern ??

maulepan · 20. März 2009

wieso sollte da was verrutschen?? ich habs doch auch mit Float gemacht, und bei mir ist auch alles an seinem platz^^

kanufrosch · 20. März 2009

naja wenn ich <img srx ="..." style="float:"left"">
(style ist bei mir in der css datei)
das landet das bild bei mir am untersten rand der seite

maulepan · 20. März 2009

<img src ="..." style="float:left;">
vllt so?

kanufrosch · 20. März 2009

ne hier mal mein voller code gleich im vorraus es ist schlicht und ist nur für nen kurs in der schule !:

HTML

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Hardware</title>
  <link rel="stylesheet" href="style.css" >
</head>
<body scroll="jes">
<div id="inhalt" >  <h1>Hardware</h1>
<h2>1.Was ist Hardware ?</h2>
Als Hardware bezeichnet man alle Teile des Computers, die man anfassen
bzw. greifen kann.<br>
Hardware ist der Oberbegriff für die maschinentechnische Ausrüstung
eines Systems z. B. eines Computersystems.Jedoch nicht ausschlieslich am Computer (siehe 3.).
<h2>2.Was gibt es für Hardwaretypen ?</h2>
Unter Hardware versteht man zum Beispiel :<br>
  <br>
  <a href="#">Eingabegeräte</a><br>
  <a href="#">Ausgabegeräte</a><br>
  <a href="#">Verarbeitungseinheiten</a><br>
  <a href="#">Zusatzgeräte</a><br>
  <a href="#">Gehäuseformen</a><br>




<h2>3.Hardware gibt es ist nicht nur am Computer</h2>
Es können auch elektromechanische Geräte wie beispielsweise ein Treppenhauslichtautomat sein.
</div>







<div id="inhalt" >
<h1>EVA</h1>
<h2>1.Was bedeutet EVA ?</h2>
EVA bedeutet nichts weiter als Eigabe , Verarbeitung , Ausgabe.<br>




<h2>2.Wozu dient das EVA Prinzip</h2>
Das EVA-Prinzip gilt als Grundschema der elektronischen Datenverarbeitung.<br>
Ein PC kann würde ohne dieses Prinzip nicht funktionieren !<br>




<h2>3.Wie funktioniert das EVA Prinzip ?</h2>
<img src ="....jpg" style="float:left;">
</div>
<div id="footer" ><center><a href="Software.htm">=> Software </a><br></center></div>




</body>
</html>

Alles anzeigen

css:

Code

#footer {
 width:100%;
 height: 20px;
 text-align: center;
 border: solid 2px;
 border-color: #5585F5;
 background: #DAFF82;
 margin-top: 25px;
  margin-bottom: 20px;
 }
#header {
 width:100%;
 height: 40px;
 text-align: center;
 border: solid 2px;
 border-color: #5585F5;
 background: #DAFF82;
 margin-top: 25px;
 margin-bottom: 20px;
 }
#head {
 text-align:center;
 }
h1 {
  color: #000080;
  text-decoration: underline;
  text-align:center;
  width:99%;
  text-align: center;
  background: #DAFF82;
  margin-top: 25px;
  margin-bottom: 20px;
  }
#inhalt {
 width:100%;
 text-align: center;
 border: solid 2px;
 border-color: #5585F5;
 background: #DAFF82;
 margin-top: 25px;
 margin-bottom: 20px;
 }
h2 {
 color:#008B80;
      }

Alles anzeigen

gruß

maulepan · 20. März 2009

also bei mir wird das bild völlig korrekt an der linken bildecke angezeigt.

kanufrosch · 21. März 2009

browser ??

YetiZwerg · 21. März 2009

ich habe es mit Webocton getestet und im Prog selbst anzeigen lasssen und es hat alles gefunzt

kanufrosch · 21. März 2009

also ich glaube wir reden aneinander vorbei wo genau ist das bild bei die es soll rechts neben dem textblock stehen und der textblock soll nicht weiter beiinflusst werden

bild neben text Text

Jetzt mitmachen!

Teilen