✔ Anfängerfragen

Status
Nicht offen für weitere Antworten.
Darf man erfahren, warum du das Grafik-Puzzle nicht als eine Hintergrundgrafik 'aus einem Guss' verwendest, oder sie zumindest nur in der Vertikalen aufteilst?

Die Darstellungsfehler tauchen bei mir nicht nur im Opera auf, sondern auch in den Gecko-Browsern Firefox, Mozilla und Netscape.

Ein zentriertes Seitenlayout lässt sich mit Hilfe eines übergeordneten Eltern-Elements einrichten, in dem die vorhandenen Elemente eingebettet werden:

CSS: 
#wrapper {
width: 802px;
margin: 0 auto;
border: 1px solid #fff;
}
HTML: 
<body>

<div id="wrapper">

    <!-- DIV-Puzzle -->

</div>

</body>
 
michaelsinterface hat gesagt.:
Darf man erfahren, warum du das Grafik-Puzzle nicht als eine Hintergrundgrafik 'aus einem Guss' verwendest, oder sie zumindest nur in der Vertikalen aufteilst?
Zum Vergrößern anklicken....

Danke erst mal für den Zentrier-Code, zu dem anderen Problem: Ich haben (in fern ferner Zukunft) vor aus dem HTML File ein Template für ein ContentManagement Programm zu machen, dafür müssen aber Bereiche "Streckbar" sein, um variable Mengen an Inhalt auf zu nehmen, darum die unterteilung des Bildes...

Jemand eine Idee wie ich oben gezeigte Darstellungsprobleme ausmerzen kann? Bin um jeden Tipp dankbar..

//edit

so ich habe es nun "hingefuscht", die fehlenden Elemente in der Darstellung von Opera und Co. wollten nicht "gefloadet" werden, warum ist mir allerdings ein rätsel. Ich habe bei den Elementen die nicht so wollten wie ich das wollte, prozentuale Seiten Abstände definiert, so dass es zumindest in Opera und FireFox "gut" aussieht. Kannst ja mit deiner Browser Sammelung noch mal drüber schauen :D .

HTML
CSS IE
CSS Andere

Soviel Arbeit für den Hintergrund :) mal sehen wie schnell ich nun vorran komme, schon mal danke für deine Unterstützung, sonst wäre ich sicher zwischenzeitlich in Versuchung geraten zum Tabellenlayout zurück zu kehren :)


mhh meine Unterscheidung ob IE oder andere scheint kaputt zu sein, der nimmt mindestens einen Wert beim IE aus dem falschen CSS :( ist das falsch so:

Code: 
  <link rel="stylesheet" type="text/css" href="pic/style.css">  <!--[if IE]>
   <link rel="stylesheet" type="text/css" href="pic/styleIE.css">  <![endif]-->

Mfg
Dom
 
Es wäre bei der Fehlerdiagnose ganz hilfreich, wenn du im CSS-Code die DIVs in der Reihenfolge notieren würdest, wie sie im HTML-Quelltext stehen. Ansonsten wirkt der derzeitig nicht-chronologische CSS-Code für einen Außenstehenden unübersichtlich und ist schwer nachvollziehbar, bei so gleichlautenden ID-Namen wie z.B. #contentseitelinksrunter und #contentseitelinksrunteru :(

Grundsätzlich ist die CSS-Browserweiche mittels dem Conditional Comment richtig.

Warum der IE eine CSS-Angabe aus der anderen CSS-Datei übernimmt, kann ich dir zu diesem Zeitpunkt nicht sagen, da ich nicht weiß, auf welchen Selektor du dich beziehst.
 
Ich empfehle dir, alle nebeneinander angeordneten Grafiken in einer einheitlichen Höhe zu erstellen und diese dann zeilenweise zu bündeln:
HTML: 
<div id="wrapper">

 <div id="row_1">
    <div id="linksobenkopf"></div>
    <div id="contentlinksoben"></div>
    <div id="contentmitteleisteoben"></div>
    <div id="contentrechtsoben"></div>
 </div>

<!-- usw. -->
</div>
Denn aktuell schwanken z.B. in dieser Zeile die Höhen der Grafiken lins_oben_kopf1.jpg, conten_links_oben.jpg, content_rechts_oben.jpg zwischen 100 und 102 Pixel, was dann auch die vertikalen Verschiebungen in der nächsten Zeile erklärt.
 
Guten Tag,

ich mal wieder :D Ich habe meine ÜbungsZiele mal ein weniger geringer angesetzt und versuche mich mal in einfacheren Formatierungen, aber auch das klappt natürlich nicht gaaanz so wie ich das hätte :D Kannst ja mal drüber schauen wenn du Zeit und Lust hast (solltest ja gleich Mittagspause haben :) )

Seite
Code: 
  <body>
<div id="banner"></div>
<div id="menue">
<div id="menue_item" style="text-align:center;"> Home</div>
<div id="menue_item"> Home</div>
<div id="menue_item"> Home</div>
</div>
<div id="menue-undso"> Hallo <br> Menü2<br>Menü3</div>
<div id="inhalt-abschluss"></div>
<div id="inhalt"> </div>
<div id="inhalt-abschluss"></div>
  </body>

CSS
Code: 
*
{
 color: #FFFFFF;
}


#banner
{
 width:100%;
 height: 100px;
 background-color: #330066;
}

#menue
{
 height: 40px;
 background-color: #FF6633;
 text-align: center;
 padding-left: 0px;
 padding-right:0px;
 margin-bottom: 25px;
}

#menue_item
{
 width:50px;
 height: 30px;
 background-color: #000000;
 text-align: center;
 padding-top:0px;
 margin-top:10px;
 margin-left:20px;
 float:left;
}


#inhalt
{
 width:400px;
 height: 450px;
 background-color:#000000;
}

#inhalt-abschluss
{
 width: 400px;
 height: 3px;
 background-color:#FF0000;
}

#menue-undso
{
 text-align: left;
 width:100px;
 background-color:#0000FF;
 float: left;

}

Seite bisher nur auf IE abegstimmt, dem Kampf mit den Browsern widme ich mich nachher :)

Fragen 1:

Das Obere Menü, welches bisher über die gesamte Länge der Seite geht, würde ich gerne nur so lang haben, wie die vorhandenen Menüeinträge es benötigen.

Frage 2:

Es geht um die Ausrichtung des letzten Elementes, das "Abschluss Element" (das untere Rote) von meinem schwarzen Block, wie stelle ich das an, das dieses Element genauso wie die beiden darüber ausgerichtet werden? Die beiden oberen Elemente bekommen ja den "float" Befehl von dem rechten Menü ab, weil diese sich überschneiden, das untere Element allerdings nicht mehr. Gibt es da eine andere Lösung als ein "unsichtbares" Element runter laufen zu lassen?

Danke jetzt schon mal :)

Mfg
Dom
 
Mahlzeit ;)

Zu Frage 1: in diesem Fall mußt du die entsprechende Breite für das Menü angeben.

Zu Frage 2: hier das überarbeitete CSS-Layout, das ich in allen mir zur Verfügung stehenden Browsern erfolgreich getestet habe.
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
*
{
 color: #FFFFFF;
}

#banner
{
 width: 100%;
 height: 100px;
 background-color: #330066;
}

#menue
{
 height: 40px;
 background-color: #FF6633;
 text-align: center;
 padding-left: 0px;
 padding-right: 0px;
 margin-bottom: 25px;
}

.menue_item
{
 width: 50px;
 height: 30px;
 background-color: #000000;
 text-align: center;
 padding-top: 0px;
 margin-top: 10px;
 margin-left: 20px;
 float:left;
}

div#leftCol {
float: left;
width: 100px;
}

#menue-undso
{
 text-align: left;
 width: 100px;
 background-color: #0000FF;
}

div#rightCol {
width: 400px;
margin-left: 105px !important; /* Für nicht-IE-Browser */
margin-left: 102px; /* Für IE */
}

#inhalt
{
 width: 400px;
 height: 450px;
 background-color: #000000;
}

.inhalt-abschluss
{
 width: 400px;
 height: 3px;
 background-color: #FF0000;
 font-size: 0; /* Damit der IE das Element 3 Pixel hoch darstellt */
}
-->
</style>

</head>
<body>

<div id="banner"></div>
<div id="menue">
     <div class="menue_item" style="text-align:center;"> Home</div>
     <div class="menue_item"> Home</div>
     <div class="menue_item"> Home</div>
</div>

<div id="leftCol">
     <div id="menue-undso"> Hallo <br> Menü2<br>Menü3</div>
</div>

<div id="rightCol">
     <div class="inhalt-abschluss"></div>
     <div id="inhalt"></div>
     <div class="inhalt-abschluss"></div>
</div>

</body>
</html>
Anmerkung: eine ID darf in einem Dokument nur einmal vorkommen, daher habe ich alle mehrfach verwendeten IDs in Klassen umgewandelt.
 
HiHi :)

super vielen Dank erst mal, in ferner Zukunft hoffe ich das dann mal auch so hin zu bekommen... hätte da ein paar kurze Fragen:

Die verschiedenen Selektoren die du benutz, hab ich auch schon in meinem Tutorial gelesen, allerdings bin ich immer noch nicht ganz dahinter gekommen aus welchem Grund man diese Wann einsetzt, also aus deinem Code zb:

Code: 
div#leftCol {
float: left;
width: 100px;
}

oder

Code: 
.menue_item
{
 width: 50px;
 height: 30px;
 background-color: #000000;
 text-align: center;
 padding-top: 0px;
 margin-top: 10px;
 margin-left: 20px;
 float:left;
}

Das eine sind ID- und das andere Class-Selektoren, soweit bin ich schon mal ( :) ) aber warum man die Wann einsetzt bin ich noch nicht ganz drauf gekommen.

Zu Frage 1: in diesem Fall mußt du die entsprechende Breite für das Menü angeben.
Zum Vergrößern anklicken....

Das Problem ist ja (ich denke ja immer achthunder KM weiter) das ich in ferner ferner Zukunft das ganze in ein CMS System einbauen will und das heisst das ich vorher nicht genau weiss wie lang das Menü werden soll, sprich wenn ich sage 400px, und da ist nur (im extremfall) 1Menüeitrag passt das ganze nicht wirklich, gibt es da keine Möglichkeit den DIV zu sagen das er so groß sein soll, wie er Platz braucht?

Mfg
Dom
 
*edit*

Muss dir deinen Feierabend doch nicht versauen :D ich hab es endlich hinbekommen, nun sogar mit variablem Inhalt *freu* *inDieLuftSpring* :) allerdings bisher nur im IE ... aber der Anfang ist gemacht, dank dir bisher und danke schon mal im vorraus für die Antworten auf die Fragen die noch kommen werden :D

so schaut das nu aus :
HTML
CSS
 
Zuletzt bearbeitet:
dadom110 hat gesagt.:
Die verschiedenen Selektoren die du benutz, hab ich auch schon in meinem Tutorial gelesen, allerdings bin ich immer noch nicht ganz dahinter gekommen aus welchem Grund man diese Wann einsetzt.

[...]

Das eine sind ID- und das andere Class-Selektoren, soweit bin ich schon mal ( :) ) aber warum man die Wann einsetzt bin ich noch nicht ganz drauf gekommen.
Zum Vergrößern anklicken....
Die ID-Selektoren (#menue_item und #inhalt-abschluss) dürfen in dem Dokument nur einmal vergeben / verwendet werden, die CSS-Klassen (.menue_item und .inhalt-abschluss) hingegen so oft, wie du willst.


dadom110 hat gesagt.:
Das Problem ist ja (ich denke ja immer achthunder KM weiter) das ich in ferner ferner Zukunft das ganze in ein CMS System einbauen will und das heisst das ich vorher nicht genau weiss wie lang das Menü werden soll, sprich wenn ich sage 400px, und da ist nur (im extremfall) 1Menüeitrag passt das ganze nicht wirklich, gibt es da keine Möglichkeit den DIV zu sagen das er so groß sein soll, wie er Platz braucht?
Zum Vergrößern anklicken....
Block-Elemente, zu denen das DIV gehört, werden ohne eine Breitenangabe automatisch auf die komplette Fensterbreite bzw. den zur Verfügung stehenden Platz in der Horizontalen ausgedehnt.


Und noch ein Tipp: "konzipiere" ein CSS-Layout zuerst für die nicht-IE-Browsers und korrigiere anschliessend die Darstellungsfehler, die der IE so fabriziert. Ein für den IE erforderlicher CSS-Hack oder Conditional Comment wird ja auch nach dem "normalen" Selektor oder Stylesheet (CSS-Datei) notiert ;)
 
michaelsinterface hat gesagt.:
Und noch ein Tipp: "konzipiere" ein CSS-Layout zuerst für die nicht-IE-Browsers und korrigiere anschliessend die Darstellungsfehler, die der IE so fabriziert.
Zum Vergrößern anklicken....

Hi,

hab es leider jetzt anders rum gemacht und es will und will nicht, meine CSS die im IE funktioniert:

IE - CSS
IE Seite

Hab ich jetzt versucht hier für Opera umzusetzen, mit ein paar margins mehr, sieht das auch ganz passable aus, aber irgendwie "erweitert" er jetzt seinen "Content" Block nicht mehr, wenn der Text darüber hinaus geht, sondern schreibt einfach weiter.

CSS - Opera
Opera - Seite

Die HTML Seiten sind genau gleich (ausser der CSS Link), wie man sieht, hab ich einen Container "Content-Container", der auf der Linken seite einen Container hat, der mit der Linie als Hintergrundbild gefüllt ist, die weiter geführt werden soll und einmal die beiden DIVs die das Männchen zusammenfügen. Und der "Content" DIV wird eben befüllt mit Text und dann sollte sich eigentlich auch der DIV auf der linken seiter weiterführen und die Linie nach unten ziehen, so weit wie nötig, wie im IE auch, aber irgendwie kapiert Opera das nicht

Mfg
Dom
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück