• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Css Bild psoitionieren

J

jumbo125

Mitglied
Sehr geehrte User,

als völliger Css neuling benötige ich eure Hilfe.

ich habe eine Tabelle, welche in der Mitte scrollbar ist. In der Scrollbaren Zelle, möchte ich in der rechten unteren Ecke ein Bild fixieren. Dieses sollte beim scrollen fixiert bleiben, d.h. nicht mitscrollen.

Nun könnte ich es mit position:fixed fixieren oder anhand eines Elementes mit position:absolute ausrichten.

Jetzt das Problem:
FIXED-METHODE: Nehme ich FIXED, muss ich eine Pixelangabe eingeben, um das Bild richtig zu positionieren. Geht nun jemand mit einer anderen Bildschrimauflösung auf meine Webseite, ist das Bild verschoben.
ABSOLUT-Methode: Kann man das Bild an einer Tabellenspalte ausrichten?

Hier ein Code Beispiel(zwar nicht der Originale, aber vom Konzept her gleich):
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">       
    <meta name="generator" content="PSPad editor, www.pspad.com">       
    <title>Beispiel     
    </title>       
<style type="text/css">
.scroll { 
width: 100%; 
height: 720px; 
padding:10px;
overflow:scroll; 
}
</style> 
    
  </head>     
  <body>              
    <table border ="2" width="950px" height="950px"">      
      <tr>        
        <td rowspan="3" width="140px" height="180px">Seite</td>           
        <td colspan="2" height="180px">Top</td>        
        </tr <tr>        
        <td colspan="2" height="720px" width="810px">          
          <div class="scroll">Mitte              
            <br>hier soll das Bild rein und zwar in der rechten unteren ecke             
            <br>Text              
            <br> Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text              
            <br>Text                      
          </div></td>      
      </tr>      
      <tr>        
        <td colspan="2" height="50px">unten</td>    
    </table>     
  </body>
</html>

und noch ein Bild, für einen bessern Durchblick:
Unbenannt-1.jpg

Danke
 
Für den Einstieg reichen <div> und <p> als Blockelemente. Dort kannst du deine Texte und Bilder ablegen. Das Design wird ausschließlich über CSS gemacht.

Um dein Bild in der rechten unteren Ecke zu platzieren, könntest du position:absolute in Verbindung mit den Attributen bottom und right verwenden.
 
danke für deine Antwort. Werde das ganze mal probieren. HTML hatte ich vor ca. 4 Jahren mal im Slebststudium glerent(Die Webseite gibts schon lange nicht mehr). Kurzfristig dann actionscript(, vor ca. 4 Jahren, zu mühsam, kann nicht zeichen, Editor nicht leistbar - für meine zwecke). 2-3 Monate Pause, plötzlich Lust auf PHP bekommen.
3,5 Jahre pause, nichts mit Webseiten am Hut. vor ca. 5 Monaten nahm ich einen "Webseiten" programm, welches mir das Layout anlegte und programmierte PHP(was das Zeug hält - für meine Verhältnisse :wink: ). Da merckte ich schon, dass dieses Programm 100 Tabellen anlegte und unzählige css daten/klassen. Daher dachte ich mir, selbst ein wenig css zu lernen
 
Nimm einfach als Faustregel, dass HTML-Elemente frei schwebend sind und ihre Position durch den Abstand zueinander festlegen. Ein Tabellengerüst, mit dem sie quasi festgenagelt würden, gibt es nicht mehr, bzw. führt zu solchen Problemen, wie du sie im Eingangspost geschildert hast.
 
ich kämpfe regelrecht mit dem css :cry:

es ist wahnsinnig schwer, solch eine Tabelle nachzumachen...... Es muss jedoch eine sein, da in jeder dieser Spalte ein backround-image(mittels css) eingefügt wäre.

nun stehe ich vor dem Problem, vier Bilder zu haben, welche jeweils nebeneinader platziert gehören(ohne Abstand dazwischen). Das ganze dann noch untereinader...

Das schwierigste ist jedoch, die definierten classen im html code einzubinden. Da die Bilder nebeneinader sein müssen, kann ich kein <p> nehmen. schreibe ich <span class=".."></span> wird das Bild nicht angezeigt, obwohl ich dessen größe definiert habe, weil kein Text vorhanden ist.

wird noch ne lange nacht werden
 
Willst du nun scr oder background-images anzeigen?

Bei background-images benötigen Blockelemente Angaben für width und height, Inline-Elemente zusätzlich noch ein display:block. Komm von dem Tabellenansatz weg, damit machst du es dir nur schwerer.

Selbst wenn CSS auf den ersten Blick simpel aussieht, lässt es sich nicht in einer Nacht erlernen. Insofern kannst du die Session heute auch beenden und morgen weitermachen. ;)
 
Danke nochmals für deine Hilfe. Sehr gute Ide, funktioniert besser als zuvor und hat noch ein paar postive extras. Leider habe ich nun unzählige Container, da ich alle Bilder in div's angeordnet habe. bin heute um 2:00 morgens fertig geworden^^ (+passende Bilder im Photoshop Elements zu erstellen - nur zum testen). Trotzdem bräuchte ich nochmals deine Hilfe, um etwas zu realisieren.

ich habe einen Bildcontainer, indem mehrere Bilder nebeneinader angeordnet sind
Code: 
.bildcontainer: {
width: 420px;
  margin-left: auto;
  margin-right: auto;
  visibility: visible;
  height: 50px;
}

.bild1{ 
margin: 0px;  background-image: url(bild1.jpg);
  width: 140px;
  height: 50px;
  float: left;
}
.bild2 {
margin: 0px;
  background-image: url(bild2.jpg);
  width: 140px;
  height: 50px;
  float: left;
}
.bild3 {
margin: 0px;
  background-image: url(bild3.jpg);
  width: 140px;
  height: 50px;
  float: left;
}
<div class="bildcontainer">
<div class="bild1" ></div>
<div class="bild2" ></div>
<div class="bild3" ></div>
</div>
</div>

Nun meine Frage, ich würde gerne bei hover einen "neuen weißen Bereich", bzw. ein weißes Feld unterhalb dieses Buttuons erscheinen lassen.

würde so aussehen:
Code: 
.bild1:hover {
(direkt unter dem bild) background-image: (neuesFeld.jpg);
width: 400px;
height: 500px;
position:relativ;
(und als draufgabe, möchte ich auf diesen weißen Bereich schreiben können)
}
ist das machbar.


wie bei diesem (orangenen) Dropwdownfeld. Nur eben das keine Links erscheinen.

Ich war bereits soweit, das dieses weiße Feld erschien, genau wie bei dem Dropdownmenü, ABER das "Dropdownmenü" ist immer GLEICH breit, wie das Bild(Menü1, im Beispiel). Ich hätte gerne, das das Bild 140px breit ist und das Dropdownfeld 300px(oder mehr), wobei das 140px Bild, exakt gleich groß bleiben soll.
 
noch besser gesagt, es soll genau so aussehen wie bei dem Button: "thema durchsuchen", HIER im Forum.

Man klickt darauf und das Feld, welches erscheint, ist breiter als der Button. Nur eben will ich nicht draufklicken sondern bei hover diesen Effekt erzielen
 
Was Du beschreibst ist das simple Einblenden eines vorher unsichtbaren Bereiches im HTML-Code. Das geschieht (heutzutage noch) meist per JavaScript, nicht per CSS.

Beispiel:
HTML: 
<a href="#" onclick="einblenden();">öffne mich</a>
<p id="unsichtbareselement" style="display: none;">Das hier sieht man erst nach Anklicken</p>

Die Funktion einblenden() setzt für die ID "unsichtbareselement" den CSS-Wert von "display" auf "block", wodurch dieser dann eingeblendet wird. Darauf aufbauend kann man das Einblenden (und auch das Ausblenden) per CSS so gestalten wie man es eben will.
 
eine eltzte farge hätte ich noch, zum thema positionieren. Und zwar overflow:hidden.

Wenn ich einen container mit einer maximal höhe von 50px schreibe und darin ein bild positioniere mit einer höhe von 200pixel, sollte dieses doch auf 50px abgeschnitten werden? oder?

hier das beispiel:(# menuleiste und #menu5 sind wichtig, die anderen sind nur nebensächlich):
Code: 
  <title></title>
  <style type="text/css">
  body{
  background-color: black;
  }
  
  #menuleiste{
width:950px;
height: 50px;
position: relative:
overflow: hidden;
}


.menustil{
text-align: center;
font-size: 20px;
color: white;
text-decoration:none;
padding-top: 15px;
}


#menu {
width: 950px;
height: 50px;
right:50%; 
margin-right:-475px;
position:fixed;
top:140px;
      }
      
#menu1 {
background-image: url(style/aufbau/menu1.png);
width: 140px;
height: 50px;
float: left;
margin:0px 0px;
}


 
#menu2 {
display: block;
position:relativ;
background-image: url(style/aufbau/menu2.png);
width: 140px;
height: 50px;
float:left;
margin:0px 0px;
}






#menu3 {
display: block;
background-image: url(style/aufbau/menu3.png);
width: 140px;
height: 50px;
float: left
}






#menu4 {
display: block;
background-image: url(style/aufbau/menu3.png);
width: 140px;
height: 50px;
float: left
}


#menu5 {
background-image: url(style/aufbau/menu5.png);
width: 390px;
height: 500px;
float: left;
}




</style>
  </head>
  <body>
        <div id="menuleiste">
  <div id="menu1"><div class="menustil"></div></div>
  <div id="menu2"><div class="menustil"><a href="index.html">Home</a></div></div>
  <div id="menu3"><div class="menustil"><a class="menustil" href="gaestebuch.html">Gästebuch</div></a></div>
  <div id="menu4"><div class="menustil"><a class="menustil" href="kontakt.html">Kontakt</a></div></div>
  <div id="menu5">
  </div>
  </div>
  </body>

danke. Ich verspreche auch, das dies meine letzte Frage sein wird
 
Meinst du damit deine Hintergrundbilder? Da Du das Menü fixiert positionierst, wird overflow imho nicht beachtet.

Allerdings ist das auch kein Menü was Du da hast. Ein Menü definiert man per <ul>-Liste, nicht mit einer div-Wüste.
 
Danke, Danke, Danke

ihr seid alle derart nett und hilfsbereit. Da ich beruflich nichts mit dem ganzen zu tun habe und mein freundeskreis ebenfalls nicht damit konfrontiert ist, sind solche foren und das WWW meine einzigen Anlaufstelle. oftmals ist es schwer "genau" sein problem mittels den www zu lösen, voralem wenn man sich neu damit beschäftigt. Daher entschuldige ich mich bzw. hoffe das es keine Umstände bereite, falls ich unbrauchbare themen eröffne oder wegen basics einen rießen aufstand bereite.

Trotzdem wollte ich noch etwas fragen. Leider musste ich meine Seite nochmals völlig neu strukturieren und stoße abermals an meine Grenzen. Folgendes:
wie bereits erwähnt, möchte ich bilder darstellen(ähnlich einen mosaik/puzzle).
die methode, eine tabelle anzufertigen wurde mir nicht empfohlen(s. 2 beitrag)

jetzt fertigte ich die bilder mittels float nebeneinander. Das sah so aus:
ich erstelle pro bilderzeile(es sind mehrere bilder untereinander)eine ID, mit den angben der gröe(länge und breite) sowie der ausrichtung(zentriert). darin fügte ich dann die einzelnen bilder ein. danach erstellte ich wieder eine "haupt"ID, für die zweite zeile. darin waren dann die bilder, der zweiten zeile. usw(wie bei einen panorama)

NUN benötigte ich alle bilder in einen container, d.h. die container, welche jede neue zeile defienierten wurden enfernt und es wurde ein HAUPT- container erstellt, welcher die Länge und Höhe des gesamten Mosiks definierte UND ZENTRIERT WURDE. D.h. die höhe und Breite aller zeilen summiert. für jede neue zeile, schrieb ich "<br.."

die bilder positionierte ich mit fixed, WEIL bei relative und absolute die bilder je nach auflösung sich verschieben. D.h. bei einer auflösund von 1920x.... passt alles, wobei bei einer auflösung von 1024x768 die bilder irgendw verteilt sind(hat ja nicht ein jeder die gleiche auflòsung zu hause.

DENKFEHLER? ich dachte, wenn mein code so aussieht:
Code: 
<div id="mosaik"> // gesamtes bild
<div id="bild1"></div> <div id="bild2"></div> //neue zeile, da nächstea bild unterhalb
<br>
<div id="bild3"></div> usw....

orientieren sich die einzelnen bilder, an dem bereich der "HAUPT"-klasse(mosaik).
das funktioniert aber nicht. gebe ich beim #bild1 position:fixed top0px usw. ein, davhte ich es würde am obersten rand vom Hauptcontainer(mosaik) sein. stattdessen ist es iegendwo. schreibe ich left:0px, ist es nicht am linken rand des mosaik containers, sondern irgendwo.

hatt jemand eine idee ider kann mich aufklären?
 
Stimmt nicht ganz. "position: absolute;" richtet das Element, dem diese Eigenschaft gegeben wird, an dem nächst höheren relativ positionierten Element aus. Wenn kein relativ positioniertes Element vorhanden ist, dann wird das html-Element des HTML-Dokumentes als Basis für die Positionierung genommen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben