CSS wird nur teilweise übernommen (Anfänger)

kenodrum · 14.11.2013

CSS wird nur teilweise übernommen

Jemand eine Idee?

php:

</head>
<body>


<div id"Top">
<p> <?php echo index_language("welcome"); ?></p>



<div id"header">
<img src"Bilder/Logo1.jpg"/>
</div>

</body>
</html>

css:

body,p,div {
padding: 0;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0;
margin-top: 0;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

body {
background-image:url(Bilder/Background.jpg);
background-repeat:repeat-y;
background-position:center top;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:12px;
line-height:150%;
codec:#FFF;
width:1020px;
margin:0px auto;
}

a {
color:#F60;
text-decoration:none
}

a:hover {
text-decoration:underline
}

img {
border:none
}

#top {
background-image:url(Bilder/top.gif);
repeat:x;
width:980;
high:250;
padding:10px 20px;
overflow:hidden;
text-transform:uppercase;
font-weight:bold;
font-size:90%;
color:#F60;
}

#header {
background-image:url(Bilder/logoback.jpg);
width:1020pc;
heigt:181px;
overflow:hidden;

Castordesigns · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Du vergisst das Gleichzeichen.

Code:

</head>
<body>

<!-- Topline, Welcome Massage and Link Buttons -->
<div id="Top">
<p>   <?php echo index_language("welcome"); ?></p>

<!-- Header,Logo.... -->

<div id="header">
<img border="0" alt="Logo" src="Bilder/Logo1.jpg"/>
</div>

</body>
</html>

patrick_l · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Du hast sowohl deinem Markup als auch in deinem CSS diverse Fehler drin. Das Gleichzeichen hat Castordesigns ja bereits erwähnt. Im CSS sind weitere Schreibfehler wie das Auslassen von Maßangaben sowie dem setzen von Semikolons.

Ich habe dein CSS mal fix etwas aufgeräumt. Unter anderem ein minimales CSS reset gemacht, fehlende Angaben hinzugefügt sowie einzelnen Teile gekürzt. Du solltest auf jeden Fall mehr auf deine Schreibweise achten.

Code:

/* --| Minimal CSS reset |----- */
* { padding:0; margin:0; border:none; outline:none;}

/* --| Primary Styles |-------- */
body {
    color:#fff;
    font:12px Arial, Helvetica, sans-serif;
    line-height:150%;
    background:url(Bilder/Background.jpg) repeat-y center top;
    width:1020px;
    margin:0 auto;
}

a {color:#F60; text-decoration:none;}
a:hover {text-decoration:underline;}

#top {
    color:#F60;
    font-weight:bold;
    font-size:90%;
    overflow:hidden;
    text-transform:uppercase;
    background:url(Bilder/top.gif) repeat-x;
    width:980px;
    height::250px;
    padding:10px 20px;
} 

#header {
    width:1020px;
    height:181px;
    background-image:url(Bilder/logoback.jpg);
    overflow:hidden;
}

Liebe Grüße, Patrick

owieortho · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Solche Fehler lassen sich im Handumdrehen mit einer Validierung herausfinden.

O.

Pixelverwender · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

patrick_l schrieb:
Ich habe dein CSS mal fix etwas aufgeräumt.

Code:

height::250px;

Aber den doppelten Doppelpunkt (im div #top) hast Du beim Aufräumen einfach so rumliegen lassen. Zur Strafe gehst Du heute barfuß ins Bett.

heikehk · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Ne den doppelten Doppelpunkt gabs gratis dazu

Nich böse sein. Ich finde es toll, dass Du Dir so eine Arbeit gemacht hast.
Ich denke das bringt kenodrum auf jeden Fall weiter.
Ordentlich schreiben und Aufsetzen hilft definitiv auch bei der Fehlersuche

Gruß
Heike

kenodrum · 14.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Ja ich denke das hilft mir um einiges weiter. Werde nach Feierabend mal gucken wie weit ich komme. Die ein oder andere gehe wird mit Sicherheit noch auftauchen.
Danke schon mal an alle

Gruß Keno

patrick_l · 15.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Pixelverwender schrieb:
Aber den doppelten Doppelpunkt (im div #top) hast Du beim Aufräumen einfach so rumliegen lassen.

Ist der Uhrzeit geschuldet.

Pixelverwender schrieb:
Zur Strafe gehst Du heute barfuß ins Bett.

Nein, nur das nicht. :lol:

heikehk schrieb:
Ne den doppelten Doppelpunkt gabs gratis dazu

was soll der Geiz, habe doch so viele davon.

heikehk schrieb:
Nich böse sein. Ich finde es toll, dass Du Dir so eine Arbeit gemacht hast.

Quatsch, ich weiß ja wie es gemeint ist. Dafür auch lang genug »on Bord«

@owieortho: Guter Einwurf. Zwischendurch sollte immer mal der eigene Code validiert werden. Dem Validator aber auch nicht Blind vertrauen. Nicht alles was dort als Fehler interpretiert wird, ist falsch. Denke da speziell Browser Prefixes.

@kenodrum: Auch was dein HTML angeht, würde etwas mehr Ordnung rein bringen, und die einzelnen Bereiche einrücken. Gerade wenn sich alles um mehre Zeilen erstreckt, übersichtlicher.

Liebe Grüße, Patrick

heikehk · 15.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Wie sagt man so schön:
Ordnung ist das halbe Leben ....

Stimmt zwar nciht immer, aber zum Schreiben von Code rate ich auch dazu

patrick_l · 15.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

heikehk schrieb:
Wie sagt man so schön:
Ordnung ist das halbe Leben ....

Da war doch was? Ah ja - Ein Genie beherrscht das Chaos

heikehk schrieb:
Stimmt zwar nciht immer, aber zum Schreiben von Code rate ich auch dazu

Gerade dort. HTML ist jetzt in meinen Augen nicht ganz so wild. In CSS und bei der Programmierung (JavaScript und PHP sowie anderen Sprachen) ein muss, wenn man schnell und jederzeit durchblicken möchte.

@kenodrum: Nochmal etwas zu deinem Code. Einrücken von Code sowie das achten auf die richtige Schreibweise (Tippfehler sind gemein, ich weiß

) habe ich ja bereits erwähnt. Was jetzt dein HTML angeht, würde ich dort auch etwas ändern.

Das Logo nicht mit dem img-Tag einfügen, sondern über eine Überschrift erster Ordnung (<h1>). Auch würde dort einen Link zur Startseite setzen. Gib dem h1 eine ID (z.B. branding oder logo) und spreche dieses im CSS an. Dort blendest du den Text des H1 aus und fügst mittels background das Logo ein.

Hier mal auf die schnelle:

HTML:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Titel der Website</title>
</head>
<body>
  <div id="TopBar">
     <div class="container">
        <p><!-- Wellcome-Message here! --></p>
     </div>
  </div>
  <header>
    <div class="container">
      <h1 id="branding"><a href="#">z.B. Name und Ort/Sitz der Firma</a></h1>
    </div>
  </header>
</body>
</html>

sowie CSS:

Code:

#branding a {
    /* Höhe des Logos */
    height:40px; 
    /* Breite des Logos */ 
    width:100px; 
    display:block; 
    text-indent:100%; 
    /* IE "text-indent" fix */
    *text-indent:-9999px; 
    white-space:nowrap; 
    overflow:hidden;
    /* Einfügen des Logos */ 
    background:url(../img/branding.gif) no-repeat; 
}

Da du deinem Code nach noch am lernen bist, möchte ich dir auch ein paar lesenswerte Adressen geben. Dabei sind unter anderem zwei komplette Bücher, die Online zum kostenlosen Lesen angeboten werden.

- HTML5 Handbuch (Stefan Münz, Webkompetenz)
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)
- Mozilla Developer Network | Lerne HTML, CSS & JS

Liebe Grüße, Patrick

kenodrum · 17.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

danke für zahlreichen tips
ich bin schon ein gutes stück weiter gekommen

nun habe ich das problem das ich im top bereich 3 div´s nebneinander haben mächte.
im dreamweaver klappt auch alles, hochgeladen dann aber nicht

das ganze läuft unter top - top3

<body>



<div id="top">
<div id="top1">text left</div>
<div id="top2">like buttons</div>
<div id="top3">text right</div>
<div class="clr"></div>
</div>


<div id="navi"><p><?php include("navigation.php"); ?></p></div>



<div id="header"><img src="Bilder/Logo1.jpg"/></div>


<div id="sponsor"><img src="Bilder/sponsor.jpg" /></div>


<div id"content">
<div class="links"><?php
if(!isset($site)) $site="news";
$invalide = array('\\','/','/\/',':','.');
$site = str_replace($invalide,' ',$site);
if(!file_exists($site.".php")) $site = "news";
include($site.".php");
?></div>
<div class="rechts">

<p id="rechts1"><?php echo $index_language['login']; ?></p>
<p id="login"><?php $index_language['login']; ?></b><br />
<?php include("login.php"); ?></p>
<p id="rechts1"><?php echo $index_language['hotest_news']; ?>
<p id="news"><?php $index_language['hotest_news']; ?></b><br />
<?php include("sc_topnews.php"); ?></p>
</div>
</div

></body>
</html>

body,p,div {
padding: 0;
margin-bottom: 0;
margin-left: 0px;
margin-right: 0;
margin-top: 0;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

body {
background-image:url(Bilder/Background.jpg);
width:1020px;
background-repeat:repeat-y;
background-position:center top;
background-color:#130D0D;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size:12px;
line-height:150%;
codec:#FFF;
margin:0 auto;
behavior:url("csshover.htc");
}

a {
color:#F60;
text-decoration:none;
}

a:hover {
text-decoration:underline;
color:#F60;
}

img {
border:none;
}

#top {
border: 0px;
width: 1020px;
background-image: url(Bilder/top.gif);
color: #FFF;
}

#top1 { float: left; width: 290px; padding: 5px; }
#top2 { float: left; width: 290px; padding: 5px; }
#top3 { float: right; width: 410px; padding: 5px; }
.clr { clear: both; }

#navi {
float: left;
background-color:#120D0D;
height: auto;
width: 980px;
padding: 10px 20px;
overflow: hidden;
text-transform: uppercase;
font-weight: bold;
font-size: 90%;
margin-top: 12px;
color:#F60

}

#header {
float: left;
background-image: url(Bilder/logoback.jpg);
width: 1020px;
height: 181;
overflow: hidden;
}

.links {
float: left;
width: 681px;
padding: 10px 20px;
background-color: #FFF;
color: #000000;
overflow: hidden;
border:2px;
border-color:#000;
border-style:solid;
a:
}
.rechts {
float: right;
width:291px;
background-color: #FFF;
color: #000000;
overflow: hidden;
border:2px;
border-color:#000;
border-style:solid;
}
#clear {
clear:cl;
}

#rechts1 {
height: 20px;
width: 251px;
padding: 15px 20px;
background-image: url(Bilder/cr.jpg);
color: #FFF;
text-transform: uppercase;
font-weight: bold;
font-size: 100%;
}

#login {
width:251px;
padding: 0px 20px;
}

#news {
width:251px;
padding: 0px 20px;
}

#footer {
width:1020px;
}

kenodrum · 18.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

hat sich erledigt.... löschen des brwoser chaches und das problem ist gelöst

Myhar · 18.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Der Code ist besser als der aus dem Eingangspost aber immer noch nicht ordentlich geschrieben.
IDs sind, wie der name schon sagt, eindeutige Bezeichnungen, aber du hast zB die id rechts1 zweifach vergeben. Dein letztes div nicht schön geschlossen (da gehören keine Leerzeilen dazwischen) und du verwendest </b> ohne <b>
clear:cl; gibt es zB auch nicht.

Zu deinem Problem: Deine 3 Bereiche sind nebeneinander. Nur wieso verwendest du für das styling der 3 Bereiche je eine ID und fixe Breitenangaben? Hier wären doch prozentuale Angaben sinnvoller? Auch das arbeiten mit Klassen ist hier angebracht, da zB top1 und top2 die selben Eigenschaften besitzen.
Für mich ist das Problem also nicht nachvollziehbar, kannst du das Problem eventuell genauer beschreiben?

Mein Rat an dich also: Beschäftige dich noch mehr mit den Grundlagen von HTML/CSS.

kenodrum · 28.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Danke nochmals für deine Antwort.
ich habe nun etliche tutorials usw. angesehen und in schlauen Büchern herumgewühlt.....
Die Seite ist nun soweit fertig.
Nur bin ich mit dem Ergebnis nicht so wirklich zufrieden... am meisten stört es mich das die Seite einfach unprofessionell und altmodisch aussieht... dazu ist sie noch extrem statisch...

vielleicht lässt sich ja jemand finden der mir uns ein wenig unter die arme greifen kann... grade was das designen angeht....
für meine Ideen reichen meine Photoshop Kenntnisse einfach nicht aus.

Danke trotzdem an alle
Mfg Keno

Myhar · 28.11.2013

AW: CSS wird nur teilweise übernommen (Anfänger)

Dafür brauchst du keine Photoshopkenntnisse, dafür reicht für den Beginn auch ein Blatt Papier und ein Stift. Darauf zeichnest du einmal grundlegend, wie du die einzelnen Bereiche angeordnet haben willst und wie du genau die Verlinkung haben willst. Schau dir Seiten an, die dir gefallen und lass dich davon inspirieren (Nicht 1:1 nachbauen, das wirkt zwar nicht altmodisch, aber höchst unprofesionell) Denk auch daran, dass die Navigation zwar nicht oben oder links sein muss, es aber schon seinen Grund hat, warum sie meist dort zu finden ist.
Du kannst dann auch vom Papier direkt zur Website übergehen und mittels Firebug sehr schön deine Ideen ausprobieren und nachprüfen, ob diese auch gut bei der Website wirken.
Du kannst natürlich auch frei verfügbare Templates durchsehen und die nach deinen eigenen Wünschen anpassen. Aber bevor du dir von jemanden ein Photoshop-Design vorsetzen lässt, versuche lieber selbst, deine Ideen in dem dir möglichen Rahmen umzusetzen.
Ein Tipp noch:
Arbeite auch nicht nur mit festen Höhen und Breiten, sondern lass deiner Seite auch Platz zum wachsen.