mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 01:32 Benutzername: Passwort: Auto-Login

Thema: Content-Div richtig platzieren vom 28.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Content-Div richtig platzieren
Seite: 1, 2  Weiter
Autor Nachricht
mchl
Threadersteller

Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Mo 28.01.2008 22:23
Titel

Content-Div richtig platzieren

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
intelli

Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht: Männlich
Verfasst Mo 28.01.2008 23:44
Titel

Antworten mit Zitat Zum Seitenanfang

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&Atilde;&curren;hrt. <br />
Ich coache und arbeite systemisch, ganzheitlich. Sie erhalten von mir keine guten Ratschl&Atilde;&curren;ge. Ich leite Sie an, die f&Atilde;&frac14;r Sie ric   htigen Antworten s   elbst zu finden. Dabei f&Atilde;&frac14;hre ich Sie ebenso feinf&Atilde;&frac14;hlig wie intensiv.&lt;br&gt; <br />
Es ist Teil meines K&Atilde;&para;nnens, die tieferen Zusammenh&Atilde;&curren;nge in Ihrem Leben zu erkennen und Ihnen bewusst zu machen: zwischen Ihrem Denken, F&Atilde;&frac14;hlen und H   andeln, Ihren Erlebnissen, Problemen oder Zielen.<br />
Sie alleine sind die Expertin / der Experte aus dessen Ressourcen wir sch&Atilde;&para;pfen.Sie sind die Kapit&Atilde;&curren;nin / der Kapit&Atilde;&curren;n auf dem Schiff und ich die Lot   sin, die Sie f&Atilde;&frac14;r einige Zeit begleitet!. <br />
</p>
       <p>&nbsp;</p>
       <p>&nbsp;</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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
mchl
Threadersteller

Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Di 29.01.2008 18:58
Titel

Antworten mit Zitat Zum Seitenanfang

hey, vielen dank schonmal!!! wurde bei dir die seite mit dem code korrekt angezeigt? bei mir verschiebt es die divs immernoch.
  View user's profile Private Nachricht senden
intelli

Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht: Männlich
Verfasst Di 29.01.2008 19:00
Titel

Antworten mit Zitat Zum Seitenanfang

Welchen Browser benutzt Du denn und welche div werden verschoben?
  View user's profile Private Nachricht senden
mchl
Threadersteller

Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Di 29.01.2008 20:22
Titel

Antworten mit Zitat Zum Seitenanfang

anbei ein screenshot.
ich benutze firefox und safari



Zuletzt bearbeitet von mchl am Di 29.01.2008 20:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
intelli

Dabei seit: 08.12.2007
Ort: Bonn
Alter: 52
Geschlecht: Männlich
Verfasst Di 29.01.2008 20:47
Titel

Antworten mit Zitat Zum Seitenanfang

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...
  View user's profile Private Nachricht senden
DaMasdR

Dabei seit: 22.11.2007
Ort: Stebbach
Alter: 37
Geschlecht: Männlich
Verfasst Mi 30.01.2008 08:21
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel


mfg
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mchl
Threadersteller

Dabei seit: 16.05.2006
Ort: Berlin
Alter: 39
Geschlecht: Männlich
Verfasst Mi 30.01.2008 17:35
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank euch beiden *Thumbs up!*

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 Ooops
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
  View user's profile Private Nachricht senden
 
Ähnliche Themen [css] content mittig platzieren/ausrichten
Content Editing, statt Content Management
[CSS] content und before
Change Content
content scrollbar
Multi Content Tab
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.