mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:00 Benutzername: Passwort: Auto-Login

Thema: [CSS] DIV im DIV - Grafik rechts unten postionieren? vom 28.11.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] DIV im DIV - Grafik rechts unten postionieren?
Seite: 1, 2  Weiter
Autor Nachricht
nullhorn
Threadersteller

Dabei seit: 22.02.2006
Ort: Brend-City
Alter: 39
Geschlecht: Männlich
Verfasst Mi 28.11.2012 12:38
Titel

[CSS] DIV im DIV - Grafik rechts unten postionieren?

Antworten mit Zitat Zum Seitenanfang

Hi Leuz,

ich habe schon das große G bemüht, habe auch etliche Ergebnisse gefunden, aber alle führten nicht zum Ziel.
Ich möchte eine Grafik so positionieren, dass sie immer unten rechts in der Ecke steht, aber nicht in der Ecke des Bildschirmrands (also als Footer) sondern in der Ecke eines hori/vertikal zentrieren DIV.

Hier mal eine Grafik damit ihr euch was vorstellen könnt...



Ich habe es zwar schon geschafft, dass die Grafik unten rechts in der Ecke "hängt" allerdings war die Positionierung von der Menge des Inhaltes im weißen Bereich abhängig, der Text hat also die Grafik nach unten gedrückt. Ich will aber dass die Grafik immer unten klebt, egal wie viel oder wenig Text da steht.

Hier mal der Code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>kontakt</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="distance"></div>
<div id="content">
   <div id="navi">
      <a href="index.html"><img src="img/_navi/home.gif" alt="HOME"></a><br />
      <a href="kontakt.html"><img src="img/_navi/kontakt.gif" alt="KONTAKT"></a><br />
      <a href="leistungen.html"><img src="img/_navi/bereiche.gif" alt="LEISTUNGEN"></a><br />
   </div>
    <div class="kontakt">
      <p>
      <img src="img/kontakt/impressum.gif" alt="IMPRESSUM">
      </p>
      <br />
      <p>
      Angaben gemäß § 5 TMG.<br />
      Vertreten durch Florian Haaf<br />
      </p>
      <div id="hg"><img src="img/hg.gif" alt="hg"></div>
    </div>
</div>
</body>
</html>


Code:

body { margin:0; padding:0; background-color:#C0C0C0; }
div  { border:0px solid #888; }

* {
   margin: 0;
   border: 0;
   padding: 0;
}

html, body {
height: 100%;
width: 100%;
}

.kontakt {
border-left: solid 1px #C0C0C0;
padding-left: 25px;
width: 677px;
height:670px;
float:left;
margin-top:25px;
font-family: Helvetica, Arial;
}

#distance {
width: 0px;
height: 50%;
margin-bottom: -365px;
float: left;
background-color: #f00;
}
 
#content {
 margin: 0 auto;
 position:relativ;
 top:0px;
 left:0px;
 bottom:00px;
 right:0px;
 background-color:#FFF;
 width:1018px;
 height:695px;
 clear: left;
 }
 
#navi {
 padding-left:25px;
 padding-top:25px;
 border: solid 0px red;
 width: 289px;
 height:695px;
 float:left;
 }
 
 #hg {
 border: solid 1px red;
 width: 331px;
 height: 367px;
 float:right;
 }


Kann mir da ma jmd helfen?

Danke
Flo
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Mi 28.11.2012 12:57
Titel

Antworten mit Zitat Zum Seitenanfang

pack das ding als background image unten rechts positioniert ins entsprechende div
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mi 28.11.2012 13:00
Titel

Antworten mit Zitat Zum Seitenanfang

Hier mal vorgekaut:

Code:

...

.kontakt {
background: url(../img/hg.gif) no-repeat right bottom;

...
  View user's profile Private Nachricht senden
nullhorn
Threadersteller

Dabei seit: 22.02.2006
Ort: Brend-City
Alter: 39
Geschlecht: Männlich
Verfasst Mi 28.11.2012 13:19
Titel

Antworten mit Zitat Zum Seitenanfang

hey ho,

danke euch, okay hätte ich auf selbst drauf kommen können.
andererseits ist dass dann nicht gerade dynamisch aufgebaut oder?
weiß nicht ob ich da jetzt ein wenig komisch denke aber dann muss ich ja
bei jeder unterseite die eigenschaft der background-url hinterlegen.
also .kontakt, .leistungen, .impressum usw. usw.

andererseits ob ich das jetzt als eigenschaft in jeder Klasse hinterlege oder direkt in jedem Dokument als eigenständiges DIV ist ja auch wuscht Lächel

Danke schöN!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Mi 28.11.2012 13:30
Titel

Antworten mit Zitat Zum Seitenanfang

das komische bild is ja nu deutlich eyecandy, hat also im grunde im markup garnichts verloren.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
nullhorn
Threadersteller

Dabei seit: 22.02.2006
Ort: Brend-City
Alter: 39
Geschlecht: Männlich
Verfasst Mi 28.11.2012 13:48
Titel

Antworten mit Zitat Zum Seitenanfang

DEKONSTRUKTIV hat geschrieben:
das komische bild is ja nu deutlich eyecandy, hat also im grunde im markup garnichts verloren.


So DEKONSTRUKTIV, auch diese Aussage darfst du mir mal wieder erklären *g* Was meinst du mit "deutlich eyecandy" und was mit "markup" ?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mi 28.11.2012 14:15
Titel

Antworten mit Zitat Zum Seitenanfang

Was dekonstruktiv meint: Dieses Ding da rechts unten ist ein rein grafisches Element, Du kannst es nicht anklicken und damit in keinster Weise interagieren. Deshalb gehört es nicht in das Markup, welches auch z.B. für Screenreader den Inhalt und die semantische Stuktur der Seite abbildet.

und bei dieser Aussage

Zitat:
danke euch, okay hätte ich auf selbst drauf kommen können.
andererseits ist dass dann nicht gerade dynamisch aufgebaut oder?
weiß nicht ob ich da jetzt ein wenig komisch denke aber dann muss ich ja
bei jeder unterseite die eigenschaft der background-url hinterlegen.
also .kontakt, .leistungen, .impressum usw. usw.


fallen mir echt die Augen aus dem Kopp! Schon einmal was von Stylesheets gehört? Hast Du HTML in den 90ern gelernt und Dich seitdem nicht mehr weitergebildet?

edit: OK, oben sehe ich ein Stylesheet. Wo ist also das Problem * Keine Ahnung... *


Zuletzt bearbeitet von ChrisKam am Mi 28.11.2012 14:19, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Mi 28.11.2012 14:54
Titel

Antworten mit Zitat Zum Seitenanfang

nullhorn hat geschrieben:
und was mit "markup" ?


lass ma gut sein
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Platzierung v. Grafik oben rechts ohne <table>
Div will nicht rechts unter einer Grafik stehen
Flash Grafik per Mouseover nach links oder rechts bewegen
Flash- Bei Grafik-Mouseover soll Grafik vergrößert werden.
Navigationspunkte rechts
div 20px nach rechts
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.