Autor |
Nachricht |
mchl
Threadersteller
Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Mo 28.01.2008 22:23
Titel Content-Div richtig platzieren |
|
|
aloha,
ich wende mich mal an euch mit einem wahrscheinlich relativ simplen problem, aber ich bekomme es einfach nicht hin. dazu gesagt sein sollte auch noch, dass das mein erstes homepageprojekt ist.
auf folgender seite bekomme ich meinen content einfach nicht an die richtige stelle. der schwebt irgenwo im rechten oberen bereich rum. was habe ich falsch gemacht?
kann mir jemand helfen?
link: []
vielen dank schonmal.
es.ka
[edit by Nimroy]
Titel geändert.
Zuletzt bearbeitet von mchl am Do 18.12.2008 12:18, insgesamt 2-mal bearbeitet
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst Mo 28.01.2008 23:44
Titel
|
|
|
Hi,
also erstmal Kompliment zum ansprechenden Design und der Tatsache dass Du versucht das Layout mit css umzusetzen.
Und genau hier liegt aus meiner Sicht das Problem. Du versuchst es, lässt aber nicht von althergebrachten Methoden ab.
Beispielsweise frage ich mich, warum du die "content-box" unterteilst (content_box und main_visual) und die Bilder per img-Tag hinein lädst.
Mache doch einfach eine große content Box und setze das Bild mit dem background-image Befehl von css hinein. Das hat den charmanten Vorteil, dass Du den Text (also den content) einfach in die Content box packen kannst. Wie er dann aussieht (Abstand, Schriftart, Schriftgröße, etc.) kann Du dann über css steuern.
Hab wirklich nur rudimentär für die content_box zusammengehauen, aber wer weiß, vielleicht hilfts ja....
*Ach ja, und ich würde das Stylesheet separat speichern....
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kisybeco.de</title>
<meta name="keywords" content="Systemisches Coaching, Psychologische Lernberatung">
<meta name="author" content="Pascale Jenny">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#content_ {
position:absolute;
left:170px;
top:82px;
width:387px;
height:414px;
}
#Tabelle_01 {
position:absolute;
left:0px;
top:0px;
width:990px;
height:570px;
}
#logo_ {
position:absolute;
left:0px;
top:0px;
width:989px;
height:82px;
}
#Slice_ {
position:absolute;
left:989px;
top:0px;
width:1px;
height:570px;
}
#btn-home-01_ {
position:absolute;
left:0px;
top:82px;
width:170px;
height:27px;
}
#content-box_ {
position:absolute;
left:170px;
top:82px;
width:472px;
height:425px;
background-image: url(/Bilder/content_box.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
margin: 0px;
}
#Tabelle_01 #content-box_ ##content {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 20px;
position: relative;
}
#main-visual-01_ {
position:absolute;
left:642px;
top:82px;
width:347px;
height:425px;
background-image: url(/Bilder/main_visual_01.jpg);
}
#btn-arbeit-01_ {
position:absolute;
left:0px;
top:109px;
width:170px;
height:20px;
}
#btn-coaching-01_ {
position:absolute;
left:0px;
top:129px;
width:170px;
height:20px;
}
#btn-jobcoaching-01_ {
position:absolute;
left:0px;
top:149px;
width:170px;
height:20px;
}
#btn-stress-01_ {
position:absolute;
left:0px;
top:169px;
width:170px;
height:34px;
}
#btn-lernberatung-01_ {
position:absolute;
left:0px;
top:203px;
width:170px;
height:34px;
}
#btn-person-01_ {
position:absolute;
left:0px;
top:237px;
width:170px;
height:20px;
}
#btn-anmeldung-01_ {
position:absolute;
left:0px;
top:257px;
width:170px;
height:20px;
}
#btn-anfahrtl-01_ {
position:absolute;
left:0px;
top:277px;
width:170px;
height:21px;
}
#btn-kontaktl-01_ {
position:absolute;
left:0px;
top:298px;
width:170px;
height:20px;
}
#floral_ {
position:absolute;
left:0px;
top:318px;
width:170px;
height:189px;
}
#footer_ {
position:absolute;
left:0px;
top:507px;
width:989px;
height:63px;
}
body
{
background-image:url(Bilder/bg.gif);
background-repeat:repeat-x;float:left;"}
-->
</style>
</head>
<body style="background-color:#FFFFFF;">
<div id="Tabelle_01">
<div id="logo_"></div>
<div id="Slice_">
<img id="Slice" src="Bilder/Slice.jpg" width="1" height="570" alt="" />
</div>
<div id="btn-home-01_">
<a href="index.html" target="index.html">
<img id="btn_home_02.gif" src="Bilder/btn_home_02.gif" width="170" height="27" border="0" alt="Home" /></a>
</div>
<div id="content-box_">
<p style="margin-top:5px;">
<div id="#content">
<p>Hier kommt der echte content hin </p>
<p>Home<br />
In meiner Praxis als Coach, Mentor und Lernberaterin haben sich vor allem Methoden aus dem systemischen Ansatz, der Kinesiologie und dem NLP be währt. <br />
Ich coache und arbeite systemisch, ganzheitlich. Sie erhalten von mir keine guten Ratschläge. Ich leite Sie an, die für Sie ric htigen Antworten s elbst zu finden. Dabei führe ich Sie ebenso feinfühlig wie intensiv.<br> <br />
Es ist Teil meines Könnens, die tieferen Zusammenhänge in Ihrem Leben zu erkennen und Ihnen bewusst zu machen: zwischen Ihrem Denken, Fühlen und H andeln, Ihren Erlebnissen, Problemen oder Zielen.<br />
Sie alleine sind die Expertin / der Experte aus dessen Ressourcen wir schöpfen.Sie sind die Kapitänin / der Kapitän auf dem Schiff und ich die Lot sin, die Sie für einige Zeit begleitet!. <br />
</p>
<p> </p>
<p> </p>
</div>
</div>
<div id="main-visual-01_"></div>
<div id="btn-arbeit-01_">
<a href="arbeit.html" target="arbeit.html">
<img id="btn_arbeit_01" src="Bilder/btn_arbeit_01.gif" width="170" height="20" border="0" alt="wie arbeite ich" /></a>
</div>
<div id="btn-coaching-01_">
<a href="coaching.html" target="coaching.html">
<img id="btn_coaching_01" src="Bilder/btn_coaching_01.gif" width="170" height="20" border="0" alt="coaching mentoring" /></a>
</div>
<div id="btn-jobcoaching-01_">
<a href="jobcoaching.html" target="jobcoaching.html">
<img id="btn_jobcoaching_01" src="Bilder/btn_jobcoaching_01.gif" width="170" height="20" border="0" alt="lernberatung" /></a>
</div>
<div id="btn-stress-01_">
<a href="stress.html" target="stress.html">
<img id="btn_stress_01" src="Bilder/btn_stress_01.gif" width="170" height="34" border="0" alt="anmedung" /></a>
</div>
<div id="btn-lernberatung-01_">
<a href="lernberatung.html" target="lernberatung.html">
<img id="btn_lernberatung_01" src="Bilder/btn_lernberatung_01.gif" width="170" height="34" border="0" alt="info" /></a>
</div>
<div id="btn-person-01_">
<a href="person.html" target="person.html">
<img id="btn_person_01" src="Bilder/btn_person_01.gif" width="170" height="20" border="0" alt="" /></a>
</div>
<div id="btn-anmeldung-01_">
<a href="anmeldung.html" target="anmeldung.html">
<img id="btn_anmeldung_01" src="Bilder/btn_anmeldung_01.gif" width="170" height="20" border="0" alt="" /></a>
</div>
<div id="btn-anfahrtl-01_">
<a href="anfahrt.html" target="anfahrt.html">
<img id="btn_anfahrtl_01" src="Bilder/btn_anfahrtl_01.gif" width="170" height="21" border="0" alt="" /></a>
</div>
<div id="btn-kontaktl-01_">
<a href="kontakt.html" target="kontakt.html">
<img id="btn_kontaktl_01" src="Bilder/btn_kontaktl_01.gif" width="170" height="20" border="0" alt="" /></a>
</div>
<div id="floral_">
<img id="floral" src="Bilder/floral.gif" width="170" height="189" alt="" />
</div>
<div id="footer_">
<img id="footer" src="Bilder/footer.jpg" width="989" height="63" alt="" />
</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von intelli am Mo 28.01.2008 23:45, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
mchl
Threadersteller
Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Di 29.01.2008 18:58
Titel
|
|
|
hey, vielen dank schonmal!!! wurde bei dir die seite mit dem code korrekt angezeigt? bei mir verschiebt es die divs immernoch.
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst Di 29.01.2008 19:00
Titel
|
|
|
Welchen Browser benutzt Du denn und welche div werden verschoben?
|
|
|
|
|
mchl
Threadersteller
Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Di 29.01.2008 20:22
Titel
|
|
|
anbei ein screenshot.
ich benutze firefox und safari
Zuletzt bearbeitet von mchl am Di 29.01.2008 20:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
intelli
Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht:
|
Verfasst Di 29.01.2008 20:47
Titel
|
|
|
Ein Slash zuviel im url-Tag für background-image. es muss
background-image: url(Bilder/content_box.gif);
und
background-image: url(/Bilder/main_visual_01.jpg);
sein...
|
|
|
|
|
DaMasdR
Dabei seit: 22.11.2007
Ort: Stebbach
Alter: 37
Geschlecht:
|
Verfasst Mi 30.01.2008 08:21
Titel
|
|
|
hi!
dein problem hat sich ja scheinbar erledigt, von meiner seite aus noch ein tipp:
am "logischsten" wäre es, wenn du den css-code in eine eigene css datei auslagern würdest so wie intelli das
auch schon vorgeschlagen hat. das machst du indem du eine .css datei anlegst z.b. "main.css"
dann fügst du in den <head>-teil folgendes noch ein
<link rel="stylesheet" href="main.css" media="screen, projection">
unter "href" musst du den pfad halt noch anpassen wenn du die css datei in einen eigenen ordner anlegst.
vermutlich arbeitest du an der seite noch, aber ich will es trotzdem noch schnell sagen: ich würde
es tunlichst lassen beim klicken im hauptmenü ständig neue fenster zu öffnen, das nur nebenbei bzgl
der usability. das sollte in der finalen version nicht so sein
mfg
|
|
|
|
|
mchl
Threadersteller
Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht:
|
Verfasst Mi 30.01.2008 17:35
Titel
|
|
|
vielen dank euch beiden
das css werde ich auf jeden fall noch auslagern und ja, an der seite werde ich mich noch ne weile austoben.
noch 2 kleine fragen
wieso öffnen die link in einem neuen fenster? war nicht ganz so geplant. und mein bg wir mir leider aich nicht mehr angezeigt, obwohl im im quelltext nichts verändert habe. was ist da passiert?
wünsch noch einen schönen abend.
grüßle es.ka
|
|
|
|
|
|
|
|
Ähnliche Themen |
[css] content mittig platzieren/ausrichten
Content Editing, statt Content Management
[CSS] content und before
Change Content
content scrollbar
Multi Content Tab
|
|