float: left macht Ärger

MacDan · 21.07.2010

Ich bins mal wieder und imemr noch fleissig am CSS basteln/probieren/testen
Hab wohl ein leichtes Problem wo ich aber den Fehler nicht entdecken kann.

Die einzelnen Bilder sollten natürlich nebeneinander erscheinen, tun es aber nicht, woran könnte es liegen?

Code:

#websites {
	position: absolute;
	margin-left: 197px;
	margin-top: 23px;
	background: url(../images/bg_websitehead.jpg) no-repeat;
	height: 95px;
	width: 469px;
}
#websites p {
	margin-top: 40px;
	margin-left: 40px;
	font-size: 15px;
	color: #d9d7ce;
	font-family: Helvetica;
	font-weight: bold;
	padding-bottom: 0px;
}

.portbox { 
	float: left;
	margin-right: 27px;
	margin-bottom: 27px;
	padding-top: 0px;
}

.portbox img {
	margin-top: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #000000;
	padding-bottom: 5px;
	margin-bottom: 0px;
	display: block;
}

Code:

<div id="websites">
            		<p>Webseiten</p>
         			
                    
            			<div class="portbox">
                        	<a href="#">
                            	<img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub.jpg" alt="blub" />
                        	</a>
                        </div>
                        <div class="portbox">
                        	<a href="#">
                            	<img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub2.jpg" alt="blub" />
                        	</a>
                        </div>
            			<div class="portbox">
                        	<a href="#">
                            	<img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub3.jpg" alt="blub" />
                        	</a>
                        </div>
                        <div class="portbox">
                        	<a href="#">
                            	<img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub.jpg" alt="blub" />
                        	</a>
                        </div>
                        
                        
                    </div><!--end websites-->

Uploaded with

regards

lonelyhawk · 21.07.2010

AW: float: left macht Ärger

#websites hat eine feste breite von 469px

die bilder sind schlicht zu breit. daher findet das floaten nicht statt. also mach entweder #websites breiter oder die bilder schmaler

btw: warum machst du divs um die bilder? floate doch einfach direkt die bilder...

MacDan · 21.07.2010

AW: float: left macht Ärger

Ah alles klar daran lag es

Danke

Ich packe die bilder in divs, damit ich den Schwarzen Hintergrund nutzen kann.

Code:

.portbox img {
	margin-top: 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	background-color: #000000;
	padding-bottom: 5px;
	margin-bottom: 0px;
	display: block;
}

sokie · 21.07.2010

AW: float: left macht Ärger

ohne den div hättest du das gleiche aussehen mit

Code:

img{
border: 5px solid #000000;
/* float:left;*/
}

lonelyhawk · 21.07.2010

AW: float: left macht Ärger

und warum den bilder nicht einfach einen schwarzen rahmen geben?! (sokie war schneller

)

Code:

* {
    margin:0;
    padding:0;
}
#websites {
    position:absolute;
    left:197px;
    top:23px;
    background:transparent url(../images/bg_websitehead.jpg) no-repeat;
    height:95px;
    width:469px;
}
#websites p {
    margin:40px 0 0 40px;
    font-size:15px;
    font-family:Helvetica;
    font-weight:bold;
    color:#d9d7ce;
}
img {
    float:left;
    margin:0 27px 27px 0;
    border:5px solid #000000;
}

PHP:

<div id="websites">

<p>Webseiten</p>

<a href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub.jpg" alt="blub" /></a>
<a href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub2.jpg" alt="blub" /></a>
<a href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub3.jpg" alt="blub" /></a>
<a href="#"><img src="http://www.psd-tutorials.de/modules/Forum/images/portfolio/blub.jpg" alt="blub" /></a>

</div>

(hab dein script mal etwas zusammengefasst)

MacDan · 22.07.2010

AW: float: left macht Ärger

Also wenn ich mir das so anschaue, stimmt sieht wirklich eifnacher aus, aber da muss man erstmal darauf kommen

Hab das jetzt mal bei mir umgeschrieben und gleich nochn paar kb gespart, danke euch.

Ist wie bei mathematischen Formeln, gibt leichte Wege und umständliche, für die einfachen Wege brauch ich nur erstmal bissl Übung und das Auge.

grüße denny

Nochn Rätsel, bin gerade am w3c validieren und bekomme einen Fehler druch mein javascript im Header

Code:

<script type="text/javascript" charset="utf-8">
		getTwitters('tweet', { 
  		id: 'blub', 
  		count: 1,
		newwindow: true,
  		enableLinks: true, 
  		ignoreReplies: true, 
  		clearContents: true,
  		template: '"%text%" ... <br />%time%'
		});
	</script>

Line 26, Column 34: document type does not allow element "br" here
template: '"%text%" ... <br />%time%'

Ist mir klar das br nichts im Header verloeren hat, aber auch wenn ich das script vorm </body> packe, kommt dieser Fehler.
Er postet den tweet und die Uhrzeit und ich woltle das vor der Uhrzeit ein Zeilenumbruch stattfindet.

regards

lonelyhawk · 22.07.2010

AW: float: left macht Ärger

MacDan schrieb:
[...] Er postet den tweet und die Uhrzeit und ich woltle das vor der Uhrzeit ein Zeilenumbruch stattfindet. [...]

die lösung dieses problems sollte sich hinter diesem link verstecken: SELFHTML: JavaScript / Sprachelemente / Steuerzeichen und besondere Notationen

MacDan · 22.07.2010

AW: float: left macht Ärger

Code:

Line 26, Column 34: document type does not allow element "br" here 
template: '"%text%" ... <br /[COLOR="Red"]>[/COLOR]%time%'

Dieses Zeichen bemängelt er...
Leider gibts bei den Steuerzeichen keinen Zeilenumbruch.

Einzige was ich jetzt druch durchlesen ändern konnte wäre:

template: '\"%text%\" ... \n %time%'

Aber das funktioniert nicht. Validiert wird es, aber der Zeilenumbruch kommt nicht

regards denny

philbring · 22.07.2010

AW: float: left macht Ärger

Hallo,

falls deine Seite als XHTML ausgezeichnet ist solltest du dein Javascript wie folgt einbinden

Code:

<script type="text/javascript" charset="utf-8">
    <![CDATA[
    getTwitters('tweet', { 
        id: 'blub', 
        count: 1,
        newwindow: true,
        enableLinks: true, 
        ignoreReplies: true, 
        clearContents: true,
        template: '"%text%" ... <br />%time%'
    });
    ]]>
</script>

Dann sollte der Validator auch das <br/> nicht mehr bemängeln.

Grüße

Peter

MacDan · 22.07.2010

AW: float: left macht Ärger

Jo funktioniert, danke dir vielmals...
Falls ich mal wieder so eine Art problem habe, einfach den Inhalt des scripts in
<![CDATA[ xxx ]]> packen?

grüße denny

Edit: mhm funktioniert doch noch nicht komplett. Das Script arbeitet nicht, bekomme nur den Platzhalter angezeigt wenn er den Tweet lädt.

philbring · 23.07.2010

AW: float: left macht Ärger

Hallo,

wenn du die Seite als XHTML ausgezeichnet hast musst du die Javascript Blöcke alle in solche <![CDATA[ ... ]]> Blöcke packen um dem XML Parser zu sagen das alles was sich innerhalb dieses Blocks befindet nicht geparsed werden soll.

Falls dein Server die Seite nicht als application/xhtml+xml sonder als text/html ausliefertmusst du die CDATA Markierungen jeweils als Kommentar schreiben um den Renderer des Browsers nicht bzu verwirren.

Auf der Sicheren Seite bist du also immer wenn du die folgende Schreibweise benutzt:

Code:

<script type="text/javascript" charset="utf-8">
    // <![CDATA[
    getTwitters('tweet', { 
        id: 'blub', 
        count: 1,
        newwindow: true,
        enableLinks: true, 
        ignoreReplies: true, 
        clearContents: true,
        template: '"%text%" ... <br />%time%'
    });
    // ]]>
</script>

Dieses funktioniert in jedem Fall, egal als was der Server die Seiten ausliefert.

Viele Grüße

Peter

MacDan · 23.07.2010

AW: float: left macht Ärger

Ah jetzt, sowas muss man erstmal wissen

Danke dir recht herzlich

regards denny

Fantoma555 · 23.07.2010

AW: float: left macht Ärger

Und was macht man wenn der User Javascript ausgeschalten hat ? Finde es generell ziemlich beschissen das es Webprogrammierung nicht strikt ist und man daher für jeden sch.... Browser seine Seite optiemieren muss.

philbring · 23.07.2010

AW: float: left macht Ärger

Fantoma555 schrieb:
Und was macht man wenn der User Javascript ausgeschalten hat ? Finde es generell ziemlich beschissen das es Webprogrammierung nicht strikt ist und man daher für jeden sch.... Browser seine Seite optiemieren muss.

Das ist Ansichtssache.

Da heute fast alle Webseite in irgend einer Form Javascript benutzen sollte man davon ausgehen dürfen das das auch aktiv ist. Wer Javascript abgeschaltet hat sollte genau wissen was er da macht.

Der letzte Browser für den man noch Seiten "optimieren" musste war der IE6. Zum Glück wird der ja mittlerweile auch von größeren Anbietern offiziell nicht mehr suported. Für die aktuellen Browser sind eigentlich keine "Optimierungen" (in diesem Zusammenhang ein schönes Wort) mehr notwendig. Langsam muss man Rüclsicht auf mobile Geräte mit kleinen Bildschirmen nehmen. Diese solten aber genau so wie z.B. Drucker ach als zusätzliche Ausgabekanäle betrachtet werden.

Nur meine Meinung.

Gruß

Peter

Blutkind · 24.07.2010

AW: float: left macht Ärger

Die paranoier mancher Leute rührt doch eh von der hetze der so geanannten Fachzeitungen die einem eine Meinung Bilden.
Solange das so ist haben es Programmierer schwer es immer allen Recht zumachen.besonders der W3C ;-)

crazyfrog1984 · 26.07.2010

AW: float: left macht Ärger

float ist nicht immer das beste - spinnt in einigen browsern rum. am besten die elemente mit position ausrichten - das klappt überall.

lonelyhawk · 26.07.2010

AW: float: left macht Ärger

crazyfrog1984 schrieb:
float ist nicht immer das beste - spinnt in einigen browsern rum. am besten die elemente mit position ausrichten - das klappt überall.

mit dieser meinung wirst du relativ allein dastehen. hatte (nach sehr vielen websites) noch nie darstellungs- und andere probleme mit float. ich denke das problem ist hier eher das richtige anwenden der float-technik.

in welchen browsern gibt es denn bei dir probleme? und wie äußern sie sich?