[GELÖST] Ein zweites Bild oder Text rechts neben dem Header Logo

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

[GELÖST] Ein zweites Bild oder Text rechts neben dem Header Logo

Post by ottyscom »

Hallo

Ich wollte mal dummerweise fragen (Sorry bin noch ziemlich neu hier bei cmsmadesimple) wie man oben im Header ausser dem Header Logo Links noch ein weiteres Bild oder Banner oder Text oder Flaggen einfügen könnte. Habe schona lles mögliche rumgebastelt aber es haut nicht hin. Ich will auch nicht dass der gesamte Header ein Link auf die Homepage ist sondern nur das Logo Bild auf der linken Seite. Weis mir da jemand ausführlich zu helfen?

Was muss ich an diesem Code ändern oder wird das anderswo gemacht?

margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
  text-align: left;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 75.01%;
  line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
  font-size: 1em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
  border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
  text-decoration: none;
  color: #18507C;
}

a:visited {
  text-decoration: none;
    color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
  text-decoration: underline;
  color: #385C72;
}

/*****************
basic layout
*****************/
body {
  background-color: #ccc;
  color: #333;
  margin:1em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
  max-width: 80em; /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;
  background-color: #fff;;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
  height: 80px; /* adjust according your image size */
  background: #FF9933;         
}

div#header h1 a {
/* you can set your own image here */
  background: #FF9933 url(images/cms/logo1.gif) no-repeat 0 12px;
  display: block;
  height: 80px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Beste Grüsse aus Spanien

otty
Last edited by ottyscom on Tue Dec 11, 2007 6:42 pm, edited 1 time in total.
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

Hola otty

willkommen bei CMS made simple.

Ist das die Ganze CSS, die du deinem Template zugeordnet hast?

Das, was du meinst (das CMSms Logo), ist das Hintergrundbild für den Link auf h1 im Header. Wenn du das nicht willst, musst du es einfach rausschmeißen.

In den CMSms-Standard-Templates sind zwei Stylesheets definiert, die dir eventuell weiterhelfen könnten, konkret .left49 und .right49. Versuch mal folgendes in deinem Template zu ändern

Code: Select all

<div id="header">
   <div class="right49">
      <img scr="Bild_links" />
   </div>
   <div class="left49">
      <img scr="Bild_rechts" />
   </div>
</div>
(natürlich mit dem Link auf deine Bilder :) ...)
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by ottyscom »

Hi

Schon la schönen Dank aber ich komme einfach immer noch nicht klar.
Es ist zum verzweifeln.

Nun habe ich im template wie vorgegeben folgendes eingefügt:

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
 
     
 
 
      {lang}
 

  {* End Header *}


Und im dazugehörigen Stylesheet folgendes:

div#header {
  height: 80px; /* adjust according your image size */
  background: #FF9933;
}

div.left49 {
  float: left;

}

div#right49 {
      float: right; 
      background: #FF9933;
  position:absolute;
left:450px; top:350px; width:300px; height:150px;
}


Nun wenn du die Seite besuchst (www.otschuster.com)

Sind zwar rechts die Flaggen (aber viel zu weit oben) Keine Idee wie man die in die mitte bekommt.

Und dann das schlimmste und unverständlichste! Das Logo wird links überhaupt nicht mehr angezeigt.

Ich verzweifele ... :-(

Kannst du mir weiterhelfen?
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

ottyscom wrote: Das Logo wird links überhaupt nicht mehr angezeigt.
Vergleich mal den Source, den ich dir gegeben habe mit dem den du eingegeben hast ;D.

Der Parameter des img-Tags heisst src, nicht scr.
Sind zwar rechts die Flaggen (aber viel zu weit oben) Keine Idee wie man die in die mitte bekommt.
Außen- und Innenabstände lassen sich via CSS mit margin und padding einstellen. Und die Textpositionierung mit text-align ...

Kleiner Tipp zum Schluss - die Entwicklung von Webseiten ist IMHO mit dem Firefox 2 am einfachsten. Dafür gibt es genügend Erweiterungen, die dir das Leben als Webdesigner um ein vielfaches erleichtern. Hier mal eine Aufstellung meiner WebDev-Plugin


- Clear Cache Button
- ColorZilla
- Html Validator
- Firebug
- FireFTP
- IETab
- MeasureIt
- Spiderzilla
- View Formatted Source
- View Source Chart
- Web Developer
- XRay

(Ja, ich weiß, in den Funktionen überschneiden sich die Plugins ein wenig)
faglork

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by faglork »

Hallo.

Falls es dir hilft:
http://www.goldner-stern.de

--> kopier dir einfach die benötigten Teile von code & css


@cyberman: ich benutze zusätzlich

- Live HTTP Headers
- Tamper Data
- IE Tab
- JSView
- Launchy
- LinkChecker
- SEOpen

hth,
Alex
Last edited by faglork on Wed Nov 14, 2007 10:16 am, edited 1 time in total.
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

faglork wrote: @cyberman: ich benutze zusätzlich
Thx. Werd ich mir mal anschauen ...
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by ottyscom »

Ups,

Sorry das war ja wohl echt ein DFummer Fehler aber wenn verzweifelt dann vertauscht man schnell einen Buchstaben und das dumme ist man merkt es dann selbst gar nicht mal.

Ok Das Logo ist da nur jetzt komme nicht klar mit der entsprechenden position der fahnen. spiele da mit den margin und padding herum aber trotzdem bewegt sich da nix :-(

Die Seite vom Kollegen ist ja echt Sehr stark. Wie komme ich an das template?

Das basis template mit left49 und sw wo ist das zu finden?

Sorry für meine Grünheit aber mit Euch kann man echt lernen Vielen dank für Euere zusammenarbeit. cmsmadesimple und die community ist echt empfehlenswert
faglork

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by faglork »

ottyscom wrote: Wie komme ich an das template?
"view source code"?

hth,
Alex
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by ottyscom »

Alles klar! Danke für all die wertvollen Tipps.

So nun noch eine kleine Unklarheit bei meiner pers. Homepage www.otschuster.com

Die gefällt nun mal ganz gut so. Aber ein Problem werde ich absolut NICHT los. Leider :-(

Die Fahnen Rechts sind zu weit oben hingeklatscht und zu weit nach Rechts an den Rand geklebt. Ich weis dass man das mit CSS löst aber leider habe ich nach ewigen rumprobieren die Fahnen nicht zur Bewegung gebracht. Ich will sie ein kl. bisschen nach links und ungefähr in der Mitte statt ganz Oben.

Hier die Codes:

TEMPLATE:

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
 
     
 
 
      {lang}
 

  {* End Header *}


STYLESHEET:

div#header {
  height: 80px; /* adjust according your image size */
  background: #FF9933;
}

div#header left49 {
/* float: left; margin: 15px 0 18px 5px; */
float: left; margin: 5px 0 8px 5px;

}

div#right49 {
   
  position:absolute;
left:450px; top:350px; width:300px; height:150px;
}

Wäre Euch über die Lösung des Problemas sehr Dankbar

Beste Grüsse aus Spanien
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

ottyscom wrote: meiner pers. Homepage www.otschuster.com
??? ::) ???
Not Found

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, hostmaster@server.tld and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.
faglork

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by faglork »

ottyscom wrote:
STYLESHEET:

div#header {
  height: 80px; /* adjust according your image size */
  background: #FF9933;
}

div#header left49 {
/* float: left; margin: 15px 0 18px 5px; */
float: left; margin: 5px 0 8px 5px;

}

div#right49 {
   
  position:absolute;
left:450px; top:350px; width:300px; height:150px;
}

Wäre Euch über die Lösung des Problemas sehr Dankbar
So wird das nix. Eine chaotische Selektoren-Suppe.  Bitte lerne die grundlegende Syntax von CSS, speziell was die Selektoren angeht:
http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Generell: Du hast da wahllos irgendwelche Schnipsel zusammengebastelt, ohne zu wissen was du machst. Das wird nix.

Hab ich dir doch schon gesagt: Lies dich ein.

Hilft nix, da musst du durch.

Viele Grüße,
Alex
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

ottyscom wrote: Ich will sie ein kl. bisschen nach links und ungefähr in der Mitte statt ganz Oben.
Damit habe ich es auf deiner aktuellen Seite hinbekommen

div.right49 {
  padding-right: 1em;
  padding-top: 2em;
}

was allerdings wieder Auswirkungen auf den "Top"-Link hat.

Aber wie Alex schon sagte, genau deshalb ist bei deiner CSS noch ein bißchen "Großreinemachen" + Lernen angesagt  8) - insbesondere vor dem Hintergrund, dass du WebDesign anbietest/anbieten möchtest ...
faglork

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by faglork »

cyberman wrote: insbesondere vor dem Hintergrund, dass du WebDesign anbietest/anbieten möchtest ...
ach daher das Interesse an dem Code meiner Templates ...

ROFLMAO,
Alex
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by ottyscom »

Das Interesse deines Templates lag nicht an den Grund um Webdesign usw anzubieten. Ich erstelle Webseiten schon seit einiger Zeit. Jahren! Aber ehrlich gesagt verwendete ich bisher nicht CSS. Aber anhand von Eueren Tipps und Beispielen bin ich derzeit dabei mich mit CSS verstärkt zu befassen. Habe mir auch schon Bücher befasst. Sobald ich das ganze etwas besser behersche werde ich künftig auch das CSS voll und ganz anwenden. MIT CMS Made Simple arbeite ich noch nicht so lange. daher hatte ich um Rat gesucht. Man sollte also deswegen nicht gleich wieder falsche Vermutungen aufstellen.

Aber wie ihr wohl seht ist es mir mittlerweile mit Eueren Tipps und zusätzlichen lernen die Fahenn korrekt zu plazieren auf www.otschuster.com

Also Danke und Sorry für evtl. Unangehmlichkeiten
cyberman

Re: Ein zweites Bild oder Text rechts neben dem Header Logo

Post by cyberman »

ottyscom wrote: Aber ehrlich gesagt verwendete ich bisher nicht CSS.
Das solltest du schnellstmöglich ändern. Anstatt in jeder Seite einzeln rumzuändern, änderst du nur etwas im externen Stylesheet und schon ist die ganze Webseite geändert. Das bringt eine massive Zeitersparnis - kann ich dir nur wärmstens empfehlen.
MIT CMS Made Simple arbeite ich noch nicht so lange. daher hatte ich um Rat gesucht. Man sollte also deswegen nicht gleich wieder falsche Vermutungen aufstellen.
Dafür ist das Forum ja auch da  :) - und war auch net bös gemeint.
Post Reply

Return to “Layout und Design”