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 |
|
|
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
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Di 07.07.2009 14:22
Titel
|
|
|
link funzt ned
|
|
|
|
|
Anzeige
|
|
|
daria444
Threadersteller
Dabei seit: 27.12.2004
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 07.07.2009 15:22
Titel Re: Bild und Text mit CSS positionieren |
|
|
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
|
|
|
|
|
daria444
Threadersteller
Dabei seit: 27.12.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 07.07.2009 15:27
Titel
|
|
|
hier mal eine Unterseite:
Layouthttp://www.equinox-training.fr/test/layout.jpg
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 07.07.2009 16:27
Titel
|
|
|
daria444 hat geschrieben: |
Layout |
da würd ich knall hart absolute positionieren... zack
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 07.07.2009 16:30
Titel
|
|
|
pixelpapst303 hat geschrieben: | daria444 hat geschrieben: |
Layout |
da würd ich knall hart absolute positionieren... zack |
Gar nicht gesehen, ja, da hat der Pixelpapst wohl Recht …
|
|
|
|
|
|
|
|
Ä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?
|
|