✔ Anfängerfragen

Status
Nicht offen für weitere Antworten.
D

dadom110

Erfahrenes Mitglied
Guten Tag Zusammen,

ich beschäftige mich zur Zeit mit dem Thema CSS und nutze diesen Thread mal um ein paar Fragen los zu werden die sich mir so stellen.

Ich habe vor eine Webseite zu erstellen die "aus einem Guss" erscheint, dafür habe ich ein Bild in einzelne Teiler zerschnitten, die ich nun per CSS wieder zusammen fügen möchte, quasi wie ein Puzzle oder Mosaik. Die Elemente die ich untereinander habe, funktionieren ohne Probleme

Code: 
<div id="linksobenkopf"></div>
<div id="hand"></div>
<div id="korper">

Wie aber muss ich in der CSS Datei

sieht immoment zb. nur so aus:

Code: 
 #linksobenkopf
 {
   background-image:url(lins_oben.jpg);
   height:161px;
   width:200px;
 }

ändern, damit ich auch Elemente direkt nebeneinander haben kann? Habe etwas mit "float" rum probiert, aber das funktioniert noch nicht, zum einen packt er das 2te Element nicht rechts direkt an das vorhergehende, sondern mit einen großen Abstand, zum anderen richtet er sich nach der unten Höhere des Vorhergehend Elementes (soll aber an der oberen Kante orientiert werden, weil das zweite Element kleiner ist)

Hoffe konnte erklären was ich meine :)

Grüße
Dom
 
Zuletzt bearbeitet:
Die float-Methodik ist im Prinzip schon richtig gewählt, um DIV-Elemente nebeneinander anzuordnen.

Warum es bei dir nicht wie gewünscht funktioniert, lässt sich ohne Einblick in den kompletten HTML- und CSS-Code schwer beantworten, deshalb zeig doch bitte mal den vollständigen Quelltext.
 
Guten Morgen zusammen,

ich hab nun ein bisschen noch gebastelt, jetzt stellt er das Element zwar nebeneinander dar, allerdings richtet er das zweite Element links aus.

Vollständiger Code:

HTML
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta http-equiv="Content-Language" content="de">
    <title>Style Site</title>

    <link rel="stylesheet" href="pic\style.css"
          type="text/css" title="DD Style" />

  </head>
  <body>


<div id="linksobenkopf"></div>
<div id="contentlinksoben"></div>
<div id="hand"></div>


  </body>
</html>

und das

CSS
(nur der benötigte Code:)
Code: 
#linksobenkopf
 {
   background-image:url(lins_oben.jpg);
   height:161px;
   width:200px;
   float:left;
   position:relative;
 }
 
 #hand
 {
      background-image:url(schuss_hand.jpg);
      height:48px;
      width:293px;
      float: none;
      clear: both;

 }

 #contentlinksoben
 {
   background-image:url(conten_links_oben.jpg);
   width:104px;
   height:102px;
   float:right;
   left: 1px;
   position:relative;
 }

das "#contentlinksoben" wird nun zwar richtig neben dem #linksobenkopf angezeigt, aber er richtig sich am rechten rand aus...hoffe nun kann mir jemand helfen

Wenn ich die Position auf "absolut" stelle und dann die Angaben in Prozent oder px mache, stellt er die zwar entsprechend da, aber leider im IE und Opera nicht gleich. Zudem kann das doch auch nicht die Lösung sein, ich hab die Bilder doch exakt passend ausgeschnitten, da muss es doch möglich sein diese einfach nebeneinadern darzustellen :(

Mfg
Dom
 
Wenn die beiden DIVs #linksobenkopf und #contentlinksoben nebeneinander angeordnet sein sollen, dann versuche es mal mit folgendem CSS-Code:

Code: 
#linksobenkopf
 {
   background-image:url(lins_oben.jpg);
   height:161px;
   width:200px;
   float:left;
   margin-right: 0 !important; /* Für nicht-IE-Browser */
   margin-right: -3px; /* Für IE */
 }

#contentlinksoben
 {
   background-image:url(conten_links_oben.jpg);
   width:104px;
   height:102px;
 }

#hand
 {
      background-image:url(schuss_hand.jpg);
      height:48px;
      width:293px;
      clear: left;
 }
 
Hi Hi,

für den IE hat das hervorragend geklappt, bei Opera hingegen finde ich das zweite Bild Element nicht, was er nebeneinander darstellen sollte :D

Opera Version 8.01

Aktualisierte Dateien:
HTML
CSS

Danke schon mal für deine Hilfe !

Mfg
Dom
 
Zuletzt bearbeitet:
Habe deine Seite eben mit Opera 8.5 getestet und wie mir scheint, werden alle Grafiken angezeigt.
 
HiHi...

jetzt hat er es bei mir auch *amkopfkratz* vielleicht ausversehen eine alte Version geöffnet :rolleyes: . Wo du schon mal da bist: Ich hab generell ein kleines Problem zwischen IE und Opera mit der Größe meiner Webseite. Opera reserviert viel mehr Platz für Symbolleisten und die Menüs, sodass der der Bereich der zur Darstellung der Webseite ein ganzes Stück kleiner ist als im IE. Ist es dann besser die Größenangaben in Prozent zu machen? Oder wie bekomme ich meine Webseite auch im Opera auf "eine Seite"?

Mfg
Dom
 
michaelsinterface hat gesagt.:
Sorry, meine Mittagspause ist schon wieder vorbei und ich bin auf dem Weg zurück ins Office ;)
Zum Vergrößern anklicken....

Oki, eilt ja nicht :D kannst ja mal ein paar Worte zu den Größen-Unterschieden Opera-IE sagen, oder wie man die am besten Handhabt, wenn du mal ein wenig Luft hast

Danke schon mal
Dom
 
Guten Tag zusammen,

1 Problem und 1ne Frage :)

1Problem. Ich verzweifel gerade an meinem LieblingsBrowser :D Ich hab ne "schöne" (nicht ganz perfekt, aber ich bin schon mal zufrieden, ist ja auch meine erste...) CSS-Datei geschrieben, die im IE passt, da ich die Datei auf den IE angepasst habe, wollte ich nun für alle anderen Browser (erst mal Global, ich weiss das es da auch wieder Unterschiede gibt) eine seperate Datei machen, getestet habe ich mit Opera...und ich Verzweifel :D

Webseite
CSS

nun zwei Seperate StyleSheets für IE und Opera sind geplant. Aber ich bekomm es nicht hin die CSS-Datei die im IE sauber funktioniert, für Opera um zu schreiben, im Grunde sieht der Fehler nicht so Wild aus. Rechts oben fehlt ein Element und über der Hand sollte der Strich weiter nach oben gehen (keine Ahnugn wo die Elemente hin sind ) und die linke Linie, die die Figur unterbricht, sollte eigentlich neben dem Körper dargestellt werden.

und eine Frage: Wie richte ich den gesamten Inhalt den ich jetzt gebastelt habe, zentriert auf dem zur verfügung stehenden Platz aus?

Mfg
Dom
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück