php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 02-03-2009, 14:53
Canonn
 Registrierter Benutzer
Links : Onlinestatus : Canonn ist offline
Registriert seit: Nov 2007
Beiträge: 48
Canonn ist zur Zeit noch ein unbeschriebenes Blatt
Question [CSS] Befehl Float richtig einsetzen

Hallo Zusammen,

bin ein blutiger Anfänger und habe ein kleines Problem.
Habe in einem CSS Container einen Box eingebaut. In dem Box sollen
Bilder unt Text platzier werden. Der Text soll Um das Bild herumfließen.
Dafür gibt es ein Befehl: float
Das will und will nicht richtig funktionieren.
Bei zB. "float:left;" wird zwar das Bild Links platziert aber der Text statt
kontinuierklich herumzufließen (so wie es in vielen Beispielen oft dargestellt wird) wird nach wenigen Zeilen mit einem großen Sprung links unter dem Bild weitergeführt.

Habe diverse Variationen ausprobiert aber leider ohne Erfolg.
Muss ich hier vielleicht doch eine HTML-Tabellen einsetzen?

Und so sieht momentan der Code aus:

Code:
.
.
.
#container {
margin-left:150px;
margin-right:150px;
width:750px;
height:800px;
border-left:1px solid #000;
Border-right:1px solid #000;
border-bottom:1px solid #000;
background-color:#0099cc;
}

.
.
.
.box_text {
margin:-312px 0px 5px 180px;
height:632px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:500;
padding-left:5px;
padding-top:5px;
width:565px;
}
.
.
.
<body>
<div id="container">
<div class="box_text"><img src="bild.jpg" style="float:left;"> hier Beispieltext </div>
</body>
__________________
Danke und Grüße
Mit Zitat antworten
  #2 (permalink)  
Alt 02-03-2009, 15:45
pekka
 PHP Master
Links : Onlinestatus : pekka ist offline
Registriert seit: Jun 2001
Ort: Köln
Beiträge: 6.608
pekka befindet sich auf einem aufstrebenden Ast
Standard

Berichtige erstmal dein HTML. Da fehlt ein "</div>".
"float: left" sollte eigentlich den von Dir erwünschen Effekt zeitigen. Was passiert, wenn Du es ohne Container probierst? Also nur Bild und Text?
Mit Zitat antworten
  #3 (permalink)  
Alt 02-03-2009, 15:46
ArSeN
 Registrierter Benutzer
Links : Onlinestatus : ArSeN ist offline
Registriert seit: Feb 2006
Ort: Berlin
Beiträge: 1.052
ArSeN ist zur Zeit noch ein unbeschriebenes Blatt
ArSeN eine Nachricht über ICQ schicken ArSeN eine Nachricht über AIM schicken ArSeN eine Nachricht über Yahoo! schicken
Standard

Code:
<div id="container">
wird nirgendwo geschlossen. Warum hast du beim Margin von .box_text einen negativen Wert? Passt die line-height zur font-size?
__________________
Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.
Mit Zitat antworten
  #4 (permalink)  
Alt 02-03-2009, 15:51
mcmurphy
 PHP Junior
Links : Onlinestatus : mcmurphy ist offline
Registriert seit: Aug 2003
Ort: Berlin
Beiträge: 890
mcmurphy zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

ev. den Beispieltext in ein <p> packen?
__________________
"I don't want to belong to any club that would accept me as a member."

Groucho Marx
Mit Zitat antworten
  #5 (permalink)  
Alt 04-03-2009, 12:00
Canonn
 Registrierter Benutzer
Links : Onlinestatus : Canonn ist offline
Registriert seit: Nov 2007
Beiträge: 48
Canonn ist zur Zeit noch ein unbeschriebenes Blatt
Standard Float richtig einsetzen

Hallo,
Sorry, der abschließende </div> fehlt im original Quellcode nicht, nur hier habe ich versehentlich gelöscht.

In dem "container" befinden sich dieverse "boxe". U.A .box_text.
um richtig zu positionieren es war notwendig ihm einen negativen Wert zu vergeben.
In diesem ".box_text" sollen par Bilder mit den zugehörigen Texten platziert werden.
Der Text soll das Bild umfließen.Je nach Wunsch, einmal von Links, einmal von rechts.

Wie schon beschrieben, "float" funktioniert bei mir nicht so gut.

1./ Wenn eine Zeile mal länger ist wird mit einer neuen Zeile unter der Grafik angefangen, satt um sie herumzufliessen.
2./ Ab und zu schreibt schon mal über den box-Rand hinaus
3./ "float: left oder right" bewirkt bei mir nur, dass der Grafik entweder links oder rechts vom Schrift platziert wird

Ohne "Container" geraten die diversen Boxen durcheinander, deshalb kann man darauf nicht verzichten.

Habe mal meine Testseite hier hineinkopiert.
Tatsache ist, so läuft es irgendwie nicht.

Die Frage ist, was ist hier falsch?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>CSSUbungen</title>
<meta name="RS" content=""> <meta
 name="generator" content="SuperHTML 7.0"> <style
 type="text/css">
#container {
margin-left:150px;
margin-right:150px;
width:750px;
height:800px;
border-left:1px solid #000;
Border-right:1px solid #000;
border-bottom:1px solid #000;
background-color:#0099cc;
}
.box_logo {
margin: 0px 0px 5px 0px;
height:90px;
widt:750px;
border-top:1px solid #000;
background-color:#efefef;
}
.box_title {
margin:0px 0px 5px 180px;
height:16px;
background-color:#dfdfdf;
font-family:verdana;
font-size:12px;
font-weight:bold;
padding-left:5px;
padding-top:2px;
width:565px;
}
.box_menue {
margin:0px 30px 5px 15px;
height:300px;
width:145px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
padding-left:5px;
padding-top:5px;
}
.box_text {
margin:-312px 0px 5px 180px;
height:632px;
border-top:1px solid #000;
background-color:#ffffff;
font-family:verdana;
font-size:10px;
font-weight:500;
padding-left:5px;
padding-top:5px;
width:565px;
}
.box_bottom {
margin:27px 0px 0px 0px;
height:15px;
border-top:1px solid #000;
background-color:#dfdfdf;
font-family:verdana;
font-size:10px;
color:blue;
padding-top:1px;
padding-left:38%;
}
</style></head><body><div id="container">
<div class="box_logo">12</div>
<div class="box_title">Testschrift</div>
<div class="box_menue">??</div>
<div class="box_text"><img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: left;">Hier Text der
herumfliessen soll</div><div class="box_bottom">Home
| Kontakt | AGB | Impressum</div>
</div></body></html>
__________________
Danke und Grüße
Mit Zitat antworten
  #6 (permalink)  
Alt 04-03-2009, 12:10
pekka
 PHP Master
Links : Onlinestatus : pekka ist offline
Registriert seit: Jun 2001
Ort: Köln
Beiträge: 6.608
pekka befindet sich auf einem aufstrebenden Ast
Standard

Also ich persönlich hab nicht die Zeit und Lust, mich durch den Quellcode zu wühlen. Dein Anliegen läßt sich auf jeden Fall mit CSS realisieren, das schon legionen von Webdesignern hinbekommen. Es ist nur ein bisschen mehr Gefitzel als früher. Float:left ist auf jeden Fall der Schlüssel.

Was nicht möglich ist, ist, ein Bild so zu platzieren, daß der Text links und rechts vorbeifließt.

Wenn Du weitere Tipps willst, stell ein Beispiel mit Problembeschreibung Online.
Mit Zitat antworten
  #7 (permalink)  
Alt 04-03-2009, 12:31
mcmurphy
 PHP Junior
Links : Onlinestatus : mcmurphy ist offline
Registriert seit: Aug 2003
Ort: Berlin
Beiträge: 890
mcmurphy zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Meinst du mit umfliessen das:
PHP-Code:
<div class="box_text">
 <
img src="PC-Mann.jpg" style="width: 116px; height: 110px; float: left;">
<
p style="margin-left:120px;">ein ganz langer Text</p>
</
div
Das margin-left im <p> Tag muß die Masse vom Bild haben...

Aber eigentlich umfließt der Text das bild bei deinem Bsp doch schon, steht neben dem Bild und wenn das Bild aufhört rutscht die zeile nach links, "umfließt" eben...
__________________
"I don't want to belong to any club that would accept me as a member."

Groucho Marx

Geändert von mcmurphy (04-03-2009 um 12:40 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 04-03-2009, 16:51
ArSeN
 Registrierter Benutzer
Links : Onlinestatus : ArSeN ist offline
Registriert seit: Feb 2006
Ort: Berlin
Beiträge: 1.052
ArSeN ist zur Zeit noch ein unbeschriebenes Blatt
ArSeN eine Nachricht über ICQ schicken ArSeN eine Nachricht über AIM schicken ArSeN eine Nachricht über Yahoo! schicken
Standard

Zitat:
<meta name="generator" content="SuperHTML 7.0">
Ist das nur nen Editor oder son Bunti-Bunti-Klicki-Klicki-Ding?

Ich denke in jedem Fall, dass du viel zu viel Quelltext verwendest um ganz simple Sachen zu machen. Im Zweifelsfall würd ich dir sogar direkt raten, einfach nochmal den entsprechenden Teil komplett neu zu machen, Schritt für Schritt, dann wirst du ja ausmachen können an welcher Stelle der vermeintliche Fehler auftritt.
__________________
Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.
Mit Zitat antworten
  #9 (permalink)  
Alt 05-03-2009, 08:57
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

Oo? entweder verstehst du nicht wie Float arbeitet oder du hast im Orginal noch ganz andere dinge getan.

Weil der Quellcode macht genau das was er soll auch das Float arbeitet wie erwartet

Code:
<body><div id="container">
<div class="box_logo">12</div>
<div class="box_title">Testschrift</div>
<div class="box_menue">??</div>
<div class="box_text"><img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: left; border:1px solid black;">Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
(...)
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
<img src="PC-Mann.jpg"
 style="width: 116px; height: 110px; float: right; border:1px solid black;">herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
herumfliessen soll Hier Text der
(...)
herumfliessen soll </div><div class="box_bottom">Home
| Kontakt | AGB | Impressum</div>
</div></body></html>
und ich hab nichts anderes getan außer dein beispieltext zu dublizieren und dem img nochn border zu geben.
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #10 (permalink)  
Alt 05-03-2009, 09:38
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

@canonn
vielleicht mal das hier lesen.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ebiz-trader 6.0 - Das professionelle PHP Marktplatz Script ansehen ebiz-trader 6.0 - Das professionelle PHP Marktplatz Script

Mit unserer Lösungen können Sie nahezu jeden B2B / B2C Marktplatz betreiben den Sie sich vorstellen können. Ganz egal ob Sie einen Automarktplatz, Immobilenportal oder einfach einen Anzeigenmarkt betreiben möchten. Mit ebiz-trader können Sie Ihre Anforder

11.10.2018 Berni | Kategorie: PHP/ Anzeigenmarkt
PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 17:50 Uhr.