mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:44 Benutzername: Passwort: Auto-Login

Thema: Bild und Text mit CSS positionieren vom 07.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bild und Text mit CSS positionieren
Seite: 1, 2  Weiter
Autor Nachricht
daria444
Threadersteller

Dabei seit: 27.12.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 07.07.2009 14:03
Titel

Bild und Text mit CSS positionieren

Antworten mit Zitat Zum Seitenanfang

Hallo, ich würde gerne einen Textblock und ein Bild ordentlich mit CSS nebeneinander anordnen.

Dabei soll der Bild aber eine andere Höhe als der Text haben. Hier kann man das ganze sehen:

[url=http://equinox-training.de/test/index.html ]Equinox Testseite[/url]

Das Bild wechselt pro Seite. Am tollsten wäre es man könnte das Bild über den oberen Teil und das Menü platzieren.
Im Layout ist auch ein Bild vorgesehen, bei der ein Pferdekopf von oben reinragt.
Ich weiß aber nicht wie.
Als Kompromiss habe ich die Bilder mit float:right im Textbereich positioniert. Wie bekomme ich das Bild denn auf eine Höhe mit dem weißen Feld?

Ich hoffe es ist nicht alles viel zu unübersichtlich und danke schon mal für die Antworten!!
Viele Grüße,
daria444

Das CSS sieht so aus:
Code:

@charset "UTF-8";


/*=============================================================
   1. Kalibrierung und allgemeine Styles
===============================================================

/* Kalibrierung der wichtigsten Abstände*/

* { padding: 0; margin: 0; }
/* Abstand nach unten */
h2, p, ul, ol { margin-bottom: 1em; }

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li { margin-left: 1em; }

/* Allgemeien Selektoren */


body { /*Gestaltet das HTML-Element mit dem Namen body*/
   color: white; /*Schriftfarbe*/
   background-color: #FFE8D5;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: small;
}
h1 { font-size: 130%; }
h2 { font-size: 110%; }

address {
   text-align: center;
   font-size: 80%;
   font-style: normal;
   letter-spacing: 2px;
   line-height: 1.5em;
}
/* Hyperlinks allgemein*/

a { text-decoration: none; outline: none; }

a:link { color: #484848;}
a:visited { color: #484848;}

a:hover,
a:focus {
   border-bottom: 1px solid #fe7400;
}

a:active {
   color: white;
   background-color: #fe7400;
}
/* Allgemeine Klassen und IDs */



#logo {
   background-color: white;
   padding: 20px;
   border: 5px solid #d9d9d9;
}
/* ==========================================================
   2. Styles für Layoutbereiche
   ========================================================== */
   
#wrapper {
   color: black;
   background-color: white;
   width: 755px;
   height: 680px;
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto; /* Breite des Inhaltsbereichs */
}

#kopfbereich {
   position: relative; /* positioniert, aber bleibt im Fluss */
   color: white;
   background: #ffffff repeat-y top left;
   padding: 30px 0 50px 0;
}
#navibereich {
   background-color:#dedddd;
   font-size: 80%;
   padding: 5px 20px 5px 20px;
}
#navibereich ul {
   margin-bottom: 0;
}
#navibereich li {
   display: inline;
   list-style-type: none;
   margin: 0 40px 0 0;
}
#navibereich a:hover,
#navibereich a:focus,
#startseite #navi01 a,
#conceptseite #navi02 a,
#seminairesseite #navi03 a,
#datesseite #navi04 a,
#temoignagesseite #navi05 a,
#contactseite #navi06 a {
   color: #484848;
   background-color: #f2f2f2;
   
}
#navibereich a {
   color: #484848;
   background-color: #e1e1e1;
   padding: 4px 4px 4px 4px;
}
#textbereich {
   font-size: 80%;
   width: 250px;
   height: 200px;
   margin-top: 40px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: 20px;
   padding: 0px 0px 0px 0px;
}
#textbereich a:hover,
#textbereich a:focus {
   border-bottom: 1px solid #d90000;
}
#bildrechtsstart {
   float:right;
   width: 344px;
   height: 450px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding: 0px 0px 0px 0px;
}   
#bildrechtsconcept {
   float:right;
   width: 275px;
   height: 515px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 200px;
   padding: 0px 0px 0px 0px;
}   
#fussbereich {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 20px;
   padding-left: 20px;
   border-top: 1px solid #8c8c8c;
   margin-top: 20px;
}


[edit kash: Verschoben von Programmierung -- HTML/CSS sind keine Programmiersprachen]
[Bitte CODE Tags verwenden]


Zuletzt bearbeitet von Kash am Di 07.07.2009 15:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Di 07.07.2009 14:22
Titel

Antworten mit Zitat Zum Seitenanfang

link funzt ned
  View user's profile Private Nachricht senden
Anzeige
Anzeige
daria444
Threadersteller

Dabei seit: 27.12.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 07.07.2009 15:18
Titel

Antworten mit Zitat Zum Seitenanfang

Hubbs, entschuldigung!

http://www.equinox-training.fr/test/index.html
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 07.07.2009 15:22
Titel

Re: Bild und Text mit CSS positionieren

Antworten mit Zitat Zum Seitenanfang

daria444 hat geschrieben:
Am tollsten wäre es man könnte das Bild über den oberen Teil und das Menü platzieren.
Im Layout ist auch ein Bild vorgesehen, bei der ein Pferdekopf von oben reinragt.
Ich weiß aber nicht wie.


ääääh... zeig doch mal dieses besagte layout... macht sicher einiges einfacher *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
daria444
Threadersteller

Dabei seit: 27.12.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 07.07.2009 15:27
Titel

Antworten mit Zitat Zum Seitenanfang

hier mal eine Unterseite:
Layouthttp://www.equinox-training.fr/test/layout.jpg
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 07.07.2009 15:45
Titel

Antworten mit Zitat Zum Seitenanfang

http://css.maxdesign.com.au/floatutorial/

Um beide Elemente in einen "Fluß" zu bekommen, musst du auch beide Elemente mit einer Float Eigenschaft versehen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 07.07.2009 16:27
Titel

Antworten mit Zitat Zum Seitenanfang

daria444 hat geschrieben:

Layout


da würd ich knall hart absolute positionieren... zack Grins
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 07.07.2009 16:30
Titel

Antworten mit Zitat Zum Seitenanfang

pixelpapst303 hat geschrieben:
daria444 hat geschrieben:

Layout


da würd ich knall hart absolute positionieren... zack Grins


Gar nicht gesehen, ja, da hat der Pixelpapst wohl Recht …
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [css] Positionieren von Text auf Grafiken *help*
Photoshop Text genau positionieren
Bild exakt Positionieren
Photoshop: Textschrift um Bild herum positionieren
wie kann man ein bild "rechts unten" positionieren?
bild aus text?
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.